@mediusinc/mng-commons 0.2.5 → 0.2.9

package/lib/router/route-builder.d.ts

@@ -0,0 +1,66 @@
+import { Type } from '@angular/core';
+import { LoadChildren, Route, Routes } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { MngMainLayoutComponent } from '../components/layout';
+import { ITableviewDataProvider } from '../data-providers';
+import { ActionDescriptor, TableviewDescriptor } from '../descriptors';
+import { BreadcrumbType } from './models';
+export declare class RoutesBuilder {
+    private readonly layoutRoute?;
+    private routes;
+    private currentRoute?;
+    private constructor();
+    static create(): RoutesBuilder;
+    static createWithLayout(layoutComponent?: typeof MngMainLayoutComponent): RoutesBuilder;
+    addAngularRoute(route: Route): this;
+    addRouteRedirect(path: string, redirectTo: string, pathMatch?: 'full' | 'prefix'): this;
+    addLazyRoute(path: string, loadChildren: LoadChildren): this;
+    addRoute(path: string, component: Type<any>): this;
+    addTableviewRoutes<T, S>(path: string, descriptor: TableviewDescriptor<T>, tableviewDataProvider: ITableviewDataProvider<T, S>, actions?: Array<ActionDescriptor<T>>, hasDetails?: boolean, hasEdit?: boolean, hasAdd?: boolean): this;
+    addTableviewRoutesFromComponent(path: string, component: Type<any>, hasDetails?: boolean, hasEdit?: boolean, hasAdd?: boolean): this;
+    addRouteBuilder(routeBuilder: RouteBuilder): this;
+    toRoute(): RouteBuilder;
+    buildRoutes(): Routes;
+    buildMenu(): Array<MenuItem>;
+}
+export declare class RouteBuilder {
+    private readonly route;
+    private routePath;
+    private root?;
+    private parent?;
+    private children;
+    private menuItem?;
+    private menuItemChildren;
+    private breadcrumb?;
+    private pageTitle?;
+    private constructor();
+    static create(path: string, component: Type<any>): RouteBuilder;
+    static createRedirect(path: string, redirectTo: string, pathMatch?: 'full' | 'prefix'): RouteBuilder;
+    static createFromRoute(route: Route): RouteBuilder;
+    static createTableviewRoutes<T, S>(path: string, descriptor: TableviewDescriptor<T>, tableviewDataProvider: ITableviewDataProvider<T, S>, actions?: Array<ActionDescriptor<T>>, hasDetails?: boolean, hasEdit?: boolean, hasAdd?: boolean): RouteBuilder;
+    static createTableviewRoutesFromComponent(path: string, component: Type<any>, hasDetails?: boolean, hasEdit?: boolean, hasAdd?: boolean): RouteBuilder;
+    private static addActionsSubroutesToTableviewParent;
+    withRoot(routesBuilder: RoutesBuilder): this;
+    withParent(parent: RouteBuilder): this;
+    withBreadcrumb(breadcrumb: BreadcrumbType): this;
+    withPageTitle(pageTitle: string): this;
+    withRedirectTo(redirectTo: string): this;
+    withPathMatch(pathMatch: 'full' | 'prefix'): this;
+    withTitle(title: string): this;
+    withData(data: any): this;
+    withPrimeMenuItem(menuItem: MenuItem): this;
+    withMenuItem(icon?: string, label?: string, routerLink?: Array<string>): this;
+    withMenuItemChild(label: string, icon?: string, routerLink?: Array<string>): this;
+    withMenuItemChildren(routesBuilder: RoutesBuilder): this;
+    addChild(path: string, component: Type<any>): RouteBuilder;
+    addChildBuilder(routeBuilder: RouteBuilder): this;
+    addTableviewRoutes<T, S>(path: string, descriptor: TableviewDescriptor<T>, tableviewDataProvider: ITableviewDataProvider<T, S>, actions?: Array<ActionDescriptor<T>>, hasDetails?: boolean, hasEdit?: boolean, hasAdd?: boolean): RouteBuilder;
+    addTableviewRoutesFromComponent(path: string, component: Type<any>, hasDetails?: boolean, hasEdit?: boolean, hasAdd?: boolean): RouteBuilder;
+    toParent(): RouteBuilder;
+    toRoot(): RoutesBuilder;
+    finish(): RoutesBuilder;
+    buildRoute(): Route;
+    buildMenu(): Array<MenuItem>;
+    private createMenuItem;
+    private adjustMenuRouterLinksFromBuilder;
+}

package/lib/services/action.service.d.ts

@@ -1,14 +1,14 @@
 import { Injector } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DialogService } from 'primeng/dynamicdialog';
-import { ConfirmationService } from 'primeng/api';
 import { TranslateService } from '@ngx-translate/core';
+import { ConfirmationService } from 'primeng/api';
+import { DialogService } from 'primeng/dynamicdialog';
 import { Observable } from 'rxjs';
 import { ActionActivationResult, ActionData, ActionExecContext, ActionRunResult, ActionTriggerResult } from '../components/action/models';
-import { ActionDescriptor, ActionEditorDescriptor } from '../descriptors';
 import { MngTableCellClickEvent } from '../components/tableview/models';
 import { TableviewComponentService } from '../components/tableview/services';
 import { IDataProvider, IEditorDataProvider } from '../data-providers';
+import { ActionDescriptor, ActionEditorDescriptor } from '../descriptors';
 import { IdType } from '../types';
 import * as i0 from "@angular/core";
 export declare class MngActionService {

package/lib/services/commons.service.d.ts

@@ -1,11 +1,11 @@
-import { Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
-import { MenuItem, PrimeNGConfig } from 'primeng/api';
+import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { MenuItem, PrimeNGConfig } from 'primeng/api';
 import { Observable } from 'rxjs';
-import { MngConfigurationService } from './configuration.service';
 import { MngModuleConfig } from '../config/models';
 import { IUser } from '../models';
+import { MngConfigurationService } from './configuration.service';
 import * as i0 from "@angular/core";
 export declare class MngCommonsService {
     private router;
@@ -55,9 +55,9 @@ export declare class MngCommonsService {
     get breadcrumbs$(): Observable<MenuItem[]>;
     get colorSchemeIsLight(): boolean;
     get colorSchemeIsDark(): boolean;
-    get user(): IUser;
-    get user$(): Observable<IUser>;
-    set user(user: IUser);
+    get user(): IUser | undefined;
+    set user(user: IUser | undefined);
+    get user$(): Observable<IUser | undefined>;
     initialize(): void;
     menuChangeActiveKey(key: string): void;
     menuReset(): void;

package/lib/services/navigation.service.d.ts

@@ -1,5 +1,5 @@
-import { Router } from '@angular/router';
 import { Location } from '@angular/common';
+import { Router } from '@angular/router';
 import * as i0 from "@angular/core";
 export declare class MngNavigationService {
     private router;

package/lib/services/providers/formly-config.provider.d.ts

@@ -1,4 +1,4 @@
-import { TranslateService } from '@ngx-translate/core';
 import { ConfigOption } from '@ngx-formly/core';
+import { TranslateService } from '@ngx-translate/core';
 import { MngModuleConfig } from '../../config/models';
 export declare function mngFormlyConfigProvider(translate: TranslateService, moduleConfig?: MngModuleConfig): ConfigOption;

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

@@ -1,2 +1,4 @@
 export declare const typeNameDecoratorPropertyName = "typeName";
 export declare function TypeName(typeName: string): ClassDecorator;
+export declare const enumNameDecoratorPropertyName = "enumName";
+export declare function EnumName(typeName: string): ClassDecorator;

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

@@ -2,9 +2,9 @@ export interface ClassType<T> extends Function {
     new (...args: any[]): T;
 }
 export interface EnumType {
-    [key: number]: EnumMemberType;
+    [key: string]: EnumConstantType;
 }
-export declare type EnumMemberType = string | number;
+export declare type EnumConstantType = string | number;
 export declare type IdType = number | string;
 export declare type PrimitiveType = string | boolean | number;
 export declare type PropertyType = PrimitiveType | Date | EnumType;

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

@@ -1,5 +1,5 @@
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { EditorDescriptor, AFieldDescriptor, FieldTabGroupDescriptor, FieldGroupDescriptor } from '../descriptors';
+import { AFieldDescriptor, EditorDescriptor, FieldGroupDescriptor, FieldTabGroupDescriptor } from '../descriptors';
 export declare class EditorFormlyUtil {
     static createFormlyConfigFromDescriptor(descriptor: EditorDescriptor<any>): FormlyFieldConfig[];
     static createFormlyTabType(tabGroups: FieldTabGroupDescriptor<any>[]): FormlyFieldConfig[];

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

@@ -0,0 +1,39 @@
+import { EnumValue } from '../models';
+import { EnumConstantType, EnumType } from '../types';
+export declare class EnumUtil {
+    /**
+     * Returns array of names for constants in enum.
+     * @param enumType Enum object.
+     */
+    static getConstantNames(enumType: EnumType): Array<string>;
+    /**
+     * Returns array of string values for constants in enum.
+     * @param enumType Enum object.
+     */
+    static getConstantValuesAsString(enumType: EnumType): Array<string>;
+    /**
+     * Returns array of number values for constants in enum.
+     * @param enumType Enum object.
+     */
+    static getConstantValuesAsNumber(enumType: EnumType): Array<number>;
+    /**
+     * Returns array of type EnumValue for all constants in enum.
+     * @param enumType Enum object.
+     * @param nameAsValue If use name of constant as value (optional, default: false).
+     * @param titlePath Base path for title to use as translation (optional).
+     */
+    static fromConstantsAsEnumValueArray(enumType: EnumType, nameAsValue?: boolean, titlePath?: string): EnumValue<string | number>[];
+    /**
+     * Returns array of type EnumValue for provided values in enum.
+     * @param enumType Enum object.
+     * @param nameAsValue If use name of constant as value (optional, default: false).
+     * @param titlePath Base path for title to use as translation (optional).
+     */
+    static fromValuesAsEnumValueArray(enumType: EnumType, values: Array<EnumConstantType>, nameAsValue?: boolean, titlePath?: string): EnumValue<string | number>[];
+    /**
+     * Gets constant name for value.
+     * @param enumType Enum object.
+     * @param value Value of enum constant.
+     */
+    static getConstantName(enumType: EnumType, value: EnumConstantType): string | null;
+}

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/model.util.d.ts

@@ -1,5 +1,5 @@
-import { ClassType } from '../types';
 import { ILookupDescriptor } from '../descriptors';
+import { ClassType } from '../types';
 export declare class ModelUtil {
     static findIdAttribute<T>(classType: ClassType<T>): string | null;
     static findTitleAttribute<T>(classType: ClassType<T>): string | null;

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

@@ -0,0 +1,4 @@
+export declare class RouteUtil {
+    static removeEmptyPathSegments(path: Array<string>): string[];
+    static appendPathToBasePath(basePath: Array<string>, path: Array<string>): string[];
+}

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

@@ -1,6 +1,6 @@
 import { TranslateService } from '@ngx-translate/core';
-import { ActionDescriptor, TableDescriptor } from '../descriptors';
 import { TableviewComponentService } from '../components/tableview/services';
+import { ActionDescriptor, TableDescriptor } from '../descriptors';
 export declare class ToastUtil {
     static tableNotificationError(translationService: TranslateService, table: TableDescriptor<any>, error: any, tableview?: TableviewComponentService<any, any>): void;
     static actionNotificationSuccess(translationService: TranslateService, action: ActionDescriptor<any>, functionName: string, customTitleKey?: string, customMessageKey?: string, tableview?: TableviewComponentService<any, any>, item?: any): void;

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.5",
+  "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/public-api.d.ts

@@ -22,4 +22,5 @@ export * from './lib/config';
 export * from './lib/data-providers';
 export * from './lib/descriptors';
 export * from './lib/models';
+export * from './lib/router';
 export * from './lib/types';

package/scss/common/layout/_breadcrumb.scss

@@ -10,10 +10,10 @@
         ul {
             li {
                 &.p-breadcrumb-chevron {
-                    margin: 0 .75rem;
+                    margin: 0 0.75rem;
 
                     &::before {
-                        content: "\2044";
+                        content: '\2044';
                         font-weight: bold;
                         font-size: 1.25rem;
                     }
@@ -39,20 +39,20 @@
 
     .layout-breadcrumb-right-items {
         .search-icon {
-            display:none;
+            display: none;
             align-items: center;
             justify-content: center;
             color: $textColor;
             width: 32px;
             height: 32px;
-            margin-right: .5rem;
+            margin-right: 0.5rem;
         }
 
         .search-wrapper {
             transition: transform $animationDuration $animationTimingFunction;
 
             .p-input-icon-left {
-                margin-right: .5rem;
+                margin-right: 0.5rem;
                 width: 100%;
 
                 input {
@@ -68,7 +68,7 @@
     .layout-breadcrumb-container {
         .layout-breadcrumb-right-items {
             .search-icon {
-                display:flex;
+                display: flex;
             }
             .search-wrapper {
                 width: 0;

package/scss/common/layout/_config.scss

@@ -11,11 +11,11 @@
     z-index: 999;
     border-left: 0 none;
     transform: translateX(100%);
-    transition: transform .4s cubic-bezier(.05,.74,.2,.99);
+    transition: transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
 
     &.layout-config-active {
         transform: translateX(0);
-        box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
+        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 
         .layout-config-content {
             .layout-config-button {
@@ -36,10 +36,9 @@
         @include flex-wrap(wrap);
 
         > div {
-            padding: .25rem;
+            padding: 0.25rem;
         }
 
-
         a {
             width: 2rem;
             height: 2rem;
@@ -49,15 +48,15 @@
             @include flex-align-center();
             @include flex-justify-center();
             transition: transform $transitionDuration;
-            box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
+            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 
             i {
                 font-size: 1rem;
                 position: absolute;
                 top: 50%;
                 left: 50%;
-                margin-left: -.5rem;
-                margin-top: -.5rem;
+                margin-left: -0.5rem;
+                margin-top: -0.5rem;
                 color: #ffffff;
             }
 
@@ -86,7 +85,7 @@
     overflow: hidden;
     cursor: pointer;
     z-index: 999;
-    box-shadow: -.25rem 0 1rem rgba(0,0,0,.15);
+    box-shadow: -0.25rem 0 1rem rgba(0, 0, 0, 0.15);
 
     i {
         font-size: 2rem;

package/scss/common/layout/_exception.scss

@@ -12,12 +12,12 @@
     &.notfound {
         .exception-panel {
             h1 {
-                color: #0F8BFD;
-                text-shadow: 0px 0px 50px rgba(#0F8BFD, 0.2);
+                color: #0f8bfd;
+                text-shadow: 0px 0px 50px rgba(#0f8bfd, 0.2);
             }
 
             h3 {
-                color: darken(#0F8BFD, 30%);
+                color: darken(#0f8bfd, 30%);
             }
         }
     }
@@ -25,12 +25,12 @@
     &.accessdenied {
         .exception-panel {
             h1 {
-                color: #0F8BFD;
-                text-shadow: 0px 0px 50px rgba(#0F8BFD, 0.2);
+                color: #0f8bfd;
+                text-shadow: 0px 0px 50px rgba(#0f8bfd, 0.2);
             }
 
             h3 {
-                color: darken(#0F8BFD, 30%);
+                color: darken(#0f8bfd, 30%);
             }
         }
     }
@@ -38,12 +38,12 @@
     &.error {
         .exception-panel {
             h1 {
-                color: #FC6161;
-                text-shadow: 0px 0px 50px rgba(#FC6161, 0.2);
+                color: #fc6161;
+                text-shadow: 0px 0px 50px rgba(#fc6161, 0.2);
             }
 
             h3 {
-                color: lighten(#FC6161, 10%);
+                color: lighten(#fc6161, 10%);
                 max-width: 720px;
             }
         }
@@ -103,7 +103,8 @@
     .exception-body {
         background-size: auto;
 
-        &.accessdenied, &.error {
+        &.accessdenied,
+        &.error {
             .exception-panel {
                 h1 {
                     font-size: 70px;
@@ -120,7 +121,7 @@
             margin-top: 0;
 
             h3 {
-                line-height: .75;
+                line-height: 0.75;
             }
 
             button {

package/scss/common/layout/_footer.scss

@@ -17,13 +17,13 @@
         .app-name {
             font-size: 1rem;
             font-weight: 600;
-            letter-spacing: .2px;
-            margin-left: .5rem;
+            letter-spacing: 0.2px;
+            margin-left: 0.5rem;
         }
     }
 
     .copyright {
-        font-size: .875rem;
+        font-size: 0.875rem;
         color: $textSecondaryColor;
     }
 }

package/scss/common/layout/_help.scss

@@ -16,7 +16,7 @@
         .help-search-effect {
             background: $bodyImage;
             background-repeat: no-repeat;
-            transform:  matrix(-1, 0, 0, 1, 0, 0);
+            transform: matrix(-1, 0, 0, 1, 0, 0);
         }
 
         .search-container {
@@ -39,7 +39,7 @@
                 position: absolute;
                 margin-left: 1rem;
                 top: 50%;
-                margin-top: -.5rem;
+                margin-top: -0.5rem;
             }
         }
     }
@@ -62,10 +62,10 @@
             .status-bar {
                 flex: 1 1 0;
                 -ms-flex: 1 1 0px;
-                background: #0BD18A;
+                background: #0bd18a;
                 box-shadow: 0px 0px 10px rgba(11, 209, 138, 0.3);
                 height: 50px;
-                margin-right: .25rem;
+                margin-right: 0.25rem;
                 transition: transform $transitionDuration;
 
                 &:last-child {
@@ -73,7 +73,7 @@
                 }
 
                 &.status-bar-failure {
-                    background: #FC6161;
+                    background: #fc6161;
                     box-shadow: 0px 0px 10px rgba(252, 97, 97, 0.3);
                 }
 
@@ -137,20 +137,19 @@
                     width: 50px;
                     height: 50px;
                     border-radius: 50%;
-
                 }
             }
 
             &:nth-child(1) {
-                background-image: linear-gradient(180deg, rgba(28, 28, 44, 0) 33.85%, rgba(27, 27, 44, 0.8) 80.77%), url("#{$baseHref}assets/images/mng/pages/help/blog1.jpg");
+                background-image: linear-gradient(180deg, rgba(28, 28, 44, 0) 33.85%, rgba(27, 27, 44, 0.8) 80.77%), url('#{$baseHref}assets/images/mng/pages/help/blog1.jpg');
             }
 
             &:nth-child(2) {
-                background-image: linear-gradient(186.73deg, rgba(28, 28, 44, 0) 46.89%, rgba(27, 27, 44, 0.8) 95.1%), url("#{$baseHref}assets/images/mng/pages/help/blog2.jpg");
+                background-image: linear-gradient(186.73deg, rgba(28, 28, 44, 0) 46.89%, rgba(27, 27, 44, 0.8) 95.1%), url('#{$baseHref}assets/images/mng/pages/help/blog2.jpg');
             }
 
             &:nth-child(3) {
-                background-image: linear-gradient(180deg, rgba(28, 28, 44, 0) 33.85%, rgba(27, 27, 44, 0.8) 80.77%), url("#{$baseHref}assets/images/mng/pages/help/blog3.jpg");
+                background-image: linear-gradient(180deg, rgba(28, 28, 44, 0) 33.85%, rgba(27, 27, 44, 0.8) 80.77%), url('#{$baseHref}assets/images/mng/pages/help/blog3.jpg');
             }
         }
     }

package/scss/common/layout/_inlinemenu.scss

@@ -34,10 +34,10 @@
             transition: all $transitionDuration;
             cursor: pointer;
             user-select: none;
-            margin-top: .2rem;
+            margin-top: 0.2rem;
 
             &:last-child {
-                margin-bottom: .5rem;
+                margin-bottom: 0.5rem;
             }
 
             a {
@@ -47,7 +47,7 @@
                 color: $textColor;
 
                 i {
-                    margin-right: .75rem;
+                    margin-right: 0.75rem;
                 }
             }
         }