@mediusinc/mng-commons-layout 7.4.0 → 8.0.0-rc.2

package/styles/tailwindcss-commons/atlantis/layout/sidebar-slim.css

@@ -1,147 +1,158 @@
 @variant media-lg {
-    .layout-container {
-        &.layout-slim {
-            .layout-topbar {
-                .topbar-menubutton {
-                    display: none;
-                }
+    .layout-slim {
+        .layout-topbar {
+            .topbar-menubutton {
+                display: none;
             }
+        }
 
-            .sidebar-header {
-                padding: 1.7rem 0;
-                .app-logo {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
+        .sidebar-header {
+            padding: 1.7rem 0;
+            .app-logo {
+                display: flex;
+                align-items: center;
+                justify-content: center;
 
-                    .app-logo-normal {
-                        display: none;
-                        img {
-                            height: 1.714rem;
-                        }
+                .app-logo-normal {
+                    display: none;
+                    img {
+                        height: 1.714rem;
                     }
+                }
 
-                    .app-logo-small {
-                        display: inline;
-                        img {
-                            height: 2.5rem;
-                        }
+                .app-logo-small {
+                    display: inline;
+                    img {
+                        height: 2.5rem;
                     }
                 }
             }
+        }
 
-            .layout-sidebar {
-                width: 5.857rem;
-                overflow: visible;
-                z-index: 999;
-                .layout-menu-container {
-                    overflow: auto;
+        .layout-sidebar {
+            width: 5.857rem;
+            overflow: visible;
+            z-index: 999;
+            .layout-menu-container {
+                overflow: auto;
 
-                    &::-webkit-scrollbar {
-                        display: none;
-                    }
+                &::-webkit-scrollbar {
+                    display: none;
                 }
             }
+        }
 
-            .layout-content-wrapper {
-                margin-left: 5.857rem;
+        .layout-content-wrapper {
+            margin-left: 5.857rem;
+        }
+
+        .layout-menu {
+            padding: 0 1rem;
+
+            ul {
+                display: none;
             }
 
-            .layout-menu {
-                padding: 0 1rem;
-                .layout-root-menuitem {
-                    > .layout-menuitem-root-text {
+            li.active-menuitem {
+                background-color: unset;
+
+                > ul {
+                    display: block;
+                }
+            }
+
+            .layout-root-menuitem {
+                > .layout-menuitem-root-text {
+                    display: none;
+                }
+
+                > a {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 12px;
+                    border: none;
+                    cursor: pointer;
+                    outline: none;
+                    margin: 0px;
+                    padding: 8px;
+                    width: 40px;
+                    height: 40px;
+                    margin: 0 auto 1rem auto;
+
+                    .layout-submenu-toggler {
                         display: none;
                     }
 
-                    > a {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        border-radius: 12px;
-                        border: none;
-                        cursor: pointer;
-                        outline: none;
-                        transition: background-color var(--layout-section-transition-duration);
-                        padding: 8px;
-                        width: 40px;
-                        height: 40px;
-                        margin: 0 auto 1rem auto;
-
-                        .layout-submenu-toggler {
-                            display: none;
-                        }
-
-                        .layout-menuitem-icon {
-                            font-size: 1.5rem;
-                        }
+                    .layout-menuitem-icon {
+                        font-size: 1.5rem;
+                    }
 
-                        .layout-menuitem-text {
-                            display: none;
-                        }
+                    .layout-menuitem-text {
+                        display: none;
+                    }
 
-                        &:hover {
-                            color: var(--primary-color-text);
-                            background-color: var(--primary-color);
-                        }
+                    &:hover {
+                        color: var(--primary-color-text);
+                        background-color: var(--primary-color);
                     }
+                }
 
-                    > ul {
-                        position: absolute;
-                        left: 5.857rem;
-                        top: 0;
-                        min-width: 15rem;
-                        background: var(--surface-ground);
+                > ul {
+                    position: fixed;
+                    left: 5.857rem;
+                    top: auto;
+                    min-width: 15rem;
+                    background: var(--surface-ground);
+                    border-radius: var(--border-radius);
+                    box-shadow: var(--sidebar-shadow);
+                    padding: 0.5rem;
+                    max-height: 20rem;
+                    overflow: auto;
+                    z-index: 999;
+
+                    a {
+                        padding-right: 0.5rem;
+                        color: var(--text-color);
                         border-radius: var(--border-radius);
-                        box-shadow: var(--sidebar-shadow);
-                        padding: 0.5rem;
-                        max-height: 20rem;
-                        overflow: auto;
-                        z-index: 999;
 
-                        a {
-                            padding-right: 0.5rem;
+                        .layout-menuitem-icon {
                             color: var(--text-color);
-                            border-radius: var(--border-radius);
+                        }
 
-                            .layout-menuitem-icon {
-                                color: var(--text-color);
-                            }
+                        &:hover {
+                            background-color: var(--root-menu-item-hover-bg);
+                        }
+                    }
 
-                            &:hover {
-                                background-color: var(--root-menu-item-hover-bg);
-                            }
+                    li {
+                        a {
+                            padding-left: 0.5rem;
                         }
 
                         li {
                             a {
-                                padding-left: 0.5rem;
+                                padding-left: 1rem;
                             }
 
                             li {
                                 a {
-                                    padding-left: 1rem;
+                                    padding-left: 1.5rem;
                                 }
 
                                 li {
                                     a {
-                                        padding-left: 1.5rem;
+                                        padding-left: 2rem;
                                     }
 
                                     li {
                                         a {
-                                            padding-left: 2rem;
+                                            padding-left: 2.5rem;
                                         }
 
                                         li {
                                             a {
-                                                padding-left: 2.5rem;
-                                            }
-
-                                            li {
-                                                a {
-                                                    padding-left: 3rem;
-                                                }
+                                                padding-left: 3rem;
                                             }
                                         }
                                     }

package/styles/tailwindcss-commons/atlantis/layout/sidebar-vertical.css

@@ -19,8 +19,9 @@
 
             .app-logo-normal {
                 display: inline;
+
                 img {
-                    height: 1.714rem;
+                    height: 2rem;
                     border: 0 none;
                 }
             }
@@ -39,6 +40,7 @@
             display: none;
         }
     }
+
     .layout-menu-container {
         overflow: auto;
         flex: 1;
@@ -52,20 +54,42 @@
 
         > li {
             margin-bottom: 2.25rem;
+
             &:first-child {
                 margin-top: 2rem;
             }
         }
+
         li {
             border-radius: 8px;
+
             a {
                 border-left: 8px solid transparent;
             }
+
+            &.active-menuitem {
+                background-color: var(--root-menu-item-hover-bg);
+
+                > a {
+                    border-left-color: var(--primary-color);
+                    background-color: var(--root-menu-item-hover-bg);
+
+                    .layout-submenu-toggler {
+                        transform: rotate(-180deg);
+                    }
+                }
+
+                > ul {
+                    max-height: 1000px;
+                    transition: max-height 1s ease-in-out;
+                }
+            }
         }
 
         .layout-root-menuitem {
             > div {
                 padding-left: 1.5rem;
+                padding-top: 0.5rem;
                 margin-bottom: 0.5rem;
                 font-size: 12px;
 
@@ -75,29 +99,21 @@
                     text-transform: uppercase;
                 }
             }
+
             > a {
                 display: none;
             }
+
+            > ul > li.active-menuitem {
+                background-color: var(--root-menu-item-hover-bg);
+            }
         }
 
         a {
             user-select: none;
 
-            &.active-menuitem {
-                > .layout-submenu-toggler {
-                    transform: rotate(-180deg);
-                }
-            }
-        }
-
-        li.active-menuitem {
-            background-color: var(--root-menu-item-hover-bg);
-            > a {
-                border-left-color: var(--primary-color);
-                background-color: var(--root-menu-item-hover-bg);
-                .layout-submenu-toggler {
-                    transform: rotate(-180deg);
-                }
+            &.active-menuitem > .layout-submenu-toggler {
+                transform: rotate(-180deg);
             }
         }
 
@@ -115,9 +131,7 @@
                 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: box-shadow var(--transition-duration);
 
                 .layout-menuitem-icon {
                     margin-right: 0.5rem;
@@ -126,7 +140,7 @@
                 .layout-submenu-toggler {
                     font-size: 75%;
                     margin-left: auto;
-                    transition: transform var(--layout-section-transition-duration);
+                    transition: transform var(--transition-duration);
                 }
 
                 &.active-route {
@@ -142,6 +156,8 @@
             ul {
                 overflow: hidden;
                 border-radius: var(--border-radius);
+                max-height: 0;
+                transition: max-height 0.45s cubic-bezier(0.86, 0, 0.07, 1);
 
                 li {
                     a {
@@ -168,10 +184,8 @@
                                         padding-left: 5.5rem;
                                     }
 
-                                    li {
-                                        a {
-                                            padding-left: 5rem;
-                                        }
+                                    li a {
+                                        padding-left: 5rem;
                                     }
                                 }
                             }

package/styles/tailwindcss-commons/atlantis/layout/topbar.css

@@ -16,6 +16,7 @@
         border-color: transparent;
     }
 }
+
 .layout-topbar {
     margin-bottom: 2rem;
     display: flex;
@@ -56,10 +57,10 @@
             &.topbar-item {
                 margin-left: 1.5rem;
                 display: inline-flex;
-                flex-shrink: 0;
                 align-items: center;
                 justify-content: center;
                 position: relative;
+                flex-shrink: 0;
 
                 img {
                     width: 2rem;
@@ -70,7 +71,7 @@
                     border-radius: 50%;
                     width: 2rem;
                     height: 2rem;
-                    transition: box-shadow var(--layout-section-transition-duration);
+                    transition: box-shadow var(--transition-duration);
 
                     &:focus {
                         box-shadow: var(--focus-ring-shadow);
@@ -83,7 +84,7 @@
                     right: 0;
                     display: none;
                     color: var(--text-color);
-                    background: var(--surface-ground);
+                    background: var(--surface-card);
 
                     &.active-topbar-menu {
                         display: block;
@@ -99,6 +100,7 @@
                 display: flex;
                 align-items: center;
                 flex-shrink: 0;
+                overflow: hidden;
 
                 .topbar-searchbutton {
                     display: flex;
@@ -111,15 +113,20 @@
                     visibility: hidden;
                     transition: 400ms cubic-bezier(0.86, 0, 0.07, 1);
 
-                    .p-inputtext {
+                    > div {
                         width: 100%;
-                        position: relative;
-                        border-radius: 40px;
-                    }
 
-                    span {
-                        font-size: 18px;
-                        margin-top: -9px;
+                        .p-inputtext {
+                            width: 100%;
+                            position: relative;
+                            border-radius: 40px;
+                            padding: 9px;
+                        }
+
+                        span {
+                            font-size: 18px;
+                            margin-top: -9px;
+                        }
                     }
                 }
 
@@ -142,6 +149,7 @@
                         i {
                             display: block;
                         }
+
                         input {
                             border-radius: var(--border-radius);
                         }
@@ -201,3 +209,19 @@
         clip-path: inset(0 0 98% 0);
     }
 }
+
+.layout-horizontal .layout-topbar .topbar-menu li .topbar-search {
+    position: relative;
+    width: 2rem;
+    overflow: visible;
+
+    .topbar-searchbutton {
+        position: absolute;
+        right: 0;
+    }
+
+    .search-input-wrapper {
+        position: absolute;
+        right: 0;
+    }
+}

package/types/mediusinc-mng-commons-layout-components.d.ts

@@ -1,11 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { Type, OnDestroy, Injector, ElementRef } from '@angular/core';
+import { Type, OnDestroy, AfterViewInit, Injector, ElementRef } from '@angular/core';
 import * as _mediusinc_mng_commons_layout from '@mediusinc/mng-commons-layout';
 import { LayoutService, MenuService, LayoutMenuMode } from '@mediusinc/mng-commons-layout';
 import { CommonsService, InternalCommonsMenuItem, ColorScheme, IUser, VersionConfigType, VersionConfig } from '@mediusinc/mng-commons/core';
-import { MenuItem } from 'primeng/api';
+import { MenuItem } from '@openng/optimus-ui/api';
 import * as _angular_router from '@angular/router';
-import { AnimationEvent } from '@angular/animations';
 import { TranslateService } from '@ngx-translate/core';
 import * as _angular_platform_browser from '@angular/platform-browser';
 
@@ -59,7 +58,7 @@ declare class MenuComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuComponent, "mng-menu", never, {}, {}, never, never, true, never>;
 }
 
-declare class MenuItemComponent {
+declare class MenuItemComponent implements AfterViewInit {
     private readonly menuService;
     private readonly permissionService;
     readonly layout: LayoutService;
@@ -72,11 +71,15 @@ declare class MenuItemComponent {
     private menuChangeEvents;
     active: _angular_core.Signal<boolean>;
     visible: _angular_core.Signal<boolean>;
-    submenuAnimation: _angular_core.Signal<"collapsed" | "expanded" | "hidden" | "visible">;
+    protected isTooltipDisabled: _angular_core.Signal<boolean>;
+    protected initialized: _angular_core.WritableSignal<boolean>;
+    private menuHoverActive;
+    protected submenuVisible: _angular_core.Signal<boolean>;
     constructor();
+    ngAfterViewInit(): void;
     itemClick(event: Event): void;
-    onSubmenuAnimated(event: AnimationEvent): void;
     onChildVisibleChange(visible: boolean, item: InternalCommonsMenuItem, idx: number): void;
+    protected onMouseEnter(): void;
     private calculatePosition;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuItemComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuItemComponent, "[mng-menuitem]", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "root": { "alias": "root"; "required": false; "isSignal": true; }; }, { "visibleChange": "visibleChange"; }, never, never, true, never>;

package/types/mediusinc-mng-commons-layout.d.ts

@@ -1,7 +1,7 @@
 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 { InjectionToken, Type } from '@angular/core';
+import { MenuItem } from '@openng/optimus-ui/api';
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
 
@@ -196,11 +196,11 @@ declare class VersionService {
  */
 declare function withLayout(config?: LayoutFeatureConfig): CommonsFeature;
 /**
- * Configures PrimeNG theme dark mode selector.
+ * Configures Optimus UI theme dark mode selector.
  */
-declare const primeThemeDarkModeOpts: {
+declare const optimusThemeDarkModeOpts: {
     darkModeSelector: string;
 };
 
-export { COMMONS_LAYOUT_FEATURE_CONFIG_IT, LayoutService, MenuService, VersionService, prepareMenuItemsToInternal, primeThemeDarkModeOpts, withLayout };
+export { COMMONS_LAYOUT_FEATURE_CONFIG_IT, LayoutService, MenuService, VersionService, optimusThemeDarkModeOpts, prepareMenuItemsToInternal, withLayout };
 export type { ColorScheme, LayoutFeatureConfig, LayoutMenuMode, LayoutState, MenuChangeEvent };

package/styles/atlantis/layout/layout.scss

@@ -1,32 +0,0 @@
-@use './_sass_variables';
-@use './mng/variables/mng-variables-common';
-@use './variables/_common';
-@use './variables/_light';
-@use './variables/_dark';
-@use './_main';
-@use './_sidebar_slim';
-@use './_sidebar_slim_plus';
-@use './_sidebar_vertical';
-//@use './_sidebar_horizontal';
-@use './_sidebar_reveal';
-@use './_sidebar_drawer';
-@use './_responsive';
-@use './_topbar';
-@use './_breadcrumb';
-//@use './_profile';
-@use './_content';
-//@use './_config';
-@use './_utils';
-
-// mng layout
-@use './mng/layout/mng_layout';
-@use './mng/layout/mng_layout_footer';
-@use './mng/layout/mng_layout_menu';
-@use './mng/layout/mng_layout_topbar';
-@use './mng/layout/mng_sidebar_vertical';
-
-// mng theme (primeNG directly)
-@use './mng/theme/mng_theme_button';
-@use './mng/theme/mng_theme_dialog';
-@use './mng/theme/mng_theme_toast';
-@use './mng/theme/mng_theme_toggleswitch';