ontimize-web-ngx 15.6.0-next.3 → 15.6.0-next.5

package/lib/components/app-sidenav/menu-group/o-app-sidenav-menu-group.component.d.ts

@@ -7,6 +7,7 @@ import { PermissionsService } from '../../../services/permissions/permissions.se
 import { OTranslateService } from '../../../services/translate/o-translate.service';
 import { OPermissions } from '../../../types/o-permissions.type';
 import { OAppSidenavBase } from '../o-app-sidenav-base.class';
+import { OAppLayoutBase } from '../../../layouts/app-layout/o-app-layout-base.class';
 import * as i0 from "@angular/core";
 export declare const DEFAULT_INPUTS_O_APP_SIDENAV_MENU_GROUP: string[];
 export declare const DEFAULT_OUTPUTS_O_APP_SIDENAV_MENU_GROUP: string[];
@@ -32,8 +33,10 @@ export declare class OAppSidenavMenuGroupComponent implements OnInit, AfterViewI
     protected router: Router;
     routerSubscription: Subscription;
     active: boolean;
+    oAppLayoutComponent: OAppLayoutBase;
     constructor(injector: Injector, elRef: ElementRef, cd: ChangeDetectorRef);
     ngOnInit(): void;
+    get shouldShowTooltip(): boolean;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     protected parsePermissions(): void;

package/lib/components/app-sidenav/menu-item/o-app-sidenav-menu-item.component.d.ts

@@ -40,6 +40,7 @@ export declare class OAppSidenavMenuItemComponent implements OnInit, AfterViewIn
     active: boolean;
     constructor(injector: Injector, elRef: ElementRef, cd: ChangeDetectorRef);
     ngOnInit(): void;
+    get shouldShowTooltip(): boolean;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     protected parsePermissions(): void;

package/lib/components/app-sidenav/o-app-sidenav.component.d.ts

@@ -24,6 +24,7 @@ export declare class OAppSidenavComponent extends OAppSidenavComponentStateServi
     protected _layoutMode: OAppLayoutMode;
     protected _sidenavMode: OSidenavMode;
     protected opened: boolean;
+    showEllipsisMenu: boolean;
     _showUserInfo: boolean;
     _showToggleButton: boolean;
     openedSidenavImg: string;
@@ -73,5 +74,5 @@ export declare class OAppSidenavComponent extends OAppSidenavComponentStateServi
     sidenavOpenedStart(): void;
     sidenavOpenedChange(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OAppSidenavComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OAppSidenavComponent, "o-app-sidenav", never, { "opened": "opened"; "showUserInfo": "show-user-info"; "showToggleButton": "show-toggle-button"; "openedSidenavImg": "opened-sidenav-image"; "closedSidenavImg": "closed-sidenav-image"; "layoutMode": "layout-mode"; "sidenavMode": "sidenav-mode"; "storeState": "store-state"; }, { "onSidenavOpenedChange": "onSidenavOpenedChange"; "onSidenavOpenedStart": "onSidenavOpenedStart"; "onSidenavClosedStart": "onSidenavClosedStart"; "onSidenavToggle": "onSidenavToggle"; "afterSidenavToggle": "afterSidenavToggle"; }, never, ["o-app-layout-sidenav-projection-start", "o-app-layout-sidenav-projection-end", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OAppSidenavComponent, "o-app-sidenav", never, { "opened": "opened"; "showUserInfo": "show-user-info"; "showToggleButton": "show-toggle-button"; "openedSidenavImg": "opened-sidenav-image"; "closedSidenavImg": "closed-sidenav-image"; "layoutMode": "layout-mode"; "sidenavMode": "sidenav-mode"; "storeState": "store-state"; "showEllipsisMenu": "show-ellipsis-menu"; }, { "onSidenavOpenedChange": "onSidenavOpenedChange"; "onSidenavOpenedStart": "onSidenavOpenedStart"; "onSidenavClosedStart": "onSidenavClosedStart"; "onSidenavToggle": "onSidenavToggle"; "afterSidenavToggle": "afterSidenavToggle"; }, never, ["o-app-layout-sidenav-projection-start", "o-app-layout-sidenav-projection-end", "*"], false, never>;
 }

package/lib/components/form/navigation/o-form-navigation.component.d.ts

@@ -1,16 +1,17 @@
 import { Injector, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { ServiceResponse } from '../../../interfaces/service-response.interface';
 import { OFormLayoutManagerBase } from '../../../layouts/form-layout/o-form-layout-manager-base.class';
+import { BaseService } from '../../../services/base-service.class';
 import { NavigationService } from '../../../services/navigation.service';
+import { OQueryParams } from '../../../types/query-params.type';
 import { OFormBase } from '../o-form-base.class';
 import { OFormNavigationClass } from './o-form.navigation.class';
-import { BaseService } from '../../../services/base-service.class';
-import { ServiceResponse } from '../../../interfaces/service-response.interface';
 import * as i0 from "@angular/core";
 export type QueryConfiguration = {
     serviceType: string;
-    queryArguments: any[];
+    queryArguments: OQueryParams;
     entity: string;
     service: string;
     queryMethod: string;
@@ -32,7 +33,8 @@ export declare class OFormNavigationComponent implements OnDestroy {
     protected queryConf: QueryConfiguration;
     constructor(injector: Injector, _form: OFormBase, router: Router);
     configureService(): void;
-    protected queryNavigationData(offset: number, length?: number): Promise<any>;
+    getQueryArguments(offset: number, length: number): OQueryParams;
+    protected queryNavigationData(offset: number, length?: number): Promise<void>;
     ngOnDestroy(): void;
     protected getKeysArray(): string[];
     getCurrentIndex(): number;

package/lib/components/grid/skeketon/o-grid-skeleton.component.d.ts

@@ -1,11 +1,8 @@
-import { ElementRef, Injector } from '@angular/core';
-import { OSkeletonComponent } from '../../o-skeleton.component';
+import { ORepeatableSkeletonComponent } from '../../o-repeatable-skeleton.component';
 import * as i0 from "@angular/core";
-export declare class OGridSkeletonComponent extends OSkeletonComponent {
-    protected elRef: ElementRef;
-    protected injector: Injector;
-    constructor(elRef: ElementRef, injector: Injector);
-    get count(): any[];
+export declare class OGridSkeletonComponent extends ORepeatableSkeletonComponent {
+    getParentElement(): HTMLElement;
+    getSkeletonItemElement(parentElement: HTMLElement): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<OGridSkeletonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<OGridSkeletonComponent, "o-grid-skeleton", never, {}, {}, never, never, false, never>;
 }

package/lib/components/index.d.ts

@@ -41,4 +41,5 @@ export * from './expandable-container/o-expandable-container.component';
 export * from './expandable-container/o-expandable-container.module';
 export * from './tree/index';
 export * from './o-skeleton.component';
+export * from './o-repeatable-skeleton.component';
 export * from './user-info/o-user-info-base.class';

package/lib/components/list/o-list.component.d.ts

@@ -20,6 +20,7 @@ export declare const DEFAULT_INPUTS_O_LIST: string[];
 export declare const DEFAULT_OUTPUTS_O_LIST: string[];
 export declare class OListComponent extends AbstractOServiceComponent<OListComponentStateService> implements IList, AfterContentInit, AfterViewInit, OnDestroy, OnInit, OnChanges {
     listItemDirectives: QueryList<OListItemDirective>;
+    toolbarEl: ElementRef;
     refreshButton: boolean;
     selectable: boolean;
     deleteButton: boolean;
@@ -45,6 +46,7 @@ export declare class OListComponent extends AbstractOServiceComponent<OListCompo
     onItemSelected: EventEmitter<any[]>;
     onItemDeselected: EventEmitter<any[]>;
     constructor(injector: Injector, elRef: ElementRef, form: OFormComponent);
+    get toolBarHeight(): number;
     get state(): OListComponentStateClass;
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/lib/components/list/skeleton/o-list-skeleton.component.d.ts

@@ -1,11 +1,8 @@
-import { ElementRef, Injector } from '@angular/core';
-import { OSkeletonComponent } from '../../o-skeleton.component';
+import { ORepeatableSkeletonComponent } from '../../o-repeatable-skeleton.component';
 import * as i0 from "@angular/core";
-export declare class OListSkeletonComponent extends OSkeletonComponent {
-    protected elRef: ElementRef;
-    protected injector: Injector;
-    constructor(elRef: ElementRef, injector: Injector);
-    get count(): any[];
+export declare class OListSkeletonComponent extends ORepeatableSkeletonComponent {
+    getParentElement(): HTMLElement;
+    getSkeletonItemElement(parentElement: HTMLElement): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<OListSkeletonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<OListSkeletonComponent, "o-list-skeleton", never, {}, {}, never, never, false, never>;
 }

package/lib/components/o-repeatable-skeleton.component.d.ts

@@ -0,0 +1,9 @@
+import { OSkeletonComponent } from './o-skeleton.component';
+import * as i0 from "@angular/core";
+export declare abstract class ORepeatableSkeletonComponent extends OSkeletonComponent {
+    abstract getParentElement(): HTMLElement;
+    abstract getSkeletonItemElement(parentElement: HTMLElement): HTMLElement;
+    getRows(): number[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ORepeatableSkeletonComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ORepeatableSkeletonComponent, never, never, {}, {}, never, never, false, never>;
+}

package/lib/components/o-skeleton.component.d.ts

@@ -1,14 +1,19 @@
-import { Injector, OnDestroy } from "@angular/core";
-import { Subscription } from "rxjs";
-import { AppearanceService } from "../services/appearance.service";
+import { AfterViewInit, ElementRef, Injector, OnDestroy } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { AppearanceService } from '../services/appearance.service';
 import * as i0 from "@angular/core";
-export declare class OSkeletonComponent implements OnDestroy {
+export declare abstract class OSkeletonComponent implements AfterViewInit, OnDestroy {
     protected injector: Injector;
+    protected elRef: ElementRef;
     isDarkMode: boolean;
     subscription: Subscription;
     appearanceService: AppearanceService;
-    constructor(injector: Injector);
+    rows$: Observable<number[]>;
+    private readonly cd;
+    constructor(injector: Injector, elRef: ElementRef);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    abstract getRows(): number[];
     static ɵfac: i0.ɵɵFactoryDeclaration<OSkeletonComponent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<OSkeletonComponent, never, never, {}, {}, never, never, false, never>;
 }

package/lib/components/table/extensions/header/o-table-header-components.d.ts

@@ -12,5 +12,5 @@ import { OTableOptionComponent } from './table-option/o-table-option.component';
 import { OTableQuickfilterComponent } from './table-quickfilter/o-table-quickfilter.component';
 import { OTableHeaderComponent } from './table-header/o-table-header.component';
 import { OTableColumnSelectAllDirective } from './table-column-select-all/o-table-column-select-all.directive';
-export declare const O_TABLE_HEADER_COMPONENTS: (typeof OTableColumnsFilterColumnComponent | typeof OTableColumnsGroupingColumnComponent | typeof OTableOptionComponent | typeof OTableButtonComponent | typeof OTableButtonsComponent | typeof OTableColumnResizerComponent | typeof OTableColumnsFilterComponent | typeof OTableInsertableRowComponent | typeof OTableMenuComponent | typeof OTableQuickfilterComponent | typeof OTableHeaderColumnFilterIconComponent | typeof OTableHeaderComponent | typeof OTableColumnsGroupingComponent | typeof OTableColumnSelectAllDirective)[];
-export declare const O_TABLE_HEADER_COMPONENTS_EXPORTED: (typeof OTableColumnsFilterColumnComponent | typeof OTableColumnsGroupingColumnComponent | typeof OTableOptionComponent | typeof OTableButtonComponent | typeof OTableButtonsComponent | typeof OTableColumnResizerComponent | typeof OTableColumnsFilterComponent | typeof OTableInsertableRowComponent | typeof OTableMenuComponent | typeof OTableQuickfilterComponent | typeof OTableHeaderComponent | typeof OTableColumnsGroupingComponent | typeof OTableColumnSelectAllDirective)[];
+export declare const O_TABLE_HEADER_COMPONENTS: (typeof OTableColumnsFilterColumnComponent | typeof OTableColumnsGroupingColumnComponent | typeof OTableButtonComponent | typeof OTableButtonsComponent | typeof OTableColumnResizerComponent | typeof OTableColumnsFilterComponent | typeof OTableInsertableRowComponent | typeof OTableOptionComponent | typeof OTableMenuComponent | typeof OTableQuickfilterComponent | typeof OTableHeaderColumnFilterIconComponent | typeof OTableHeaderComponent | typeof OTableColumnsGroupingComponent | typeof OTableColumnSelectAllDirective)[];
+export declare const O_TABLE_HEADER_COMPONENTS_EXPORTED: (typeof OTableColumnsFilterColumnComponent | typeof OTableColumnsGroupingColumnComponent | typeof OTableButtonComponent | typeof OTableButtonsComponent | typeof OTableColumnResizerComponent | typeof OTableColumnsFilterComponent | typeof OTableInsertableRowComponent | typeof OTableOptionComponent | typeof OTableMenuComponent | typeof OTableQuickfilterComponent | typeof OTableHeaderComponent | typeof OTableColumnsGroupingComponent | typeof OTableColumnSelectAllDirective)[];

package/lib/components/table/extensions/skeleton/o-table-skeleton.component.d.ts

@@ -1,15 +1,6 @@
-import { AfterViewInit, ElementRef, Injector, OnInit } from '@angular/core';
 import { OSkeletonComponent } from '../../../o-skeleton.component';
-import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class OTableSkeletonComponent extends OSkeletonComponent implements OnInit, AfterViewInit {
-    protected elRef: ElementRef;
-    protected injector: Injector;
-    rows$: Observable<number[]>;
-    private readonly cd;
-    constructor(elRef: ElementRef, injector: Injector);
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
+export declare class OTableSkeletonComponent extends OSkeletonComponent {
     getRows(): number[];
     static ɵfac: i0.ɵɵFactoryDeclaration<OTableSkeletonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<OTableSkeletonComponent, "o-table-skeleton", never, {}, {}, never, never, false, never>;

package/lib/components/table/o-table.component.d.ts

@@ -296,6 +296,7 @@ export declare class OTableComponent extends AbstractOServiceComponent<OTableCom
     getExpandedRowContainerClass(rowIndex: number): string;
     getExpandableItems(): any[];
     toggleRowExpandable(item: any, event?: Event): void;
+    destroyAllPortalHosts(): void;
     toggleRowExpandableByRowIndex(rowIndex: number, event?: Event): void;
     private emitTableRowExpandableChangeEvent;
     isExpanded(data: any): boolean;

package/lib/injection-tokens/index.d.ts

@@ -12,8 +12,10 @@ import { OErrorDialogManager } from "../services/o-error-dialog-manager.service"
 import { OMatErrorOptions } from "../types/o-mat-error.type";
 import { IExportDataProvider } from "../interfaces/export-data-provider.interface";
 import { IAuthService } from "../interfaces/auth-service.interface";
+import { IBaseRequestArgument } from "../services/request-adapter";
 export declare const O_DATA_SERVICE: InjectionToken<unknown>;
 export declare const O_RESPONSE_ADAPTER: InjectionToken<IServiceResponseAdapter<BaseServiceResponse>>;
+export declare const O_REQUEST_ADAPTER: InjectionToken<IBaseRequestArgument>;
 export declare const O_TRANSLATE_SERVICE: InjectionToken<unknown>;
 export declare const O_FILE_SERVICE: InjectionToken<IFileService>;
 export declare const O_LOCALSTORAGE_SERVICE: InjectionToken<ILocalStorageService>;

package/lib/interfaces/index.d.ts

@@ -43,3 +43,4 @@ export * from './pagination-context.interface';
 export * from './form-layout-manager.interface';
 export * from './base-response.interface';
 export * from './service-response.interface';
+export * from './jsonapi-response.interface';

package/lib/layouts/app-layout/o-app-layout-base.class.d.ts

@@ -1,4 +1,4 @@
 export declare abstract class OAppLayoutBase {
     abstract useFlagIcons: boolean;
-    F: any;
+    abstract tooltipDisplayMode: string;
 }

package/lib/layouts/app-layout/o-app-layout.component.d.ts

@@ -1,9 +1,9 @@
 import { AfterViewInit, EventEmitter } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
+import { OAppHeaderBase } from '../../components/app-header/o-app-header-base.class';
+import { OAppSidenavBase } from '../../components/app-sidenav/o-app-sidenav-base.class';
 import { OUserInfoConfigurationDirective } from '../../components/user-info/user-info-configuration/o-user-info-configuration.directive';
 import { OAppLayoutMode, OSidenavMode } from '../../util/codes';
-import { OAppSidenavBase } from '../../components/app-sidenav/o-app-sidenav-base.class';
-import { OAppHeaderBase } from '../../components/app-header/o-app-header-base.class';
 import * as i0 from "@angular/core";
 export declare const DEFAULT_INPUTS_O_APP_LAYOUT: string[];
 export declare const DEFAULT_OUTPUTS_O_APP_LAYOUT: any[];
@@ -16,6 +16,7 @@ export declare class OAppLayoutComponent implements AfterViewInit {
     showTitle: boolean;
     staticTitle: string;
     showStaticTitle: boolean;
+    showEllipsisMenu: boolean;
     headerColor: ThemePalette;
     headerHeight: string;
     appSidenav: OAppSidenavBase;
@@ -29,15 +30,18 @@ export declare class OAppLayoutComponent implements AfterViewInit {
     afterOpenSidenav: EventEmitter<boolean>;
     beforeCloseSidenav: EventEmitter<boolean>;
     afterCloseSidenav: EventEmitter<boolean>;
+    private _tooltipDisplayMode;
     get showHeader(): boolean;
     set showHeader(val: boolean);
     get mode(): OAppLayoutMode;
     set mode(val: OAppLayoutMode);
     get sidenavMode(): OSidenavMode;
     set sidenavMode(val: OSidenavMode);
+    get tooltipDisplayMode(): string;
+    set tooltipDisplayMode(val: string);
     sidenavToggle(opened: boolean): void;
     afterToggle(opened: boolean): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OAppLayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OAppLayoutComponent, "o-app-layout", never, { "mode": "mode"; "sidenavMode": "sidenav-mode"; "sidenavOpened": "sidenav-opened"; "_showHeader": "show-header"; "showUserInfo": "show-user-info"; "showLanguageSelector": "show-language-selector"; "useFlagIcons": "use-flag-icons"; "openedSidenavImg": "opened-sidenav-image"; "closedSidenavImg": "closed-sidenav-image"; "headerColor": "header-color"; "headerHeight": "header-height"; "showTitle": "show-title"; "staticTitle": "static-title"; "showStaticTitle": "show-static-title"; }, { "beforeOpenSidenav": "beforeOpenSidenav"; "afterOpenSidenav": "afterOpenSidenav"; "beforeCloseSidenav": "beforeCloseSidenav"; "afterCloseSidenav": "afterCloseSidenav"; }, ["userInfoConfiguration"], ["o-app-layout-sidenav[position=start]", "o-app-layout-sidenav[position=end]", "o-app-layout-sidenav", "o-app-layout-header[position=start]", "o-app-layout-header[position=end]", "o-app-layout-header", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OAppLayoutComponent, "o-app-layout", never, { "mode": "mode"; "sidenavMode": "sidenav-mode"; "sidenavOpened": "sidenav-opened"; "_showHeader": "show-header"; "showUserInfo": "show-user-info"; "showLanguageSelector": "show-language-selector"; "useFlagIcons": "use-flag-icons"; "openedSidenavImg": "opened-sidenav-image"; "closedSidenavImg": "closed-sidenav-image"; "headerColor": "header-color"; "headerHeight": "header-height"; "showTitle": "show-title"; "staticTitle": "static-title"; "showStaticTitle": "show-static-title"; "tooltipDisplayMode": "tooltip-display-mode"; "showEllipsisMenu": "show-ellipsis-menu"; }, { "beforeOpenSidenav": "beforeOpenSidenav"; "afterOpenSidenav": "afterOpenSidenav"; "beforeCloseSidenav": "beforeCloseSidenav"; "afterCloseSidenav": "afterCloseSidenav"; }, ["userInfoConfiguration"], ["o-app-layout-sidenav[position=start]", "o-app-layout-sidenav[position=end]", "o-app-layout-sidenav", "o-app-layout-header[position=start]", "o-app-layout-header[position=end]", "o-app-layout-header", "*"], false, never>;
 }

package/lib/util/codes.d.ts

@@ -4,6 +4,7 @@ export type CHANGE_EVENTS = 'onValueChange' | 'onChange';
 export type ORowHeight = 'small' | 'medium' | 'large';
 export type OTableEditionMode = 'none' | 'click' | 'dblclick' | 'doubleclick';
 export type OTableDetailMode = 'none' | 'click' | 'dblclick' | 'doubleclick';
+export type OTooltipDisplayMode = 'always' | 'never' | 'only-collapsed' | 'only-expanded';
 export declare class Codes {
     static readonly PAGINATED_QUERY_METHOD = "advancedQuery";
     static readonly DELETE_METHOD = "delete";
@@ -98,6 +99,8 @@ export declare class Codes {
     static VISIBLE_EXPORT_BUTTONS3X: string[];
     static DEFAULT_CHANGE_EVENT: CHANGE_EVENTS;
     static TYPES_DATE_GROUPS: string[];
+    static readonly TOOLTIP_DISPLAY_MODE: string[];
+    static readonly TOOLTIP_DISPLAY_COLLAPSED = "only-collapsed";
     static isDoubleClickMode(value: string): boolean;
     static isValidRowHeight(value: string): boolean;
     static getIsDetailObject(): any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ontimize-web-ngx",
   "homepage": "https://github.com/OntimizeWeb/ontimize-web-ngx#readme",
-  "version": "15.6.0-next.3",
+  "version": "15.6.0-next.5",
   "description": "Ontimize Web framework using Angular 15",
   "bugs": "https://github.com/OntimizeWeb/ontimize-web-ngx/issues",
   "author": "Imatia S.L.",

package/theme.scss

@@ -73,74 +73,7 @@
     }
   }
 
-}@mixin o-bar-menu-theme($theme-or-color-config) {
-    $theme: map.get($theme-or-color-config, color);
-    $primary: map.get($theme, primary);
-
-
-    $bg-color: #FFF;
-    $fg-color: rgba(0, 0, 0, 0.7);
-
-    $item-bg-color-hover-dark: rgba(0, 0, 0, 0.16);
-    $item-bg-color-hover-light: rgba(255, 255, 255, 0.16);
-
-    .o-bar-menu {
-      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);
-
-      nav {
-        .fake-ul {
-          .fake-ul {
-            background-color: $bg-color;
-
-            .mat-icon,
-            .o-bar-menu-group-title,
-            .o-bar-menu-item-title,
-            label.toggle {
-              color: $fg-color;
-            }
-
-            .fake-li {
-              background-color: $bg-color;
-            }
-          }
-        }
-
-        a {
-          color: $bg-color;
-        }
-      }
-
-      @media all and (min-width : 768px) {
-        nav .fake-ul {
-          .fake-li .fake-ul .fake-li-hover {
-            background: $item-bg-color-hover-dark;
-          }
-
-          .fake-li-hover {
-            background-color: $item-bg-color-hover-light;
-          }
-        }
-      }
-
-      @media all and (max-width : 767px) {
-        nav {
-          a:hover {
-            background-color: rgba(255, 255, 255, 0.15);
-          }
-
-          .fake-ul {
-            border-top: 1px solid rgba(255, 255, 255, 0.5);
-          }
-        }
-
-        .toggle {
-          &:hover {
-            background-color: rgba(255, 255, 255, 0.15);
-          }
-        }
-      }
-    }
-  }@mixin o-app-sidenav-theme($theme-or-color-config) {
+}@mixin o-app-sidenav-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
   $primary: map.get($theme, primary);
   $accent: map.get($theme, accent);
@@ -216,7 +149,74 @@
       }
     }
   }
-}@mixin o-breadcrumb-theme($theme-or-color-config) {
+}@mixin o-bar-menu-theme($theme-or-color-config) {
+    $theme: map.get($theme-or-color-config, color);
+    $primary: map.get($theme, primary);
+
+
+    $bg-color: #FFF;
+    $fg-color: rgba(0, 0, 0, 0.7);
+
+    $item-bg-color-hover-dark: rgba(0, 0, 0, 0.16);
+    $item-bg-color-hover-light: rgba(255, 255, 255, 0.16);
+
+    .o-bar-menu {
+      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);
+
+      nav {
+        .fake-ul {
+          .fake-ul {
+            background-color: $bg-color;
+
+            .mat-icon,
+            .o-bar-menu-group-title,
+            .o-bar-menu-item-title,
+            label.toggle {
+              color: $fg-color;
+            }
+
+            .fake-li {
+              background-color: $bg-color;
+            }
+          }
+        }
+
+        a {
+          color: $bg-color;
+        }
+      }
+
+      @media all and (min-width : 768px) {
+        nav .fake-ul {
+          .fake-li .fake-ul .fake-li-hover {
+            background: $item-bg-color-hover-dark;
+          }
+
+          .fake-li-hover {
+            background-color: $item-bg-color-hover-light;
+          }
+        }
+      }
+
+      @media all and (max-width : 767px) {
+        nav {
+          a:hover {
+            background-color: rgba(255, 255, 255, 0.15);
+          }
+
+          .fake-ul {
+            border-top: 1px solid rgba(255, 255, 255, 0.5);
+          }
+        }
+
+        .toggle {
+          &:hover {
+            background-color: rgba(255, 255, 255, 0.15);
+          }
+        }
+      }
+    }
+  }@mixin o-breadcrumb-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
   $primary: map.get($theme, primary);
   $accent: map.get($theme, accent);