sapenlinea-components 0.13.102 → 0.13.103
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8558,11 +8558,11 @@ class Sidebar {
|
|
|
8558
8558
|
return !!item.action && item.action === this.dangerAction();
|
|
8559
8559
|
}
|
|
8560
8560
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8561
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Sidebar, isStandalone: true, selector: "lib-sidebar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, autoNavigate: { classPropertyName: "autoNavigate", publicName: "autoNavigate", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigate: { classPropertyName: "closeOnNavigate", publicName: "closeOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, hoverExpand: { classPropertyName: "hoverExpand", publicName: "hoverExpand", isSignal: true, isRequired: false, transformFunction: null }, hoverExpandDelay: { classPropertyName: "hoverExpandDelay", publicName: "hoverExpandDelay", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, topOffset: { classPropertyName: "topOffset", publicName: "topOffset", isSignal: true, isRequired: false, transformFunction: null }, dangerAction: { classPropertyName: "dangerAction", publicName: "dangerAction", isSignal: true, isRequired: false, transformFunction: null }, dangerItemColor: { classPropertyName: "dangerItemColor", publicName: "dangerItemColor", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", itemClick: "itemClick", navigate: "navigate", userAction: "userAction" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapePress()" } }, viewQueries: [{ propertyName: "menuScroll", first: true, predicate: ["menuScroll"], descendants: true }], ngImport: i0, template: "<aside\n class=\"sidebar\"\n [class.expanded]=\"expanded()\"\n [style.--sidebar-top]=\"topOffset()\"\n [style.--sidebar-expanded-width]=\"expandedWidth()\"\n [style.--sidebar-collapsed-width]=\"collapsedWidth()\"\n (mouseenter)=\"onSidebarMouseEnter()\"\n (mouseleave)=\"onSidebarMouseLeave()\"\n (click)=\"$event.stopPropagation()\"\n>\n <div class=\"menu-toggle\">\n @if (expanded()) {\n <i-lucide\n [name]=\"icons.close\"\n size=\"24\"\n [color]=\"iconColor()\"\n (click)=\"toggleSidebar()\"\n />\n } @else {\n <i-lucide\n [name]=\"icons.menu\"\n size=\"24\"\n [color]=\"iconColor()\"\n (click)=\"toggleSidebar(); $event.stopPropagation()\"\n />\n }\n </div>\n\n <div #menuScroll class=\"sidebar-menu\" [attr.data-expanded]=\"expanded()\">\n @for (item of menuItems(); track item.id) {\n <div\n class=\"sidebar-item-container\"\n [class.collapsed]=\"!expanded()\"\n [attr.data-active]=\"item.isActive ? 'true' : null\"\n [attr.data-label]=\"!expanded() ? item.label : null\"\n >\n <div\n class=\"sidebar-item\"\n [class.active]=\"item.isActive\"\n [class.has-children]=\"isExpandable(item)\"\n [class.is-leaf]=\"!isExpandable(item)\"\n [class.open]=\"openItems()[item.id]\"\n (click)=\"onMainItemClick(item, $index); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"sidebar-item-icon\"\n [value]=\"item.icon ?? ''\"\n size=\"md\"\n [color]=\"iconColor()\"\n />\n\n @if (expanded()) {\n <span\n class=\"menu-label\"\n [class.menu-label--with-chevron]=\"isExpandable(item)\"\n >{{ item.label }}</span>\n\n @if (isExpandable(item)) {\n <i-lucide\n [name]=\"icons.chevronDown\"\n size=\"18\"\n [color]=\"iconColor()\"\n class=\"submenu-arrow\"\n [class.open]=\"openItems()[item.id]\"\n />\n }\n }\n </div>\n\n @if (isExpandable(item) && expanded()) {\n <div\n class=\"submenu-panel\"\n [class.submenu-panel--open]=\"!!openItems()[item.id]\"\n >\n <div class=\"submenu-panel__inner\">\n <div class=\"submenu\">\n @for (child of item.children; track child.id; let childIndex = $index) {\n @if (isExpandable(child)) {\n <div class=\"submenu-group\">\n <div\n class=\"submenu-item submenu-item--parent\"\n [class.active]=\"child.isActive\"\n [class.open]=\"isChildOpen(child, item)\"\n (click)=\"onChildItemClick(child, item, childIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"child.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ child.label }}</span>\n <i-lucide\n [name]=\"icons.chevronDown\"\n size=\"16\"\n [color]=\"iconColor()\"\n class=\"submenu-arrow submenu-arrow--nested\"\n [class.open]=\"isChildOpen(child, item)\"\n />\n </div>\n\n <div\n class=\"submenu-panel submenu-panel--nested\"\n [class.submenu-panel--open]=\"isChildOpen(child, item)\"\n >\n <div class=\"submenu-panel__inner\">\n <div class=\"submenu submenu--nested\">\n @for (grandchild of child.children; track grandchild.id; let grandchildIndex = $index) {\n <div\n class=\"submenu-item submenu-item--leaf\"\n [class.active]=\"grandchild.isActive\"\n (click)=\"onGrandchildItemClick(grandchild, child, item, grandchildIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"grandchild.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ grandchild.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"submenu-item submenu-item--leaf\"\n [class.active]=\"child.isActive\"\n (click)=\"onChildItemClick(child, item, childIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"child.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ child.label }}</span>\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n\n @if (userMenuItems().length) {\n <div class=\"sidebar-divider\" aria-hidden=\"true\"></div>\n <div class=\"user-section\">\n <div class=\"user-menu\">\n @for (item of userMenuItems(); track item.id; let last = $last) {\n <div\n class=\"user-menu-container\"\n [class.collapsed]=\"!expanded()\"\n [attr.data-label]=\"!expanded() ? item.label : null\"\n >\n <div\n class=\"user-menu-item\"\n (click)=\"onUserItemClick(item, $index); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"user-menu-item-icon\"\n [value]=\"item.icon ?? ''\"\n size=\"md\"\n [color]=\"isDangerUserItem(item) ? dangerItemColor() : iconColor()\"\n />\n @if (expanded()) {\n <span\n class=\"menu-label\"\n [class.last-item]=\"isDangerUserItem(item)\"\n [style.color]=\"isDangerUserItem(item) ? dangerItemColor() : null\"\n >{{ item.label }}</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n</aside>\n", styles: [".sidebar{--sidebar-item-width: calc(var(--sidebar-expanded-width, 280px) - 16px);position:fixed;left:0;top:var(--sidebar-top, 75px);height:calc(100vh - var(--sidebar-top, 75px));width:var(--sidebar-collapsed-width, 70px);background-color:#fafae8;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;transition:all .5s cubic-bezier(.4,0,.2,1);will-change:width,transform;overflow:hidden}.sidebar.expanded{width:var(--sidebar-expanded-width, 280px);background-color:#ededdf;border-radius:20px;transition:all .5s cubic-bezier(.4,0,.2,1);z-index:1}.sidebar-item,.user-menu-item,.menu-label{transition:width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease}.sidebar-item-icon,.user-menu-item-icon,.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{transition:all .5s cubic-bezier(.4,0,.2,1)}.sidebar-item-icon,.user-menu-item-icon{position:absolute;left:28px;transform:translate(-50%);display:flex;align-items:center;justify-content:center;transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1)}.menu-toggle{position:relative;height:64px;min-height:64px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;width:100%!important}.menu-toggle i-lucide:hover{background-color:#e3e3d1;border-radius:10px}.menu-toggle i-lucide{position:absolute;left:35px!important;transform:translate(-50%);padding:10px;cursor:pointer}.sidebar-menu{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;width:100%;transition:padding .5s cubic-bezier(.4,0,.2,1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#a8a88c transparent}.sidebar-menu::-webkit-scrollbar{width:5px}.sidebar-menu::-webkit-scrollbar-track{background:transparent;margin:6px 0}.sidebar-menu::-webkit-scrollbar-thumb{background-color:#a8a88c;border-radius:999px}.sidebar-menu::-webkit-scrollbar-thumb:hover{background-color:#8f8f75}.sidebar:not(.expanded) .sidebar-menu{overflow:hidden;scrollbar-width:none}.sidebar:not(.expanded) .sidebar-menu::-webkit-scrollbar{display:none}.sidebar-item-container{width:100%;padding:4px 8px;margin-bottom:8px;cursor:pointer;position:relative;transition:padding .5s cubic-bezier(.4,0,.2,1)}.sidebar.expanded .sidebar-item-container{padding:0 8px}.sidebar-item{height:56px;width:56px;display:flex;align-items:center;text-decoration:none;color:#0000;transition:all .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease;overflow:hidden;border-radius:50%;position:relative}.sidebar.expanded .sidebar-item{width:var(--sidebar-item-width);border-radius:24px;height:50px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.sidebar-item-icon{position:absolute;left:28px;transform:translate(-50%);transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1)}.sidebar-item-container:hover .sidebar-item:not(.active){background-color:#e3e3d1}.sidebar-item.active:hover{background-color:#d0d873!important}.sidebar-item.active{background-color:#dee58f;color:#61661f}.menu-label{position:absolute;left:55px;right:14px;white-space:nowrap;font-size:14px;font-weight:500;opacity:0;transform:translate(-20px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);color:#000;overflow:hidden;text-overflow:ellipsis}.menu-label--with-chevron{right:40px}.sidebar.expanded .menu-label,.user-menu-container:first-child .menu-label{opacity:1;transform:translate(0)}.user-section{flex-shrink:0;padding:0 0 20px;width:100%;transition:padding .5s cubic-bezier(.4,0,.2,1)}.sidebar-divider{flex-shrink:0;width:32px;height:1px;margin:6px auto 10px;background:#d0d0bc;border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1),margin .5s cubic-bezier(.4,0,.2,1)}.sidebar.expanded .sidebar-divider{width:calc(var(--sidebar-item-width) - 24px);margin:10px auto 8px}.user-menu{display:flex;flex-direction:column;transition:gap .5s cubic-bezier(.4,0,.2,1)}.menu-label.last-item{color:red!important}.sidebar.expanded .user-menu{transform:translateY(4px)}.user-menu-container{width:100%;padding:4px 8px;cursor:pointer;position:relative;transition:padding .5s cubic-bezier(.4,0,.2,1)}.user-menu-item{height:56px;width:56px;display:flex;align-items:center;text-decoration:none;color:#0000;transition:all .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease;overflow:hidden;border-radius:50%;position:relative}.sidebar.expanded .user-menu-item{width:var(--sidebar-item-width);border-radius:24px;height:50px}.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg,.user-menu-item-icon{position:absolute;left:28px;transform:translate(-50%);color:#000;width:24px;height:24px;transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1)}.user-menu-container:hover .user-menu-item{background-color:#e3e3d1}.user-menu-item.active{background-color:#dee58f;color:#000}@media (max-width: 768px){.sidebar{width:60px;padding-top:10px}.menu-toggle{justify-content:flex-start}.sidebar-item,.user-menu-item{width:50px;height:50px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{left:25px}.menu-label{left:50px;font-size:13px}.sidebar-item.active{background-color:#dee58f;color:#000}}@media (max-width: 640px){.sidebar{transform:translate(-100%);width:var(--sidebar-expanded-width, 280px);top:var(--sidebar-top, 75px);height:calc(100vh - var(--sidebar-top, 75px))}.sidebar-item.active{background-color:#dee58f;color:#000}.menu-toggle{display:none}.sidebar.expanded{transform:translate(0);width:var(--sidebar-expanded-width, 280px);padding-top:10px!important}.sidebar.expanded:before{content:\"\";position:fixed;top:0;left:var(--sidebar-expanded-width, 280px);right:0;bottom:0;background-color:#0000002e;z-index:-1}.sidebar-item,.user-menu-item{width:auto;height:50px;border-radius:24px;padding:0 16px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{position:relative;left:0;transform:none;margin-right:12px}.sidebar-item .submenu-arrow{position:absolute;right:14px;left:auto;margin-right:0}.sidebar-item.open>i-lucide.submenu-arrow,.sidebar-item.open .submenu-arrow{transform:translateY(-50%) rotate(180deg)}.menu-label{position:relative;left:0;opacity:1;transform:translate(0);font-size:14px}}@media (max-width: 480px){.sidebar{width:100vw;max-width:320px}.sidebar.expanded .user-menu-item{width:calc(100% - 16px);border-radius:24px}.sidebar-item.active{background-color:#dee58f;color:#000;width:calc(100% - 16px)}.sidebar.expanded:before{left:100vw}}@media (max-width: 360px){.sidebar,.sidebar.expanded{width:100vw}.sidebar.expanded:before{display:none}.sidebar-item-container,.user-menu-container{padding:4px 12px}.sidebar-item,.user-menu-item{padding:0 12px;height:48px}.menu-label{font-size:13px}}.sidebar-item-container,.user-menu-container,.sidebar-item-container.collapsed,.user-menu-container.collapsed{position:relative;overflow:visible!important}.sidebar-item-container.collapsed:after,.user-menu-container.collapsed:after{content:attr(data-label);position:absolute;left:calc(var(--sidebar-collapsed-width, 70px) + 4px);top:50%;transform:translateY(-50%);background:#ededdf;color:#000;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;white-space:nowrap;z-index:99999;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s ease;box-shadow:0 2px 10px #0000001f;pointer-events:none;max-width:220px;overflow:hidden;text-overflow:ellipsis}.sidebar-item-container.collapsed:hover:after,.user-menu-container.collapsed:hover:after{opacity:1;visibility:visible;transform:translateY(-50%) translate(6px)}.sidebar.expanded .sidebar-item-container:after,.sidebar.expanded .user-menu-container:after{display:none!important}.submenu-panel{display:grid;grid-template-rows:0fr;min-width:0;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1);pointer-events:none}.submenu-panel--open{grid-template-rows:1fr;pointer-events:auto}.submenu-panel__inner{overflow:hidden;min-height:0;min-width:0}.submenu-panel__inner>.submenu{opacity:0;transform:translateY(-8px);transition:opacity .24s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1),padding .32s cubic-bezier(.4,0,.2,1);padding-top:0;padding-bottom:0;pointer-events:none}.submenu-panel--open .submenu-panel__inner>.submenu{opacity:1;transform:translateY(0);padding-top:4px;padding-bottom:2px;pointer-events:auto}.submenu-panel--nested{transition-duration:.28s}.submenu-panel--nested .submenu-panel__inner>.submenu{transition-duration:.24s,.28s,.28s}.submenu{display:flex;flex-direction:column;gap:4px;padding:0 8px;margin-top:0;min-width:0}.submenu-arrow{position:absolute;right:14px;left:auto;top:50%;transform:translateY(-50%) rotate(0);transform-origin:center;transition:transform .32s cubic-bezier(.4,0,.2,1);flex-shrink:0;color:#454733;z-index:2}.sidebar-item .submenu-arrow{right:14px;left:auto}.sidebar-item.open>i-lucide.submenu-arrow,.sidebar-item.open .submenu-arrow{transform:translateY(-50%) rotate(180deg)}.submenu-item{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 12px 8px 20px;cursor:pointer;color:#454733;text-decoration:none}.submenu-item:hover{background-color:#e3e3d1;border-radius:99px}.submenu-item.active{background-color:#dee58f;color:#454733;border-radius:99px}.submenu-item.active:hover{background-color:#d0d873}.submenu-item__icon{flex-shrink:0}.submenu-item__label{flex:1;min-width:0;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.submenu-group{display:flex;flex-direction:column;gap:4px;min-width:0}.submenu--nested{padding-left:8px;margin-top:0;gap:4px}.submenu-item--parent{position:relative;padding-right:32px}.submenu-item--leaf{padding-right:12px}.submenu-arrow--nested{position:absolute;right:8px;top:50%;transform:translateY(-50%) rotate(0);transform-origin:center}.submenu-item--parent.open>i-lucide.submenu-arrow--nested,.submenu-item--parent.open .submenu-arrow--nested{transform:translateY(-50%) rotate(180deg)}@media (prefers-reduced-motion: reduce){.submenu-panel,.submenu-panel__inner>.submenu,.submenu-arrow{transition:none!important;animation:none!important}.submenu-panel__inner>.submenu{opacity:1;transform:none}.submenu-panel:not(.submenu-panel--open) .submenu-panel__inner>.submenu{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: ModuleCardIcon, selector: "lib-module-card-icon", inputs: ["value", "size", "color"] }] });
|
|
8561
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Sidebar, isStandalone: true, selector: "lib-sidebar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, autoNavigate: { classPropertyName: "autoNavigate", publicName: "autoNavigate", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigate: { classPropertyName: "closeOnNavigate", publicName: "closeOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, hoverExpand: { classPropertyName: "hoverExpand", publicName: "hoverExpand", isSignal: true, isRequired: false, transformFunction: null }, hoverExpandDelay: { classPropertyName: "hoverExpandDelay", publicName: "hoverExpandDelay", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, topOffset: { classPropertyName: "topOffset", publicName: "topOffset", isSignal: true, isRequired: false, transformFunction: null }, dangerAction: { classPropertyName: "dangerAction", publicName: "dangerAction", isSignal: true, isRequired: false, transformFunction: null }, dangerItemColor: { classPropertyName: "dangerItemColor", publicName: "dangerItemColor", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", itemClick: "itemClick", navigate: "navigate", userAction: "userAction" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapePress()" } }, viewQueries: [{ propertyName: "menuScroll", first: true, predicate: ["menuScroll"], descendants: true }], ngImport: i0, template: "<aside\n class=\"sidebar\"\n [class.expanded]=\"expanded()\"\n [style.--sidebar-top]=\"topOffset()\"\n [style.--sidebar-expanded-width]=\"expandedWidth()\"\n [style.--sidebar-collapsed-width]=\"collapsedWidth()\"\n (mouseenter)=\"onSidebarMouseEnter()\"\n (mouseleave)=\"onSidebarMouseLeave()\"\n (click)=\"$event.stopPropagation()\"\n>\n <div class=\"menu-toggle\">\n @if (expanded()) {\n <i-lucide\n [name]=\"icons.close\"\n size=\"24\"\n [color]=\"iconColor()\"\n (click)=\"toggleSidebar()\"\n />\n } @else {\n <i-lucide\n [name]=\"icons.menu\"\n size=\"24\"\n [color]=\"iconColor()\"\n (click)=\"toggleSidebar(); $event.stopPropagation()\"\n />\n }\n </div>\n\n <div #menuScroll class=\"sidebar-menu\" [attr.data-expanded]=\"expanded()\">\n @for (item of menuItems(); track item.id) {\n <div\n class=\"sidebar-item-container\"\n [class.collapsed]=\"!expanded()\"\n [attr.data-active]=\"item.isActive ? 'true' : null\"\n [attr.data-label]=\"!expanded() ? item.label : null\"\n >\n <div\n class=\"sidebar-item\"\n [class.active]=\"item.isActive\"\n [class.has-children]=\"isExpandable(item)\"\n [class.is-leaf]=\"!isExpandable(item)\"\n [class.open]=\"openItems()[item.id]\"\n (click)=\"onMainItemClick(item, $index); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"sidebar-item-icon\"\n [value]=\"item.icon ?? ''\"\n size=\"md\"\n [color]=\"iconColor()\"\n />\n\n @if (expanded()) {\n <span\n class=\"menu-label\"\n [class.menu-label--with-chevron]=\"isExpandable(item)\"\n >{{ item.label }}</span>\n\n @if (isExpandable(item)) {\n <i-lucide\n [name]=\"icons.chevronDown\"\n size=\"18\"\n [color]=\"iconColor()\"\n class=\"submenu-arrow\"\n [class.open]=\"openItems()[item.id]\"\n />\n }\n }\n </div>\n\n @if (isExpandable(item) && expanded()) {\n <div\n class=\"submenu-panel\"\n [class.submenu-panel--open]=\"!!openItems()[item.id]\"\n >\n <div class=\"submenu-panel__inner\">\n <div class=\"submenu\">\n @for (child of item.children; track child.id; let childIndex = $index) {\n @if (isExpandable(child)) {\n <div class=\"submenu-group\">\n <div\n class=\"submenu-item submenu-item--parent\"\n [class.active]=\"child.isActive\"\n [class.open]=\"isChildOpen(child, item)\"\n (click)=\"onChildItemClick(child, item, childIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"child.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ child.label }}</span>\n <i-lucide\n [name]=\"icons.chevronDown\"\n size=\"16\"\n [color]=\"iconColor()\"\n class=\"submenu-arrow submenu-arrow--nested\"\n [class.open]=\"isChildOpen(child, item)\"\n />\n </div>\n\n <div\n class=\"submenu-panel submenu-panel--nested\"\n [class.submenu-panel--open]=\"isChildOpen(child, item)\"\n >\n <div class=\"submenu-panel__inner\">\n <div class=\"submenu submenu--nested\">\n @for (grandchild of child.children; track grandchild.id; let grandchildIndex = $index) {\n <div\n class=\"submenu-item submenu-item--leaf\"\n [class.active]=\"grandchild.isActive\"\n (click)=\"onGrandchildItemClick(grandchild, child, item, grandchildIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"grandchild.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ grandchild.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"submenu-item submenu-item--leaf\"\n [class.active]=\"child.isActive\"\n (click)=\"onChildItemClick(child, item, childIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"child.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ child.label }}</span>\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n\n @if (userMenuItems().length) {\n <div class=\"sidebar-divider\" aria-hidden=\"true\"></div>\n <div class=\"user-section\">\n <div class=\"user-menu\">\n @for (item of userMenuItems(); track item.id; let last = $last) {\n <div\n class=\"user-menu-container\"\n [class.collapsed]=\"!expanded()\"\n [attr.data-label]=\"!expanded() ? item.label : null\"\n >\n <div\n class=\"user-menu-item\"\n (click)=\"onUserItemClick(item, $index); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"user-menu-item-icon\"\n [value]=\"item.icon ?? ''\"\n size=\"md\"\n [color]=\"isDangerUserItem(item) ? dangerItemColor() : iconColor()\"\n />\n @if (expanded()) {\n <span\n class=\"menu-label\"\n [class.last-item]=\"isDangerUserItem(item)\"\n [style.color]=\"isDangerUserItem(item) ? dangerItemColor() : null\"\n >{{ item.label }}</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n</aside>\n", styles: [".sidebar{--sidebar-item-width: calc(var(--sidebar-expanded-width, 280px) - 16px);position:fixed;left:0;top:var(--sidebar-top, 75px);height:calc(100vh - var(--sidebar-top, 75px));width:var(--sidebar-collapsed-width, 70px);background-color:#fafae8;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;transition:all .5s cubic-bezier(.4,0,.2,1);will-change:width,transform;overflow:hidden;z-index:1000}.sidebar.expanded{width:var(--sidebar-expanded-width, 280px);background-color:#ededdf;border-radius:20px;transition:all .5s cubic-bezier(.4,0,.2,1)}.sidebar-item,.user-menu-item,.menu-label{transition:width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease}.sidebar-item-icon,.user-menu-item-icon,.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{transition:all .5s cubic-bezier(.4,0,.2,1)}.sidebar-item-icon,.user-menu-item-icon{position:absolute;left:28px;transform:translate(-50%);display:flex;align-items:center;justify-content:center;transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1)}.menu-toggle{position:relative;height:64px;min-height:64px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;width:100%!important}.menu-toggle i-lucide:hover{background-color:#e3e3d1;border-radius:10px}.menu-toggle i-lucide{position:absolute;left:35px!important;transform:translate(-50%);padding:10px;cursor:pointer}.sidebar-menu{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;width:100%;transition:padding .5s cubic-bezier(.4,0,.2,1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#a8a88c transparent}.sidebar-menu::-webkit-scrollbar{width:5px}.sidebar-menu::-webkit-scrollbar-track{background:transparent;margin:6px 0}.sidebar-menu::-webkit-scrollbar-thumb{background-color:#a8a88c;border-radius:999px}.sidebar-menu::-webkit-scrollbar-thumb:hover{background-color:#8f8f75}.sidebar:not(.expanded) .sidebar-menu{overflow:hidden;scrollbar-width:none}.sidebar:not(.expanded) .sidebar-menu::-webkit-scrollbar{display:none}.sidebar-item-container{width:100%;padding:4px 8px;margin-bottom:8px;cursor:pointer;position:relative;transition:padding .5s cubic-bezier(.4,0,.2,1)}.sidebar.expanded .sidebar-item-container{padding:0 8px}.sidebar-item{height:56px;width:56px;display:flex;align-items:center;text-decoration:none;color:#0000;transition:all .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease;overflow:hidden;border-radius:50%;position:relative}.sidebar.expanded .sidebar-item{width:var(--sidebar-item-width);border-radius:24px;height:50px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.sidebar-item-icon{position:absolute;left:28px;transform:translate(-50%);transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1)}.sidebar-item-container:hover .sidebar-item:not(.active){background-color:#e3e3d1}.sidebar-item.active:hover{background-color:#d0d873!important}.sidebar-item.active{background-color:#dee58f;color:#61661f}.menu-label{position:absolute;left:55px;right:14px;white-space:nowrap;font-size:14px;font-weight:500;opacity:0;transform:translate(-20px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);color:#000;overflow:hidden;text-overflow:ellipsis}.menu-label--with-chevron{right:40px}.sidebar.expanded .menu-label,.user-menu-container:first-child .menu-label{opacity:1;transform:translate(0)}.user-section{flex-shrink:0;padding:0 0 20px;width:100%;transition:padding .5s cubic-bezier(.4,0,.2,1)}.sidebar-divider{flex-shrink:0;width:32px;height:1px;margin:6px auto 10px;background:#d0d0bc;border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1),margin .5s cubic-bezier(.4,0,.2,1)}.sidebar.expanded .sidebar-divider{width:calc(var(--sidebar-item-width) - 24px);margin:10px auto 8px}.user-menu{display:flex;flex-direction:column;transition:gap .5s cubic-bezier(.4,0,.2,1)}.menu-label.last-item{color:red!important}.sidebar.expanded .user-menu{transform:translateY(4px)}.user-menu-container{width:100%;padding:4px 8px;cursor:pointer;position:relative;transition:padding .5s cubic-bezier(.4,0,.2,1)}.user-menu-item{height:56px;width:56px;display:flex;align-items:center;text-decoration:none;color:#0000;transition:all .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease;overflow:hidden;border-radius:50%;position:relative}.sidebar.expanded .user-menu-item{width:var(--sidebar-item-width);border-radius:24px;height:50px}.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg,.user-menu-item-icon{position:absolute;left:28px;transform:translate(-50%);color:#000;width:24px;height:24px;transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1)}.user-menu-container:hover .user-menu-item{background-color:#e3e3d1}.user-menu-item.active{background-color:#dee58f;color:#000}@media (max-width: 768px){.sidebar{width:60px;padding-top:10px}.menu-toggle{justify-content:flex-start}.sidebar-item,.user-menu-item{width:50px;height:50px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{left:25px}.menu-label{left:50px;font-size:13px}.sidebar-item.active{background-color:#dee58f;color:#000}}@media (max-width: 640px){.sidebar{transform:translate(-100%);width:var(--sidebar-expanded-width, 280px);top:var(--sidebar-top, 75px);height:calc(100vh - var(--sidebar-top, 75px))}.sidebar-item.active{background-color:#dee58f;color:#000}.menu-toggle{display:none}.sidebar.expanded{transform:translate(0);width:var(--sidebar-expanded-width, 280px);padding-top:10px!important}.sidebar.expanded:before{content:\"\";position:fixed;top:0;left:var(--sidebar-expanded-width, 280px);right:0;bottom:0;background-color:#0000002e;z-index:-1}.sidebar-item,.user-menu-item{width:auto;height:50px;border-radius:24px;padding:0 16px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{position:relative;left:0;transform:none;margin-right:12px}.sidebar-item .submenu-arrow{position:absolute;right:14px;left:auto;margin-right:0}.sidebar-item.open>i-lucide.submenu-arrow,.sidebar-item.open .submenu-arrow{transform:translateY(-50%) rotate(180deg)}.menu-label{position:relative;left:0;opacity:1;transform:translate(0);font-size:14px}}@media (max-width: 480px){.sidebar{width:100vw;max-width:320px}.sidebar.expanded .user-menu-item{width:calc(100% - 16px);border-radius:24px}.sidebar-item.active{background-color:#dee58f;color:#000;width:calc(100% - 16px)}.sidebar.expanded:before{left:100vw}}@media (max-width: 360px){.sidebar,.sidebar.expanded{width:100vw}.sidebar.expanded:before{display:none}.sidebar-item-container,.user-menu-container{padding:4px 12px}.sidebar-item,.user-menu-item{padding:0 12px;height:48px}.menu-label{font-size:13px}}.sidebar-item-container,.user-menu-container,.sidebar-item-container.collapsed,.user-menu-container.collapsed{position:relative;overflow:visible!important}.sidebar-item-container.collapsed:after,.user-menu-container.collapsed:after{content:attr(data-label);position:absolute;left:calc(var(--sidebar-collapsed-width, 70px) + 4px);top:50%;transform:translateY(-50%);background:#ededdf;color:#000;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;white-space:nowrap;z-index:99999;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s ease;box-shadow:0 2px 10px #0000001f;pointer-events:none;max-width:220px;overflow:hidden;text-overflow:ellipsis}.sidebar-item-container.collapsed:hover:after,.user-menu-container.collapsed:hover:after{opacity:1;visibility:visible;transform:translateY(-50%) translate(6px)}.sidebar.expanded .sidebar-item-container:after,.sidebar.expanded .user-menu-container:after{display:none!important}.submenu-panel{display:grid;grid-template-rows:0fr;min-width:0;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1);pointer-events:none}.submenu-panel--open{grid-template-rows:1fr;pointer-events:auto}.submenu-panel__inner{overflow:hidden;min-height:0;min-width:0}.submenu-panel__inner>.submenu{opacity:0;transform:translateY(-8px);transition:opacity .24s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1),padding .32s cubic-bezier(.4,0,.2,1);padding-top:0;padding-bottom:0;pointer-events:none}.submenu-panel--open .submenu-panel__inner>.submenu{opacity:1;transform:translateY(0);padding-top:4px;padding-bottom:2px;pointer-events:auto}.submenu-panel--nested{transition-duration:.28s}.submenu-panel--nested .submenu-panel__inner>.submenu{transition-duration:.24s,.28s,.28s}.submenu{display:flex;flex-direction:column;gap:4px;padding:0 8px;margin-top:0;min-width:0}.submenu-arrow{position:absolute;right:14px;left:auto;top:50%;transform:translateY(-50%) rotate(0);transform-origin:center;transition:transform .32s cubic-bezier(.4,0,.2,1);flex-shrink:0;color:#454733;z-index:2}.sidebar-item .submenu-arrow{right:14px;left:auto}.sidebar-item.open>i-lucide.submenu-arrow,.sidebar-item.open .submenu-arrow{transform:translateY(-50%) rotate(180deg)}.submenu-item{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 12px 8px 20px;cursor:pointer;color:#454733;text-decoration:none}.submenu-item:hover{background-color:#e3e3d1;border-radius:99px}.submenu-item.active{background-color:#dee58f;color:#454733;border-radius:99px}.submenu-item.active:hover{background-color:#d0d873}.submenu-item__icon{flex-shrink:0}.submenu-item__label{flex:1;min-width:0;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.submenu-group{display:flex;flex-direction:column;gap:4px;min-width:0}.submenu--nested{padding-left:8px;margin-top:0;gap:4px}.submenu-item--parent{position:relative;padding-right:32px}.submenu-item--leaf{padding-right:12px}.submenu-arrow--nested{position:absolute;right:8px;top:50%;transform:translateY(-50%) rotate(0);transform-origin:center}.submenu-item--parent.open>i-lucide.submenu-arrow--nested,.submenu-item--parent.open .submenu-arrow--nested{transform:translateY(-50%) rotate(180deg)}@media (prefers-reduced-motion: reduce){.submenu-panel,.submenu-panel__inner>.submenu,.submenu-arrow{transition:none!important;animation:none!important}.submenu-panel__inner>.submenu{opacity:1;transform:none}.submenu-panel:not(.submenu-panel--open) .submenu-panel__inner>.submenu{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: ModuleCardIcon, selector: "lib-module-card-icon", inputs: ["value", "size", "color"] }] });
|
|
8562
8562
|
}
|
|
8563
8563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Sidebar, decorators: [{
|
|
8564
8564
|
type: Component,
|
|
8565
|
-
args: [{ selector: 'lib-sidebar', standalone: true, imports: [CommonModule, LucideAngularModule, ModuleCardIcon], template: "<aside\n class=\"sidebar\"\n [class.expanded]=\"expanded()\"\n [style.--sidebar-top]=\"topOffset()\"\n [style.--sidebar-expanded-width]=\"expandedWidth()\"\n [style.--sidebar-collapsed-width]=\"collapsedWidth()\"\n (mouseenter)=\"onSidebarMouseEnter()\"\n (mouseleave)=\"onSidebarMouseLeave()\"\n (click)=\"$event.stopPropagation()\"\n>\n <div class=\"menu-toggle\">\n @if (expanded()) {\n <i-lucide\n [name]=\"icons.close\"\n size=\"24\"\n [color]=\"iconColor()\"\n (click)=\"toggleSidebar()\"\n />\n } @else {\n <i-lucide\n [name]=\"icons.menu\"\n size=\"24\"\n [color]=\"iconColor()\"\n (click)=\"toggleSidebar(); $event.stopPropagation()\"\n />\n }\n </div>\n\n <div #menuScroll class=\"sidebar-menu\" [attr.data-expanded]=\"expanded()\">\n @for (item of menuItems(); track item.id) {\n <div\n class=\"sidebar-item-container\"\n [class.collapsed]=\"!expanded()\"\n [attr.data-active]=\"item.isActive ? 'true' : null\"\n [attr.data-label]=\"!expanded() ? item.label : null\"\n >\n <div\n class=\"sidebar-item\"\n [class.active]=\"item.isActive\"\n [class.has-children]=\"isExpandable(item)\"\n [class.is-leaf]=\"!isExpandable(item)\"\n [class.open]=\"openItems()[item.id]\"\n (click)=\"onMainItemClick(item, $index); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"sidebar-item-icon\"\n [value]=\"item.icon ?? ''\"\n size=\"md\"\n [color]=\"iconColor()\"\n />\n\n @if (expanded()) {\n <span\n class=\"menu-label\"\n [class.menu-label--with-chevron]=\"isExpandable(item)\"\n >{{ item.label }}</span>\n\n @if (isExpandable(item)) {\n <i-lucide\n [name]=\"icons.chevronDown\"\n size=\"18\"\n [color]=\"iconColor()\"\n class=\"submenu-arrow\"\n [class.open]=\"openItems()[item.id]\"\n />\n }\n }\n </div>\n\n @if (isExpandable(item) && expanded()) {\n <div\n class=\"submenu-panel\"\n [class.submenu-panel--open]=\"!!openItems()[item.id]\"\n >\n <div class=\"submenu-panel__inner\">\n <div class=\"submenu\">\n @for (child of item.children; track child.id; let childIndex = $index) {\n @if (isExpandable(child)) {\n <div class=\"submenu-group\">\n <div\n class=\"submenu-item submenu-item--parent\"\n [class.active]=\"child.isActive\"\n [class.open]=\"isChildOpen(child, item)\"\n (click)=\"onChildItemClick(child, item, childIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"child.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ child.label }}</span>\n <i-lucide\n [name]=\"icons.chevronDown\"\n size=\"16\"\n [color]=\"iconColor()\"\n class=\"submenu-arrow submenu-arrow--nested\"\n [class.open]=\"isChildOpen(child, item)\"\n />\n </div>\n\n <div\n class=\"submenu-panel submenu-panel--nested\"\n [class.submenu-panel--open]=\"isChildOpen(child, item)\"\n >\n <div class=\"submenu-panel__inner\">\n <div class=\"submenu submenu--nested\">\n @for (grandchild of child.children; track grandchild.id; let grandchildIndex = $index) {\n <div\n class=\"submenu-item submenu-item--leaf\"\n [class.active]=\"grandchild.isActive\"\n (click)=\"onGrandchildItemClick(grandchild, child, item, grandchildIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"grandchild.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ grandchild.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"submenu-item submenu-item--leaf\"\n [class.active]=\"child.isActive\"\n (click)=\"onChildItemClick(child, item, childIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"child.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ child.label }}</span>\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n\n @if (userMenuItems().length) {\n <div class=\"sidebar-divider\" aria-hidden=\"true\"></div>\n <div class=\"user-section\">\n <div class=\"user-menu\">\n @for (item of userMenuItems(); track item.id; let last = $last) {\n <div\n class=\"user-menu-container\"\n [class.collapsed]=\"!expanded()\"\n [attr.data-label]=\"!expanded() ? item.label : null\"\n >\n <div\n class=\"user-menu-item\"\n (click)=\"onUserItemClick(item, $index); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"user-menu-item-icon\"\n [value]=\"item.icon ?? ''\"\n size=\"md\"\n [color]=\"isDangerUserItem(item) ? dangerItemColor() : iconColor()\"\n />\n @if (expanded()) {\n <span\n class=\"menu-label\"\n [class.last-item]=\"isDangerUserItem(item)\"\n [style.color]=\"isDangerUserItem(item) ? dangerItemColor() : null\"\n >{{ item.label }}</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n</aside>\n", styles: [".sidebar{--sidebar-item-width: calc(var(--sidebar-expanded-width, 280px) - 16px);position:fixed;left:0;top:var(--sidebar-top, 75px);height:calc(100vh - var(--sidebar-top, 75px));width:var(--sidebar-collapsed-width, 70px);background-color:#fafae8;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;transition:all .5s cubic-bezier(.4,0,.2,1);will-change:width,transform;overflow:hidden}.sidebar.expanded{width:var(--sidebar-expanded-width, 280px);background-color:#ededdf;border-radius:20px;transition:all .5s cubic-bezier(.4,0,.2,1);z-index:1}.sidebar-item,.user-menu-item,.menu-label{transition:width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease}.sidebar-item-icon,.user-menu-item-icon,.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{transition:all .5s cubic-bezier(.4,0,.2,1)}.sidebar-item-icon,.user-menu-item-icon{position:absolute;left:28px;transform:translate(-50%);display:flex;align-items:center;justify-content:center;transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1)}.menu-toggle{position:relative;height:64px;min-height:64px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;width:100%!important}.menu-toggle i-lucide:hover{background-color:#e3e3d1;border-radius:10px}.menu-toggle i-lucide{position:absolute;left:35px!important;transform:translate(-50%);padding:10px;cursor:pointer}.sidebar-menu{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;width:100%;transition:padding .5s cubic-bezier(.4,0,.2,1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#a8a88c transparent}.sidebar-menu::-webkit-scrollbar{width:5px}.sidebar-menu::-webkit-scrollbar-track{background:transparent;margin:6px 0}.sidebar-menu::-webkit-scrollbar-thumb{background-color:#a8a88c;border-radius:999px}.sidebar-menu::-webkit-scrollbar-thumb:hover{background-color:#8f8f75}.sidebar:not(.expanded) .sidebar-menu{overflow:hidden;scrollbar-width:none}.sidebar:not(.expanded) .sidebar-menu::-webkit-scrollbar{display:none}.sidebar-item-container{width:100%;padding:4px 8px;margin-bottom:8px;cursor:pointer;position:relative;transition:padding .5s cubic-bezier(.4,0,.2,1)}.sidebar.expanded .sidebar-item-container{padding:0 8px}.sidebar-item{height:56px;width:56px;display:flex;align-items:center;text-decoration:none;color:#0000;transition:all .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease;overflow:hidden;border-radius:50%;position:relative}.sidebar.expanded .sidebar-item{width:var(--sidebar-item-width);border-radius:24px;height:50px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.sidebar-item-icon{position:absolute;left:28px;transform:translate(-50%);transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1)}.sidebar-item-container:hover .sidebar-item:not(.active){background-color:#e3e3d1}.sidebar-item.active:hover{background-color:#d0d873!important}.sidebar-item.active{background-color:#dee58f;color:#61661f}.menu-label{position:absolute;left:55px;right:14px;white-space:nowrap;font-size:14px;font-weight:500;opacity:0;transform:translate(-20px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);color:#000;overflow:hidden;text-overflow:ellipsis}.menu-label--with-chevron{right:40px}.sidebar.expanded .menu-label,.user-menu-container:first-child .menu-label{opacity:1;transform:translate(0)}.user-section{flex-shrink:0;padding:0 0 20px;width:100%;transition:padding .5s cubic-bezier(.4,0,.2,1)}.sidebar-divider{flex-shrink:0;width:32px;height:1px;margin:6px auto 10px;background:#d0d0bc;border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1),margin .5s cubic-bezier(.4,0,.2,1)}.sidebar.expanded .sidebar-divider{width:calc(var(--sidebar-item-width) - 24px);margin:10px auto 8px}.user-menu{display:flex;flex-direction:column;transition:gap .5s cubic-bezier(.4,0,.2,1)}.menu-label.last-item{color:red!important}.sidebar.expanded .user-menu{transform:translateY(4px)}.user-menu-container{width:100%;padding:4px 8px;cursor:pointer;position:relative;transition:padding .5s cubic-bezier(.4,0,.2,1)}.user-menu-item{height:56px;width:56px;display:flex;align-items:center;text-decoration:none;color:#0000;transition:all .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease;overflow:hidden;border-radius:50%;position:relative}.sidebar.expanded .user-menu-item{width:var(--sidebar-item-width);border-radius:24px;height:50px}.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg,.user-menu-item-icon{position:absolute;left:28px;transform:translate(-50%);color:#000;width:24px;height:24px;transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1)}.user-menu-container:hover .user-menu-item{background-color:#e3e3d1}.user-menu-item.active{background-color:#dee58f;color:#000}@media (max-width: 768px){.sidebar{width:60px;padding-top:10px}.menu-toggle{justify-content:flex-start}.sidebar-item,.user-menu-item{width:50px;height:50px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{left:25px}.menu-label{left:50px;font-size:13px}.sidebar-item.active{background-color:#dee58f;color:#000}}@media (max-width: 640px){.sidebar{transform:translate(-100%);width:var(--sidebar-expanded-width, 280px);top:var(--sidebar-top, 75px);height:calc(100vh - var(--sidebar-top, 75px))}.sidebar-item.active{background-color:#dee58f;color:#000}.menu-toggle{display:none}.sidebar.expanded{transform:translate(0);width:var(--sidebar-expanded-width, 280px);padding-top:10px!important}.sidebar.expanded:before{content:\"\";position:fixed;top:0;left:var(--sidebar-expanded-width, 280px);right:0;bottom:0;background-color:#0000002e;z-index:-1}.sidebar-item,.user-menu-item{width:auto;height:50px;border-radius:24px;padding:0 16px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{position:relative;left:0;transform:none;margin-right:12px}.sidebar-item .submenu-arrow{position:absolute;right:14px;left:auto;margin-right:0}.sidebar-item.open>i-lucide.submenu-arrow,.sidebar-item.open .submenu-arrow{transform:translateY(-50%) rotate(180deg)}.menu-label{position:relative;left:0;opacity:1;transform:translate(0);font-size:14px}}@media (max-width: 480px){.sidebar{width:100vw;max-width:320px}.sidebar.expanded .user-menu-item{width:calc(100% - 16px);border-radius:24px}.sidebar-item.active{background-color:#dee58f;color:#000;width:calc(100% - 16px)}.sidebar.expanded:before{left:100vw}}@media (max-width: 360px){.sidebar,.sidebar.expanded{width:100vw}.sidebar.expanded:before{display:none}.sidebar-item-container,.user-menu-container{padding:4px 12px}.sidebar-item,.user-menu-item{padding:0 12px;height:48px}.menu-label{font-size:13px}}.sidebar-item-container,.user-menu-container,.sidebar-item-container.collapsed,.user-menu-container.collapsed{position:relative;overflow:visible!important}.sidebar-item-container.collapsed:after,.user-menu-container.collapsed:after{content:attr(data-label);position:absolute;left:calc(var(--sidebar-collapsed-width, 70px) + 4px);top:50%;transform:translateY(-50%);background:#ededdf;color:#000;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;white-space:nowrap;z-index:99999;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s ease;box-shadow:0 2px 10px #0000001f;pointer-events:none;max-width:220px;overflow:hidden;text-overflow:ellipsis}.sidebar-item-container.collapsed:hover:after,.user-menu-container.collapsed:hover:after{opacity:1;visibility:visible;transform:translateY(-50%) translate(6px)}.sidebar.expanded .sidebar-item-container:after,.sidebar.expanded .user-menu-container:after{display:none!important}.submenu-panel{display:grid;grid-template-rows:0fr;min-width:0;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1);pointer-events:none}.submenu-panel--open{grid-template-rows:1fr;pointer-events:auto}.submenu-panel__inner{overflow:hidden;min-height:0;min-width:0}.submenu-panel__inner>.submenu{opacity:0;transform:translateY(-8px);transition:opacity .24s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1),padding .32s cubic-bezier(.4,0,.2,1);padding-top:0;padding-bottom:0;pointer-events:none}.submenu-panel--open .submenu-panel__inner>.submenu{opacity:1;transform:translateY(0);padding-top:4px;padding-bottom:2px;pointer-events:auto}.submenu-panel--nested{transition-duration:.28s}.submenu-panel--nested .submenu-panel__inner>.submenu{transition-duration:.24s,.28s,.28s}.submenu{display:flex;flex-direction:column;gap:4px;padding:0 8px;margin-top:0;min-width:0}.submenu-arrow{position:absolute;right:14px;left:auto;top:50%;transform:translateY(-50%) rotate(0);transform-origin:center;transition:transform .32s cubic-bezier(.4,0,.2,1);flex-shrink:0;color:#454733;z-index:2}.sidebar-item .submenu-arrow{right:14px;left:auto}.sidebar-item.open>i-lucide.submenu-arrow,.sidebar-item.open .submenu-arrow{transform:translateY(-50%) rotate(180deg)}.submenu-item{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 12px 8px 20px;cursor:pointer;color:#454733;text-decoration:none}.submenu-item:hover{background-color:#e3e3d1;border-radius:99px}.submenu-item.active{background-color:#dee58f;color:#454733;border-radius:99px}.submenu-item.active:hover{background-color:#d0d873}.submenu-item__icon{flex-shrink:0}.submenu-item__label{flex:1;min-width:0;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.submenu-group{display:flex;flex-direction:column;gap:4px;min-width:0}.submenu--nested{padding-left:8px;margin-top:0;gap:4px}.submenu-item--parent{position:relative;padding-right:32px}.submenu-item--leaf{padding-right:12px}.submenu-arrow--nested{position:absolute;right:8px;top:50%;transform:translateY(-50%) rotate(0);transform-origin:center}.submenu-item--parent.open>i-lucide.submenu-arrow--nested,.submenu-item--parent.open .submenu-arrow--nested{transform:translateY(-50%) rotate(180deg)}@media (prefers-reduced-motion: reduce){.submenu-panel,.submenu-panel__inner>.submenu,.submenu-arrow{transition:none!important;animation:none!important}.submenu-panel__inner>.submenu{opacity:1;transform:none}.submenu-panel:not(.submenu-panel--open) .submenu-panel__inner>.submenu{opacity:0}}\n"] }]
|
|
8565
|
+
args: [{ selector: 'lib-sidebar', standalone: true, imports: [CommonModule, LucideAngularModule, ModuleCardIcon], template: "<aside\n class=\"sidebar\"\n [class.expanded]=\"expanded()\"\n [style.--sidebar-top]=\"topOffset()\"\n [style.--sidebar-expanded-width]=\"expandedWidth()\"\n [style.--sidebar-collapsed-width]=\"collapsedWidth()\"\n (mouseenter)=\"onSidebarMouseEnter()\"\n (mouseleave)=\"onSidebarMouseLeave()\"\n (click)=\"$event.stopPropagation()\"\n>\n <div class=\"menu-toggle\">\n @if (expanded()) {\n <i-lucide\n [name]=\"icons.close\"\n size=\"24\"\n [color]=\"iconColor()\"\n (click)=\"toggleSidebar()\"\n />\n } @else {\n <i-lucide\n [name]=\"icons.menu\"\n size=\"24\"\n [color]=\"iconColor()\"\n (click)=\"toggleSidebar(); $event.stopPropagation()\"\n />\n }\n </div>\n\n <div #menuScroll class=\"sidebar-menu\" [attr.data-expanded]=\"expanded()\">\n @for (item of menuItems(); track item.id) {\n <div\n class=\"sidebar-item-container\"\n [class.collapsed]=\"!expanded()\"\n [attr.data-active]=\"item.isActive ? 'true' : null\"\n [attr.data-label]=\"!expanded() ? item.label : null\"\n >\n <div\n class=\"sidebar-item\"\n [class.active]=\"item.isActive\"\n [class.has-children]=\"isExpandable(item)\"\n [class.is-leaf]=\"!isExpandable(item)\"\n [class.open]=\"openItems()[item.id]\"\n (click)=\"onMainItemClick(item, $index); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"sidebar-item-icon\"\n [value]=\"item.icon ?? ''\"\n size=\"md\"\n [color]=\"iconColor()\"\n />\n\n @if (expanded()) {\n <span\n class=\"menu-label\"\n [class.menu-label--with-chevron]=\"isExpandable(item)\"\n >{{ item.label }}</span>\n\n @if (isExpandable(item)) {\n <i-lucide\n [name]=\"icons.chevronDown\"\n size=\"18\"\n [color]=\"iconColor()\"\n class=\"submenu-arrow\"\n [class.open]=\"openItems()[item.id]\"\n />\n }\n }\n </div>\n\n @if (isExpandable(item) && expanded()) {\n <div\n class=\"submenu-panel\"\n [class.submenu-panel--open]=\"!!openItems()[item.id]\"\n >\n <div class=\"submenu-panel__inner\">\n <div class=\"submenu\">\n @for (child of item.children; track child.id; let childIndex = $index) {\n @if (isExpandable(child)) {\n <div class=\"submenu-group\">\n <div\n class=\"submenu-item submenu-item--parent\"\n [class.active]=\"child.isActive\"\n [class.open]=\"isChildOpen(child, item)\"\n (click)=\"onChildItemClick(child, item, childIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"child.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ child.label }}</span>\n <i-lucide\n [name]=\"icons.chevronDown\"\n size=\"16\"\n [color]=\"iconColor()\"\n class=\"submenu-arrow submenu-arrow--nested\"\n [class.open]=\"isChildOpen(child, item)\"\n />\n </div>\n\n <div\n class=\"submenu-panel submenu-panel--nested\"\n [class.submenu-panel--open]=\"isChildOpen(child, item)\"\n >\n <div class=\"submenu-panel__inner\">\n <div class=\"submenu submenu--nested\">\n @for (grandchild of child.children; track grandchild.id; let grandchildIndex = $index) {\n <div\n class=\"submenu-item submenu-item--leaf\"\n [class.active]=\"grandchild.isActive\"\n (click)=\"onGrandchildItemClick(grandchild, child, item, grandchildIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"grandchild.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ grandchild.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"submenu-item submenu-item--leaf\"\n [class.active]=\"child.isActive\"\n (click)=\"onChildItemClick(child, item, childIndex); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"submenu-item__icon\"\n [value]=\"child.icon ?? ''\"\n size=\"sm\"\n [color]=\"iconColor()\"\n />\n <span class=\"submenu-item__label\">{{ child.label }}</span>\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n\n @if (userMenuItems().length) {\n <div class=\"sidebar-divider\" aria-hidden=\"true\"></div>\n <div class=\"user-section\">\n <div class=\"user-menu\">\n @for (item of userMenuItems(); track item.id; let last = $last) {\n <div\n class=\"user-menu-container\"\n [class.collapsed]=\"!expanded()\"\n [attr.data-label]=\"!expanded() ? item.label : null\"\n >\n <div\n class=\"user-menu-item\"\n (click)=\"onUserItemClick(item, $index); $event.stopPropagation()\"\n >\n <lib-module-card-icon\n class=\"user-menu-item-icon\"\n [value]=\"item.icon ?? ''\"\n size=\"md\"\n [color]=\"isDangerUserItem(item) ? dangerItemColor() : iconColor()\"\n />\n @if (expanded()) {\n <span\n class=\"menu-label\"\n [class.last-item]=\"isDangerUserItem(item)\"\n [style.color]=\"isDangerUserItem(item) ? dangerItemColor() : null\"\n >{{ item.label }}</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n</aside>\n", styles: [".sidebar{--sidebar-item-width: calc(var(--sidebar-expanded-width, 280px) - 16px);position:fixed;left:0;top:var(--sidebar-top, 75px);height:calc(100vh - var(--sidebar-top, 75px));width:var(--sidebar-collapsed-width, 70px);background-color:#fafae8;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;transition:all .5s cubic-bezier(.4,0,.2,1);will-change:width,transform;overflow:hidden;z-index:1000}.sidebar.expanded{width:var(--sidebar-expanded-width, 280px);background-color:#ededdf;border-radius:20px;transition:all .5s cubic-bezier(.4,0,.2,1)}.sidebar-item,.user-menu-item,.menu-label{transition:width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease}.sidebar-item-icon,.user-menu-item-icon,.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{transition:all .5s cubic-bezier(.4,0,.2,1)}.sidebar-item-icon,.user-menu-item-icon{position:absolute;left:28px;transform:translate(-50%);display:flex;align-items:center;justify-content:center;transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1)}.menu-toggle{position:relative;height:64px;min-height:64px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;width:100%!important}.menu-toggle i-lucide:hover{background-color:#e3e3d1;border-radius:10px}.menu-toggle i-lucide{position:absolute;left:35px!important;transform:translate(-50%);padding:10px;cursor:pointer}.sidebar-menu{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;width:100%;transition:padding .5s cubic-bezier(.4,0,.2,1);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#a8a88c transparent}.sidebar-menu::-webkit-scrollbar{width:5px}.sidebar-menu::-webkit-scrollbar-track{background:transparent;margin:6px 0}.sidebar-menu::-webkit-scrollbar-thumb{background-color:#a8a88c;border-radius:999px}.sidebar-menu::-webkit-scrollbar-thumb:hover{background-color:#8f8f75}.sidebar:not(.expanded) .sidebar-menu{overflow:hidden;scrollbar-width:none}.sidebar:not(.expanded) .sidebar-menu::-webkit-scrollbar{display:none}.sidebar-item-container{width:100%;padding:4px 8px;margin-bottom:8px;cursor:pointer;position:relative;transition:padding .5s cubic-bezier(.4,0,.2,1)}.sidebar.expanded .sidebar-item-container{padding:0 8px}.sidebar-item{height:56px;width:56px;display:flex;align-items:center;text-decoration:none;color:#0000;transition:all .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease;overflow:hidden;border-radius:50%;position:relative}.sidebar.expanded .sidebar-item{width:var(--sidebar-item-width);border-radius:24px;height:50px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.sidebar-item-icon{position:absolute;left:28px;transform:translate(-50%);transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1)}.sidebar-item-container:hover .sidebar-item:not(.active){background-color:#e3e3d1}.sidebar-item.active:hover{background-color:#d0d873!important}.sidebar-item.active{background-color:#dee58f;color:#61661f}.menu-label{position:absolute;left:55px;right:14px;white-space:nowrap;font-size:14px;font-weight:500;opacity:0;transform:translate(-20px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);color:#000;overflow:hidden;text-overflow:ellipsis}.menu-label--with-chevron{right:40px}.sidebar.expanded .menu-label,.user-menu-container:first-child .menu-label{opacity:1;transform:translate(0)}.user-section{flex-shrink:0;padding:0 0 20px;width:100%;transition:padding .5s cubic-bezier(.4,0,.2,1)}.sidebar-divider{flex-shrink:0;width:32px;height:1px;margin:6px auto 10px;background:#d0d0bc;border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1),margin .5s cubic-bezier(.4,0,.2,1)}.sidebar.expanded .sidebar-divider{width:calc(var(--sidebar-item-width) - 24px);margin:10px auto 8px}.user-menu{display:flex;flex-direction:column;transition:gap .5s cubic-bezier(.4,0,.2,1)}.menu-label.last-item{color:red!important}.sidebar.expanded .user-menu{transform:translateY(4px)}.user-menu-container{width:100%;padding:4px 8px;cursor:pointer;position:relative;transition:padding .5s cubic-bezier(.4,0,.2,1)}.user-menu-item{height:56px;width:56px;display:flex;align-items:center;text-decoration:none;color:#0000;transition:all .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),background-color .2s ease;overflow:hidden;border-radius:50%;position:relative}.sidebar.expanded .user-menu-item{width:var(--sidebar-item-width);border-radius:24px;height:50px}.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg,.user-menu-item-icon{position:absolute;left:28px;transform:translate(-50%);color:#000;width:24px;height:24px;transition:all .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1)}.user-menu-container:hover .user-menu-item{background-color:#e3e3d1}.user-menu-item.active{background-color:#dee58f;color:#000}@media (max-width: 768px){.sidebar{width:60px;padding-top:10px}.menu-toggle{justify-content:flex-start}.sidebar-item,.user-menu-item{width:50px;height:50px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{left:25px}.menu-label{left:50px;font-size:13px}.sidebar-item.active{background-color:#dee58f;color:#000}}@media (max-width: 640px){.sidebar{transform:translate(-100%);width:var(--sidebar-expanded-width, 280px);top:var(--sidebar-top, 75px);height:calc(100vh - var(--sidebar-top, 75px))}.sidebar-item.active{background-color:#dee58f;color:#000}.menu-toggle{display:none}.sidebar.expanded{transform:translate(0);width:var(--sidebar-expanded-width, 280px);padding-top:10px!important}.sidebar.expanded:before{content:\"\";position:fixed;top:0;left:var(--sidebar-expanded-width, 280px);right:0;bottom:0;background-color:#0000002e;z-index:-1}.sidebar-item,.user-menu-item{width:auto;height:50px;border-radius:24px;padding:0 16px}.sidebar-item i-lucide:not(.submenu-arrow),.sidebar-item img,.sidebar-item svg,.user-menu-item i-lucide,.user-menu-item img,.user-menu-item svg{position:relative;left:0;transform:none;margin-right:12px}.sidebar-item .submenu-arrow{position:absolute;right:14px;left:auto;margin-right:0}.sidebar-item.open>i-lucide.submenu-arrow,.sidebar-item.open .submenu-arrow{transform:translateY(-50%) rotate(180deg)}.menu-label{position:relative;left:0;opacity:1;transform:translate(0);font-size:14px}}@media (max-width: 480px){.sidebar{width:100vw;max-width:320px}.sidebar.expanded .user-menu-item{width:calc(100% - 16px);border-radius:24px}.sidebar-item.active{background-color:#dee58f;color:#000;width:calc(100% - 16px)}.sidebar.expanded:before{left:100vw}}@media (max-width: 360px){.sidebar,.sidebar.expanded{width:100vw}.sidebar.expanded:before{display:none}.sidebar-item-container,.user-menu-container{padding:4px 12px}.sidebar-item,.user-menu-item{padding:0 12px;height:48px}.menu-label{font-size:13px}}.sidebar-item-container,.user-menu-container,.sidebar-item-container.collapsed,.user-menu-container.collapsed{position:relative;overflow:visible!important}.sidebar-item-container.collapsed:after,.user-menu-container.collapsed:after{content:attr(data-label);position:absolute;left:calc(var(--sidebar-collapsed-width, 70px) + 4px);top:50%;transform:translateY(-50%);background:#ededdf;color:#000;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;white-space:nowrap;z-index:99999;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s ease;box-shadow:0 2px 10px #0000001f;pointer-events:none;max-width:220px;overflow:hidden;text-overflow:ellipsis}.sidebar-item-container.collapsed:hover:after,.user-menu-container.collapsed:hover:after{opacity:1;visibility:visible;transform:translateY(-50%) translate(6px)}.sidebar.expanded .sidebar-item-container:after,.sidebar.expanded .user-menu-container:after{display:none!important}.submenu-panel{display:grid;grid-template-rows:0fr;min-width:0;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1);pointer-events:none}.submenu-panel--open{grid-template-rows:1fr;pointer-events:auto}.submenu-panel__inner{overflow:hidden;min-height:0;min-width:0}.submenu-panel__inner>.submenu{opacity:0;transform:translateY(-8px);transition:opacity .24s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1),padding .32s cubic-bezier(.4,0,.2,1);padding-top:0;padding-bottom:0;pointer-events:none}.submenu-panel--open .submenu-panel__inner>.submenu{opacity:1;transform:translateY(0);padding-top:4px;padding-bottom:2px;pointer-events:auto}.submenu-panel--nested{transition-duration:.28s}.submenu-panel--nested .submenu-panel__inner>.submenu{transition-duration:.24s,.28s,.28s}.submenu{display:flex;flex-direction:column;gap:4px;padding:0 8px;margin-top:0;min-width:0}.submenu-arrow{position:absolute;right:14px;left:auto;top:50%;transform:translateY(-50%) rotate(0);transform-origin:center;transition:transform .32s cubic-bezier(.4,0,.2,1);flex-shrink:0;color:#454733;z-index:2}.sidebar-item .submenu-arrow{right:14px;left:auto}.sidebar-item.open>i-lucide.submenu-arrow,.sidebar-item.open .submenu-arrow{transform:translateY(-50%) rotate(180deg)}.submenu-item{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 12px 8px 20px;cursor:pointer;color:#454733;text-decoration:none}.submenu-item:hover{background-color:#e3e3d1;border-radius:99px}.submenu-item.active{background-color:#dee58f;color:#454733;border-radius:99px}.submenu-item.active:hover{background-color:#d0d873}.submenu-item__icon{flex-shrink:0}.submenu-item__label{flex:1;min-width:0;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.submenu-group{display:flex;flex-direction:column;gap:4px;min-width:0}.submenu--nested{padding-left:8px;margin-top:0;gap:4px}.submenu-item--parent{position:relative;padding-right:32px}.submenu-item--leaf{padding-right:12px}.submenu-arrow--nested{position:absolute;right:8px;top:50%;transform:translateY(-50%) rotate(0);transform-origin:center}.submenu-item--parent.open>i-lucide.submenu-arrow--nested,.submenu-item--parent.open .submenu-arrow--nested{transform:translateY(-50%) rotate(180deg)}@media (prefers-reduced-motion: reduce){.submenu-panel,.submenu-panel__inner>.submenu,.submenu-arrow{transition:none!important;animation:none!important}.submenu-panel__inner>.submenu{opacity:1;transform:none}.submenu-panel:not(.submenu-panel--open) .submenu-panel__inner>.submenu{opacity:0}}\n"] }]
|
|
8566
8566
|
}], ctorParameters: () => [], propDecorators: { menuScroll: [{
|
|
8567
8567
|
type: ViewChild,
|
|
8568
8568
|
args: ['menuScroll']
|