@mediusinc/mng-commons 0.9.3 → 0.9.7

package/lib/components/form/autocomplete/autocomplete.component.d.ts

@@ -4,11 +4,13 @@ import { TranslateService } from '@ngx-translate/core';
 import { AutoComplete } from 'primeng/autocomplete';
 import { Observable } from 'rxjs';
 import { ILookupDataProvider } from '../../../data-providers';
+import { MngFormlyFieldWrapperComponent } from '../formly/wrappers';
 import * as i0 from "@angular/core";
 export declare const MNG_AUTOCOMPLETE_VALUE_ACCESSOR: ExistingProvider;
 export declare class MngAutocompleteComponent implements OnInit, OnDestroy, ControlValueAccessor {
     private injector;
     private translate;
+    private formlyWrapper;
     dataProvider?: ILookupDataProvider<any, any>;
     dataKeyProperty?: string;
     itemsValuePropertyInit?: string;
@@ -32,12 +34,13 @@ export declare class MngAutocompleteComponent implements OnInit, OnDestroy, Cont
     itemsValueProperty?: string;
     autocompleteFormControl: FormControl;
     suggestions$: Observable<Array<any>>;
-    constructor(injector: Injector, translate: TranslateService);
+    constructor(injector: Injector, translate: TranslateService, formlyWrapper: MngFormlyFieldWrapperComponent);
     ngOnInit(): void;
     ngOnDestroy(): void;
     onSearch(event: any): void;
     onSelect(value: any): void;
     onFocus(event: Event): void;
+    onBlur($event: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
@@ -48,6 +51,6 @@ export declare class MngAutocompleteComponent implements OnInit, OnDestroy, Cont
     private i18nGetItemsKeys;
     private i18nPopulateItems;
     private setSuggestionsFromItems;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MngAutocompleteComponent, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngAutocompleteComponent, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MngAutocompleteComponent, "mng-autocomplete", never, { "dataProvider": "dataProvider"; "dataKeyProperty": "dataKeyProperty"; "itemsValuePropertyInit": "itemsValueProperty"; "itemsLabelPropertyInit": "itemsLabelProperty"; "itemsLabelTranslate": "itemsLabelTranslate"; "inlineSearch": "inlineSearch"; "openOnFocus": "openOnFocus"; "multiselect": "multiselect"; "placeholder": "placeholder"; "className": "className"; "dropdownClassName": "dropdownClassName"; }, { "valueChangeEventEmitter": "valueChange"; }, never, never>;
 }

package/lib/components/form/dropdown/dropdown.component.d.ts

@@ -4,11 +4,13 @@ import { TranslateService } from '@ngx-translate/core';
 import { Dropdown } from 'primeng/dropdown';
 import { Observable } from 'rxjs';
 import { ILookupDataProvider } from '../../../data-providers';
+import { MngFormlyFieldWrapperComponent } from '../formly/wrappers';
 import * as i0 from "@angular/core";
 export declare const MNG_DROPDOWN_VALUE_ACCESSOR: ExistingProvider;
 export declare class MngDropdownComponent implements OnInit, OnDestroy, ControlValueAccessor {
     private injector;
     private translate;
+    private formlyWrapper;
     dataProvider?: ILookupDataProvider<any, any>;
     dataKeyProperty?: string;
     itemsLabelPropertyInit?: string;
@@ -32,13 +34,14 @@ export declare class MngDropdownComponent implements OnInit, OnDestroy, ControlV
     dropdownFormControl: FormControl;
     items$: Observable<Array<any>>;
     private itemsSubscription?;
-    constructor(injector: Injector, translate: TranslateService);
+    constructor(injector: Injector, translate: TranslateService, formlyWrapper: MngFormlyFieldWrapperComponent);
     ngOnInit(): void;
     ngOnDestroy(): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     writeValue(obj: any): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MngDropdownComponent, never>;
+    onBlur($event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngDropdownComponent, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MngDropdownComponent, "mng-dropdown", never, { "dataProvider": "dataProvider"; "dataKeyProperty": "dataKeyProperty"; "itemsLabelPropertyInit": "itemsLabelProperty"; "itemsLabelTranslate": "itemsLabelTranslate"; "itemsValuePropertyInit": "itemsValueProperty"; "itemsDisabledProperty": "itemsDisabledProperty"; "multiselect": "multiselect"; "placeholder": "placeholder"; "showClear": "showClear"; "selectFirstItem": "selectFirstItem"; "className": "className"; "dropdownClassName": "dropdownClassName"; }, { "valueChangeEventEmitter": "valueChange"; }, never, never>;
 }

package/lib/components/tableview/table/table.component.d.ts

@@ -48,7 +48,8 @@ export declare class MngTableComponent<T, S> implements OnInit, OnChanges, After
     captionTemplate?: TemplateRef<any>;
     columnActionTemplate?: TemplateRef<any>;
     useDataProvider: boolean;
-    useQueryParamsInitialized: boolean;
+    private useQueryParamsInitializedSubejct;
+    useQueryParamsInitialized$: Observable<boolean>;
     queryResult$?: Observable<MediusQueryResult<T>>;
     loading$?: Observable<boolean>;
     dataProviderInfiniteScrollItems: Array<T>;
@@ -58,7 +59,7 @@ export declare class MngTableComponent<T, S> implements OnInit, OnChanges, After
     offset: number;
     multiSortMeta: SortMeta[] | null;
     filterMetadata: {
-        [s: string]: FilterMetadata | FilterMetadata[];
+        [s: string]: FilterMetadata;
     };
     infiniteScroll: boolean;
     scrollHeight: 'flex' | null;
@@ -99,7 +100,9 @@ export declare class MngTableComponent<T, S> implements OnInit, OnChanges, After
     private loadTableWithDataProvider;
     private loadTableFromRouteUpdate;
     private updatePrimeSortAndFilter;
-    private getDefaultSortMeta;
+    private createFilterMeta;
+    private createSortMeta;
+    private initializeDataLoadingTriggers;
     static ɵfac: i0.ɵɵFactoryDeclaration<MngTableComponent<any, any>, [null, null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MngTableComponent<any, any>, "mng-table", never, { "descriptor": "descriptor"; "items": "items"; "queryResult": "queryResult"; "loading": "loading"; "dataProvider": "dataProvider"; "useQueryParams": "useQueryParams"; "selectionMode": "selectionMode"; "selectionEnabled": "selectionEnabled"; "actions": "actions"; "isColumnClickable": "isColumnClickable"; "viewContainerInit": "viewContainer"; "captionComponent": "captionComponent"; "columnActionComponent": "columnActionComponent"; "columnActionMinWidth": "columnActionMinWidth"; }, { "loadEventEmitter": "tableLoad"; "cellClickEventEmitter": "cellClick"; "selectionChangeEventEmitter": "selectionChange"; "captionCmpInstEventEmitter": "captionComponentInstance"; "columnActionCmpInstEventEmitter": "columnActionComponentInstance"; }, ["templates"], never>;
 }

package/lib/descriptors/column.descriptor.d.ts

@@ -52,7 +52,7 @@ export declare class ColumnDescriptor<T, TT> {
     get booleanAsIcon(): boolean;
     get booleanYes(): string | undefined;
     get booleanNo(): string | undefined;
-    get objectModelType(): ClassType<any> | undefined;
+    get objectModelType(): ClassType<unknown> | undefined;
     get objectTitleProperty(): string | undefined;
     get customComponentType(): Type<IColumnValueComponent<TT>> | undefined;
     get locale(): string | undefined;
@@ -73,7 +73,7 @@ export declare class ColumnDescriptor<T, TT> {
     withTitle(title: string): this;
     withJsonPath(path: string): this;
     withFilter(forceSimple?: boolean): FilterDescriptor<T>;
-    withFilterLookup(): FilterLookupDescriptor<T>;
+    withFilterLookup(): FilterLookupDescriptor<unknown>;
     withFilterLookupEnum(options?: Array<EnumConstantType>): FilterLookupEnumDescriptor;
     withSort(isEnabled?: boolean): this;
     withDefaultSort(asc?: boolean): this;

package/lib/descriptors/field-validation.descriptor.d.ts

@@ -1,16 +1,16 @@
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Observable } from 'rxjs';
-import { MngFieldValidationMessage, MngFieldValidator } from '../types';
+import { MngFieldAsyncValidator, MngFieldValidationMessage, MngFieldValidator } from '../types';
 export declare class FieldValidationDescriptor {
     private readonly _name;
     private readonly _validator?;
     private readonly _message?;
     private readonly _options?;
-    constructor(name: string, validator?: MngFieldValidator, message?: string | ((error: any, field: FormlyFieldConfig) => string | Observable<string>), options?: {
+    constructor(name: string, validator?: MngFieldValidator | MngFieldAsyncValidator, message?: string | ((error: any, field: FormlyFieldConfig) => string | Observable<string>), options?: {
         errorPath: string;
     });
     get name(): string;
-    get validator(): MngFieldValidator | undefined;
+    get validator(): MngFieldValidator | MngFieldAsyncValidator | undefined;
     get message(): MngFieldValidationMessage | undefined;
     get options(): {
         errorPath: string;

package/lib/descriptors/field.descriptor.d.ts

@@ -6,7 +6,7 @@ import { MediusQueryParam, MediusQueryResult } from '../api/models';
 import { MngFormFieldEvent, MngFormFieldEventData, MngFormFieldEventTypeEnum } from '../components/form/models';
 import { ILookupDataProvider, ITableDataProvider } from '../data-providers';
 import { EnumValue } from '../models';
-import { ClassType, EnumConstantType, EnumType, MngFieldValidationMessage, MngFieldValidator } from '../types';
+import { ClassType, EnumConstantType, EnumType, MngFieldAsyncValidator, MngFieldValidationMessage, MngFieldValidator } from '../types';
 import { ActionDescriptor, EditorDescriptor, FieldValidationDescriptor, TableDescriptor, TableviewDescriptor } from './';
 import { FieldConfig, FieldLookupConfig, ILookupDescriptor } from './interfaces';
 import { FieldGroupTypeEnum, FieldInputTypeEnum, FieldLookupTypeEnum, FieldManyEditorActionEnum, FieldManyEditorTypeEnum, FieldManyToManyEditorActionEnum, FieldManyToManyEditorTypeEnum, FieldSizeEnum } from './types';
@@ -30,6 +30,7 @@ export declare abstract class AFieldDescriptor<T, ET> extends AGenericFieldDescr
     protected _getter?: (item: ET) => T;
     protected _setter?: (item: ET, value: T) => void;
     protected _validations: Array<FieldValidationDescriptor>;
+    protected _asyncValidations: Array<FieldValidationDescriptor>;
     protected _requiredExpression?: string | ((model: any, formState?: any, field?: FormlyFieldConfig) => boolean) | Observable<boolean>;
     protected _disabledExpression?: string | ((model: any, formState?: any, field?: FormlyFieldConfig) => boolean) | Observable<boolean>;
     protected _hiddenExpression?: string | ((model: any, formState?: any, field?: FormlyFieldConfig) => boolean) | Observable<boolean>;
@@ -51,6 +52,7 @@ export declare abstract class AFieldDescriptor<T, ET> extends AGenericFieldDescr
     get getter(): ((item: ET) => T) | undefined;
     get setter(): ((item: ET, value: T) => void) | undefined;
     get validations(): FieldValidationDescriptor[];
+    get asyncValidations(): FieldValidationDescriptor[];
     get requiredExpression(): string | Observable<boolean> | ((model: any, formState?: any, field?: FormlyFieldConfig | undefined) => boolean) | undefined;
     get disabledExpression(): string | Observable<boolean> | ((model: any, formState?: any, field?: FormlyFieldConfig | undefined) => boolean) | undefined;
     get hiddenExpression(): string | Observable<boolean> | ((model: any, formState?: any, field?: FormlyFieldConfig | undefined) => boolean) | undefined;
@@ -72,6 +74,7 @@ export declare abstract class AFieldDescriptor<T, ET> extends AGenericFieldDescr
     withGetter(getter: (item: ET) => T): this;
     withSetter(setter: (item: ET, value: T) => void): this;
     withValidation(name: string, validator?: MngFieldValidator, message?: MngFieldValidationMessage): this;
+    withAsyncValidation(name: string, asyncValidator?: MngFieldAsyncValidator, message?: MngFieldValidationMessage): this;
     withClassName(className: string, labelClassName?: string, inputClassName?: string, fieldClassName?: string): this;
     withSize(size?: FieldSizeEnum): this;
     nextEvent(type: MngFormFieldEventTypeEnum, cmpType: Type<any>, cmpInstance: any, data?: MngFormFieldEventData<T, ET>): void;

package/lib/models/version.model.d.ts

@@ -8,7 +8,7 @@ export interface VersionConfig {
 }
 export interface VersionInfo {
     name: string;
-    version: string;
+    version: string | null;
     tag: string | null;
     distance: number | null;
     hash: string | null;

package/lib/types/type.model.d.ts

@@ -16,5 +16,8 @@ export declare type PropertyType = PrimitiveType | Date | EnumType;
 export declare type MngFieldValidator = (control: AbstractControl, field: FormlyFieldConfig, options?: {
     [id: string]: any;
 }) => ValidationErrors | boolean | null;
+export declare type MngFieldAsyncValidator = (control: AbstractControl, field: FormlyFieldConfig, options?: {
+    [id: string]: any;
+}) => Observable<ValidationErrors | boolean | null>;
 export declare type MngFieldValidationMessage = string | ((error: any, field: FormlyFieldConfig) => string | Observable<string>);
 export declare type MatchModeMapType = [string, string, MediusFilterMatchType, FilterTypeEnum | null];

package/lib/utils/editor-formly.util.d.ts

@@ -7,4 +7,5 @@ export declare class EditorFormlyUtil {
     static createFormlyFields(descriptor: FieldGroupDescriptor<any>): FormlyFieldConfig[];
     static createFormlyField(descriptor: AFieldDescriptor<any, any>): FormlyFieldConfig;
     static addValidationsToFormlyField(config: FormlyFieldConfig, validations: Array<FieldValidationDescriptor>): void;
+    static addAsyncValidationsToFormlyField(config: FormlyFieldConfig, asyncValidations: Array<FieldValidationDescriptor>): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediusinc/mng-commons",
-  "version": "0.9.3",
+  "version": "0.9.7",
   "peerDependencies": {
     "@angular/common": "^13.2.0",
     "@angular/core": "^13.2.0",
@@ -34,6 +34,5 @@
       "default": "./fesm2020/mediusinc-mng-commons.mjs"
     }
   },
-  "sideEffects": false,
-  "readme": "# Angular Commons\n\nCommons knjižnica za izgradnjo uporabniškega vmesnika na ogrodju Angular.\n\n## Predhodne zahteve\n\n- Node.js (LTS v14) in npm\n- pnpm package manager (https://pnpm.io/), ki optimizira delovanje privzetega npm.\n- Zahtevane skupne odvisnosti (peer dependencies)\n  - Angular (moduli `@angular/core`, `@angular/common`, `@angular/forms`, `@angular/router`) verzije `^13.1.0`\n  - Ngx Formly (modul `@ngx-formly/core`) verzije `^6.0.0-next.6`\n  - Ngx Translate (module `@ngx-translate/core`) verzije `^14.0.0`\n  - PrimeNG (modul `primeng`) verzije `^13.0.0`\n\n## Namestitev\n\n```bash\npnpm i @mediusinc/mng-commons\n```\n\n## Lokalizacija (i18n)\n\nModul `ngx-translate` se konfigurira na končnem projektu in je na končnem projektu potrebno določiti način za load prevodov.\nPrimer konfiguracije za multi-module HTTP loader:\n\n- HTTP loader factory:\n```ts\nexport function i18nHttpLoaderFactory(http: HttpClient) {\n    return new MultiTranslateHttpLoader(http, [\n        {prefix: './assets/i18n/mng/', suffix: '.json'},\n        {prefix: './assets/i18n/', suffix: '.json'}\n    ]);\n}\n```\n\n- Konfiguracija v `AppModule`:\n```ts\nTranslateModule.forRoot({\n    loader: {\n        provide: TranslateLoader,\n        useFactory: i18nHttpLoaderFactory,\n        deps: [HttpClient]\n    }\n})\n```\n\n- Definicijo jezikov podamo preko konfiguracije `MngCommonsModule`:\n```ts\nMngCommonsModule.forRoot({\n  languages: ['en', 'sl']\n})\n```\n\nKnjižnica pakira tudi osnovne prevode, ki so del modula. Za vključitev na zgornji način je potrebno dodati naslednjo konfiguracijo v `angular.json` med `assets` nastavitve:\n```json\n{\n  \"glob\": \"**/*\",\n  \"input\": \"./node_modules/@mediusinc/mng-commons/assets/i18n\",\n  \"output\": \"/assets/i18n/mng\"\n}\n```\n\n## Tema\n\nOpcijsko se vključi tudi tema MNG Commons, ki ima dve svetlo in temno varianto.\nZa vključitev se v stile na končnem projektu doda import v `style.scss`:\n\n```scss\n# Za svetlo temo:\n@import '~../node_modules/@mediusinc/mng-commons/scss/mng-commons-light';\n\n# Za temno temo:\n@import '~../node_modules/@mediusinc/mng-commons/scss/mng-commons-dark';\n```\n\n~~~~\nPrimarno se uporablja svetla tema!\n~~~~\n\nPri uporabi temne teme je potrebno dodatno nastaviti tudi `colorMode` v modulu:\n```ts\nMngCommonsModule.forRoot({\n  app: {\n    colorScheme: 'dark'\n  }\n});\n```\n\nTema za svoje delovanje uporablja primeNG stile (za posamezne komponente) in PrimeFlex kot pomožno CSS knjižnico.\nDodatno se lahko na končnem projektu lahko uporabi še ikone PrimeIcons.\nGlede ne preference se opcijsko dodajo naslednji importi (**pred importom MNG commons teme!**):\n\n```scss\n@import '~../node_modules/primeng/resources/primeng.min.css';\n@import '~../node_modules/primeflex/primeflex.scss';\n@import '~../node_modules/primeicons/primeicons.css';\n```\n\nPri prvem importu ni potrebno namestiti dodatnih odvisnosti (je že vključeno z primeng), za drugi dve pa je potrebno namestiti:\n```bash\npnpm i primeflex\npnpm i primeicons\n```\n\nDodajanje MNG Commons slik v `assets` na končnem projektu se uredi z konfiguracijo v `assets` segmentu znotraj `angular.json`, kjer se doda:\n\n```json\n{\n  \"glob\": \"**/*\",\n  \"input\": \"./node_modules/@mediusinc/mng-commons/assets/images\",\n  \"output\": \"/assets/images/mng\"\n}\n```\n\n## Custom Formly validatorji\n\nValidatorje lahko dodajamo samostojno na polja, ali pa na skupine polj.\n\nDodajanje se v obeh primerih razlikuje.\n- validator na polje lahko dodamo preko polja, kjer mu podamo ime, funkcijo in sporočilo za validacijo.\n```typescript\nserviceChannelsTableviewDescriptor.addField('cost.code')\n            .withValidator('codeValidator', control => control.value, (err, field) => 'error message');\n```\n- validator na skupine lahko dodamo preko\n```typescript\nserviceChannelsTableviewDescriptor.createFieldGroup('Service cost', 'ServiceChannelDto.fieldGroups.serviceCost')\n            .withValidator('serviceCostAllOrNoneFieldsRequired', this.serviceCostAllOrNoneFieldsRequired);\n```\n\nKo dodajamo na grupe, moramo registrirati tudi globalno sporočilo za validacijo v `formly-translate.extension.ts`, kjer mora biti ime sporočila za validacijo enako kot napaka, ki jo nastavljamo v samem validatorju.\n```typescript\nexport function formlyConfigProvider(translate: TranslateService): ConfigOption {\n    return {\n        validationMessages: [\n            { name: 'required', message: getRequiredValidationMessage(translate)},\n            ...\n                // naše sporočilo, ki se imenuje serviceCostAllOrNoneFieldsRequired\n            { name: 'serviceCostAllOrNoneFieldsRequired', message: serviceCostAllOrNoneFieldsRequiredValidatorMessage(translate)}\n        ],\n        extras: { lazyRender: true },\n        wrappers: formlyWrappersConfig,\n        types: formlyTypesConfig\n    };\n}\n\nexport function serviceCostAllOrNoneFieldsRequired(control: AbstractControl): boolean {\n    const { code, value, description } = control.value.cost;\n    const costControl = control.get('cost');\n\n    // tu vmes je še druga koda\n    \n    // nastavimo enako napako, kot je ime sporočila\n    costControl.get('code').setErrors({serviceCostAllOrNoneFieldsRequired: true});\n    costControl.get('value').setErrors({serviceCostAllOrNoneFieldsRequired: true});\n    costControl.get('description').setErrors({serviceCostAllOrNoneFieldsRequired: true});\n\n    return false;\n}\n```\n"
+  "sideEffects": false
 }

package/scss/mng-overrides/_mixins.scss

@@ -1,3 +1,5 @@
+@import 'variables';
+
 @mixin scaledHeight($val, $scale) {
     height: $val * $scale;
 }

package/scss/theme/default/_mng-variables-theme-dark.scss

@@ -1,4 +1,4 @@
-@import 'mng-variables';
+@import '../../mng-overrides/variables';
 
 $primaryColor: #0f8bfd;
 $primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;

package/scss/theme/default/_mng-variables-theme-light.scss

@@ -1,4 +1,4 @@
-@import 'mng-variables';
+@import '../../mng-overrides/variables';
 
 $primaryColor: #397289 !default;
 $primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;

package/version-info.json

@@ -1,10 +1,10 @@
 {
     "name": "@mediusinc/mng-commons",
-    "version": "0.9.3",
-    "tag": "v0.9.3",
+    "version": "0.9.7",
+    "tag": "v0.9.7",
     "distance": 0,
-    "hash": "5fac4f99",
+    "hash": "6c43442f",
     "dirty": false,
-    "semver": "0.9.3",
-    "raw": "v0.9.3-5fac4f99"
+    "semver": "0.9.7",
+    "raw": "v0.9.7-6c43442f"
 }