@mediusinc/mng-commons 0.0.1-rc.2 → 0.2.0

package/lib/pipes/index.d.ts

@@ -1 +1,2 @@
+export * from './boolean.pipe';
 export * from './property-path.pipe';

package/lib/pipes/property-path.pipe.d.ts

@@ -1,7 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class PropertyPathPipe implements PipeTransform {
+export declare class MngPropertyPathPipe implements PipeTransform {
     transform(value: any, path?: string): any;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PropertyPathPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<PropertyPathPipe, "propertyPath">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngPropertyPathPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<MngPropertyPathPipe, "propertyPath">;
 }

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

@@ -4,14 +4,14 @@ import { DialogService } from 'primeng/dynamicdialog';
 import { ConfirmationService } from 'primeng/api';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
-import { ActionActivationResult, ActionData, ActionExecContext, ActionRunResult, ActionTriggerResult } from '../models/action';
-import { ActionDescriptor, ActionEditorDescriptor } from '../models/descriptors';
-import { MngTableCellClickEvent } from '../models/events';
-import { IDataProvider, IEditorDataProvider } from '../models/providers';
-import { IdType } from '../models/types';
-import { TableviewComponentService } from '../components/tableview/tableview.component.service';
+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 { IdType } from '../types';
 import * as i0 from "@angular/core";
-export declare class ActionService {
+export declare class MngActionService {
     private injector;
     private router;
     private dialogService;
@@ -78,7 +78,7 @@ export declare class ActionService {
      * @param event Target table click event.
      * @param route Currently activate route.
      */
-    triggerRowClickAction<T>(action: ActionDescriptor<T>, event: MngTableCellClickEvent<T>, route?: ActivatedRoute | null): Observable<ActionTriggerResult<T, unknown, IDataProvider<T, unknown>>>;
+    triggerRowClickAction<T>(action: ActionDescriptor<T>, event: MngTableCellClickEvent<T>, route: ActivatedRoute): Observable<ActionTriggerResult<T, unknown, IDataProvider<T, unknown>>>;
     /**
      * Triggers action with optional data (item, itemId, ...) and currently activated route.
      *
@@ -87,6 +87,6 @@ export declare class ActionService {
      * @param route Optional activated route.
      */
     triggerAction<T, S>(action: ActionDescriptor<T>, itemId?: IdType, item?: T, actionData?: ActionData, route?: ActivatedRoute, tableview?: TableviewComponentService<T, S>, sourceComponent?: any): Observable<ActionTriggerResult<T, S, IDataProvider<T, S>>>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ActionService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ActionService>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngActionService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MngActionService>;
 }

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

@@ -0,0 +1,72 @@
+import { Router } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { MenuItem, PrimeNGConfig } from 'primeng/api';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { MngConfigurationService } from './configuration.service';
+import { MngModuleConfig } from '../config/models';
+import { IUser } from '../models';
+import * as i0 from "@angular/core";
+export declare class MngCommonsService {
+    private router;
+    private primengConfig;
+    private translate;
+    private titleService;
+    private configurationService;
+    private moduleConfig;
+    private localStorage;
+    private _menuMode;
+    private _menuModeSubject;
+    private _menuItems;
+    private _menuPinEnabled;
+    private _menuActiveKeySubject;
+    private _menuResetSubject;
+    private readonly breadcrumbHomeSubject;
+    private readonly breadcrumbsSubject;
+    private breadcrumbsTranslateSubscription?;
+    private breadcrumbHomeTranslateSubscription?;
+    private _colorScheme;
+    private _user?;
+    private userSubject;
+    constructor(router: Router, primengConfig: PrimeNGConfig, translate: TranslateService, titleService: Title, configurationService: MngConfigurationService, moduleConfig: MngModuleConfig, localStorage: Storage);
+    get appName(): string;
+    get appOwner(): string;
+    get appLogoLight(): string;
+    get appLogoDark(): string;
+    get appLogoNameLight(): string;
+    get appLogoNameDark(): string;
+    get appLanguages(): string[];
+    get appLanguage(): string;
+    set appLanguage(language: string);
+    get menuModeIsStatic(): boolean;
+    get menuModeIsStatic$(): Observable<boolean>;
+    get menuModeIsOverlay(): boolean;
+    get menuModeIsOverlay$(): Observable<boolean>;
+    get menuModeIsSlim(): boolean;
+    get menuModeIsSlim$(): Observable<boolean>;
+    get menuModeIsSidebar(): boolean;
+    get menuModeIsSidebar$(): Observable<boolean>;
+    get menuActiveKey$(): Observable<string>;
+    get menuReset$(): Observable<any>;
+    get menuItems(): MenuItem[];
+    set menuItems(menuItems: MenuItem[]);
+    get menuPinEnabled(): boolean;
+    get breadcrumbHome$(): Observable<MenuItem | null>;
+    get breadcrumbs$(): Observable<MenuItem[]>;
+    get colorSchemeIsLight(): boolean;
+    get colorSchemeIsDark(): boolean;
+    get user(): IUser;
+    get user$(): Observable<IUser>;
+    set user(user: IUser);
+    initialize(): void;
+    menuChangeActiveKey(key: string): void;
+    menuReset(): void;
+    private updateBreadcrumbs;
+    private generateHomeBreadcrumb;
+    private generateBreadcrumbs;
+    private createBreadcrumb;
+    setPageTitle(title?: string): void;
+    private formatPageTitle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngCommonsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MngCommonsService>;
+}

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

@@ -1,10 +1,10 @@
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-export declare class ConfigurationService {
+export declare class MngConfigurationService {
     private http;
     private static _instance;
-    static init(httpClient: HttpClient): ConfigurationService;
-    static get(): ConfigurationService;
+    static init(httpClient: HttpClient): MngConfigurationService;
+    static get(): MngConfigurationService;
     private projectEnvironment?;
     private jsonEnvironments;
     private configuration;

package/lib/services/index.d.ts

@@ -1,6 +1,4 @@
 export * from './action.service';
-export * from './breadcrumb.service';
 export * from './configuration.service';
-export * from './menu.service';
+export * from './commons.service';
 export * from './navigation.service';
-export * from './settings.service';

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

@@ -1,7 +1,7 @@
 import { Router } from '@angular/router';
 import { Location } from '@angular/common';
 import * as i0 from "@angular/core";
-export declare class NavigationService {
+export declare class MngNavigationService {
     private router;
     private location;
     private history;
@@ -9,6 +9,6 @@ export declare class NavigationService {
     getCurrentLocation(): string | null;
     getPreviousLocation(): string | null;
     back(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<NavigationService>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngNavigationService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MngNavigationService>;
 }

package/lib/services/providers/commons-init.provider.d.ts

@@ -0,0 +1,2 @@
+import { MngCommonsService } from '../commons.service';
+export declare function mngCommonsInitializerProvider(mngCommons: MngCommonsService): () => void;

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

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { MngModuleConfig } from '../../models/config';
-import { ConfigurationService } from '../configuration.service';
-export declare const configurationServiceProvider: (httpClient: HttpClient, moduleConfig: MngModuleConfig) => ConfigurationService;
-export declare function configJsonAppInitializerProvider(configService: ConfigurationService, moduleConfig: MngModuleConfig): () => import("rxjs").Observable<boolean>;
+import { MngModuleConfig } from '../../config/models';
+import { MngConfigurationService } from '../configuration.service';
+export declare const mngConfigurationServiceProvider: (httpClient: HttpClient, moduleConfig: MngModuleConfig) => MngConfigurationService;
+export declare function mngConfigJsonAppInitializerProvider(configService: MngConfigurationService, moduleConfig: MngModuleConfig): () => import("rxjs").Observable<boolean>;

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 { MngModuleConfig } from '../../models/config';
-export declare function formlyConfigProvider(translate: TranslateService, moduleConfig?: MngModuleConfig): ConfigOption;
+import { MngModuleConfig } from '../../config/models';
+export declare function mngFormlyConfigProvider(translate: TranslateService, moduleConfig?: MngModuleConfig): ConfigOption;

package/lib/services/providers/index.d.ts

@@ -1,2 +1,3 @@
+export * from './commons-init.provider';
 export * from './config-service.provider';
 export * from './formly-config.provider';

package/lib/services/tokens/browser-storage.token.d.ts

@@ -0,0 +1,2 @@
+import { InjectionToken } from '@angular/core';
+export declare const MNG_BROWSER_STORAGE_IT: InjectionToken<Storage>;

package/lib/services/tokens/index.d.ts

@@ -0,0 +1,2 @@
+export * from './browser-storage.token';
+export * from './module-config.token';

package/lib/services/tokens/module-config.token.d.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+import { MngModuleConfig } from '../../config/models';
+export declare const MNG_MODULE_CONFIG_IT: InjectionToken<MngModuleConfig>;

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

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

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

@@ -1,14 +1,18 @@
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
-import { ModelDescriptor, ActionDescriptor } from '../models/descriptors';
+import { ActionDescriptor, ModelDescriptor } from '../descriptors';
 export declare class I18nUtil {
-    static instantActionTranslation(translate: TranslateService, action: ActionDescriptor<any>, keyPath: string, customKey?: string, item?: any, fallbackKey?: string): string | null;
+    static instantModelTranslation(translate: TranslateService, model: ModelDescriptor<any>, keyPath: string, customKey?: string, item?: any, fallbackKey?: string, i18nParams?: any): string | null;
+    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 getActionI18nParams(action: ActionDescriptor<any>, item: any, i18nModelName?: string): any;
-    static instantModelName(translate: TranslateService, model: ModelDescriptor<any>, singular?: boolean): string;
+    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 selectKeyByPriority;
+    private static getFunctionTitle;
 }

package/lib/utils/index.d.ts

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

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

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

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

@@ -0,0 +1,13 @@
+import { TranslateService } from '@ngx-translate/core';
+import { ActionDescriptor, TableDescriptor } from '../descriptors';
+import { TableviewComponentService } from '../components/tableview/services';
+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;
+    static actionNotificationError(translationService: TranslateService, action: ActionDescriptor<any>, error: any, functionName: string, tableview?: TableviewComponentService<any, any>, item?: any): void;
+    static getFormEditorWarningMessage(translationService: TranslateService, title: string, message: string): {
+        severity: string;
+        summary: any;
+        detail: any;
+    };
+}

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

@@ -1,5 +1,5 @@
 import 'reflect-metadata';
-import { ClassType } from '../models/types';
+import { ClassType } from '../types';
 export declare class TypeUtil {
     static defineReflectTypeName(targetType: ClassType<any>, typeName?: string): void;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediusinc/mng-commons",
-  "version": "0.0.1-rc.2",
+  "version": "0.2.0",
   "peerDependencies": {
     "@angular/core": "^13.1.0",
     "@angular/common": "^13.1.0",
@@ -8,8 +8,7 @@
     "@angular/router": "^13.1.0",
     "@ngx-formly/core": "^6.0.0-next.6",
     "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^7.0.0",
-    "primeng": "^13.1.0"
+    "primeng": "^13.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0",
@@ -34,5 +33,6 @@
       "default": "./fesm2020/mediusinc-mng-commons.mjs"
     }
   },
-  "sideEffects": false
+  "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"
 }

package/public-api.d.ts

@@ -1,5 +1,7 @@
 export * from './lib/mng-commons.module';
 export * from './lib/api/services';
+export * from './lib/components/layout/services';
+export * from './lib/components/tableview/services';
 export * from './lib/services';
 export * from './lib/services/providers';
 export * from './lib/api/utils';
@@ -13,10 +15,11 @@ export * from './lib/components/tableview';
 export * from './lib/directives';
 export * from './lib/pipes';
 export * from './lib/api/models';
-export * from './lib/models/config';
-export * from './lib/models/descriptors';
-export * from './lib/models/events';
-export * from './lib/models/interfaces';
-export * from './lib/models/providers';
-export * from './lib/models/types';
-export * from './lib/models/validators';
+export * from './lib/components/action/models';
+export * from './lib/components/form/models';
+export * from './lib/config/models';
+export * from './lib/config';
+export * from './lib/data-providers';
+export * from './lib/descriptors';
+export * from './lib/models';
+export * from './lib/types';

package/scss/common/layout/_breadcrumb.scss

@@ -0,0 +1,96 @@
+.layout-breadcrumb-container {
+    background-color: transparent;
+
+    .layout-breadcrumb {
+        background: transparent;
+        border: 0 none;
+        border-radius: 0;
+        padding-left: 20px;
+
+        ul {
+            li {
+                &.p-breadcrumb-chevron {
+                    margin: 0 .75rem;
+
+                    &::before {
+                        content: "\2044";
+                        font-weight: bold;
+                        font-size: 1.25rem;
+                    }
+                }
+
+                .p-menuitem-link {
+                    font-size: 1.25rem;
+
+                    .p-menuitem-text {
+                        color: $textThirdColor;
+                        font-weight: $submenuHeaderFontWeight;
+                    }
+                }
+
+                &:last-child {
+                    .p-menuitem-text {
+                        color: $textColor;
+                    }
+                }
+            }
+        }
+    }
+
+    .layout-breadcrumb-right-items {
+        .search-icon {
+            display:none;
+            align-items: center;
+            justify-content: center;
+            color: $textColor;
+            width: 32px;
+            height: 32px;
+            margin-right: .5rem;
+        }
+
+        .search-wrapper {
+            transition: transform $animationDuration $animationTimingFunction;
+
+            .p-input-icon-left {
+                margin-right: .5rem;
+                width: 100%;
+
+                input {
+                    background: transparent;
+                    border-color: transparent;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: $tabletBreakpoint) {
+    .layout-breadcrumb-container {
+        .layout-breadcrumb-right-items {
+            .search-icon {
+                display:flex;
+            }
+            .search-wrapper {
+                width: 0;
+                position: absolute;
+                right: 40px;
+                background: $topbarSubmenuBg;
+                border-radius: 6px;
+                transition: width $animationDuration $animationTimingFunction;
+
+                input {
+                    width: 0;
+                }
+
+                &.active-search-wrapper {
+                    width: calc(100% - 70px);
+                    transition: width $animationDuration $animationTimingFunction;
+
+                    input {
+                        width: 100%;
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/common/layout/_config.scss

@@ -0,0 +1,101 @@
+.layout-config {
+    width: 16em;
+    height: 100%;
+    position: fixed;
+    right: 0;
+    top: 0;
+    padding: 1rem;
+    overflow: auto;
+    background: $bodyBg;
+    color: $textColor !important;
+    z-index: 999;
+    border-left: 0 none;
+    transform: translateX(100%);
+    transition: transform .4s cubic-bezier(.05,.74,.2,.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);
+
+        .layout-config-content {
+            .layout-config-button {
+                i {
+                    transform: rotate(360deg);
+                }
+            }
+        }
+    }
+
+    p {
+        line-height: 1.5rem;
+        color: #000000 !important;
+    }
+
+    .layout-themes {
+        @include flex();
+        @include flex-wrap(wrap);
+
+        > div {
+            padding: .25rem;
+        }
+
+
+        a {
+            width: 2rem;
+            height: 2rem;
+            border-radius: $borderRadius;
+            display: block;
+            position: relative;
+            @include flex-align-center();
+            @include flex-justify-center();
+            transition: transform $transitionDuration;
+            box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
+
+            i {
+                font-size: 1rem;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                margin-left: -.5rem;
+                margin-top: -.5rem;
+                color: #ffffff;
+            }
+
+            &:hover {
+                transform: scale(1.1);
+            }
+        }
+    }
+}
+
+.layout-config-button {
+    display: block;
+    position: fixed;
+    width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+    background: $primaryColor;
+    color: $primaryTextColor;
+    text-align: center;
+    top: 50%;
+    right: 0;
+    margin-top: -1.5rem;
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+    transition: background-color $transitionDuration;
+    overflow: hidden;
+    cursor: pointer;
+    z-index: 999;
+    box-shadow: -.25rem 0 1rem rgba(0,0,0,.15);
+
+    i {
+        font-size: 2rem;
+        line-height: inherit;
+        transform: rotate(0deg);
+        transition: transform 1s;
+    }
+
+    &:hover {
+        background: lighten($primaryColor, 5%);
+    }
+}

package/scss/common/layout/_dashboard.scss

@@ -0,0 +1,16 @@
+.layout-dashboard {
+    .widget-table {
+        .card-header {
+            line-height: 24px;
+            margin-bottom: 1rem;
+        }
+
+        .p-datatable {
+            .p-button {
+                .p-button-icon {
+                    color: $textColor;
+                }
+            }
+        }
+    }
+}