@lesterarte/sefin-ui 0.0.31 → 0.0.34

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -6094,7 +6094,7 @@ class SidebarComponent {
     /** Navigation items array */
     navItems = [];
     /** Mobile mode flag */
-    isMobile = false;
+    isMobile = null;
     /** Sidebar open state (for mobile) */
     isOpen = false;
     /** Sidebar collapsed state (for desktop) */
@@ -6111,8 +6111,21 @@ class SidebarComponent {
     showFooter = true;
     /** Toggle collapse event */
     toggleCollapse = new EventEmitter();
+    /** Toggle open event (for mobile) */
+    toggleOpen = new EventEmitter();
+    /** Close event (for mobile) */
+    close = new EventEmitter();
     currentRoute = '';
     routerSubscription;
+    mediaQueryHandler;
+    mediaQuery;
+    _autoDetectedMobile = false;
+    // Getter that combines explicit input with auto-detected value
+    get effectiveIsMobile() {
+        // If parent explicitly sets isMobile (not null), use that value
+        // Otherwise, use auto-detected value
+        return this.isMobile !== null ? this.isMobile : this._autoDetectedMobile;
+    }
     primaryColor = '#55C3D8'; // Color primario de SEFIN
     textColor = '#383838'; // Color de texto por defecto
     constructor(router, cdr, sanitizer) {
@@ -6120,6 +6133,15 @@ class SidebarComponent {
         this.cdr = cdr;
         this.sanitizer = sanitizer;
     }
+    ngOnChanges(changes) {
+        // Initialize auto-detection if isMobile is not explicitly set
+        if (changes['isMobile'] && this.isMobile === null && typeof window !== 'undefined' && window.matchMedia) {
+            if (!this.mediaQuery) {
+                this.mediaQuery = window.matchMedia('(max-width: 768px)');
+                this._autoDetectedMobile = this.mediaQuery.matches;
+            }
+        }
+    }
     ngOnInit() {
         // Track current route for active state
         this.routerSubscription = this.router.events
@@ -6129,18 +6151,60 @@ class SidebarComponent {
                 this.currentRoute = event.urlAfterRedirects;
                 // Auto-expand parent items if child is active
                 this.updateExpandedStates();
+                // Close sidebar on mobile when navigating
+                if (this.effectiveIsMobile && this.isOpen) {
+                    this.handleClose();
+                }
                 this.cdr.markForCheck();
             }
         });
         // Set initial route
         this.currentRoute = this.router.url;
         this.updateExpandedStates();
+        // Detect screen size changes (only if isMobile is not explicitly set by parent)
+        if (typeof window !== 'undefined' && window.matchMedia && this.isMobile === null) {
+            if (!this.mediaQuery) {
+                this.mediaQuery = window.matchMedia('(max-width: 768px)');
+                this._autoDetectedMobile = this.mediaQuery.matches;
+            }
+            // Listen to media query changes (modern approach)
+            if (this.mediaQuery.addEventListener && !this.mediaQueryHandler) {
+                this.mediaQueryHandler = (e) => {
+                    this._autoDetectedMobile = e.matches;
+                    // Close sidebar when switching to desktop
+                    if (!e.matches && this.isOpen) {
+                        this.handleClose();
+                    }
+                    this.cdr.markForCheck();
+                };
+                this.mediaQuery.addEventListener('change', this.mediaQueryHandler);
+            }
+            else if (this.mediaQuery.addListener && !this.mediaQueryHandler) {
+                // Fallback for older browsers
+                this.mediaQueryHandler = (e) => {
+                    this._autoDetectedMobile = e.matches;
+                    if (!e.matches && this.isOpen) {
+                        this.handleClose();
+                    }
+                    this.cdr.markForCheck();
+                };
+                this.mediaQuery.addListener(this.mediaQueryHandler);
+            }
+        }
         this.cdr.markForCheck();
     }
     ngOnDestroy() {
         if (this.routerSubscription) {
             this.routerSubscription.unsubscribe();
         }
+        if (this.mediaQuery && this.mediaQueryHandler) {
+            if (this.mediaQuery.removeEventListener) {
+                this.mediaQuery.removeEventListener('change', this.mediaQueryHandler);
+            }
+            else if (this.mediaQuery.removeListener) {
+                this.mediaQuery.removeListener(this.mediaQueryHandler);
+            }
+        }
     }
     updateExpandedStates() {
         this.navItems.forEach((item) => {
@@ -6186,6 +6250,23 @@ class SidebarComponent {
     handleToggleCollapse() {
         this.toggleCollapse.emit();
     }
+    handleToggleOpen() {
+        this.toggleOpen.emit();
+    }
+    handleClose() {
+        this.close.emit();
+    }
+    handleOverlayClick() {
+        if (this.effectiveIsMobile && this.isOpen) {
+            this.handleClose();
+        }
+    }
+    handleEscapeKey(event) {
+        if (event.key === 'Escape' && this.effectiveIsMobile && this.isOpen) {
+            event.preventDefault();
+            this.handleClose();
+        }
+    }
     /**
      * Get SVG icon as SafeHtml based on icon name
      */
@@ -6196,6 +6277,8 @@ class SidebarComponent {
             'chevron-left': 'M15 18l-6-6 6-6',
             'chevron-right': 'M9 18l6-6-6-6',
             'chevron-down': 'M6 9l6 6 6-6',
+            'menu': 'M3 12H21M3 6H21M3 18H21',
+            'x': 'M18 6L6 18M6 6L18 18',
             'settings': 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z',
             'bell': 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9',
             'edit': 'M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7',
@@ -6208,11 +6291,11 @@ class SidebarComponent {
         return this.sanitizer.bypassSecurityTrustHtml(svg);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarComponent, deps: [{ token: i1$2.Router }, { token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SidebarComponent, isStandalone: true, selector: "sefin-sidebar", inputs: { navItems: "navItems", isMobile: "isMobile", isOpen: "isOpen", isCollapsed: "isCollapsed", headerTitle: "headerTitle", headerSubtitle: "headerSubtitle", headerIcon: "headerIcon", footerVersion: "footerVersion", showFooter: "showFooter" }, outputs: { toggleCollapse: "toggleCollapse" }, ngImport: i0, template: "<aside\n  class=\"sefin-sidebar\"\n  [class.sefin-sidebar--mobile]=\"isMobile\"\n  [class.sefin-sidebar--open]=\"isOpen\"\n  [class.sefin-sidebar--collapsed]=\"isCollapsed && !isMobile\"\n>\n  <div class=\"sefin-sidebar__header\">\n    @if (!isCollapsed || isMobile) {\n      <div class=\"sefin-sidebar__header-content\">\n        <div class=\"sefin-sidebar__header-icon-container\">\n          <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n        </div>\n        <div class=\"sefin-sidebar__header-text\">\n          <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n          <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n        </div>\n      </div>\n    }\n    @if (!isMobile) {\n      <button\n        type=\"button\"\n        class=\"sefin-sidebar__toggle\"\n        (click)=\"handleToggleCollapse()\"\n        [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n        [attr.aria-expanded]=\"!isCollapsed\"\n      >\n        <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 16)\"></span>\n      </button>\n    }\n  </div>\n\n  <nav class=\"sefin-sidebar__nav\">\n    <ul class=\"sefin-sidebar__nav-list\">\n      @for (item of navItems; track item.label) {\n        <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n          <!-- Parent item -->\n          <button\n            type=\"button\"\n            class=\"sefin-sidebar__nav-link\"\n            [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n            [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n            [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute)\"\n            [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n            [attr.aria-label]=\"isCollapsed && !isMobile ? item.label : null\"\n            (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n          >\n            @if (item.icon) {\n              <div class=\"sefin-sidebar__nav-icon-wrapper\">\n                <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n              </div>\n            }\n            @if (!isCollapsed || isMobile) {\n              <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n              @if (hasChildren(item)) {\n                <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n                  <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n                </div>\n              }\n            }\n          </button>\n          <!-- Children items -->\n          @if (hasChildren(item) && item.expanded && (!isCollapsed || isMobile)) {\n            <ul class=\"sefin-sidebar__nav-sub-list\">\n              @for (child of item.children; track child.label) {\n                <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n                  <!-- Level 1: Section headers (non-clickable) -->\n                  <div class=\"sefin-sidebar__nav-section-header\">\n                    <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n                  </div>\n                  <!-- Level 2: Grandchildren items (clickable with bullets) -->\n                  @if (hasChildren(child)) {\n                    <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n                      @for (grandchild of child.children; track grandchild.label) {\n                        <li class=\"sefin-sidebar__nav-sub-sub-item\">\n                          <button\n                            type=\"button\"\n                            class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n                            [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n                            [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n                            (click)=\"navigate(grandchild.route || '')\"\n                          >\n                            @if (!isActive(grandchild.route || '')) {\n                              <div class=\"sefin-sidebar__nav-bullet\"></div>\n                            }\n                            <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n                          </button>\n                        </li>\n                      }\n                    </ul>\n                  }\n                </li>\n              }\n            </ul>\n          }\n        </li>\n      }\n    </ul>\n  </nav>\n  \n  @if (showFooter) {\n    <div class=\"sefin-sidebar__footer\">\n      <div class=\"sefin-sidebar__footer-content\">\n        <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n      </div>\n    </div>\n  }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100vh;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header:after{content:\"\";position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:56px;height:56px;z-index:100;pointer-events:none}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:18px;height:18px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-18px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(-100%)}.sefin-sidebar.sefin-sidebar--mobile.sefin-sidebar--open{transform:translate(0)}@media(max-width:768px){.sefin-sidebar{transform:translate(-100%)}.sefin-sidebar.sefin-sidebar--open{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SidebarComponent, isStandalone: true, selector: "sefin-sidebar", inputs: { navItems: "navItems", isMobile: "isMobile", isOpen: "isOpen", isCollapsed: "isCollapsed", headerTitle: "headerTitle", headerSubtitle: "headerSubtitle", headerIcon: "headerIcon", footerVersion: "footerVersion", showFooter: "showFooter" }, outputs: { toggleCollapse: "toggleCollapse", toggleOpen: "toggleOpen", close: "close" }, host: { listeners: { "document:keydown": "handleEscapeKey($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Overlay for mobile -->\n@if (effectiveIsMobile && isOpen) {\n  <div\n    class=\"sefin-sidebar__overlay\"\n    (click)=\"handleOverlayClick()\"\n    [attr.aria-hidden]=\"!isOpen\"\n    role=\"presentation\"\n  ></div>\n}\n\n<aside\n  class=\"sefin-sidebar\"\n  [class.sefin-sidebar--mobile]=\"effectiveIsMobile\"\n  [class.sefin-sidebar--open]=\"isOpen\"\n  [class.sefin-sidebar--collapsed]=\"isCollapsed && !effectiveIsMobile\"\n  [attr.aria-hidden]=\"effectiveIsMobile && !isOpen\"\n>\n  <div class=\"sefin-sidebar__header\">\n    @if (!isCollapsed || effectiveIsMobile) {\n      <div class=\"sefin-sidebar__header-content\">\n        <div class=\"sefin-sidebar__header-icon-container\">\n          <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n        </div>\n        <div class=\"sefin-sidebar__header-text\">\n          <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n          <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n        </div>\n      </div>\n    }\n    @if (effectiveIsMobile) {\n      <button\n        type=\"button\"\n        class=\"sefin-sidebar__close-button\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close sidebar\"\n      >\n        <span class=\"sefin-sidebar__close-icon\" [innerHTML]=\"getIconSvg('x', 20)\"></span>\n      </button>\n    }\n    @if (!effectiveIsMobile) {\n      <button\n        type=\"button\"\n        class=\"sefin-sidebar__toggle\"\n        (click)=\"handleToggleCollapse()\"\n        [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n        [attr.aria-expanded]=\"!isCollapsed\"\n      >\n        <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 16)\"></span>\n      </button>\n    }\n  </div>\n\n  <nav class=\"sefin-sidebar__nav\">\n    <ul class=\"sefin-sidebar__nav-list\">\n      @for (item of navItems; track item.label) {\n        <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n          <!-- Parent item -->\n          <button\n            type=\"button\"\n            class=\"sefin-sidebar__nav-link\"\n            [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n            [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n            [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute)\"\n            [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n            [attr.aria-label]=\"isCollapsed && !effectiveIsMobile ? item.label : null\"\n            (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n          >\n            @if (item.icon) {\n              <div class=\"sefin-sidebar__nav-icon-wrapper\">\n                <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n              </div>\n            }\n            @if (!isCollapsed || effectiveIsMobile) {\n              <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n              @if (hasChildren(item)) {\n                <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n                  <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n                </div>\n              }\n            }\n          </button>\n          <!-- Children items -->\n          @if (hasChildren(item) && item.expanded && (!isCollapsed || effectiveIsMobile)) {\n            <ul class=\"sefin-sidebar__nav-sub-list\">\n              @for (child of item.children; track child.label) {\n                <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n                  <!-- Level 1: Section headers (non-clickable) -->\n                  <div class=\"sefin-sidebar__nav-section-header\">\n                    <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n                  </div>\n                  <!-- Level 2: Grandchildren items (clickable with bullets) -->\n                  @if (hasChildren(child)) {\n                    <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n                      @for (grandchild of child.children; track grandchild.label) {\n                        <li class=\"sefin-sidebar__nav-sub-sub-item\">\n                          <button\n                            type=\"button\"\n                            class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n                            [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n                            [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n                            (click)=\"navigate(grandchild.route || '')\"\n                          >\n                            @if (!isActive(grandchild.route || '')) {\n                              <div class=\"sefin-sidebar__nav-bullet\"></div>\n                            }\n                            <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n                          </button>\n                        </li>\n                      }\n                    </ul>\n                  }\n                </li>\n              }\n            </ul>\n          }\n        </li>\n      }\n    </ul>\n  </nav>\n  \n  @if (showFooter) {\n    <div class=\"sefin-sidebar__footer\">\n      <div class=\"sefin-sidebar__footer-content\">\n        <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n      </div>\n    </div>\n  }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100vh;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header:after{content:\"\";position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:56px;height:56px;z-index:100;pointer-events:none}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:18px;height:18px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-18px}.sefin-sidebar__close-button{position:absolute;right:var(--sefin-spacing-md, 1rem);top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;z-index:101;color:#fff;padding:0;margin:0;line-height:0}.sefin-sidebar__close-button .sefin-sidebar__close-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;pointer-events:none}.sefin-sidebar__close-button .sefin-sidebar__close-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}.sefin-sidebar__close-button:hover{background:#ffffff4d;transform:translateY(-50%) scale(1.05)}.sefin-sidebar__close-button:active{transform:translateY(-50%) scale(.95)}.sefin-sidebar__close-button:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(-100%);z-index:1000}.sefin-sidebar.sefin-sidebar--mobile.sefin-sidebar--open{transform:translate(0)}.sefin-sidebar__overlay{position:fixed;inset:0;background:#00000080;z-index:999;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.sefin-sidebar{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sefin-sidebar', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<aside\n  class=\"sefin-sidebar\"\n  [class.sefin-sidebar--mobile]=\"isMobile\"\n  [class.sefin-sidebar--open]=\"isOpen\"\n  [class.sefin-sidebar--collapsed]=\"isCollapsed && !isMobile\"\n>\n  <div class=\"sefin-sidebar__header\">\n    @if (!isCollapsed || isMobile) {\n      <div class=\"sefin-sidebar__header-content\">\n        <div class=\"sefin-sidebar__header-icon-container\">\n          <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n        </div>\n        <div class=\"sefin-sidebar__header-text\">\n          <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n          <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n        </div>\n      </div>\n    }\n    @if (!isMobile) {\n      <button\n        type=\"button\"\n        class=\"sefin-sidebar__toggle\"\n        (click)=\"handleToggleCollapse()\"\n        [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n        [attr.aria-expanded]=\"!isCollapsed\"\n      >\n        <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 16)\"></span>\n      </button>\n    }\n  </div>\n\n  <nav class=\"sefin-sidebar__nav\">\n    <ul class=\"sefin-sidebar__nav-list\">\n      @for (item of navItems; track item.label) {\n        <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n          <!-- Parent item -->\n          <button\n            type=\"button\"\n            class=\"sefin-sidebar__nav-link\"\n            [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n            [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n            [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute)\"\n            [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n            [attr.aria-label]=\"isCollapsed && !isMobile ? item.label : null\"\n            (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n          >\n            @if (item.icon) {\n              <div class=\"sefin-sidebar__nav-icon-wrapper\">\n                <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n              </div>\n            }\n            @if (!isCollapsed || isMobile) {\n              <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n              @if (hasChildren(item)) {\n                <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n                  <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n                </div>\n              }\n            }\n          </button>\n          <!-- Children items -->\n          @if (hasChildren(item) && item.expanded && (!isCollapsed || isMobile)) {\n            <ul class=\"sefin-sidebar__nav-sub-list\">\n              @for (child of item.children; track child.label) {\n                <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n                  <!-- Level 1: Section headers (non-clickable) -->\n                  <div class=\"sefin-sidebar__nav-section-header\">\n                    <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n                  </div>\n                  <!-- Level 2: Grandchildren items (clickable with bullets) -->\n                  @if (hasChildren(child)) {\n                    <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n                      @for (grandchild of child.children; track grandchild.label) {\n                        <li class=\"sefin-sidebar__nav-sub-sub-item\">\n                          <button\n                            type=\"button\"\n                            class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n                            [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n                            [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n                            (click)=\"navigate(grandchild.route || '')\"\n                          >\n                            @if (!isActive(grandchild.route || '')) {\n                              <div class=\"sefin-sidebar__nav-bullet\"></div>\n                            }\n                            <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n                          </button>\n                        </li>\n                      }\n                    </ul>\n                  }\n                </li>\n              }\n            </ul>\n          }\n        </li>\n      }\n    </ul>\n  </nav>\n  \n  @if (showFooter) {\n    <div class=\"sefin-sidebar__footer\">\n      <div class=\"sefin-sidebar__footer-content\">\n        <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n      </div>\n    </div>\n  }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100vh;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header:after{content:\"\";position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:56px;height:56px;z-index:100;pointer-events:none}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:18px;height:18px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-18px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(-100%)}.sefin-sidebar.sefin-sidebar--mobile.sefin-sidebar--open{transform:translate(0)}@media(max-width:768px){.sefin-sidebar{transform:translate(-100%)}.sefin-sidebar.sefin-sidebar--open{transform:translate(0)}}\n"] }]
+            args: [{ selector: 'sefin-sidebar', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<!-- Overlay for mobile -->\n@if (effectiveIsMobile && isOpen) {\n  <div\n    class=\"sefin-sidebar__overlay\"\n    (click)=\"handleOverlayClick()\"\n    [attr.aria-hidden]=\"!isOpen\"\n    role=\"presentation\"\n  ></div>\n}\n\n<aside\n  class=\"sefin-sidebar\"\n  [class.sefin-sidebar--mobile]=\"effectiveIsMobile\"\n  [class.sefin-sidebar--open]=\"isOpen\"\n  [class.sefin-sidebar--collapsed]=\"isCollapsed && !effectiveIsMobile\"\n  [attr.aria-hidden]=\"effectiveIsMobile && !isOpen\"\n>\n  <div class=\"sefin-sidebar__header\">\n    @if (!isCollapsed || effectiveIsMobile) {\n      <div class=\"sefin-sidebar__header-content\">\n        <div class=\"sefin-sidebar__header-icon-container\">\n          <span class=\"sefin-sidebar__header-icon\" [innerHTML]=\"getIconSvg(headerIcon, 24)\"></span>\n        </div>\n        <div class=\"sefin-sidebar__header-text\">\n          <h1 class=\"sefin-sidebar__header-title\">{{ headerTitle }}</h1>\n          <span class=\"sefin-sidebar__header-subtitle\">{{ headerSubtitle }}</span>\n        </div>\n      </div>\n    }\n    @if (effectiveIsMobile) {\n      <button\n        type=\"button\"\n        class=\"sefin-sidebar__close-button\"\n        (click)=\"handleClose()\"\n        aria-label=\"Close sidebar\"\n      >\n        <span class=\"sefin-sidebar__close-icon\" [innerHTML]=\"getIconSvg('x', 20)\"></span>\n      </button>\n    }\n    @if (!effectiveIsMobile) {\n      <button\n        type=\"button\"\n        class=\"sefin-sidebar__toggle\"\n        (click)=\"handleToggleCollapse()\"\n        [attr.aria-label]=\"isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\"\n        [attr.aria-expanded]=\"!isCollapsed\"\n      >\n        <span class=\"sefin-sidebar__toggle-icon\" [innerHTML]=\"getIconSvg(isCollapsed ? 'chevron-right' : 'chevron-left', 16)\"></span>\n      </button>\n    }\n  </div>\n\n  <nav class=\"sefin-sidebar__nav\">\n    <ul class=\"sefin-sidebar__nav-list\">\n      @for (item of navItems; track item.label) {\n        <li class=\"sefin-sidebar__nav-item\" [class.sefin-sidebar__nav-item--has-children]=\"hasChildren(item)\">\n          <!-- Parent item -->\n          <button\n            type=\"button\"\n            class=\"sefin-sidebar__nav-link\"\n            [class.sefin-sidebar__nav-link--expandable]=\"hasChildren(item)\"\n            [class.sefin-sidebar__nav-link--expanded]=\"item.expanded\"\n            [class.sefin-sidebar__nav-link--active]=\"hasActiveChild(item, currentRoute)\"\n            [attr.aria-expanded]=\"hasChildren(item) ? item.expanded : null\"\n            [attr.aria-label]=\"isCollapsed && !effectiveIsMobile ? item.label : null\"\n            (click)=\"hasChildren(item) ? toggleExpand(item) : navigate(item.route || '')\"\n          >\n            @if (item.icon) {\n              <div class=\"sefin-sidebar__nav-icon-wrapper\">\n                <span class=\"sefin-sidebar__nav-icon\" [innerHTML]=\"getIconSvg(item.icon, 20)\"></span>\n              </div>\n            }\n            @if (!isCollapsed || effectiveIsMobile) {\n              <span class=\"sefin-sidebar__nav-label\">{{ item.label }}</span>\n              @if (hasChildren(item)) {\n                <div class=\"sefin-sidebar__nav-expand-icon-wrapper\" [class.sefin-sidebar__nav-expand-icon-wrapper--expanded]=\"item.expanded\">\n                  <span class=\"sefin-sidebar__nav-expand-icon\" [innerHTML]=\"getIconSvg('chevron-down', 16)\"></span>\n                </div>\n              }\n            }\n          </button>\n          <!-- Children items -->\n          @if (hasChildren(item) && item.expanded && (!isCollapsed || effectiveIsMobile)) {\n            <ul class=\"sefin-sidebar__nav-sub-list\">\n              @for (child of item.children; track child.label) {\n                <li class=\"sefin-sidebar__nav-sub-item\" [class.sefin-sidebar__nav-sub-item--has-children]=\"hasChildren(child)\">\n                  <!-- Level 1: Section headers (non-clickable) -->\n                  <div class=\"sefin-sidebar__nav-section-header\">\n                    <span class=\"sefin-sidebar__section-header-text\">{{ child.label }}</span>\n                  </div>\n                  <!-- Level 2: Grandchildren items (clickable with bullets) -->\n                  @if (hasChildren(child)) {\n                    <ul class=\"sefin-sidebar__nav-sub-sub-list\">\n                      @for (grandchild of child.children; track grandchild.label) {\n                        <li class=\"sefin-sidebar__nav-sub-sub-item\">\n                          <button\n                            type=\"button\"\n                            class=\"sefin-sidebar__nav-link sefin-sidebar__nav-link--sub-sub\"\n                            [class.sefin-sidebar__nav-link--active]=\"isActive(grandchild.route || '')\"\n                            [attr.aria-current]=\"isActive(grandchild.route || '') ? 'page' : null\"\n                            (click)=\"navigate(grandchild.route || '')\"\n                          >\n                            @if (!isActive(grandchild.route || '')) {\n                              <div class=\"sefin-sidebar__nav-bullet\"></div>\n                            }\n                            <span class=\"sefin-sidebar__nav-label\">{{ grandchild.label }}</span>\n                          </button>\n                        </li>\n                      }\n                    </ul>\n                  }\n                </li>\n              }\n            </ul>\n          }\n        </li>\n      }\n    </ul>\n  </nav>\n  \n  @if (showFooter) {\n    <div class=\"sefin-sidebar__footer\">\n      <div class=\"sefin-sidebar__footer-content\">\n        <span class=\"sefin-sidebar__footer-text\">{{ footerVersion }}</span>\n      </div>\n    </div>\n  }\n</aside>\n", styles: [".sefin-sidebar{width:288px;min-width:288px;height:100vh;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:width .3s ease-in-out,transform .3s ease-in-out}.sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;position:relative;background:linear-gradient(to right,#55c3d8,#4aafc4);min-height:auto}.sefin-sidebar__header .sefin-sidebar__header-content{display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);width:100%}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container{width:40px;height:40px;border-radius:12px;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon{color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-icon-container .sefin-sidebar__header-icon svg{width:24px;height:24px;color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:flex;flex-direction:column;gap:0}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-title{color:#fff;font-size:18px;font-weight:700;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text .sefin-sidebar__header-subtitle{color:#fffc;font-size:12px;line-height:1.2;margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__header:after{content:\"\";position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:56px;height:56px;z-index:100;pointer-events:none}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header{padding:var(--sefin-spacing-xl, 1.5rem) var(--sefin-spacing-sm, .5rem);justify-content:center}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content{flex-direction:column}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__header .sefin-sidebar__header-content .sefin-sidebar__header-text{display:none}.sefin-sidebar__footer{padding:var(--sefin-spacing-md, 1rem);border-top:1px solid #e8e8e8}.sefin-sidebar__footer .sefin-sidebar__footer-content{background:#f5f5f5;border-radius:8px;padding:var(--sefin-spacing-sm, .75rem);text-align:center}.sefin-sidebar__footer .sefin-sidebar__footer-content .sefin-sidebar__footer-text{color:#828282;font-size:12px;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__toggle{position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#fff,#f8f9fa);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d,inset 0 1px #ffffffe6;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:101;color:var(--sefin-color-text, #4a5568);padding:0;margin:0;line-height:0}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.sefin-sidebar__toggle .sefin-sidebar__toggle-icon svg{width:18px;height:18px;color:currentColor;fill:none;stroke:currentColor;pointer-events:none}.sefin-sidebar__toggle:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none;opacity:.5}.sefin-sidebar__toggle:hover{background:linear-gradient(135deg,#55c3d8,#4db8cc);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 20px #55c3d866,0 0 0 1px #55c3d833,inset 0 1px #ffffff4d}.sefin-sidebar__toggle:hover:before{opacity:.2;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%)}.sefin-sidebar__toggle:hover .sefin-sidebar__toggle-icon{transform:scale(1.1)}.sefin-sidebar__toggle:active{transform:translateY(-50%) scale(1.02);box-shadow:0 2px 12px #55c3d880,0 0 0 1px #55c3d84d,inset 0 2px 4px #0000001a}.sefin-sidebar__toggle:focus{outline:2px solid var(--sefin-color-primary, #55c3d8);outline-offset:4px;outline-style:solid}.sefin-sidebar--collapsed .sefin-sidebar__toggle{right:-18px}.sefin-sidebar__close-button{position:absolute;right:var(--sefin-spacing-md, 1rem);top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;z-index:101;color:#fff;padding:0;margin:0;line-height:0}.sefin-sidebar__close-button .sefin-sidebar__close-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;pointer-events:none}.sefin-sidebar__close-button .sefin-sidebar__close-icon svg{width:20px;height:20px;color:currentColor;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}.sefin-sidebar__close-button:hover{background:#ffffff4d;transform:translateY(-50%) scale(1.05)}.sefin-sidebar__close-button:active{transform:translateY(-50%) scale(.95)}.sefin-sidebar__close-button:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.sefin-sidebar__nav{flex:1;padding:var(--sefin-spacing-sm, .75rem);overflow:hidden}.sefin-sidebar__nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.sefin-sidebar__nav-item{margin:0}.sefin-sidebar__nav-item.sefin-sidebar__nav-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-link{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#383838;font-size:var(--sefin-font-size-base, 1rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0;justify-content:flex-start;overflow:hidden;min-width:0;font-weight:500}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link:focus{outline:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--expandable{font-weight:500}.sefin-sidebar__nav-icon-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:8px;background:#e6f7fb;transition:all .2s ease-in-out}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{width:20px;height:20px;color:#55c3d8;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper{background:#fff3}.sefin-sidebar .sefin-sidebar__nav-link.sefin-sidebar__nav-link--active:hover .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper{background:#55c3d8}.sefin-sidebar .sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-icon-wrapper .sefin-sidebar__nav-icon svg{color:#fff;fill:none;stroke:currentColor}.sefin-sidebar__nav-expand-icon-wrapper{margin-left:auto;transition:transform .2s ease;display:flex;align-items:center;justify-content:center}.sefin-sidebar__nav-expand-icon-wrapper.sefin-sidebar__nav-expand-icon-wrapper--expanded{transform:rotate(180deg)}.sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#828282;width:16px;height:16px;fill:none;stroke:currentColor;transition:color .2s ease-in-out}.sefin-sidebar__nav-link.sefin-sidebar__nav-link--active .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#fff}.sefin-sidebar__nav-link:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-expand-icon-wrapper .sefin-sidebar__nav-expand-icon svg{color:#55c3d8}.sefin-sidebar__nav-label{flex:1;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;opacity:1;transition:opacity .2s ease;min-width:0;overflow:hidden;display:block;line-height:1.4;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-list{list-style:none;margin:4px 0 8px;padding:0;animation:slideDown .2s ease-out}.sefin-sidebar__nav-sub-item{margin:0 0 2px}.sefin-sidebar__nav-sub-item.sefin-sidebar__nav-sub-item--has-children{margin-bottom:4px}.sefin-sidebar__nav-section-header{padding:var(--sefin-spacing-md, 1rem) var(--sefin-spacing-md, 1rem) var(--sefin-spacing-xs, .5rem) var(--sefin-spacing-md, 1rem)}.sefin-sidebar__nav-section-header .sefin-sidebar__section-header-text{color:#828282;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.sefin-sidebar__nav-sub-sub-list{list-style:none;margin:2px 0 8px;padding:0;animation:slideDown .2s ease-out;display:flex;flex-direction:column;gap:2px}.sefin-sidebar__nav-sub-sub-item{margin:0 0 2px}.sefin-sidebar__nav-link--sub-sub{width:100%;display:flex;align-items:center;gap:var(--sefin-spacing-md, .75rem);padding:var(--sefin-spacing-sm, .75rem) var(--sefin-spacing-md, 1rem);background:none;border:none;outline:none;text-align:left;cursor:pointer;color:#4f4f4f;font-size:var(--sefin-font-size-sm, .875rem);font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);transition:all .2s ease-in-out;position:relative;border-radius:12px;margin:0 var(--sefin-spacing-md, .5rem);justify-content:flex-start;overflow:hidden;min-width:0}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active){background:#e6f7fb;color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-bullet{background:#55c3d8}.sefin-sidebar__nav-link--sub-sub:hover:not(.sefin-sidebar__nav-link--active) .sefin-sidebar__nav-label{color:#55c3d8}.sefin-sidebar__nav-link--sub-sub:focus{outline:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active{background:linear-gradient(to right,#55c3d8,#4aafc4);color:#fff;font-weight:500;box-shadow:0 4px 6px #55c3d84d;border:none}.sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-label{color:#fff}.sefin-sidebar__nav-bullet{width:6px;height:6px;border-radius:50%;background:#cecece;transition:background-color .2s ease-in-out;flex-shrink:0}.sefin-sidebar .sefin-sidebar__nav-link--sub-sub.sefin-sidebar__nav-link--active .sefin-sidebar__nav-bullet{display:none}@keyframes slideDown{0%{opacity:0;max-height:0;overflow:hidden}to{opacity:1;max-height:1000px}}.sefin-sidebar.sefin-sidebar--collapsed{width:80px;min-width:80px}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-link{justify-content:center;padding:var(--sefin-spacing-md, 1rem);border-radius:12px;margin:0}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-label{opacity:0;width:0;overflow:hidden}.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-expand-icon,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-list,.sefin-sidebar.sefin-sidebar--collapsed .sefin-sidebar__nav-sub-sub-list{display:none}.sefin-sidebar.sefin-sidebar--mobile{transform:translate(-100%);z-index:1000}.sefin-sidebar.sefin-sidebar--mobile.sefin-sidebar--open{transform:translate(0)}.sefin-sidebar__overlay{position:fixed;inset:0;background:#00000080;z-index:999;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.sefin-sidebar{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: i0.ChangeDetectorRef }, { type: i1$1.DomSanitizer }], propDecorators: { navItems: [{
                 type: Input
             }], isMobile: [{
@@ -6233,12 +6316,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 type: Input
             }], toggleCollapse: [{
                 type: Output
+            }], toggleOpen: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], handleEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
             }] } });
 
 /**
  * Sidebar component exports
  */
 
+class DrawerComponent {
+    /** Drawer open state */
+    isOpen = false;
+    /** Drawer position/anchor (left, right, top, bottom) */
+    position = 'left';
+    /** Drawer width (for left/right positions) */
+    width = '288px';
+    /** Drawer height (for top/bottom positions) */
+    height = '300px';
+    /** Whether to show overlay backdrop */
+    showOverlay = true;
+    /** Whether to close on overlay click */
+    closeOnOverlayClick = true;
+    /** Whether to close on escape key */
+    closeOnEscape = true;
+    /** Close event */
+    close = new EventEmitter();
+    /** Overlay click handler */
+    handleOverlayClick() {
+        if (this.isOpen && this.closeOnOverlayClick) {
+            this.handleClose();
+        }
+    }
+    /** Close handler */
+    handleClose() {
+        this.close.emit();
+    }
+    /** Escape key handler */
+    handleEscapeKey(event) {
+        if (event.key === 'Escape' && this.isOpen && this.closeOnEscape) {
+            event.preventDefault();
+            this.handleClose();
+        }
+    }
+    /** Get drawer container classes */
+    get drawerClasses() {
+        const classes = ['sefin-drawer'];
+        classes.push(`sefin-drawer--${this.position}`);
+        if (this.isOpen) {
+            classes.push('sefin-drawer--open');
+        }
+        return classes.join(' ');
+    }
+    /** Get drawer container styles */
+    get drawerStyles() {
+        const styles = {};
+        if (this.position === 'left' || this.position === 'right') {
+            styles['width'] = this.width;
+            styles['max-width'] = '90vw';
+        }
+        else {
+            styles['height'] = this.height;
+            styles['max-height'] = '90vh';
+        }
+        return styles;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DrawerComponent, isStandalone: true, selector: "sefin-drawer", inputs: { isOpen: "isOpen", position: "position", width: "width", height: "height", showOverlay: "showOverlay", closeOnOverlayClick: "closeOnOverlayClick", closeOnEscape: "closeOnEscape" }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "handleEscapeKey($event)" } }, ngImport: i0, template: "<!-- Overlay for drawer -->\n@if (isOpen && showOverlay) {\n  <div\n    class=\"sefin-drawer__overlay\"\n    (click)=\"handleOverlayClick()\"\n    [attr.aria-hidden]=\"!isOpen\"\n    role=\"presentation\"\n  ></div>\n}\n\n<aside\n  [class]=\"drawerClasses\"\n  [ngStyle]=\"drawerStyles\"\n  [attr.aria-hidden]=\"!isOpen\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"isOpen\"\n>\n  <div class=\"sefin-drawer__content\">\n    <ng-content></ng-content>\n  </div>\n</aside>\n", styles: [".sefin-drawer{position:fixed;z-index:1000;background:#fff;display:flex;flex-direction:column;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;transition:transform .3s ease-in-out}.sefin-drawer.sefin-drawer--left{top:0;left:0;height:100vh;width:288px;border-right:1px solid #e8e8e8;transform:translate(-100%)}.sefin-drawer.sefin-drawer--left.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--right{top:0;right:0;height:100vh;width:288px;border-left:1px solid #e8e8e8;transform:translate(100%)}.sefin-drawer.sefin-drawer--right.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--top{top:0;left:0;right:0;width:100vw;height:300px;border-bottom:1px solid #e8e8e8;transform:translateY(-100%)}.sefin-drawer.sefin-drawer--top.sefin-drawer--open{transform:translateY(0)}.sefin-drawer.sefin-drawer--bottom{bottom:0;left:0;right:0;width:100vw;height:300px;border-top:1px solid #e8e8e8;transform:translateY(100%)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--open{transform:translateY(0)}.sefin-drawer__content{flex:1;overflow:auto;display:flex;flex-direction:column;height:100%}.sefin-drawer__overlay{position:fixed;inset:0;background:#00000080;z-index:999;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sefin-drawer', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Overlay for drawer -->\n@if (isOpen && showOverlay) {\n  <div\n    class=\"sefin-drawer__overlay\"\n    (click)=\"handleOverlayClick()\"\n    [attr.aria-hidden]=\"!isOpen\"\n    role=\"presentation\"\n  ></div>\n}\n\n<aside\n  [class]=\"drawerClasses\"\n  [ngStyle]=\"drawerStyles\"\n  [attr.aria-hidden]=\"!isOpen\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"isOpen\"\n>\n  <div class=\"sefin-drawer__content\">\n    <ng-content></ng-content>\n  </div>\n</aside>\n", styles: [".sefin-drawer{position:fixed;z-index:1000;background:#fff;display:flex;flex-direction:column;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;transition:transform .3s ease-in-out}.sefin-drawer.sefin-drawer--left{top:0;left:0;height:100vh;width:288px;border-right:1px solid #e8e8e8;transform:translate(-100%)}.sefin-drawer.sefin-drawer--left.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--right{top:0;right:0;height:100vh;width:288px;border-left:1px solid #e8e8e8;transform:translate(100%)}.sefin-drawer.sefin-drawer--right.sefin-drawer--open{transform:translate(0)}.sefin-drawer.sefin-drawer--top{top:0;left:0;right:0;width:100vw;height:300px;border-bottom:1px solid #e8e8e8;transform:translateY(-100%)}.sefin-drawer.sefin-drawer--top.sefin-drawer--open{transform:translateY(0)}.sefin-drawer.sefin-drawer--bottom{bottom:0;left:0;right:0;width:100vw;height:300px;border-top:1px solid #e8e8e8;transform:translateY(100%)}.sefin-drawer.sefin-drawer--bottom.sefin-drawer--open{transform:translateY(0)}.sefin-drawer__content{flex:1;overflow:auto;display:flex;flex-direction:column;height:100%}.sefin-drawer__overlay{position:fixed;inset:0;background:#00000080;z-index:999;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], showOverlay: [{
+                type: Input
+            }], closeOnOverlayClick: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], handleEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+/**
+ * Drawer component exports
+ */
+
 /**
  * Organisms index
  */
@@ -6254,5 +6431,5 @@ const STYLES_PATH = './styles/index.scss';
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SidebarComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns };
+export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, DrawerComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SidebarComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns };
 //# sourceMappingURL=lesterarte-sefin-ui.mjs.map