npm - @raintonic/formaui - Versions diffs - 0.9.0 → 0.9.2 - Mend

@raintonic/formaui 0.9.0 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/fesm2022/raintonic-formaui-components-side-panel.mjs CHANGED Viewed

@@ -139,7 +139,7 @@ class FuiSidePanelComponent {
         return Array.from(panel.querySelectorAll(selectors)).filter((el) => el.offsetParent !== null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiSidePanelComponent, isStandalone: true, selector: "fui-side-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, topOffset: { classPropertyName: "topOffset", publicName: "topOffset", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.fui-side-panel--open": "open()", "class.fui-side-panel--no-backdrop": "!hasBackdrop()", "style.--_side-panel-top-offset": "topOffset()" }, classAttribute: "fui-side-panel" }, viewQueries: [{ propertyName: "_panelElement", first: true, predicate: ["panelElement"], descendants: true }], ngImport: i0, template: "@if (open() && hasBackdrop()) {\r\n  <div class=\"fui-side-panel__backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\r\n}\r\n<div\r\n  #panelElement\r\n  class=\"fui-side-panel__panel\"\r\n  [style.width]=\"width()\"\r\n  role=\"dialog\"\r\n  [attr.aria-modal]=\"open() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel() || (!ariaLabelledBy() ? title() : null)\"\r\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\r\n  tabindex=\"-1\"\r\n>\r\n  <div class=\"fui-side-panel__header\">\r\n    <span class=\"fui-side-panel__title\">{{ title() }}</span>\r\n    <button type=\"button\" class=\"fui-side-panel__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n      <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"fui-side-panel__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div class=\"fui-side-panel__footer\">\r\n    <ng-content select=\"[sidePanelFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-side-panel{--fui-side-panel-z-index: 10;--fui-side-panel-bg: var(--fui-bg-default);--fui-side-panel-border-color: var(--fui-border-default);--fui-side-panel-shadow: -4px 0 16px rgba(0, 0, 0, .1);--fui-side-panel-backdrop-color: rgba(0, 0, 0, .2);--fui-side-panel-header-padding: var(--fui-spacing-6) var(--fui-spacing-7);--fui-side-panel-content-padding: var(--fui-spacing-4);--fui-side-panel-footer-padding: var(--fui-spacing-6) var(--fui-spacing-7);position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;left:0;pointer-events:none;z-index:var(--fui-side-panel-z-index);overflow:hidden}.fui-side-panel--open{pointer-events:auto}.fui-side-panel--no-backdrop.fui-side-panel--open{pointer-events:none}.fui-side-panel__backdrop{position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;left:0;background-color:var(--fui-side-panel-backdrop-color);z-index:1;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-side-panel__panel{position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;display:flex;flex-direction:column;background-color:var(--fui-side-panel-bg);border-left:1px solid var(--fui-side-panel-border-color);box-shadow:var(--fui-side-panel-shadow);z-index:2;transform:translate(100%);transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-side-panel--open .fui-side-panel__panel{transform:translate(0)}.fui-side-panel__panel{pointer-events:auto}.fui-side-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-side-panel-header-padding);border-bottom:1px solid var(--fui-side-panel-border-color);flex-shrink:0}.fui-side-panel__title{font-size:var(--fui-text-md);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary)}.fui-side-panel__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-base) var(--fui-ease-in-out),color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-side-panel__close:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-side-panel__content{flex:1;overflow-y:auto;background-color:var(--fui-bg-subtle);padding:var(--fui-side-panel-content-padding)}.fui-side-panel__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-4);padding:var(--fui-side-panel-footer-padding);border-top:1px solid var(--fui-side-panel-border-color);flex-shrink:0}.fui-side-panel__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-side-panel__backdrop,.fui-side-panel__panel,.fui-side-panel__close{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiSidePanelComponent, isStandalone: true, selector: "fui-side-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, topOffset: { classPropertyName: "topOffset", publicName: "topOffset", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.fui-side-panel--open": "open()", "class.fui-side-panel--no-backdrop": "!hasBackdrop()", "style.--_side-panel-top-offset": "topOffset()" }, classAttribute: "fui-side-panel" }, viewQueries: [{ propertyName: "_panelElement", first: true, predicate: ["panelElement"], descendants: true }], ngImport: i0, template: "@if (open() && hasBackdrop()) {\r\n  <div class=\"fui-side-panel__backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\r\n}\r\n<div\r\n  #panelElement\r\n  class=\"fui-side-panel__panel\"\r\n  [style.width]=\"width()\"\r\n  role=\"dialog\"\r\n  [attr.aria-modal]=\"open() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel() || (!ariaLabelledBy() ? title() : null)\"\r\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\r\n  tabindex=\"-1\"\r\n>\r\n  <div class=\"fui-side-panel__header\">\r\n    <span class=\"fui-side-panel__title\">{{ title() }}</span>\r\n    <button type=\"button\" class=\"fui-side-panel__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n      <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"fui-side-panel__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div class=\"fui-side-panel__footer\">\r\n    <ng-content select=\"[sidePanelFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-side-panel{--fui-side-panel-z-index: 10;--fui-side-panel-bg: var(--fui-bg-default);--fui-side-panel-border-color: var(--fui-border-default);--fui-side-panel-shadow: -4px 0 16px rgba(0, 0, 0, .1);--fui-side-panel-backdrop-color: rgba(0, 0, 0, .2);--fui-side-panel-header-padding: var(--fui-spacing-6) var(--fui-spacing-7);--fui-side-panel-content-padding: var(--fui-spacing-4);--fui-side-panel-footer-padding: var(--fui-spacing-6) var(--fui-spacing-7);position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;left:0;pointer-events:none;z-index:var(--fui-side-panel-z-index);overflow:hidden}.fui-side-panel--open{pointer-events:auto}.fui-side-panel--no-backdrop.fui-side-panel--open{pointer-events:none}.fui-side-panel__backdrop{position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;left:0;background-color:var(--fui-side-panel-backdrop-color);z-index:1;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-side-panel__panel{position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;display:flex;flex-direction:column;background-color:var(--fui-side-panel-bg);border-left:var(--fui-border-width-sm) solid var(--fui-side-panel-border-color);box-shadow:var(--fui-side-panel-shadow);z-index:2;transform:translate(100%);transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-side-panel--open .fui-side-panel__panel{transform:translate(0)}.fui-side-panel__panel{pointer-events:auto}.fui-side-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-side-panel-header-padding);border-bottom:var(--fui-border-width-sm) solid var(--fui-side-panel-border-color);flex-shrink:0}.fui-side-panel__title{font-size:var(--fui-text-md);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary)}.fui-side-panel__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-base) var(--fui-ease-in-out),color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-side-panel__close:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-side-panel__content{flex:1;overflow-y:auto;background-color:var(--fui-bg-subtle);padding:var(--fui-side-panel-content-padding)}.fui-side-panel__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-4);padding:var(--fui-side-panel-footer-padding);border-top:var(--fui-border-width-sm) solid var(--fui-side-panel-border-color);flex-shrink:0}.fui-side-panel__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-side-panel__backdrop,.fui-side-panel__panel,.fui-side-panel__close{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidePanelComponent, decorators: [{
             type: Component,
@@ -148,7 +148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[class.fui-side-panel--open]': 'open()',
                         '[class.fui-side-panel--no-backdrop]': '!hasBackdrop()',
                         '[style.--_side-panel-top-offset]': 'topOffset()',
-                    }, template: "@if (open() && hasBackdrop()) {\r\n  <div class=\"fui-side-panel__backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\r\n}\r\n<div\r\n  #panelElement\r\n  class=\"fui-side-panel__panel\"\r\n  [style.width]=\"width()\"\r\n  role=\"dialog\"\r\n  [attr.aria-modal]=\"open() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel() || (!ariaLabelledBy() ? title() : null)\"\r\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\r\n  tabindex=\"-1\"\r\n>\r\n  <div class=\"fui-side-panel__header\">\r\n    <span class=\"fui-side-panel__title\">{{ title() }}</span>\r\n    <button type=\"button\" class=\"fui-side-panel__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n      <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"fui-side-panel__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div class=\"fui-side-panel__footer\">\r\n    <ng-content select=\"[sidePanelFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-side-panel{--fui-side-panel-z-index: 10;--fui-side-panel-bg: var(--fui-bg-default);--fui-side-panel-border-color: var(--fui-border-default);--fui-side-panel-shadow: -4px 0 16px rgba(0, 0, 0, .1);--fui-side-panel-backdrop-color: rgba(0, 0, 0, .2);--fui-side-panel-header-padding: var(--fui-spacing-6) var(--fui-spacing-7);--fui-side-panel-content-padding: var(--fui-spacing-4);--fui-side-panel-footer-padding: var(--fui-spacing-6) var(--fui-spacing-7);position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;left:0;pointer-events:none;z-index:var(--fui-side-panel-z-index);overflow:hidden}.fui-side-panel--open{pointer-events:auto}.fui-side-panel--no-backdrop.fui-side-panel--open{pointer-events:none}.fui-side-panel__backdrop{position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;left:0;background-color:var(--fui-side-panel-backdrop-color);z-index:1;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-side-panel__panel{position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;display:flex;flex-direction:column;background-color:var(--fui-side-panel-bg);border-left:1px solid var(--fui-side-panel-border-color);box-shadow:var(--fui-side-panel-shadow);z-index:2;transform:translate(100%);transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-side-panel--open .fui-side-panel__panel{transform:translate(0)}.fui-side-panel__panel{pointer-events:auto}.fui-side-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-side-panel-header-padding);border-bottom:1px solid var(--fui-side-panel-border-color);flex-shrink:0}.fui-side-panel__title{font-size:var(--fui-text-md);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary)}.fui-side-panel__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-base) var(--fui-ease-in-out),color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-side-panel__close:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-side-panel__content{flex:1;overflow-y:auto;background-color:var(--fui-bg-subtle);padding:var(--fui-side-panel-content-padding)}.fui-side-panel__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-4);padding:var(--fui-side-panel-footer-padding);border-top:1px solid var(--fui-side-panel-border-color);flex-shrink:0}.fui-side-panel__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-side-panel__backdrop,.fui-side-panel__panel,.fui-side-panel__close{transition:none}}\n"] }]
+                    }, template: "@if (open() && hasBackdrop()) {\r\n  <div class=\"fui-side-panel__backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\r\n}\r\n<div\r\n  #panelElement\r\n  class=\"fui-side-panel__panel\"\r\n  [style.width]=\"width()\"\r\n  role=\"dialog\"\r\n  [attr.aria-modal]=\"open() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel() || (!ariaLabelledBy() ? title() : null)\"\r\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\r\n  tabindex=\"-1\"\r\n>\r\n  <div class=\"fui-side-panel__header\">\r\n    <span class=\"fui-side-panel__title\">{{ title() }}</span>\r\n    <button type=\"button\" class=\"fui-side-panel__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n      <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  </div>\r\n  <div class=\"fui-side-panel__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div class=\"fui-side-panel__footer\">\r\n    <ng-content select=\"[sidePanelFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-side-panel{--fui-side-panel-z-index: 10;--fui-side-panel-bg: var(--fui-bg-default);--fui-side-panel-border-color: var(--fui-border-default);--fui-side-panel-shadow: -4px 0 16px rgba(0, 0, 0, .1);--fui-side-panel-backdrop-color: rgba(0, 0, 0, .2);--fui-side-panel-header-padding: var(--fui-spacing-6) var(--fui-spacing-7);--fui-side-panel-content-padding: var(--fui-spacing-4);--fui-side-panel-footer-padding: var(--fui-spacing-6) var(--fui-spacing-7);position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;left:0;pointer-events:none;z-index:var(--fui-side-panel-z-index);overflow:hidden}.fui-side-panel--open{pointer-events:auto}.fui-side-panel--no-backdrop.fui-side-panel--open{pointer-events:none}.fui-side-panel__backdrop{position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;left:0;background-color:var(--fui-side-panel-backdrop-color);z-index:1;transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-side-panel__panel{position:fixed;top:var(--_side-panel-top-offset, 0);right:0;bottom:0;display:flex;flex-direction:column;background-color:var(--fui-side-panel-bg);border-left:var(--fui-border-width-sm) solid var(--fui-side-panel-border-color);box-shadow:var(--fui-side-panel-shadow);z-index:2;transform:translate(100%);transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-side-panel--open .fui-side-panel__panel{transform:translate(0)}.fui-side-panel__panel{pointer-events:auto}.fui-side-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-side-panel-header-padding);border-bottom:var(--fui-border-width-sm) solid var(--fui-side-panel-border-color);flex-shrink:0}.fui-side-panel__title{font-size:var(--fui-text-md);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary)}.fui-side-panel__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-base) var(--fui-ease-in-out),color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-side-panel__close:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-side-panel__content{flex:1;overflow-y:auto;background-color:var(--fui-bg-subtle);padding:var(--fui-side-panel-content-padding)}.fui-side-panel__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-4);padding:var(--fui-side-panel-footer-padding);border-top:var(--fui-border-width-sm) solid var(--fui-side-panel-border-color);flex-shrink:0}.fui-side-panel__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-side-panel__backdrop,.fui-side-panel__panel,.fui-side-panel__close{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], topOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "topOffset", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], _panelElement: [{
                 type: ViewChild,
                 args: ['panelElement', { static: false }]

package/fesm2022/raintonic-formaui-components-side-panel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"raintonic-formaui-components-side-panel.mjs","sources":["../../../lib/components/side-panel/side-panel.intl.ts","../../../lib/components/side-panel/side-panel.component.ts","../../../lib/components/side-panel/side-panel.component.html","../../../lib/components/side-panel/raintonic-formaui-components-side-panel.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiSidePanelIntl extends FuiIntlBase {\r\n closeAriaLabel = 'Close panel';\r\n}\r\n","import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n effect,\r\n ElementRef,\r\n HostListener,\r\n inject,\r\n input,\r\n output,\r\n ViewChild,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiSidePanelIntl } from './side-panel.intl';\r\n\r\n/*\r\n @component FuiSidePanelComponent\r\n * @selector fui-side-panel\r\n * @description A slide-in side panel overlay with optional backdrop, focus trapping, and keyboard dismiss.\r\n * Renders from the right edge of the viewport with configurable width and top offset.\r\n \r\n @input open - Whether the side panel is visible. Default false.\r\n * @input title - Title text displayed in the panel header.\r\n * @input width - CSS width of the panel. Default '500px'.\r\n * @input hasBackdrop - Whether to show a backdrop behind the panel. Default true.\r\n * @input topOffset - CSS top offset (e.g. to clear a fixed toolbar). Default '0px'.\r\n * @input ariaLabel - ARIA label for the panel when no visible title is present.\r\n * @input ariaLabelledBy - ID of an element that labels the panel.\r\n * @output closed - Emits when the panel requests closing (close button, Escape, or backdrop click).\r\n \r\n @cssvar --_side-panel-top-offset - Internal CSS variable set from the topOffset input.\r\n \r\n @example\r\n * <fui-side-panel [open]=\"isPanelOpen\" title=\"Details\" (closed)=\"isPanelOpen = false\">\r\n * <p>Panel content here.</p>\r\n * </fui-side-panel>\r\n /\r\n@Component({\r\n selector: 'fui-side-panel',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './side-panel.component.html',\r\n styleUrl: './side-panel.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-side-panel',\r\n '[class.fui-side-panel--open]': 'open()',\r\n '[class.fui-side-panel--no-backdrop]': '!hasBackdrop()',\r\n '[style.--_side-panel-top-offset]': 'topOffset()',\r\n },\r\n})\r\nexport class FuiSidePanelComponent {\r\n private readonly _document = inject(DOCUMENT);\r\n readonly intl = inject(FuiSidePanelIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n readonly open = input(false);\r\n readonly title = input('');\r\n readonly width = input('500px');\r\n readonly hasBackdrop = input(true);\r\n readonly topOffset = input('0px');\r\n\r\n /* ARIA label for the side panel, used when no visible title is present /\r\n readonly ariaLabel = input<string \| null>(null);\r\n\r\n /* ID of an element that labels the side panel /\r\n readonly ariaLabelledBy = input<string \| null>(null);\r\n\r\n readonly closed = output();\r\n\r\n @ViewChild('panelElement', { static: false })\r\n private _panelElement?: ElementRef<HTMLElement>;\r\n\r\n private _previouslyFocusedElement: HTMLElement \| null = null;\r\n\r\n constructor() {\r\n // Watch open state changes for focus management\r\n effect(() => {\r\n const isOpen = this.open();\r\n if (isOpen) {\r\n this._saveFocusAndTrap();\r\n } else {\r\n this._restoreFocus();\r\n }\r\n });\r\n\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n }\r\n\r\n @HostListener('keydown', ['$event'])\r\n onKeydown(event: KeyboardEvent): void {\r\n if (!this.open()) return;\r\n\r\n if (event.key === 'Escape') {\r\n event.preventDefault();\r\n this.close();\r\n return;\r\n }\r\n\r\n // Focus trap cycling\r\n if (event.key === 'Tab') {\r\n const focusableElements = this._getFocusableElements();\r\n if (focusableElements.length === 0) {\r\n event.preventDefault();\r\n return;\r\n }\r\n\r\n const firstFocusable = focusableElements[0];\r\n const lastFocusable = focusableElements[focusableElements.length - 1];\r\n const activeElement = this._document.activeElement;\r\n\r\n if (event.shiftKey) {\r\n if (activeElement === firstFocusable) {\r\n event.preventDefault();\r\n lastFocusable.focus();\r\n }\r\n } else {\r\n if (activeElement === lastFocusable) {\r\n event.preventDefault();\r\n firstFocusable.focus();\r\n }\r\n }\r\n }\r\n }\r\n\r\n close(): void {\r\n this.closed.emit();\r\n }\r\n\r\n private _saveFocusAndTrap(): void {\r\n this._previouslyFocusedElement = this._document.activeElement as HTMLElement;\r\n // Focus the panel after it renders\r\n setTimeout(() => {\r\n this._focusFirstTabbable();\r\n });\r\n }\r\n\r\n private _restoreFocus(): void {\r\n if (this._previouslyFocusedElement) {\r\n this._previouslyFocusedElement.focus();\r\n this._previouslyFocusedElement = null;\r\n }\r\n }\r\n\r\n private _focusFirstTabbable(): void {\r\n const focusableElements = this._getFocusableElements();\r\n if (focusableElements.length > 0) {\r\n focusableElements[0].focus();\r\n } else {\r\n this._panelElement?.nativeElement.focus();\r\n }\r\n }\r\n\r\n private _getFocusableElements(): HTMLElement[] {\r\n const panel = this._panelElement?.nativeElement;\r\n if (!panel) return [];\r\n\r\n const selectors = [\r\n 'a[href]',\r\n 'button:not([disabled])',\r\n 'textarea:not([disabled])',\r\n 'input:not([disabled])',\r\n 'select:not([disabled])',\r\n '[tabindex]:not([tabindex=\"-1\"])',\r\n '[contenteditable=\"true\"]',\r\n ].join(',');\r\n\r\n return Array.from(panel.querySelectorAll<HTMLElement>(selectors)).filter((el) => el.offsetParent !== null);\r\n }\r\n}\r\n","@if (open() && hasBackdrop()) {\r\n <div class=\"fui-side-panel__backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\r\n}\r\n<div\r\n #panelElement\r\n class=\"fui-side-panel__panel\"\r\n [style.width]=\"width()\"\r\n role=\"dialog\"\r\n [attr.aria-modal]=\"open() ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel() \|\| (!ariaLabelledBy() ? title() : null)\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\r\n tabindex=\"-1\"\r\n>\r\n <div class=\"fui-side-panel__header\">\r\n <span class=\"fui-side-panel__title\">{{ title() }}</span>\r\n <button type=\"button\" class=\"fui-side-panel__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n </button>\r\n </div>\r\n <div class=\"fui-side-panel__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"fui-side-panel__footer\">\r\n <ng-content select=\"[sidePanelFooter]\"></ng-content>\r\n </div>\r\n</div>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"raintonic-formaui-components-side-panel.mjs","sources":["../../../lib/components/side-panel/side-panel.intl.ts","../../../lib/components/side-panel/side-panel.component.ts","../../../lib/components/side-panel/side-panel.component.html","../../../lib/components/side-panel/raintonic-formaui-components-side-panel.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiSidePanelIntl extends FuiIntlBase {\r\n closeAriaLabel = 'Close panel';\r\n}\r\n","import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n effect,\r\n ElementRef,\r\n HostListener,\r\n inject,\r\n input,\r\n output,\r\n ViewChild,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiSidePanelIntl } from './side-panel.intl';\r\n\r\n/*\r\n @component FuiSidePanelComponent\r\n * @selector fui-side-panel\r\n * @description A slide-in side panel overlay with optional backdrop, focus trapping, and keyboard dismiss.\r\n * Renders from the right edge of the viewport with configurable width and top offset.\r\n \r\n @input open - Whether the side panel is visible. Default false.\r\n * @input title - Title text displayed in the panel header.\r\n * @input width - CSS width of the panel. Default '500px'.\r\n * @input hasBackdrop - Whether to show a backdrop behind the panel. Default true.\r\n * @input topOffset - CSS top offset (e.g. to clear a fixed toolbar). Default '0px'.\r\n * @input ariaLabel - ARIA label for the panel when no visible title is present.\r\n * @input ariaLabelledBy - ID of an element that labels the panel.\r\n * @output closed - Emits when the panel requests closing (close button, Escape, or backdrop click).\r\n \r\n @cssvar --_side-panel-top-offset - Internal CSS variable set from the topOffset input.\r\n \r\n @example\r\n * <fui-side-panel [open]=\"isPanelOpen\" title=\"Details\" (closed)=\"isPanelOpen = false\">\r\n * <p>Panel content here.</p>\r\n * </fui-side-panel>\r\n /\r\n@Component({\r\n selector: 'fui-side-panel',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './side-panel.component.html',\r\n styleUrl: './side-panel.component.scss',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-side-panel',\r\n '[class.fui-side-panel--open]': 'open()',\r\n '[class.fui-side-panel--no-backdrop]': '!hasBackdrop()',\r\n '[style.--_side-panel-top-offset]': 'topOffset()',\r\n },\r\n})\r\nexport class FuiSidePanelComponent {\r\n private readonly _document = inject(DOCUMENT);\r\n readonly intl = inject(FuiSidePanelIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n readonly open = input(false);\r\n readonly title = input('');\r\n readonly width = input('500px');\r\n readonly hasBackdrop = input(true);\r\n readonly topOffset = input('0px');\r\n\r\n /* ARIA label for the side panel, used when no visible title is present /\r\n readonly ariaLabel = input<string \| null>(null);\r\n\r\n /* ID of an element that labels the side panel /\r\n readonly ariaLabelledBy = input<string \| null>(null);\r\n\r\n readonly closed = output();\r\n\r\n @ViewChild('panelElement', { static: false })\r\n private _panelElement?: ElementRef<HTMLElement>;\r\n\r\n private _previouslyFocusedElement: HTMLElement \| null = null;\r\n\r\n constructor() {\r\n // Watch open state changes for focus management\r\n effect(() => {\r\n const isOpen = this.open();\r\n if (isOpen) {\r\n this._saveFocusAndTrap();\r\n } else {\r\n this._restoreFocus();\r\n }\r\n });\r\n\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n }\r\n\r\n @HostListener('keydown', ['$event'])\r\n onKeydown(event: KeyboardEvent): void {\r\n if (!this.open()) return;\r\n\r\n if (event.key === 'Escape') {\r\n event.preventDefault();\r\n this.close();\r\n return;\r\n }\r\n\r\n // Focus trap cycling\r\n if (event.key === 'Tab') {\r\n const focusableElements = this._getFocusableElements();\r\n if (focusableElements.length === 0) {\r\n event.preventDefault();\r\n return;\r\n }\r\n\r\n const firstFocusable = focusableElements[0];\r\n const lastFocusable = focusableElements[focusableElements.length - 1];\r\n const activeElement = this._document.activeElement;\r\n\r\n if (event.shiftKey) {\r\n if (activeElement === firstFocusable) {\r\n event.preventDefault();\r\n lastFocusable.focus();\r\n }\r\n } else {\r\n if (activeElement === lastFocusable) {\r\n event.preventDefault();\r\n firstFocusable.focus();\r\n }\r\n }\r\n }\r\n }\r\n\r\n close(): void {\r\n this.closed.emit();\r\n }\r\n\r\n private _saveFocusAndTrap(): void {\r\n this._previouslyFocusedElement = this._document.activeElement as HTMLElement;\r\n // Focus the panel after it renders\r\n setTimeout(() => {\r\n this._focusFirstTabbable();\r\n });\r\n }\r\n\r\n private _restoreFocus(): void {\r\n if (this._previouslyFocusedElement) {\r\n this._previouslyFocusedElement.focus();\r\n this._previouslyFocusedElement = null;\r\n }\r\n }\r\n\r\n private _focusFirstTabbable(): void {\r\n const focusableElements = this._getFocusableElements();\r\n if (focusableElements.length > 0) {\r\n focusableElements[0].focus();\r\n } else {\r\n this._panelElement?.nativeElement.focus();\r\n }\r\n }\r\n\r\n private _getFocusableElements(): HTMLElement[] {\r\n const panel = this._panelElement?.nativeElement;\r\n if (!panel) return [];\r\n\r\n const selectors = [\r\n 'a[href]',\r\n 'button:not([disabled])',\r\n 'textarea:not([disabled])',\r\n 'input:not([disabled])',\r\n 'select:not([disabled])',\r\n '[tabindex]:not([tabindex=\"-1\"])',\r\n '[contenteditable=\"true\"]',\r\n ].join(',');\r\n\r\n return Array.from(panel.querySelectorAll<HTMLElement>(selectors)).filter((el) => el.offsetParent !== null);\r\n }\r\n}\r\n","@if (open() && hasBackdrop()) {\r\n <div class=\"fui-side-panel__backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\r\n}\r\n<div\r\n #panelElement\r\n class=\"fui-side-panel__panel\"\r\n [style.width]=\"width()\"\r\n role=\"dialog\"\r\n [attr.aria-modal]=\"open() ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel() \|\| (!ariaLabelledBy() ? title() : null)\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\r\n tabindex=\"-1\"\r\n>\r\n <div class=\"fui-side-panel__header\">\r\n <span class=\"fui-side-panel__title\">{{ title() }}</span>\r\n <button type=\"button\" class=\"fui-side-panel__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n </button>\r\n </div>\r\n <div class=\"fui-side-panel__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"fui-side-panel__footer\">\r\n <ng-content select=\"[sidePanelFooter]\"></ng-content>\r\n </div>\r\n</div>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/raintonic-formaui-components-sidebar-nav-menu.mjs CHANGED Viewed

@@ -199,11 +199,11 @@ class SidebarNavSubmenuComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SidebarNavSubmenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SidebarNavSubmenuComponent, isStandalone: true, selector: "fui-sidebar-nav-submenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, submenuLabel: { classPropertyName: "submenuLabel", publicName: "submenuLabel", isSignal: true, isRequired: false, transformFunction: null }, isRoot: { classPropertyName: "isRoot", publicName: "isRoot", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ul\r\n  class=\"sidebar-nav-submenu\"\r\n  role=\"group\"\r\n  [class.sidebar-nav-submenu--root]=\"isRoot()\"\r\n  [attr.aria-label]=\"submenuLabel()\"\r\n>\r\n  @for (item of items(); track item.id; let idx = $index) {\r\n    @if (item.visible !== false) {\r\n      @if (item.separator) {\r\n        <li class=\"sidebar-nav-menu__separator\" role=\"separator\"></li>\r\n      } @else if (item.sectionHeader) {\r\n        <li class=\"sidebar-nav-menu__section-header\" role=\"heading\" [attr.aria-level]=\"depth() + 2\">\r\n          <span class=\"sidebar-nav-menu__section-header-label\">{{ item.label }}</span>\r\n        </li>\r\n      } @else {\r\n        <li\r\n          class=\"sidebar-nav-menu__item-wrapper\"\r\n          role=\"none\"\r\n          [class.sidebar-nav-menu__item-wrapper--root]=\"isRoot()\"\r\n          [class.sidebar-nav-menu__item-wrapper--expanded]=\"hasChildren(item) && isExpanded(item)\"\r\n        >\r\n          @if (hasChildren(item)) {\r\n            <!-- Parent item with submenu -->\r\n            <button\r\n              class=\"sidebar-nav-menu__item sidebar-nav-menu__item--parent\"\r\n              type=\"button\"\r\n              [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n              [class.sidebar-nav-menu__item--expanded]=\"isExpanded(item)\"\r\n              [id]=\"item.id + '_trigger'\"\r\n              [attr.aria-haspopup]=\"true\"\r\n              [attr.aria-expanded]=\"isExpanded(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"toggleExpand($event, item)\"\r\n              (keydown)=\"onKeydown($event, item)\"\r\n            >\r\n              <span class=\"sidebar-nav-menu__item-content\">\r\n                @if (item.icon) {\r\n                  <fui-icon\r\n                    class=\"sidebar-nav-menu__item-icon\"\r\n                    [name]=\"item.icon\"\r\n                    size=\"md\"\r\n                    aria-hidden=\"true\"\r\n                  ></fui-icon>\r\n                }\r\n                <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n              </span>\r\n              <fui-icon\r\n                class=\"sidebar-nav-menu__item-chevron\"\r\n                name=\"caret-right\"\r\n                [class.sidebar-nav-menu__item-chevron--expanded]=\"isExpanded(item)\"\r\n                size=\"sm\"\r\n                aria-hidden=\"true\"\r\n              ></fui-icon>\r\n            </button>\r\n\r\n            <!-- Submenu content with left border -->\r\n            @if (isExpanded(item)) {\r\n              <div\r\n                class=\"sidebar-nav-submenu__inline\"\r\n                animate.enter=\"sidebar-nav-submenu__inline--enter\"\r\n                animate.leave=\"sidebar-nav-submenu__inline--leave\"\r\n              >\r\n                <div class=\"sidebar-nav-submenu__border\"></div>\r\n                <fui-sidebar-nav-submenu\r\n                  [items]=\"item.items!\"\r\n                  [submenuLabel]=\"item.label || ''\"\r\n                  [isRoot]=\"false\"\r\n                  [depth]=\"depth() + 1\"\r\n                  (itemClick)=\"itemClick.emit($event)\"\r\n                />\r\n              </div>\r\n            }\r\n          } @else {\r\n            <!-- Leaf item -->\r\n            @if (item.routerLink) {\r\n              <a\r\n                class=\"sidebar-nav-menu__item\"\r\n                routerLinkActive=\"sidebar-nav-menu__item--active\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [routerLink]=\"item.routerLink\"\r\n                [queryParams]=\"item.queryParams || undefined\"\r\n                [fragment]=\"item.fragment || undefined\"\r\n                [target]=\"item.target\"\r\n                [title]=\"item.title\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </a>\r\n            } @else {\r\n              <button\r\n                class=\"sidebar-nav-menu__item\"\r\n                type=\"button\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [title]=\"item.title\"\r\n                [disabled]=\"item.disabled\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </button>\r\n            }\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  }\r\n</ul>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:2px solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:1px solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"], dependencies: [{ kind: "component", type: SidebarNavSubmenuComponent, selector: "fui-sidebar-nav-submenu", inputs: ["items", "submenuLabel", "isRoot", "depth"], outputs: ["itemClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SidebarNavSubmenuComponent, isStandalone: true, selector: "fui-sidebar-nav-submenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, submenuLabel: { classPropertyName: "submenuLabel", publicName: "submenuLabel", isSignal: true, isRequired: false, transformFunction: null }, isRoot: { classPropertyName: "isRoot", publicName: "isRoot", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ul\r\n  class=\"sidebar-nav-submenu\"\r\n  role=\"group\"\r\n  [class.sidebar-nav-submenu--root]=\"isRoot()\"\r\n  [attr.aria-label]=\"submenuLabel()\"\r\n>\r\n  @for (item of items(); track item.id; let idx = $index) {\r\n    @if (item.visible !== false) {\r\n      @if (item.separator) {\r\n        <li class=\"sidebar-nav-menu__separator\" role=\"separator\"></li>\r\n      } @else if (item.sectionHeader) {\r\n        <li class=\"sidebar-nav-menu__section-header\" role=\"heading\" [attr.aria-level]=\"depth() + 2\">\r\n          <span class=\"sidebar-nav-menu__section-header-label\">{{ item.label }}</span>\r\n        </li>\r\n      } @else {\r\n        <li\r\n          class=\"sidebar-nav-menu__item-wrapper\"\r\n          role=\"none\"\r\n          [class.sidebar-nav-menu__item-wrapper--root]=\"isRoot()\"\r\n          [class.sidebar-nav-menu__item-wrapper--expanded]=\"hasChildren(item) && isExpanded(item)\"\r\n        >\r\n          @if (hasChildren(item)) {\r\n            <!-- Parent item with submenu -->\r\n            <button\r\n              class=\"sidebar-nav-menu__item sidebar-nav-menu__item--parent\"\r\n              type=\"button\"\r\n              [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n              [class.sidebar-nav-menu__item--expanded]=\"isExpanded(item)\"\r\n              [id]=\"item.id + '_trigger'\"\r\n              [attr.aria-haspopup]=\"true\"\r\n              [attr.aria-expanded]=\"isExpanded(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"toggleExpand($event, item)\"\r\n              (keydown)=\"onKeydown($event, item)\"\r\n            >\r\n              <span class=\"sidebar-nav-menu__item-content\">\r\n                @if (item.icon) {\r\n                  <fui-icon\r\n                    class=\"sidebar-nav-menu__item-icon\"\r\n                    [name]=\"item.icon\"\r\n                    size=\"md\"\r\n                    aria-hidden=\"true\"\r\n                  ></fui-icon>\r\n                }\r\n                <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n              </span>\r\n              <fui-icon\r\n                class=\"sidebar-nav-menu__item-chevron\"\r\n                name=\"caret-right\"\r\n                [class.sidebar-nav-menu__item-chevron--expanded]=\"isExpanded(item)\"\r\n                size=\"sm\"\r\n                aria-hidden=\"true\"\r\n              ></fui-icon>\r\n            </button>\r\n\r\n            <!-- Submenu content with left border -->\r\n            @if (isExpanded(item)) {\r\n              <div\r\n                class=\"sidebar-nav-submenu__inline\"\r\n                animate.enter=\"sidebar-nav-submenu__inline--enter\"\r\n                animate.leave=\"sidebar-nav-submenu__inline--leave\"\r\n              >\r\n                <div class=\"sidebar-nav-submenu__border\"></div>\r\n                <fui-sidebar-nav-submenu\r\n                  [items]=\"item.items!\"\r\n                  [submenuLabel]=\"item.label || ''\"\r\n                  [isRoot]=\"false\"\r\n                  [depth]=\"depth() + 1\"\r\n                  (itemClick)=\"itemClick.emit($event)\"\r\n                />\r\n              </div>\r\n            }\r\n          } @else {\r\n            <!-- Leaf item -->\r\n            @if (item.routerLink) {\r\n              <a\r\n                class=\"sidebar-nav-menu__item\"\r\n                routerLinkActive=\"sidebar-nav-menu__item--active\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [routerLink]=\"item.routerLink\"\r\n                [queryParams]=\"item.queryParams || undefined\"\r\n                [fragment]=\"item.fragment || undefined\"\r\n                [target]=\"item.target\"\r\n                [title]=\"item.title\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </a>\r\n            } @else {\r\n              <button\r\n                class=\"sidebar-nav-menu__item\"\r\n                type=\"button\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [title]=\"item.title\"\r\n                [disabled]=\"item.disabled\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </button>\r\n            }\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  }\r\n</ul>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:var(--fui-border-width-sm) solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"], dependencies: [{ kind: "component", type: SidebarNavSubmenuComponent, selector: "fui-sidebar-nav-submenu", inputs: ["items", "submenuLabel", "isRoot", "depth"], outputs: ["itemClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SidebarNavSubmenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fui-sidebar-nav-submenu', standalone: true, imports: [RouterLink, RouterLinkActive, FuiIconComponent], template: "<ul\r\n  class=\"sidebar-nav-submenu\"\r\n  role=\"group\"\r\n  [class.sidebar-nav-submenu--root]=\"isRoot()\"\r\n  [attr.aria-label]=\"submenuLabel()\"\r\n>\r\n  @for (item of items(); track item.id; let idx = $index) {\r\n    @if (item.visible !== false) {\r\n      @if (item.separator) {\r\n        <li class=\"sidebar-nav-menu__separator\" role=\"separator\"></li>\r\n      } @else if (item.sectionHeader) {\r\n        <li class=\"sidebar-nav-menu__section-header\" role=\"heading\" [attr.aria-level]=\"depth() + 2\">\r\n          <span class=\"sidebar-nav-menu__section-header-label\">{{ item.label }}</span>\r\n        </li>\r\n      } @else {\r\n        <li\r\n          class=\"sidebar-nav-menu__item-wrapper\"\r\n          role=\"none\"\r\n          [class.sidebar-nav-menu__item-wrapper--root]=\"isRoot()\"\r\n          [class.sidebar-nav-menu__item-wrapper--expanded]=\"hasChildren(item) && isExpanded(item)\"\r\n        >\r\n          @if (hasChildren(item)) {\r\n            <!-- Parent item with submenu -->\r\n            <button\r\n              class=\"sidebar-nav-menu__item sidebar-nav-menu__item--parent\"\r\n              type=\"button\"\r\n              [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n              [class.sidebar-nav-menu__item--expanded]=\"isExpanded(item)\"\r\n              [id]=\"item.id + '_trigger'\"\r\n              [attr.aria-haspopup]=\"true\"\r\n              [attr.aria-expanded]=\"isExpanded(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"toggleExpand($event, item)\"\r\n              (keydown)=\"onKeydown($event, item)\"\r\n            >\r\n              <span class=\"sidebar-nav-menu__item-content\">\r\n                @if (item.icon) {\r\n                  <fui-icon\r\n                    class=\"sidebar-nav-menu__item-icon\"\r\n                    [name]=\"item.icon\"\r\n                    size=\"md\"\r\n                    aria-hidden=\"true\"\r\n                  ></fui-icon>\r\n                }\r\n                <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n              </span>\r\n              <fui-icon\r\n                class=\"sidebar-nav-menu__item-chevron\"\r\n                name=\"caret-right\"\r\n                [class.sidebar-nav-menu__item-chevron--expanded]=\"isExpanded(item)\"\r\n                size=\"sm\"\r\n                aria-hidden=\"true\"\r\n              ></fui-icon>\r\n            </button>\r\n\r\n            <!-- Submenu content with left border -->\r\n            @if (isExpanded(item)) {\r\n              <div\r\n                class=\"sidebar-nav-submenu__inline\"\r\n                animate.enter=\"sidebar-nav-submenu__inline--enter\"\r\n                animate.leave=\"sidebar-nav-submenu__inline--leave\"\r\n              >\r\n                <div class=\"sidebar-nav-submenu__border\"></div>\r\n                <fui-sidebar-nav-submenu\r\n                  [items]=\"item.items!\"\r\n                  [submenuLabel]=\"item.label || ''\"\r\n                  [isRoot]=\"false\"\r\n                  [depth]=\"depth() + 1\"\r\n                  (itemClick)=\"itemClick.emit($event)\"\r\n                />\r\n              </div>\r\n            }\r\n          } @else {\r\n            <!-- Leaf item -->\r\n            @if (item.routerLink) {\r\n              <a\r\n                class=\"sidebar-nav-menu__item\"\r\n                routerLinkActive=\"sidebar-nav-menu__item--active\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [routerLink]=\"item.routerLink\"\r\n                [queryParams]=\"item.queryParams || undefined\"\r\n                [fragment]=\"item.fragment || undefined\"\r\n                [target]=\"item.target\"\r\n                [title]=\"item.title\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </a>\r\n            } @else {\r\n              <button\r\n                class=\"sidebar-nav-menu__item\"\r\n                type=\"button\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [title]=\"item.title\"\r\n                [disabled]=\"item.disabled\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </button>\r\n            }\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  }\r\n</ul>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:2px solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:1px solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"] }]
+            args: [{ selector: 'fui-sidebar-nav-submenu', standalone: true, imports: [RouterLink, RouterLinkActive, FuiIconComponent], template: "<ul\r\n  class=\"sidebar-nav-submenu\"\r\n  role=\"group\"\r\n  [class.sidebar-nav-submenu--root]=\"isRoot()\"\r\n  [attr.aria-label]=\"submenuLabel()\"\r\n>\r\n  @for (item of items(); track item.id; let idx = $index) {\r\n    @if (item.visible !== false) {\r\n      @if (item.separator) {\r\n        <li class=\"sidebar-nav-menu__separator\" role=\"separator\"></li>\r\n      } @else if (item.sectionHeader) {\r\n        <li class=\"sidebar-nav-menu__section-header\" role=\"heading\" [attr.aria-level]=\"depth() + 2\">\r\n          <span class=\"sidebar-nav-menu__section-header-label\">{{ item.label }}</span>\r\n        </li>\r\n      } @else {\r\n        <li\r\n          class=\"sidebar-nav-menu__item-wrapper\"\r\n          role=\"none\"\r\n          [class.sidebar-nav-menu__item-wrapper--root]=\"isRoot()\"\r\n          [class.sidebar-nav-menu__item-wrapper--expanded]=\"hasChildren(item) && isExpanded(item)\"\r\n        >\r\n          @if (hasChildren(item)) {\r\n            <!-- Parent item with submenu -->\r\n            <button\r\n              class=\"sidebar-nav-menu__item sidebar-nav-menu__item--parent\"\r\n              type=\"button\"\r\n              [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n              [class.sidebar-nav-menu__item--expanded]=\"isExpanded(item)\"\r\n              [id]=\"item.id + '_trigger'\"\r\n              [attr.aria-haspopup]=\"true\"\r\n              [attr.aria-expanded]=\"isExpanded(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"toggleExpand($event, item)\"\r\n              (keydown)=\"onKeydown($event, item)\"\r\n            >\r\n              <span class=\"sidebar-nav-menu__item-content\">\r\n                @if (item.icon) {\r\n                  <fui-icon\r\n                    class=\"sidebar-nav-menu__item-icon\"\r\n                    [name]=\"item.icon\"\r\n                    size=\"md\"\r\n                    aria-hidden=\"true\"\r\n                  ></fui-icon>\r\n                }\r\n                <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n              </span>\r\n              <fui-icon\r\n                class=\"sidebar-nav-menu__item-chevron\"\r\n                name=\"caret-right\"\r\n                [class.sidebar-nav-menu__item-chevron--expanded]=\"isExpanded(item)\"\r\n                size=\"sm\"\r\n                aria-hidden=\"true\"\r\n              ></fui-icon>\r\n            </button>\r\n\r\n            <!-- Submenu content with left border -->\r\n            @if (isExpanded(item)) {\r\n              <div\r\n                class=\"sidebar-nav-submenu__inline\"\r\n                animate.enter=\"sidebar-nav-submenu__inline--enter\"\r\n                animate.leave=\"sidebar-nav-submenu__inline--leave\"\r\n              >\r\n                <div class=\"sidebar-nav-submenu__border\"></div>\r\n                <fui-sidebar-nav-submenu\r\n                  [items]=\"item.items!\"\r\n                  [submenuLabel]=\"item.label || ''\"\r\n                  [isRoot]=\"false\"\r\n                  [depth]=\"depth() + 1\"\r\n                  (itemClick)=\"itemClick.emit($event)\"\r\n                />\r\n              </div>\r\n            }\r\n          } @else {\r\n            <!-- Leaf item -->\r\n            @if (item.routerLink) {\r\n              <a\r\n                class=\"sidebar-nav-menu__item\"\r\n                routerLinkActive=\"sidebar-nav-menu__item--active\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [routerLink]=\"item.routerLink\"\r\n                [queryParams]=\"item.queryParams || undefined\"\r\n                [fragment]=\"item.fragment || undefined\"\r\n                [target]=\"item.target\"\r\n                [title]=\"item.title\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </a>\r\n            } @else {\r\n              <button\r\n                class=\"sidebar-nav-menu__item\"\r\n                type=\"button\"\r\n                [class.sidebar-nav-menu__item--disabled]=\"item.disabled\"\r\n                [attr.tabindex]=\"item.disabled ? '-1' : '0'\"\r\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n                [title]=\"item.title\"\r\n                [disabled]=\"item.disabled\"\r\n                (click)=\"onLeafClick($event, item)\"\r\n                (keydown)=\"onKeydown($event, item)\"\r\n              >\r\n                <span class=\"sidebar-nav-menu__item-content\">\r\n                  @if (item.icon) {\r\n                    <fui-icon\r\n                      class=\"sidebar-nav-menu__item-icon\"\r\n                      [name]=\"item.icon\"\r\n                      size=\"md\"\r\n                      aria-hidden=\"true\"\r\n                    ></fui-icon>\r\n                  }\r\n                  <span class=\"sidebar-nav-menu__item-label\">{{ item.label }}</span>\r\n                </span>\r\n              </button>\r\n            }\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  }\r\n</ul>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:var(--fui-border-width-sm) solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], submenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenuLabel", required: false }] }], isRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRoot", required: false }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 class FuiSidebarNavSearchIntl extends FuiIntlBase {
@@ -423,7 +423,7 @@ class FuiSidebarNavMenuComponent {
         this.itemClick.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarNavMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiSidebarNavMenuComponent, isStandalone: true, selector: "fui-sidebar-nav-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, filterString: { classPropertyName: "filterString", publicName: "filterString", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterString: "filterStringChange", itemClick: "itemClick" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "fui-sidebar-nav-menu" }, ngImport: i0, template: "<div class=\"fui-sidebar-nav-menu__header\">\r\n  <ng-content select=\"[fuiSidebarNavHeader]\"></ng-content>\r\n</div>\r\n\r\n<fui-sidebar-nav-search [(filterString)]=\"filterString\" />\r\n\r\n<div class=\"fui-sidebar-nav-menu__body\">\r\n  <fui-sidebar-nav-submenu\r\n    [items]=\"_filteredItems()\"\r\n    [submenuLabel]=\"ariaLabel()\"\r\n    [isRoot]=\"true\"\r\n    (itemClick)=\"_onItemClick($event)\"\r\n  />\r\n</div>\r\n\r\n<div class=\"fui-sidebar-nav-menu__footer\">\r\n  <ng-content select=\"[fuiSidebarNavFooter]\"></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:2px solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:1px solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"], dependencies: [{ kind: "component", type: SidebarNavSubmenuComponent, selector: "fui-sidebar-nav-submenu", inputs: ["items", "submenuLabel", "isRoot", "depth"], outputs: ["itemClick"] }, { kind: "component", type: FuiSidebarNavSearchComponent, selector: "fui-sidebar-nav-search", inputs: ["filterString", "placeholder"], outputs: ["filterStringChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiSidebarNavMenuComponent, isStandalone: true, selector: "fui-sidebar-nav-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, filterString: { classPropertyName: "filterString", publicName: "filterString", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterString: "filterStringChange", itemClick: "itemClick" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "fui-sidebar-nav-menu" }, ngImport: i0, template: "<div class=\"fui-sidebar-nav-menu__header\">\r\n  <ng-content select=\"[fuiSidebarNavHeader]\"></ng-content>\r\n</div>\r\n\r\n<fui-sidebar-nav-search [(filterString)]=\"filterString\" />\r\n\r\n<div class=\"fui-sidebar-nav-menu__body\">\r\n  <fui-sidebar-nav-submenu\r\n    [items]=\"_filteredItems()\"\r\n    [submenuLabel]=\"ariaLabel()\"\r\n    [isRoot]=\"true\"\r\n    (itemClick)=\"_onItemClick($event)\"\r\n  />\r\n</div>\r\n\r\n<div class=\"fui-sidebar-nav-menu__footer\">\r\n  <ng-content select=\"[fuiSidebarNavFooter]\"></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:var(--fui-border-width-sm) solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"], dependencies: [{ kind: "component", type: SidebarNavSubmenuComponent, selector: "fui-sidebar-nav-submenu", inputs: ["items", "submenuLabel", "isRoot", "depth"], outputs: ["itemClick"] }, { kind: "component", type: FuiSidebarNavSearchComponent, selector: "fui-sidebar-nav-search", inputs: ["filterString", "placeholder"], outputs: ["filterStringChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarNavMenuComponent, decorators: [{
             type: Component,
@@ -431,7 +431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         role: 'navigation',
                         '[attr.aria-label]': 'ariaLabel()',
                         class: 'fui-sidebar-nav-menu',
-                    }, template: "<div class=\"fui-sidebar-nav-menu__header\">\r\n  <ng-content select=\"[fuiSidebarNavHeader]\"></ng-content>\r\n</div>\r\n\r\n<fui-sidebar-nav-search [(filterString)]=\"filterString\" />\r\n\r\n<div class=\"fui-sidebar-nav-menu__body\">\r\n  <fui-sidebar-nav-submenu\r\n    [items]=\"_filteredItems()\"\r\n    [submenuLabel]=\"ariaLabel()\"\r\n    [isRoot]=\"true\"\r\n    (itemClick)=\"_onItemClick($event)\"\r\n  />\r\n</div>\r\n\r\n<div class=\"fui-sidebar-nav-menu__footer\">\r\n  <ng-content select=\"[fuiSidebarNavFooter]\"></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:2px solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:1px solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"] }]
+                    }, template: "<div class=\"fui-sidebar-nav-menu__header\">\r\n  <ng-content select=\"[fuiSidebarNavHeader]\"></ng-content>\r\n</div>\r\n\r\n<fui-sidebar-nav-search [(filterString)]=\"filterString\" />\r\n\r\n<div class=\"fui-sidebar-nav-menu__body\">\r\n  <fui-sidebar-nav-submenu\r\n    [items]=\"_filteredItems()\"\r\n    [submenuLabel]=\"ariaLabel()\"\r\n    [isRoot]=\"true\"\r\n    (itemClick)=\"_onItemClick($event)\"\r\n  />\r\n</div>\r\n\r\n<div class=\"fui-sidebar-nav-menu__footer\">\r\n  <ng-content select=\"[fuiSidebarNavFooter]\"></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}:host{--fui-snm-bg: var(--fui-bg-subtle);--fui-snm-item-color: var(--fui-text-secondary);--fui-snm-item-bg-hover: var(--fui-bg-muted);--fui-snm-item-bg-active: var(--fui-primary-10);--fui-snm-item-color-disabled: var(--fui-neutral-60);--fui-snm-separator-color: var(--fui-neutral-40);--fui-snm-section-header-color: var(--fui-neutral-60);--fui-snm-submenu-border-color: var(--fui-neutral-40);--fui-snm-item-radius: var(--fui-radius-sm);--fui-snm-item-gap: var(--fui-spacing-1);--fui-snm-item-padding-y: var(--fui-spacing-3);--fui-snm-item-padding-x: var(--fui-spacing-4);--fui-snm-submenu-indent: var(--fui-spacing-7);--fui-snm-section-header-padding-y: var(--fui-spacing-4);--fui-snm-section-header-padding-x: var(--fui-spacing-4);--fui-snm-submenu-border-width: 1px;--fui-snm-font-family: var(--fui-font-sans);--fui-snm-font-size: var(--fui-text-sm);--fui-snm-font-weight: var(--fui-weight-regular);--fui-snm-font-weight-parent: var(--fui-weight-regular);--fui-snm-section-header-font-size: var(--fui-text-xs);--fui-snm-section-header-font-weight: var(--fui-weight-regular);--fui-snm-section-header-letter-spacing: .04em;--fui-snm-icon-color: var(--fui-text-secondary);--fui-snm-transition-duration: var(--fui-duration-fast);--fui-snm-transition-easing: var(--fui-ease-out);display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background-color:var(--fui-snm-bg);box-sizing:border-box}.fui-sidebar-nav-menu__header{flex-shrink:0}.fui-sidebar-nav-menu__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-4);padding-right:var(--fui-spacing-0)}.fui-sidebar-nav-menu__footer{flex-shrink:0}.sidebar-nav-submenu{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--fui-spacing-1);padding-left:var(--fui-spacing-2)}.sidebar-nav-submenu--root{padding-right:var(--fui-spacing-4)}.sidebar-nav-menu__section-header{list-style:none;padding:var(--fui-snm-section-header-padding-y) var(--fui-snm-section-header-padding-x)}.sidebar-nav-menu__section-header-label{display:block;font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-section-header-font-size);font-weight:var(--fui-snm-section-header-font-weight);letter-spacing:var(--fui-snm-section-header-letter-spacing);text-transform:uppercase;color:var(--fui-snm-section-header-color);-webkit-user-select:none;user-select:none}.sidebar-nav-menu__item-wrapper{display:flex;flex-direction:column;position:relative}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item{font-size:var(--fui-text-base);color:var(--fui-text-primary)}.sidebar-nav-menu__item-wrapper--root>.sidebar-nav-menu__item .sidebar-nav-menu__item-icon{--fui-icon-size: var(--fui-icon-lg)}.sidebar-nav-menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--fui-snm-item-gap);padding:var(--fui-snm-item-padding-y) var(--fui-snm-item-padding-x);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:var(--fui-snm-item-color);background:transparent;border:none;border-radius:var(--fui-snm-item-radius);font-family:var(--fui-snm-font-family);font-size:var(--fui-snm-font-size);font-weight:var(--fui-snm-font-weight);text-align:left;width:100%;box-sizing:border-box;outline:none;transition-property:background-color;transition-duration:var(--fui-snm-transition-duration);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item:hover:not(.sidebar-nav-menu__item--disabled){background-color:var(--fui-snm-item-bg-hover)}.sidebar-nav-menu__item:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-primary-50);outline-offset:-2px}.sidebar-nav-menu__item--disabled{color:var(--fui-snm-item-color-disabled);opacity:.5;pointer-events:none;cursor:default}.sidebar-nav-menu__item--parent{font-weight:var(--fui-snm-font-weight-parent)}.sidebar-nav-menu__item[href]{color:var(--fui-snm-item-color);text-decoration:none}.sidebar-nav-menu__item--active{background-color:var(--fui-snm-item-bg-active)}.sidebar-nav-menu__item-content{display:flex;align-items:center;gap:var(--fui-spacing-3);min-width:0;flex:1}.sidebar-nav-menu__item-icon{flex-shrink:0;color:var(--fui-snm-icon-color);display:inline-flex;align-items:center;justify-content:center}.sidebar-nav-menu__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav-menu__item-chevron{flex-shrink:0;color:var(--fui-snm-item-color);display:inline-flex;align-items:center;justify-content:center;transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.sidebar-nav-menu__item-chevron--expanded{transform:rotate(90deg)}.sidebar-nav-menu__separator{height:1px;background-color:var(--fui-snm-separator-color);list-style:none}.sidebar-nav-submenu__inline{position:relative;display:flex;flex-direction:row;overflow:hidden;will-change:transform,opacity}.sidebar-nav-submenu__inline .sidebar-nav-submenu{flex:1;padding-left:var(--fui-snm-submenu-indent);padding-top:var(--fui-spacing-1)}.sidebar-nav-submenu__inline--enter{animation:sidebar-nav-submenu-enter var(--fui-duration-moderate) var(--fui-ease-out) both}.sidebar-nav-submenu__inline--leave{animation:sidebar-nav-submenu-leave var(--fui-duration-fast) var(--fui-ease-out) both}@keyframes sidebar-nav-submenu-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sidebar-nav-submenu-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.sidebar-nav-submenu__border{position:relative;flex-shrink:0;width:0;margin-left:calc(var(--fui-snm-submenu-indent) - var(--fui-snm-submenu-border-width));border-bottom:var(--fui-border-width-sm) solid var(--fui-snm-submenu-border-color)}.sidebar-nav-submenu__border:before{content:\"\";position:absolute;top:0;bottom:var(--fui-spacing-2);left:0;width:1px;background-color:var(--fui-snm-submenu-border-color);border-radius:var(--fui-radius-xs)}@media(prefers-reduced-motion:reduce){.sidebar-nav-menu__item,.sidebar-nav-menu__item-chevron,.sidebar-nav-submenu__inline--enter,.sidebar-nav-submenu__inline--leave{transition:none;animation:none!important}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], filterString: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterString", required: false }] }, { type: i0.Output, args: ["filterStringChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 /**