@mediusinc/mng-commons-layout 6.2.0 → 7.0.0-rc.0

package/index.d.ts

@@ -1,8 +1,206 @@
-export * from './lib/helpers/menu-items';
-export * from './lib/models/layout-state.model';
-export * from './lib/models/menu.model';
-export * from './lib/services/layout-feature-config.token';
-export * from './lib/services/layout.service';
-export * from './lib/services/menu.service';
-export * from './lib/services/version.service';
-export * from './lib/provide';
+import { CommonsMenuItem, InternalCommonsMenuItem, CommonsFeature } from '@mediusinc/mng-commons/core';
+import * as _angular_core from '@angular/core';
+import { Type, InjectionToken } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
+
+/**
+ * @internal
+ */
+declare function prepareMenuItemsToInternal(menuItems: CommonsMenuItem[], parentKey?: string): InternalCommonsMenuItem[];
+
+interface LayoutState {
+    staticMenuDesktopInactive: boolean;
+    overlayMenuActive: boolean;
+    rightMenuActive: boolean;
+    configSidebarVisible: boolean;
+    staticMenuMobileActive: boolean;
+    menuHoverActive: boolean;
+    sidebarActive: boolean;
+    anchored: boolean;
+}
+
+interface MenuChangeEvent {
+    key?: string;
+    eventType?: 'routeChange' | 'reset';
+}
+
+type LayoutMenuMode = 'static' | 'overlay' | 'reveal' | 'drawer' | 'slim' | 'slim-plus';
+type ColorScheme = 'light' | 'dark' | 'auto';
+/**
+ * Set of configurations for layout customization.
+ */
+interface LayoutFeatureConfig {
+    /**
+     * Choose default menu mode.
+     */
+    menuMode?: LayoutMenuMode;
+    /**
+     * Sets available menu modes.
+     */
+    menuModes?: LayoutMenuMode[];
+    /**
+     * Predefines menu modes (instead of taking them from route data config).
+     */
+    menuItems?: MenuItem[];
+    /**
+     * Logo path (usually icon part only).
+     */
+    logoPath?: string | false;
+    /**
+     * Logo path for light color mode (usually icon part only).
+     */
+    logoPathLight?: string;
+    /**
+     * Logo path for dark color mode (usually icon part only).
+     */
+    logoPathDark?: string;
+    /**
+     * Logo path (usually name part only).
+     */
+    logoNamePath?: string | false;
+    /**
+     * Logo path for light color mode (usually name part only).
+     */
+    logoNamePathLight?: string;
+    /**
+     * Logo path for dark color mode (usually name part only).
+     */
+    logoNamePathDark?: string;
+    /**
+     * Default color scheme (defaults to 'auto').
+     */
+    colorScheme?: ColorScheme;
+    /**
+     * Enable ripple effect.
+     */
+    ripple?: boolean;
+    /**
+     * Disables wrapping layout in notification wrapper.
+     */
+    disableNotificationWrapper?: boolean;
+    /**
+     * Set custom components instead of default layout's one. If false provided for component, then it will not be displayed.
+     */
+    components?: {
+        /**
+         * Specify custom topbar component or disable (if false).
+         */
+        topbar?: Type<any> | false;
+        /**
+         * Specify custom menu component or disable (if false).
+         */
+        menu?: Type<any> | false;
+        /**
+         * Specify custom footer component or disable (if false).
+         */
+        footer?: Type<any> | false;
+        /**
+         * Specify custom breadcrumb component or disable (if false).
+         */
+        breadcrumb?: Type<any> | false;
+        /**
+         * Specify custom topbarUser component or disable (if false).
+         */
+        topbarUser?: Type<any> | false;
+        /**
+         * Specify custom version component or disable (if false).
+         */
+        version?: Type<any> | false;
+        /**
+         * Specify custom settings component or disable (if false).
+         */
+        settings?: Type<any> | false;
+    };
+}
+declare const COMMONS_LAYOUT_FEATURE_CONFIG_IT: InjectionToken<LayoutFeatureConfig>;
+
+declare class LayoutService {
+    private readonly typeName;
+    private readonly storageMenuModeKey;
+    private readonly storageColorSchemeKey;
+    private readonly config;
+    private readonly storageService;
+    state: _angular_core.WritableSignal<LayoutState>;
+    private overlayOpen;
+    overlayOpen$: rxjs.Observable<any>;
+    private _colorSchemeSetting;
+    colorSchemeSetting: _angular_core.Signal<ColorScheme>;
+    private _colorScheme;
+    colorScheme: _angular_core.Signal<ColorScheme>;
+    colorSchemeIsLight: _angular_core.Signal<boolean>;
+    private getInitColorScheme;
+    private getInitActualColorScheme;
+    private getDefaultColorScheme;
+    setColorScheme(scheme: ColorScheme): void;
+    readonly menuModes: LayoutMenuMode[];
+    private _menuMode;
+    menuMode: _angular_core.Signal<LayoutMenuMode>;
+    private appLogoLight;
+    private appLogoDark;
+    appLogo: _angular_core.Signal<string | false>;
+    private appLogoNameLight;
+    private appLogoNameDark;
+    appLogoName: _angular_core.Signal<string | false>;
+    isOverlay: _angular_core.Signal<boolean>;
+    isSlim: _angular_core.Signal<boolean>;
+    isSlimPlus: _angular_core.Signal<boolean>;
+    submenuOverlayKey: _angular_core.WritableSignal<string | undefined>;
+    constructor();
+    onMenuModeChange(mode: LayoutMenuMode): void;
+    onMenuToggle(): void;
+    onOverlaySubmenuOpen(key: string): void;
+    onOverlaySubmenuClose(): void;
+    isDesktop(): boolean;
+    isMobile(): boolean;
+    private initMenuMode;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<LayoutService>;
+}
+
+declare class MenuService {
+    private readonly destroyRef;
+    private readonly logger;
+    private readonly router;
+    private readonly commonsRouter;
+    private readonly _menuItems;
+    menuItems: _angular_core.Signal<InternalCommonsMenuItem[]>;
+    private readonly menuChangeSubject;
+    menuChange$: rxjs.Observable<MenuChangeEvent>;
+    private routeLoadedChildrenSubscriptions;
+    setItems(menuItems: Array<CommonsMenuItem>): void;
+    private appendListenersToLazyChildren;
+    private findAndSetActiveMenuItem;
+    private listenToMenuItemLazyChildrenLoad;
+    private findActiveRouteMatches;
+    reset(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MenuService>;
+}
+
+declare class VersionService {
+    private readonly logger;
+    private readonly http;
+    private readonly configurationService;
+    private cache;
+    loadVersion(path: string, baseConfigKey?: string, jsonPath?: string): Observable<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VersionService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<VersionService>;
+}
+
+/**
+ * Prepares providers for usage of the layout functionalities.
+ *
+ * @returns {CommonsFeature} The `CommonsFeature` object with the layout configuration.
+ */
+declare function withLayout(config?: LayoutFeatureConfig): CommonsFeature;
+/**
+ * Configures PrimeNG theme dark mode selector.
+ */
+declare const primeThemeDarkModeOpts: {
+    darkModeSelector: string;
+};
+
+export { COMMONS_LAYOUT_FEATURE_CONFIG_IT, LayoutService, MenuService, VersionService, prepareMenuItemsToInternal, primeThemeDarkModeOpts, withLayout };
+export type { ColorScheme, LayoutFeatureConfig, LayoutMenuMode, LayoutState, MenuChangeEvent };

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@mediusinc/mng-commons-layout",
-  "version": "6.2.0",
+  "version": "7.0.0-rc.0",
   "peerDependencies": {
-    "@angular/animations": "^19.0.0",
-    "@angular/common": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/forms": "^19.0.0",
-    "@angular/platform-browser": "^19.0.0",
-    "@angular/router": "^19.0.0",
-    "@ngx-translate/core": "^16.0.4",
-    "primeng": "~19.0.9 || ~19.1.0",
-    "tailwindcss": "^3.4.0",
-    "@primeng/themes": "~19.0.9 || ~19.1.0",
-    "@mediusinc/mng-commons": "~6.2.0"
+    "@angular/animations": "^20.1.0",
+    "@angular/common": "^20.1.0",
+    "@angular/core": "^20.1.0",
+    "@angular/forms": "^20.1.0",
+    "@angular/platform-browser": "^20.1.0",
+    "@angular/router": "^20.1.0",
+    "@ngx-translate/core": "^17.0.0",
+    "primeng": "~20.0.0",
+    "tailwindcss": "^4.1.0",
+    "tailwindcss-primeui": "~0.6.0",
+    "@primeuix/themes": "~1.2.0",
+    "@mediusinc/mng-commons": "~7.0.0-rc.0"
   },
   "dependencies": {
     "tslib": "^2.8.1"
@@ -20,10 +21,15 @@
   "publishConfig": {
     "directory": "dist"
   },
-  "sideEffects": false,
-  "module": "fesm2022/mediusinc-mng-commons-layout.mjs",
-  "typings": "index.d.ts",
   "exports": {
+    "./tailwindcss-commons": {
+      "style": "./styles/tailwindcss-commons/index.css",
+      "default": "./styles/tailwindcss-commons/index.css"
+    },
+    "./atlantis": {
+      "scss": "./styles/atlantis/index.scss",
+      "default": "./styles/atlantis/index.scss"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -51,5 +57,8 @@
       "types": "./components/pages/main/lazy/index.d.ts",
       "default": "./fesm2022/mediusinc-mng-commons-layout-components-pages-main-lazy.mjs"
     }
-  }
+  },
+  "sideEffects": false,
+  "module": "fesm2022/mediusinc-mng-commons-layout.mjs",
+  "typings": "index.d.ts"
 }

package/styles/atlantis/index.scss

@@ -0,0 +1,16 @@
+// atlantis
+@use './layout/_sass_variables';
+@use './layout/variables/_common';
+@use './layout/variables/_light';
+@use './layout/variables/_dark';
+@use './layout/_main';
+@use './layout/_sidebar_slim';
+@use './layout/_sidebar_slim_plus';
+@use './layout/_sidebar_vertical';
+@use './layout/_sidebar_reveal';
+@use './layout/_sidebar_drawer';
+@use './layout/_responsive';
+@use './layout/_topbar';
+@use './layout/_breadcrumb';
+@use './layout/_content';
+@use './layout/_utils';

package/{scss → styles/atlantis}/layout/_content.scss

@@ -1,3 +1,3 @@
 .layout-content-wrapper {
     padding: 2rem;
-}
+}

package/{scss → styles/atlantis}/layout/_main.scss

@@ -14,8 +14,19 @@ body {
     margin: 0;
     min-height: 100%;
     color: var(--text-color);
-    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-feature-settings: "cv02","cv03","cv04","cv11";
+    font-family:
+        'Inter var',
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif,
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol';
+    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
     line-height: 1.4;
     font-variation-settings: normal;
     -webkit-font-smoothing: antialiased;
@@ -50,3 +61,7 @@ a {
         overflow-x: hidden;
     }
 }
+
+img {
+    max-width: none !important;
+}

package/{scss → styles/atlantis}/layout/_profile.scss

@@ -7,4 +7,4 @@
             padding-right: 2rem;
         }
     }
-}
+}

package/styles/atlantis/layout/_sass_variables.scss

@@ -0,0 +1 @@
+$breakpoint: 992px !default;

package/{scss → styles/atlantis}/layout/_sidebar_drawer.scss

@@ -59,7 +59,9 @@
                         border-radius: 50%;
                         border: 2px solid var(--primary-color);
                         background-color: transparent;
-                        transition: background-color var(--layout-section-transition-duration), transform 0.3s;
+                        transition:
+                            background-color var(--layout-section-transition-duration),
+                            transform 0.3s;
                     }
                 }
 
@@ -142,11 +144,11 @@
                                 width: 100%;
                                 max-width: none;
                                 img {
-                                    &:first-child{
+                                    &:first-child {
                                         width: 32px;
                                         max-width: none;
                                     }
-                                    &:last-child{
+                                    &:last-child {
                                         width: 142px;
                                         max-width: none;
                                     }

package/{scss → styles/atlantis}/layout/_sidebar_horizontal.scss

@@ -7,10 +7,10 @@
                 .topbar-menubutton {
                     display: none;
                 }
-                .layout-topbar-menu-section{
+                .layout-topbar-menu-section {
                     width: calc(100% - 320px);
                 }
-                .topbar-breadcrumb{
+                .topbar-breadcrumb {
                     display: none;
                 }
             }
@@ -32,7 +32,7 @@
                     }
                 }
 
-                .sidebar-header{
+                .sidebar-header {
                     padding: 0;
                     .app-logo {
                         .app-logo-normal {
@@ -44,7 +44,6 @@
                         }
                     }
                 }
-
             }
 
             .layout-menu {
@@ -74,7 +73,7 @@
                     > a {
                         display: flex;
                         align-items: center;
-                        padding: .75rem;
+                        padding: 0.75rem;
                         border-radius: 6px;
                         border: none;
                         cursor: pointer;
@@ -95,8 +94,8 @@
                         .layout-menuitem-text {
                             font-size: 0.875rem;
                             display: block;
-                            margin-left: .75rem;
-                            margin-right: .75rem;
+                            margin-left: 0.75rem;
+                            margin-right: 0.75rem;
                             white-space: nowrap;
                         }
 
@@ -112,18 +111,17 @@
                         min-width: 15rem;
                         background: var(--surface-overlay);
                         box-shadow: var(--sidebar-shadow);
-                        padding: .8rem;
+                        padding: 0.8rem;
                         border-radius: var(--border-radius);
                         max-height: 20rem;
                         overflow: auto;
                         z-index: 999;
 
                         a {
-                            padding-right: .5rem;
+                            padding-right: 0.5rem;
                             color: var(--text-color);
                             border-radius: var(--border-radius);
 
-
                             &:hover {
                                 background-color: var(--root-menu-item-hover-bg);
                             }

package/{scss → styles/atlantis}/layout/_sidebar_reveal.scss

@@ -29,8 +29,7 @@
                         .app-logo-small {
                             display: inline;
                             order: 1;
-                            margin-right: .5rem;
-
+                            margin-right: 0.5rem;
                         }
 
                         .app-logo-normal {
@@ -45,23 +44,23 @@
                         border-radius: 50%;
                         border: 2px solid var(--primary-color);
                         background-color: transparent;
-                        transition: background-color var(--layout-section-transition-duration),
-                        transform 0.3s;
+                        transition:
+                            background-color var(--layout-section-transition-duration),
+                            transform 0.3s;
                     }
                 }
                 .layout-menu-container {
                     overflow: hidden;
                 }
 
-
                 .layout-menu {
                     .layout-root-menuitem {
-                        >.layout-menuitem-root-text {
-                            >span {
+                        > .layout-menuitem-root-text {
+                            > span {
                                 margin-right: auto;
                             }
 
-                            >.layout-menuitem-root-icon {
+                            > .layout-menuitem-root-icon {
                                 display: block;
                                 margin-right: 0.125rem;
                             }
@@ -131,12 +130,10 @@
                         }
                     }
 
-
-
                     .layout-menu {
                         .layout-root-menuitem {
-                            >.layout-menuitem-root-text {
-                                >.layout-menuitem-root-icon {
+                            > .layout-menuitem-root-text {
+                                > .layout-menuitem-root-icon {
                                     display: none;
                                 }
                             }

package/{scss → styles/atlantis}/layout/_sidebar_slim.scss

@@ -10,7 +10,7 @@
             }
 
             .sidebar-header {
-                padding:  1.7rem 0;
+                padding: 1.7rem 0;
                 .app-logo {
                     display: flex;
                     align-items: center;
@@ -76,7 +76,6 @@
 
                         .layout-menuitem-icon {
                             font-size: 1.5rem;
-
                         }
 
                         .layout-menuitem-text {

package/{scss → styles/atlantis}/layout/_sidebar_slim_plus.scss

@@ -11,7 +11,7 @@
 
             .sidebar-header {
                 justify-content: center;
-                padding:  1.7rem 0;
+                padding: 1.7rem 0;
                 .app-logo {
                     display: flex;
                     justify-content: center;
@@ -93,7 +93,6 @@
                             color: var(--text-color);
                         }
 
-
                         &:hover {
                             background-color: var(--root-menu-item-hover-bg);
                         }

package/{scss → styles/atlantis}/layout/_sidebar_vertical.scss

@@ -117,7 +117,9 @@
                 cursor: pointer;
                 padding: 0.5rem 1rem;
                 border-radius: 8px;
-                transition: background-color var(--layout-section-transition-duration), box-shadow var(--layout-section-transition-duration);
+                transition:
+                    background-color var(--layout-section-transition-duration),
+                    box-shadow var(--layout-section-transition-duration);
 
                 .layout-menuitem-icon {
                     margin-right: 0.5rem;

package/{scss → styles/atlantis}/layout/_topbar.scss

@@ -115,7 +115,6 @@
                         width: 100%;
                         position: relative;
                         border-radius: 40px;
-                        padding: 9px;
                     }
 
                     span {

package/{scss → styles/atlantis}/layout/layout.scss

@@ -7,15 +7,15 @@
 @use './_sidebar_slim';
 @use './_sidebar_slim_plus';
 @use './_sidebar_vertical';
-@use './_sidebar_horizontal';
+//@use './_sidebar_horizontal';
 @use './_sidebar_reveal';
 @use './_sidebar_drawer';
 @use './_responsive';
 @use './_topbar';
 @use './_breadcrumb';
-@use './_profile';
+//@use './_profile';
 @use './_content';
-@use './_config';
+//@use './_config';
 @use './_utils';
 
 // mng layout

package/{scss → styles/atlantis}/layout/variables/_dark.scss

@@ -4,7 +4,7 @@
     --sidebar-border: 1px solid var(--surface-border);
     --card-shadow: none;
     --body-bg: var(--p-surface-950);
-    --body-image: url('/assets/images/mng/effect-ondark.svg');
+    --body-image: url('/images/effect-ondark.svg');
     --root-menu-item-hover-bg: rgba(255, 255, 255, 0.05);
-    --exception-pages-image: url('/assets/images/mng/exception-ondark.png');
+    --exception-pages-image: url('/images/pages/exception-ondark.png');
 }

package/{scss → styles/atlantis}/layout/variables/_light.scss

@@ -4,7 +4,7 @@
     --sidebar-border: 1px solid transparent;
     --card-shadow: 0px 4px 30px rgba(221, 224, 255, 0.54);
     --body-bg: var(--p-surface-50);
-    --body-image: url('/assets/images/mng/effect-onlight.svg');
+    --body-image: url('/images/effect-onlight.svg');
     --root-menu-item-hover-bg: rgba(68, 72, 109, 0.07);
-    --exception-pages-image: url('/assets/images/mng/pages/exception-onlight.png');
+    --exception-pages-image: url('/images/pages/exception-onlight.png');
 }

package/styles/tailwindcss-commons/atlantis/index.css

@@ -0,0 +1,20 @@
+/* Atlantis layout converted CSS - Tailwind v4 compatible */
+
+/* Variables */
+@import './variables/common.css';
+@import './variables/light.css';
+@import './variables/dark.css';
+
+/* Layout sections */
+@import './layout/main.css';
+@import './layout/sidebar-vertical.css';
+@import './layout/sidebar-slim.css';
+@import './layout/sidebar-slim-plus.css';
+@import './layout/sidebar-reveal.css';
+@import './layout/sidebar-drawer.css';
+@import './layout/responsive.css';
+@import './layout/topbar.css';
+@import './layout/breadcrumb.css';
+@import './layout/content.css';
+@import './layout/utils.css';
+@import './layout/profile.css';