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

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

@@ -0,0 +1,203 @@
+.layout-rightmenu-button {
+    background: linear-gradient(271.89deg, rgba(70, 82, 104, 1), rgba(115, 130, 161, 1)) !important;
+    border-radius: 6px 0px 0px 6px !important;
+    border-color: transparent !important;
+    border-left: 0 none !important;
+    box-shadow: 0px 0px 10px rgb(15 139 253 / 25%) !important;
+    right: 0;
+    color: #fff !important;
+
+    span {
+        font-weight: 400 !important;
+    }
+
+    &:enabled:hover {
+        background: linear-gradient(271.89deg, rgba(70, 82, 104, 0.5), rgba(115, 130, 161, 0.5));
+        border-color: transparent;
+    }
+}
+.layout-topbar {
+    margin-bottom: 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .topbar-start {
+        display: flex;
+        align-items: center;
+        position: relative;
+        z-index: 999;
+
+        .topbar-menubutton {
+            margin-right: 1.5rem;
+            width: 2.5rem;
+            height: 2.5rem;
+
+            i {
+                font-size: 1.25rem;
+            }
+        }
+    }
+
+    .topbar-menu {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin: 0;
+        padding: 0 1.15rem 0 0.85rem;
+        padding-right: 0;
+        list-style: none;
+        flex-grow: 1;
+        margin-right: -2rem;
+
+        li {
+            margin-left: 1.5rem;
+
+            &.topbar-item {
+                margin-left: 1.5rem;
+                display: inline-flex;
+                flex-shrink: 0;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+
+                img {
+                    width: 2rem;
+                    height: 2rem;
+                }
+
+                button {
+                    border-radius: 50%;
+                    width: 2rem;
+                    height: 2rem;
+                    transition: box-shadow var(--layout-section-transition-duration);
+
+                    &:focus {
+                        box-shadow: var(--focus-ring-shadow);
+                    }
+                }
+
+                ul {
+                    position: absolute;
+                    bottom: -9.4rem;
+                    right: 0;
+                    display: none;
+                    color: var(--text-color);
+                    background: var(--surface-ground);
+
+                    &.active-topbar-menu {
+                        display: block;
+                    }
+
+                    a {
+                        color: var(--text-color);
+                    }
+                }
+            }
+
+            .topbar-search {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+
+                .topbar-searchbutton {
+                    display: flex;
+                }
+
+                .search-input-wrapper {
+                    position: relative;
+                    width: 0;
+                    opacity: 0;
+                    visibility: hidden;
+                    transition: 400ms cubic-bezier(0.86, 0, 0.07, 1);
+
+                    .p-inputtext {
+                        width: 100%;
+                        position: relative;
+                        border-radius: 40px;
+                    }
+
+                    span {
+                        font-size: 18px;
+                        margin-top: -9px;
+                    }
+                }
+
+                &.topbar-search-active {
+                    .topbar-searchbutton {
+                        opacity: 0;
+                        display: none;
+                        pointer-events: none;
+                        cursor: default;
+                        transition: opacity 0.1s;
+                        transition-delay: 0.1s;
+                    }
+
+                    .search-input-wrapper {
+                        width: 190px;
+                        opacity: 1;
+                        visibility: visible;
+                        border-radius: var(--border-radius);
+
+                        i {
+                            display: block;
+                        }
+                        input {
+                            border-radius: var(--border-radius);
+                        }
+                    }
+                }
+            }
+        }
+
+        .config-button {
+            position: relative;
+
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                inset: 0;
+                border: 1px solid var(--primary-color);
+                transition: all 0.5s;
+                animation: clippath 10s infinite linear;
+                border-radius: 50%;
+                opacity: 1;
+            }
+
+            &::after {
+                animation: clippath 10s infinite -5s linear;
+            }
+        }
+    }
+}
+
+@keyframes clippath {
+    0% {
+        clip-path: inset(0 0 98% 0);
+    }
+    12.5% {
+        clip-path: inset(0 0 60% 0);
+    }
+    25% {
+        clip-path: inset(0 98% 0 0);
+    }
+    37.5% {
+        clip-path: inset(0 60% 0 0);
+    }
+    50% {
+        clip-path: inset(98% 0 0 0);
+    }
+    62.5% {
+        clip-path: inset(60% 0 0 0);
+    }
+    75% {
+        clip-path: inset(0 0 0 98%);
+    }
+    87.5% {
+        clip-path: inset(0 0 0 60%);
+    }
+    100% {
+        clip-path: inset(0 0 98% 0);
+    }
+}

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

@@ -0,0 +1,29 @@
+.card {
+    border-radius: 8px;
+    background: var(--surface-card);
+    padding: 16px;
+    box-sizing: border-box;
+    margin-bottom: 16px;
+
+    .card-header {
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .card-subtitle {
+        color: var(--text-color-secondary);
+        font-size: 0.857rem;
+        font-weight: 500;
+        margin: -1rem 0 1rem 0;
+    }
+}
+
+.p-toast {
+    &.p-toast-top-right,
+    &.p-toast-top-left,
+    &.p-toast-top-center {
+        top: 70px !important;
+    }
+}

package/styles/tailwindcss-commons/atlantis/variables/common.css

@@ -0,0 +1,15 @@
+:root {
+    --primary-color: var(--p-primary-color);
+    --primary-color-text: var(--p-primary-contrast-color);
+    --text-color: var(--p-text-color);
+    --text-color-secondary: var(--p-text-muted-color);
+    --surface-border: var(--p-content-border-color);
+    --surface-card: var(--p-content-background);
+    --surface-hover: var(--p-content-hover-background);
+    --surface-overlay: var(--p-overlay-popover-background);
+    --transition-duration: var(--p-transition-duration);
+    --maskbg: var(--p-mask-background);
+    --border-radius: var(--p-content-border-radius);
+    --layout-section-transition-duration: 0.2s;
+    --focus-ring-shadow: var(--p-focus-ring-shadow);
+}

package/styles/tailwindcss-commons/atlantis/variables/dark.css

@@ -0,0 +1,10 @@
+:root[class*='app-dark'] {
+    --surface-ground: var(--p-surface-950);
+    --sidebar-shadow: none;
+    --sidebar-border: 1px solid var(--surface-border);
+    --card-shadow: none;
+    --body-bg: var(--p-surface-950);
+    --body-image: url('/images/effect-ondark.svg');
+    --root-menu-item-hover-bg: rgba(255, 255, 255, 0.05);
+    --exception-pages-image: url('/images/pages/exception-ondark.png');
+}

package/styles/tailwindcss-commons/atlantis/variables/light.css

@@ -0,0 +1,10 @@
+:root {
+    --surface-ground: var(--p-surface-100);
+    --sidebar-shadow: 0px 4px 50px #d9ddfc;
+    --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('/images/effect-onlight.svg');
+    --root-menu-item-hover-bg: rgba(68, 72, 109, 0.07);
+    --exception-pages-image: url('/images/pages/exception-onlight.png');
+}

package/styles/tailwindcss-commons/index.css

@@ -0,0 +1,14 @@
+@import './atlantis/index.css';
+@import './setup/breakpoints.css';
+@import './setup/dark.css';
+@import './setup/variables.css';
+@import './styles/dialog.css';
+@import './styles/button.css';
+@import './styles/dialog.css';
+@import './styles/footer.css';
+@import './styles/layout.css';
+@import './styles/menu.css';
+@import './styles/sidebar.css';
+@import './styles/toast.css';
+@import './styles/toggleswitch.css';
+@import './styles/topbar.css';

package/styles/tailwindcss-commons/index_wo_atlantis.css

@@ -0,0 +1,13 @@
+@import './setup/breakpoints.css';
+@import './setup/dark.css';
+@import './setup/variables.css';
+@import './styles/dialog.css';
+@import './styles/button.css';
+@import './styles/dialog.css';
+@import './styles/footer.css';
+@import './styles/layout.css';
+@import './styles/menu.css';
+@import './styles/sidebar.css';
+@import './styles/toast.css';
+@import './styles/toggleswitch.css';
+@import './styles/topbar.css';

package/styles/tailwindcss-commons/setup/breakpoints.css

@@ -0,0 +1,15 @@
+@theme {
+    --breakpoint-sm: 576px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 992px;
+    --breakpoint-xl: 1200px;
+    --breakpoint-2xl: 1920px;
+}
+
+/* media queries */
+@custom-variant media-sm (@media screen and (min-width: 576px));
+@custom-variant media-md (@media screen and (min-width: 768px));
+@custom-variant media-lg (@media screen and (min-width: 992px));
+@custom-variant media-lg-max (@media screen and (max-width: 991px));
+@custom-variant media-xl (@media screen and (min-width: 1200px));
+@custom-variant media-2xl (@media screen and (min-width: 1920px));

package/styles/tailwindcss-commons/setup/dark.css

@@ -0,0 +1,2 @@
+/* dark theme */
+@custom-variant dark (&:where(.app-dark, .app-dark *));

package/{scss/layout/mng/variables/_mng-variables-common.scss → styles/tailwindcss-commons/setup/variables.css}

@@ -19,4 +19,13 @@
     --mng-action-button-margin-x: 0.15rem;
     --mng-action-button-margin-y: 0.15rem;
     --mng-tag-secondary-outlined-border: var(--p-content-border-color);
+
+    --body-image: url('/assets/images/mng/effect-onlight.svg');
+    --exception-pages-image: url('/assets/images/mng/pages/exception-onlight.png');
+}
+
+:root[class*='app-dark'] {
+    --body-image: url('/assets/images/mng/effect-ondark.svg');
+    --root-menu-item-hover-bg: rgba(255, 255, 255, 0.05);
+    --exception-pages-image: url('/assets/images/mng/pages/exception-ondark.png');
 }

package/{scss/layout/mng/theme/_mng_theme_button.scss → styles/tailwindcss-commons/styles/button.css}

@@ -5,14 +5,14 @@
         padding-inline: var(--mng-button-xs-padding-x);
     }
 
-    // double that, just in case
+    /*double that, just in case*/
     &.mng-button-sm {
         font-size: var(--p-button-sm-font-size);
         padding-block: var(--p-button-sm-padding-y);
         padding-inline: var(--p-button-sm-padding-x);
     }
 
-    // double that, just in case
+    /*double that, just in case*/
     &.mng-button-lg {
         font-size: var(--p-button-lg-font-size);
         padding-block: var(--p-button-lg-padding-y);

package/{scss/layout/mng/theme/_mng_theme_dialog.scss → styles/tailwindcss-commons/styles/dialog.css}

@@ -13,11 +13,15 @@
         height: 90vh;
         width: 90vw;
 
-        @media (screen(md)) {
+        .p-dialog-content {
+            flex-grow: 1;
+        }
+
+        @variant media-md {
             width: 80vw;
         }
 
-        @media (screen(lg)) {
+        @variant media-lg {
             width: 60vw;
         }
 
@@ -30,11 +34,11 @@
             height: 95vh;
             width: 90vw;
 
-            @media (screen(md)) {
+            @variant media-md {
                 width: 85vw;
             }
 
-            @media (screen(lg)) {
+            @variant media-lg {
                 width: 80vw;
             }
         }
@@ -43,15 +47,15 @@
             width: 90vw;
             height: 80vh;
 
-            @media (screen(sm)) {
+            @variant media-sm {
                 width: 80vw;
             }
 
-            @media (screen(md)) {
+            @variant media-md {
                 width: 70vw;
             }
 
-            @media (screen(lg)) {
+            @variant media-lg {
                 width: 50vw;
                 height: 70vh;
             }
@@ -61,19 +65,19 @@
             width: 90vw;
             height: initial;
 
-            @media (screen(sm)) {
+            @variant media-sm {
                 width: 70vw;
             }
 
-            @media (screen(md)) {
+            @variant media-md {
                 width: 60vw;
             }
 
-            @media (screen(lg)) {
+            @variant media-lg {
                 width: 45vw;
             }
 
-            @media (screen(2xl)) {
+            @variant media-2xl {
                 width: 30vw;
             }
         }
@@ -83,15 +87,15 @@
             height: initial;
             max-height: 90vh;
 
-            @media (screen(sm)) {
+            @variant media-sm {
                 width: 90vw;
             }
 
-            @media (screen(md)) {
+            @variant media-md {
                 width: 80vw;
             }
 
-            @media (screen(lg)) {
+            @variant media-lg {
                 width: 70vw;
             }
         }
@@ -170,25 +174,25 @@
         border-radius: 0 !important;
     }
 
-    &-info {
+    &.mng-message-detail-dialog-info {
         .p-dialog-header,
         .p-dialog-content {
             border-left-color: var(--p-toast-info-color);
         }
     }
-    &-success {
+    &.mng-message-detail-dialog-success {
         .p-dialog-header,
         .p-dialog-content {
             border-left-color: var(--p-toast-success-color);
         }
     }
-    &-warn {
+    &.mng-message-detail-dialog-warn {
         .p-dialog-header,
         .p-dialog-content {
             border-left-color: var(--p-toast-warn-color);
         }
     }
-    &-error {
+    &.mng-message-detail-dialog-error {
         .p-dialog-header,
         .p-dialog-content {
             border-left-color: var(--p-toast-error-color);

package/styles/tailwindcss-commons/styles/tailwind.css

@@ -0,0 +1,44 @@
+@custom-variant dark (&:where(.app-dark, .app-dark *));
+
+@theme {
+    --breakpoint-sm: 576px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 992px;
+    --breakpoint-xl: 1200px;
+    --breakpoint-2xl: 1920px;
+}
+
+@layer base {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply font-bold mb-4 mt-0;
+    }
+    h1 {
+        @apply text-3xl;
+    }
+    h2 {
+        @apply text-2xl;
+    }
+    h3 {
+        @apply text-xl;
+    }
+    h4 {
+        @apply text-lg;
+    }
+    h5 {
+        @apply text-base;
+    }
+    h6 {
+        @apply text-base;
+    }
+}
+
+@custom-variant media-sm (@media screen and (min-width: 576px));
+@custom-variant media-md (@media screen and (min-width: 768px));
+@custom-variant media-lg (@media screen and (min-width: 992px));
+@custom-variant media-xl (@media screen and (min-width: 1200px));
+@custom-variant media-2xl (@media screen and (min-width: 1920px));

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

@@ -0,0 +1,24 @@
+.layout-topbar .topbar-menu li.topbar-item {
+    a {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-select-list li.p-select-option {
+        margin-left: 0;
+    }
+
+    ul {
+        padding: 8px 0 8px 0;
+        background: var(--surface-card);
+        box-shadow: var(--p-overlay-navigation-shadow);
+
+        & li {
+            margin-left: 0;
+
+            a {
+                padding: 10px;
+            }
+        }
+    }
+}

package/version-info.json

@@ -1,11 +1,11 @@
 {
     "name": "@mediusinc/mng-commons-layout",
-    "version": "6.2.0",
-    "tag": "v6.2.0",
-    "distance": 0,
-    "hash": "6d7120ff",
+    "version": "7.0.0-rc.0",
+    "tag": "v6.2.0-rc.0",
+    "distance": 6,
+    "hash": "ce245f4b",
     "dirty": true,
-    "semver": "6.2.0+0.g6d7120ff.dirty",
+    "semver": "6.2.0-rc.0+6.gce245f4b.dirty",
     "buildTimestamp": null,
-    "raw": "v6.2.0-6d7120ff-dirty"
+    "raw": "v6.2.0-rc.0-6-ce245f4b-dirty"
 }

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

@@ -1,9 +0,0 @@
-import { MenuItem } from 'primeng/api';
-import * as i0 from "@angular/core";
-export declare class BreadcrumbComponent {
-    private commons;
-    mappedBreadcrumbs: import("@angular/core").Signal<MenuItem[]>;
-    private mapMenuItem;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbComponent, "mng-breadcrumb", never, {}, {}, never, never, true, never>;
-}

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

@@ -1,13 +0,0 @@
-import { Type } from '@angular/core';
-import { LayoutService } from '@mediusinc/mng-commons-layout';
-import { CommonsService } from '@mediusinc/mng-commons/core';
-import * as i0 from "@angular/core";
-export declare class FooterComponent {
-    private config;
-    readonly layout: LayoutService;
-    commons: CommonsService;
-    currentYear: import("@angular/core").WritableSignal<number>;
-    versionComponent: import("@angular/core").WritableSignal<Type<any> | undefined>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FooterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FooterComponent, "mng-footer", never, {}, {}, never, never, true, never>;
-}

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

@@ -1,23 +0,0 @@
-import { OnDestroy, Type } from '@angular/core';
-import { LayoutService } from '@mediusinc/mng-commons-layout';
-import * as i0 from "@angular/core";
-export declare class MainLayoutComponent implements OnDestroy {
-    private readonly config;
-    readonly layout: LayoutService;
-    private readonly menuService;
-    private readonly renderer;
-    private appTopbar;
-    readonly ripple: import("@angular/core").WritableSignal<boolean>;
-    topbarComponent: import("@angular/core").WritableSignal<Type<any> | undefined>;
-    breadcrumbsComponent: import("@angular/core").WritableSignal<Type<any> | undefined>;
-    footerComponent: import("@angular/core").WritableSignal<Type<any> | undefined>;
-    useNotificationWrapper: import("@angular/core").WritableSignal<boolean>;
-    private menuOutsideClickListener;
-    constructor();
-    blockBodyScroll(): void;
-    unblockBodyScroll(): void;
-    hideMenu(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MainLayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MainLayoutComponent, "mng-main-layout", never, {}, {}, never, never, true, never>;
-}

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

@@ -1,26 +0,0 @@
-import { AnimationEvent } from '@angular/animations';
-import { LayoutService } from '@mediusinc/mng-commons-layout';
-import { InternalCommonsMenuItem } from '@mediusinc/mng-commons/core';
-import * as i0 from "@angular/core";
-export declare class MenuItemComponent {
-    private readonly menuService;
-    private readonly permissionService;
-    readonly layout: LayoutService;
-    item: import("@angular/core").InputSignal<InternalCommonsMenuItem>;
-    root: import("@angular/core").InputSignal<boolean>;
-    visibleChange: import("@angular/core").OutputEmitterRef<boolean>;
-    private submenuElRef;
-    isPermitted: import("@angular/core").Signal<boolean | undefined>;
-    isVisibleFromItemSettings: import("@angular/core").Signal<boolean | undefined>;
-    private menuChangeEvents;
-    active: import("@angular/core").Signal<boolean>;
-    visible: import("@angular/core").Signal<boolean>;
-    submenuAnimation: import("@angular/core").Signal<"collapsed" | "expanded" | "hidden" | "visible">;
-    constructor();
-    itemClick(event: Event): void;
-    onSubmenuAnimated(event: AnimationEvent): void;
-    onChildVisibleChange(visible: boolean, item: InternalCommonsMenuItem, idx: number): void;
-    private calculatePosition;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemComponent, never>;
-    static ɵcmp: i0.ɵɵ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/components/lib/components/menu.component.d.ts

@@ -1,12 +0,0 @@
-import { MenuService } from '@mediusinc/mng-commons-layout';
-import * as i0 from "@angular/core";
-export declare class MenuComponent {
-    private readonly route;
-    private readonly config;
-    private readonly layout;
-    readonly menuService: MenuService;
-    routeData: import("@angular/core").Signal<import("@angular/router").Data | undefined>;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<MenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuComponent, "mng-menu", never, {}, {}, never, never, true, never>;
-}