@mediusinc/mng-commons 3.6.0-rc.0 → 3.6.0-rc.1

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

@@ -2,6 +2,7 @@ import { EventEmitter, ExistingProvider, Injector, OnDestroy, OnInit } from '@an
 import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { AutoComplete } from 'primeng/autocomplete';
+import { AutoCompleteCompleteEvent, AutoCompleteOnSelectEvent } from 'primeng/autocomplete/autocomplete.interface';
 import { Observable, ReplaySubject, Subscription } from 'rxjs';
 import { ILookupDataProvider } from '../../../data-providers';
 import { MngFormlyFieldWrapperComponent } from '../formly/wrappers';
@@ -46,12 +47,12 @@ export declare class MngAutocompleteComponent implements OnInit, OnDestroy, Cont
     constructor(injector: Injector, translate: TranslateService, formlyWrapper: MngFormlyFieldWrapperComponent);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    onSearch(event: any, isInit?: boolean): void;
+    onSearch(event: AutoCompleteCompleteEvent, isInit?: boolean): void;
     private selectFirstItem;
     /**
      * Triggered by user when selecting an item from an autocomplete suggestion list.
      */
-    onSelect(value: any): void;
+    onSelect(event: AutoCompleteOnSelectEvent): void;
     /**
      * Selects and sets new value
      */
@@ -60,7 +61,7 @@ export declare class MngAutocompleteComponent implements OnInit, OnDestroy, Cont
     /**
      * calls the selectFirst item anytime the input field goes out of focus and if the suggestions panel is not displayed.
      */
-    onBlur(event: any): void;
+    onBlur(event: Event): void;
     onShow(): void;
     /**
      * calls the selectFirst item anytime the suggestions panel is closed and input field isn't focused.

package/lib/components/form/date-range/date-range.component.d.ts

@@ -8,7 +8,7 @@ export declare class MngDateRangeComponent implements OnInit, OnDestroy, Control
     showTime: boolean;
     showSeconds: boolean;
     dateFormat?: string;
-    disabled: boolean;
+    private _disabled;
     private fromToFormControl;
     private onChangeFn;
     onTouchedFn: any;
@@ -17,6 +17,7 @@ export declare class MngDateRangeComponent implements OnInit, OnDestroy, Control
     get fromCtrl(): FormControl<any>;
     get toCtrl(): FormControl<any>;
     get dateRangeCtrl(): FormControl<any>;
+    set disabled(isDisabled: boolean);
     ngOnInit(): void;
     ngOnDestroy(): void;
     registerOnChange(fn: any): void;

package/lib/components/layoutV2/breadcrumb.component.d.ts

@@ -0,0 +1,10 @@
+import { MenuItem } from 'primeng/api';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class MngBreadcrumbComponent {
+    private mngCommons;
+    mappedBreadcrumbs$: Observable<MenuItem[]>;
+    private mapMngMenuItem;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngBreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MngBreadcrumbComponent, "mng-breadcrumb-v2", never, {}, {}, never, never, true, never>;
+}

package/lib/components/layoutV2/footer.component.d.ts

@@ -0,0 +1,8 @@
+import { MngCommonsService } from '../../services';
+import * as i0 from "@angular/core";
+export declare class MngFooterComponent {
+    mngCommons: MngCommonsService;
+    currentYear: number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngFooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MngFooterComponent, "mng-footer-v2", never, {}, {}, never, never, true, never>;
+}

package/lib/components/layoutV2/index.d.ts

@@ -0,0 +1,7 @@
+export * from './main-layout.component';
+export * from './breadcrumb.component';
+export * from './menu.component';
+export * from './menu-item.component';
+export * from './sidebar.component';
+export * from './topbar.component';
+export * from './topbar-user.component';

package/lib/components/layoutV2/main-layout.component.d.ts

@@ -0,0 +1,23 @@
+import { ElementRef, OnDestroy, OnInit, Type } from '@angular/core';
+import { MngModuleConfig } from '../../models';
+import { MngMainLayoutComponentV2Service } from './services';
+import * as i0 from "@angular/core";
+export declare class MngMainLayoutV2Component implements OnInit, OnDestroy {
+    readonly config: MngModuleConfig;
+    readonly layoutService: MngMainLayoutComponentV2Service;
+    private readonly menuService;
+    private readonly renderer;
+    appTopbar?: ElementRef;
+    private menuOutsideClickListener;
+    topbarComponent: Type<any>;
+    breadcrumbsComponent: Type<any>;
+    footerComponent: Type<any>;
+    constructor();
+    ngOnInit(): void;
+    blockBodyScroll(): void;
+    unblockBodyScroll(): void;
+    hideMenu(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngMainLayoutV2Component, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MngMainLayoutV2Component, "mng-main-layout-v2", never, {}, {}, never, never, true, never>;
+}

package/lib/components/layoutV2/menu-item.component.d.ts

@@ -0,0 +1,38 @@
+import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { MngMenuItem } from '../../models';
+import * as i0 from "@angular/core";
+export declare class MngMenuItemComponent implements OnInit, OnDestroy {
+    private readonly router;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly route;
+    private readonly menuService;
+    private readonly authorization;
+    private readonly layoutService;
+    private isPermittedSubject;
+    private isPermitted$;
+    private guardsIsAllowedSubject;
+    private guardsIsAllowed$;
+    private childrenVisibilitySubject;
+    private itemUrl?;
+    private routerEventsSubscription?;
+    private guardsIsAllowedSubscription?;
+    item: MngMenuItem;
+    root: boolean;
+    visibleChangeEventEmitter: EventEmitter<boolean>;
+    submenu: ElementRef;
+    active: import("@angular/core").WritableSignal<boolean>;
+    visible: import("@angular/core").WritableSignal<boolean>;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get submenuAnimation(): "collapsed" | "expanded";
+    get activeClass(): boolean;
+    itemClick(event: Event): void;
+    onChildVisibleChange(visible: boolean, item: MngMenuItem, idx: number): void;
+    private checkIfMenuItemIsAllowedFromGuard;
+    private updateActiveStateFromRoute;
+    private processItemChildrenVisibility;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngMenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MngMenuItemComponent, "[mng-menuitem-v2]", never, { "item": { "alias": "item"; "required": true; }; "root": { "alias": "root"; "required": false; }; }, { "visibleChangeEventEmitter": "visibleChange"; }, never, never, true, never>;
+}

package/lib/components/layoutV2/menu.component.d.ts

@@ -0,0 +1,12 @@
+import { OnInit } from '@angular/core';
+import { MngMenuItem } from '../../models';
+import * as i0 from "@angular/core";
+export declare class MngMenuComponent implements OnInit {
+    private readonly route;
+    private readonly menuService;
+    private readonly mngCommons;
+    menuItems: Array<MngMenuItem>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MngMenuComponent, "mng-menu-v2", never, {}, {}, never, never, true, never>;
+}

package/lib/components/layoutV2/model/index.d.ts

@@ -0,0 +1,2 @@
+export * from './menu.model';
+export * from './layout-state.model';

package/lib/components/layoutV2/model/layout-state.model.d.ts

@@ -0,0 +1,11 @@
+import { BehaviorSubject } from 'rxjs';
+export interface LayoutState {
+    staticMenuDesktopInactive$: BehaviorSubject<boolean>;
+    overlayMenuActive$: BehaviorSubject<boolean>;
+    rightMenuActive$: BehaviorSubject<boolean>;
+    configSidebarVisible$: BehaviorSubject<boolean>;
+    staticMenuMobileActive$: BehaviorSubject<boolean>;
+    menuHoverActive$: BehaviorSubject<boolean>;
+    sidebarActive$: BehaviorSubject<boolean>;
+    anchored$: BehaviorSubject<boolean>;
+}

package/lib/components/layoutV2/model/menu.model.d.ts

@@ -0,0 +1,4 @@
+export interface MenuChangeEvent {
+    key: string;
+    routeEvent?: boolean;
+}

package/lib/components/layoutV2/services/index.d.ts

@@ -0,0 +1,2 @@
+export * from './main-layout.component.service';
+export * from './menu.service';

package/lib/components/layoutV2/services/main-layout.component.service.d.ts

@@ -0,0 +1,14 @@
+import { LayoutState } from '../model';
+import * as i0 from "@angular/core";
+export declare class MngMainLayoutComponentV2Service {
+    private config;
+    state: LayoutState;
+    private overlayOpen;
+    overlayOpen$: import("rxjs").Observable<any>;
+    onMenuToggle(): void;
+    isOverlay(): boolean;
+    isDesktop(): boolean;
+    isMobile(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngMainLayoutComponentV2Service, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MngMainLayoutComponentV2Service>;
+}

package/lib/components/layoutV2/services/menu.service.d.ts

@@ -0,0 +1,22 @@
+import { MngMenuItem } from '../../../models';
+import { MenuChangeEvent } from '../model';
+import * as i0 from "@angular/core";
+export declare class MenuService {
+    private readonly logger;
+    private readonly router;
+    private readonly mngRouter;
+    private readonly menuSource;
+    private readonly resetSource;
+    menuSource$: import("rxjs").Observable<MenuChangeEvent>;
+    resetSource$: import("rxjs").Observable<unknown>;
+    private menuItems;
+    private routeLoadedChildrenSubscriptions;
+    initialize(menuItems: Array<MngMenuItem>): void;
+    private generateMenuItemKeys;
+    private findAndSetActiveMenuItem;
+    private listenToMenuItemLazyChildrenLoad;
+    private findActiveRouteMatches;
+    reset(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MenuService>;
+}

package/lib/components/layoutV2/sidebar.component.d.ts

@@ -0,0 +1,19 @@
+import { ElementRef, OnInit, Type } from '@angular/core';
+import { MngCommonsService } from '../../services';
+import { MngMainLayoutComponentV2Service } from './services';
+import * as i0 from "@angular/core";
+export declare class MngSidebarComponent implements OnInit {
+    private config;
+    mngCommons: MngCommonsService;
+    layoutService: MngMainLayoutComponentV2Service;
+    el: ElementRef<any>;
+    timeout: any;
+    menuContainer: ElementRef;
+    menuComponent: Type<any>;
+    ngOnInit(): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    anchor(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngSidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MngSidebarComponent, "mng-sidebar-v2", never, {}, {}, never, never, true, never>;
+}

package/lib/components/layoutV2/topbar-user.component.d.ts

@@ -0,0 +1,16 @@
+import { OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { IUser } from '../../models';
+import { MngCommonsService } from '../../services';
+import * as i0 from "@angular/core";
+export declare class MngTopbarUserComponent implements OnInit {
+    private readonly destroyRef;
+    mngCommons: MngCommonsService;
+    user?: IUser;
+    userRoles$: Observable<string[]>;
+    hrefJsVoid: import("@angular/platform-browser").SafeUrl;
+    ngOnInit(): void;
+    logout(user: IUser | undefined, event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngTopbarUserComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MngTopbarUserComponent, "mng-topbar-user-component-v2", never, {}, {}, never, never, true, never>;
+}

package/lib/components/layoutV2/topbar.component.d.ts

@@ -0,0 +1,23 @@
+import { ElementRef, OnInit, Type } from '@angular/core';
+import { MngCommonsService } from '../../services';
+import { MngMainLayoutComponentV2Service } from './services';
+import { MngSidebarComponent } from './sidebar.component';
+import * as i0 from "@angular/core";
+export declare class MngTopbarComponent implements OnInit {
+    el: ElementRef<any>;
+    mngCommons: MngCommonsService;
+    mainLayoutService: MngMainLayoutComponentV2Service;
+    private config;
+    menuButton: ElementRef;
+    topbarInjectionRef: ElementRef;
+    appSidebar: MngSidebarComponent;
+    breadcrumbComponent: Type<any>;
+    topbarUserComponent: Type<any>;
+    languages: Array<string>;
+    selectedLanguage: string;
+    ngOnInit(): void;
+    onMenuButtonClick(): void;
+    switchLanguage(language: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngTopbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MngTopbarComponent, "mng-topbar-v2", never, {}, {}, never, never, true, never>;
+}

package/lib/components/layoutV2/version.component.d.ts

@@ -0,0 +1,19 @@
+import { OnInit } from '@angular/core';
+import { VersionConfig, VersionConfigType } from '../../models';
+import { JsonPathPipe } from '../../pipes';
+import { MngVersionService } from '../../services';
+import * as i0 from "@angular/core";
+export declare class MngVersionComponent implements OnInit {
+    private versionService;
+    private jsonPathPipe;
+    initVersion?: VersionConfigType;
+    displayName?: string;
+    displayVersion?: string;
+    versions?: Array<VersionConfig>;
+    private loadingSubject;
+    loading$: import("rxjs").Observable<boolean>;
+    constructor(versionService: MngVersionService, jsonPathPipe: JsonPathPipe);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MngVersionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MngVersionComponent, "mng-version-v2", never, { "initVersion": { "alias": "version"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -1,10 +1,11 @@
 import { Type } from '@angular/core';
 import { ValidatorOption, WrapperOption } from '@ngx-formly/core/lib/models/config';
 import { TranslateService } from '@ngx-translate/core';
-import { MenuItem } from 'primeng/api';
 import { MngFormlyTypeConfig } from '../components/form/formly/models';
 import { MngLogConfig } from './log.model';
+import { MngMenuConfig, MngMenuConfigV2 } from './menu-config.model';
 import { VersionConfigType } from './version.model';
+export type ColorScheme = 'light' | 'dark';
 export interface MngModuleConfig {
     app?: {
         name?: string;
@@ -17,15 +18,15 @@ export interface MngModuleConfig {
         logoNamePathDark?: string;
         languages?: string[];
         dataLanguages?: string[];
-        colorScheme?: 'light' | 'dark';
+        colorScheme: ColorScheme;
         version?: VersionConfigType;
+        theme?: string;
     };
-    menu?: {
-        mode?: 'static' | 'sidebar' | 'slim' | 'overlay';
-        menuItems?: MenuItem[];
-        pinEnabled?: boolean;
-        sidebarSlim?: boolean;
-    };
+    /**
+     * @deprecated use menuV2 instead
+     */
+    menu?: MngMenuConfig;
+    menuV2?: MngMenuConfigV2;
     configuration?: {
         projectEnvironment?: any;
         jsonSource?: string | Array<string>;

package/lib/models/index.d.ts

@@ -11,3 +11,4 @@ export * from './tableview-attr.model';
 export * from './can-component-deactivate.model';
 export * from './action-editor.model';
 export * from './common-init-event-enum.model';
+export * from './menu-config.model';

package/lib/models/menu-config.model.d.ts

@@ -0,0 +1,15 @@
+import { MenuItem } from 'primeng/api';
+export type MngMenuMode = 'static' | 'overlay' | 'reveal' | 'drawer';
+/**
+ * @deprecated use MngMenuConfigV2 instead
+ */
+export interface MngMenuConfig {
+    mode: 'static' | 'sidebar' | 'slim' | 'overlay';
+    menuItems?: MenuItem[];
+    pinEnabled?: boolean;
+    sidebarSlim?: boolean;
+}
+export interface MngMenuConfigV2 {
+    mode: MngMenuMode;
+    ripple?: boolean;
+}

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

@@ -1,6 +1,8 @@
 import { QueryParamsHandling } from '@angular/router';
 import { APermissions } from '../security/model';
 export interface MngMenuItem {
+    index?: number;
+    key?: string;
     id?: string;
     positionIndex?: number;
     label?: string;

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

@@ -2,6 +2,7 @@ import { EnvironmentProviders, Provider, Type } from '@angular/core';
 import { CanActivateFn, CanDeactivateFn, DefaultExport, LoadChildren, ResolveFn, Route } from '@angular/router';
 import { Observable } from 'rxjs';
 import { MngMainLayoutComponent } from '../components/layout';
+import { MngMainLayoutV2Component } from '../components/layoutV2';
 import { MngMenuItem } from '../models';
 import { APermissions } from '../security/model';
 import { BreadcrumbType, MngRouterData } from './models';
@@ -26,7 +27,11 @@ export declare class RouteBuilder {
     static createLazyRouteModule(path: string, loadChildren: LoadChildren, canMatch?: Array<any>): RouteBuilder;
     static createLazyRouteComponent(path: string, loadComponent: () => Type<unknown> | Observable<Type<unknown> | DefaultExport<Type<unknown>>> | Promise<Type<unknown> | DefaultExport<Type<unknown>>>, canMatch?: Array<any>): RouteBuilder;
     static createFromRoute(route: Route): RouteBuilder;
+    /**
+     * @deprecated use createLayoutRouteV2() instead
+     */
     static createLayoutRoute(path: string, layoutComponent?: typeof MngMainLayoutComponent): RouteBuilder;
+    static createLayoutRouteV2(path: string, layoutComponent?: typeof MngMainLayoutV2Component): RouteBuilder;
     withRoot(routesBuilder: RoutesBuilder): this;
     withParent(parent: RouteBuilder): this;
     withBreadcrumb(breadcrumb: BreadcrumbType): this;
@@ -40,7 +45,7 @@ export declare class RouteBuilder {
     withProvider(provider: Provider | EnvironmentProviders): this;
     withData(data: MngRouterData): this;
     withMngMenuItem(menuItem: MngMenuItem): this;
-    withMenuItem(icon?: string, label?: string, routerLink?: Array<string>): this;
+    withMenuItem(icon?: string, label?: string, routerLink?: Array<string>, breadcrumb?: boolean): this;
     /**
      * Adds menu item child to this instance of menu item.
      * @param label Label.

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

@@ -2,6 +2,7 @@ import { Type } from '@angular/core';
 import { DefaultExport, LoadChildren, Route, Routes } from '@angular/router';
 import { Observable } from 'rxjs';
 import { MngMainLayoutComponent } from '../components/layout';
+import { MngMainLayoutV2Component } from '../components/layoutV2';
 import { RouteBuilder } from './route-builder';
 import { TableviewRouteBuilderInternal } from './tableview-route-builder';
 export declare class RoutesBuilder {
@@ -10,7 +11,11 @@ export declare class RoutesBuilder {
     private currentRoute?;
     private constructor();
     static create(): RoutesBuilder;
+    /**
+     * @deprecated use createWithLayoutV2() instead
+     */
     static createWithLayout(layoutComponent?: typeof MngMainLayoutComponent): RoutesBuilder;
+    static createWithLayoutV2(layoutComponent?: typeof MngMainLayoutV2Component): RoutesBuilder;
     addAngularRoute(route: Route): this;
     addRouteRedirect(path: string, redirectTo: string, pathMatch?: 'full' | 'prefix'): this;
     addLazyRouteComponent(path: string, loadComponent: () => Type<unknown> | Observable<Type<unknown> | DefaultExport<Type<unknown>>> | Promise<Type<unknown> | DefaultExport<Type<unknown>>>, canMatch?: Array<any>): this;

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

@@ -1,33 +1,28 @@
 import { MenuItem } from 'primeng/api';
+import { MngMenuItem } from '../models';
 export declare class RouteUtil {
     static removeEmptyPathSegments(path: Array<string>): string[];
     static appendPathToBasePath(basePath: Array<string>, path: Array<string>): string[];
-    static adjustMenuLazyChildrenRouterLinks(rootMenuItem: MenuItem, lazyChildren: Array<MenuItem>): {
+    static doesUrlMatchRouterLink(link: Array<string> | string, url: Array<string> | string): boolean;
+    static adjustMenuLazyChildrenRouterLinks(rootMenuItem: MenuItem, lazyChildren: Array<MngMenuItem>): {
+        index?: number | undefined;
+        key?: string | undefined;
+        id?: string | undefined;
+        positionIndex?: number | undefined;
         label?: string | undefined;
         icon?: string | undefined;
-        command?(event: import("primeng/api").MenuItemCommandEvent): void;
-        url?: string | undefined;
-        items?: MenuItem[] | undefined;
-        expanded?: boolean | undefined;
-        disabled?: boolean | undefined;
-        visible?: boolean | undefined;
-        target?: string | undefined;
-        escape?: boolean | undefined;
-        routerLinkActiveOptions?: any;
+        items?: MngMenuItem[] | undefined;
+        guards?: any[] | undefined;
+        permissions?: import("@mediusinc/mng-commons").APermissions | undefined;
         separator?: boolean | undefined;
+        className?: string | undefined;
         badge?: string | undefined;
-        tooltip?: string | undefined;
-        tooltipPosition?: string | undefined;
-        badgeStyleClass?: string | undefined;
-        style?: {
-            [klass: string]: any;
-        } | null | undefined;
-        styleClass?: string | undefined;
-        title?: string | undefined;
-        id?: string | undefined;
-        automationId?: any;
-        tabindex?: string | undefined;
-        routerLink?: any;
+        badgeClassName?: string | undefined;
+        visible?: boolean | undefined;
+        disabled?: boolean | undefined;
+        routerLink?: string | string[] | null | undefined;
+        href?: string | undefined;
+        target?: string | undefined;
         queryParams?: {
             [k: string]: any;
         } | undefined;
@@ -36,13 +31,7 @@ export declare class RouteUtil {
         preserveFragment?: boolean | undefined;
         skipLocationChange?: boolean | undefined;
         replaceUrl?: boolean | undefined;
-        iconStyle?: {
-            [klass: string]: any;
-        } | null | undefined;
-        iconClass?: string | undefined;
-        state?: {
-            [k: string]: any;
-        } | undefined;
-        tooltipOptions?: import("primeng/api").TooltipOptions | undefined;
+        updated?: boolean | undefined;
+        lazyChildren?: boolean | undefined;
     }[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediusinc/mng-commons",
-  "version": "3.6.0-rc.0",
+  "version": "3.6.0-rc.1",
   "peerDependencies": {
     "@angular/animations": "^16.0.0",
     "@angular/common": "^16.0.0",
@@ -10,7 +10,7 @@
     "@angular/router": "^16.0.0",
     "@ngx-formly/core": "^6.1.3",
     "@ngx-translate/core": "^14.0.0",
-    "primeng": "^16.5.0"
+    "primeng": "~16.9.0"
   },
   "dependencies": {
     "reflect-metadata": "^0.1.13",

package/scss/common/layout/_breadcrumb.scss

@@ -1,6 +1,5 @@
 .layout-breadcrumb-container {
     background-color: transparent;
-    padding-top: 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;

package/scss/mng-commons-dark-v2.scss

@@ -0,0 +1,9 @@
+$multiselectHighlightBg: rgba(68, 72, 109, 0.12) !default;
+$multiselectHighlightTextColor: #44486d;
+
+$baseHref: './~/' !default;
+
+// theme and layout
+@import 'theme/default/mng-variables-theme-dark';
+@import 'v2/layout/layout.scss';
+@import 'v2/theme/theme-dark/blue/theme';

package/scss/mng-commons-light-v2.scss

@@ -0,0 +1,9 @@
+$multiselectHighlightBg: rgba(68, 72, 109, 0.12) !default;
+$multiselectHighlightTextColor: #44486d;
+
+$baseHref: './~/' !default;
+
+// theme and layout
+@import 'v2/theme/theme-base/mng/mng_variables';
+@import 'v2/layout/layout.scss';
+@import 'v2/theme/theme-light/blue/theme';

package/scss/v2/layout/_animation.scss

@@ -0,0 +1,53 @@
+@keyframes px-mask-in {
+    from {
+        background-color: transparent;
+    }
+
+    to {
+        background-color: var(--maskbg);
+    }
+}
+
+@keyframes px-scalein {
+    0% {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes px-fadein {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes px-fadeout {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.px-scalein {
+    animation: px-scalein .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.px-fadein {
+    animation: px-fadein .15s linear;
+}
+
+.px-fadeout {
+    animation: px-fadeout .15s linear;
+}