@mediusinc/mng-commons 0.2.8 → 0.2.9

package/lib/utils/i18n.util.d.ts

@@ -3,16 +3,20 @@ import { Observable } from 'rxjs';
 import { ActionDescriptor, ModelDescriptor } from '../descriptors';
 export declare class I18nUtil {
     static instantModelTranslation(translate: TranslateService, model: ModelDescriptor<any>, keyPath: string, customKey?: string, item?: any, fallbackKey?: string, i18nParams?: any): string | null;
+    static getModelTabKey(model: ModelDescriptor<any>, tab: string): string;
+    static getModelGroupKey(model: ModelDescriptor<any>, group: string): string;
+    static getModelPropertyKey(model: ModelDescriptor<any>, property: string): string;
     static instantActionTranslation(translate: TranslateService, action: ActionDescriptor<any>, keyPath: string, customKey?: string, item?: any, fallbackKey?: string, functionNameKey?: string, i18nParams?: any): string | null;
     static streamActionTranslation(translate: TranslateService, action: ActionDescriptor<any>, keyPath: string, customKey?: string, item?: any, fallbackKey?: string): Observable<string | null>;
     static getActionTranslation(translate: TranslateService, action: ActionDescriptor<any>, keyPath: string, customKey?: string, item?: any, fallbackKey?: string, oneTime?: boolean): Observable<string | null>;
-    private static getModelKeysByPriority;
-    private static getActionKeysByPriority;
     static getModelI18nParams(model: ModelDescriptor<any>, item: any, i18nModelName?: string, i18nParameters?: any): any;
     static getActionI18nParams(action: ActionDescriptor<any>, item: any, i18nModelName?: string, i18nParameters?: any, functionTitle?: string): any;
     static instantModelName(translate: TranslateService, model: ModelDescriptor<any>, singular?: boolean): string | null;
     static getModelName(translate: TranslateService, model: ModelDescriptor<any>, oneTime?: boolean, singular?: boolean): Observable<string | null>;
     static getModelNameKeys(model: ModelDescriptor<any>, singular?: boolean): string[];
+    private static getModelKeysByPriority;
+    private static getModelKeyPath;
+    private static getActionKeysByPriority;
     private static selectKeyByPriority;
     private static getFunctionTitle;
 }

package/lib/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './editor-formly.util';
+export * from './enum.util';
 export * from './i18n.util';
 export * from './model.util';
 export * from './toast.util';

package/lib/utils/type.util.d.ts

@@ -1,15 +1,36 @@
 import 'reflect-metadata';
-import { ClassType } from '../types';
+import { ClassType, EnumType } from '../types';
 export declare class TypeUtil {
+    /**
+     * Defines type name decorator.
+     * @param targetType class.
+     * @param typeName Name of the type.
+     */
     static defineReflectTypeName(targetType: ClassType<any>, typeName?: string): void;
+    /**
+     * Defines enum name decorator.
+     * @param targetType enum object.
+     * @param enumName Name of the enum.
+     */
+    static defineReflectEnumName(targetType: EnumType, enumName: string): void;
     /**
      * Gets type name from either decorator or reflect metadata.
      * @param type Class.
      */
     static findTypeName(type: ClassType<any>): string;
+    /**
+     * Gets enum name from either decorator or reflect metadata.
+     * @param enumType Class.
+     */
+    static findEnumName(enumType: EnumType): string;
     /**
      * Get value from decorator defined property name
      * @param type Class.
      */
     static getDecoratorTypeName(type: Function): string | undefined;
+    /**
+     * Get value from decorator defined property name
+     * @param type Enum object.
+     */
+    static getDecoratorEnumName(type: EnumType): string | undefined;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediusinc/mng-commons",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "peerDependencies": {
     "@angular/common": "^13.1.0",
     "@angular/core": "^13.1.0",
@@ -34,5 +34,5 @@
     }
   },
   "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"
+  "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"
 }

package/scss/mng-overrides/_layout_forms.scss

@@ -28,4 +28,9 @@ form {
             padding: 0.75rem 0 0 0;
         }
     }
+
+    .field-checkbox,
+    .field-radiobutton {
+        margin-bottom: 0.5rem;
+    }
 }