@raintonic/formaui 0.2.1 → 0.3.1

package/fesm2022/raintonic-formaui-components-sidebar.mjs

@@ -1,6 +1,19 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, input, output, signal, computed, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+import { FuiIntlBase } from '@raintonic/formaui/core';
+
+class FuiSidebarIntl extends FuiIntlBase {
+    rootAriaLabel = 'Navigation sidebar';
+    navAriaLabel = 'Main navigation';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /**
  * # FuiSidebar Component
@@ -98,6 +111,11 @@ import { FuiIconComponent } from '@raintonic/formaui/components/icon';
  * ```
  */
 class FuiSidebarComponent {
+    intl = inject(FuiSidebarIntl);
+    _cdr = inject(ChangeDetectorRef);
+    constructor() {
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
+    }
     // Inputs using signal-based API
     opened = input(true, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
     mode = input('side', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
@@ -231,7 +249,7 @@ class FuiSidebarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiSidebarComponent, isStandalone: true, selector: "fui-sidebar", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", navItemClick: "navItemClick", backdropClick: "backdropClick" }, host: { listeners: { "document:keydown.escape": "onEsc()" }, properties: { "class.fui-sidebar-container--opened": "opened()", "class.fui-sidebar-container--over": "mode() === \"over\"", "class.fui-sidebar-container--push": "mode() === \"push\"", "class.fui-sidebar-container--side": "mode() === \"side\"", "class.fui-sidebar-container--start": "position() === \"start\"", "class.fui-sidebar-container--end": "position() === \"end\"" }, classAttribute: "fui-sidebar-container" }, ngImport: i0, template: "<!-- Backdrop -->\r\n@if (backdrop()) {\r\n  <div [class]=\"backdropClasses()\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<!-- Sidebar -->\r\n<aside\r\n  [class]=\"sidebarClasses()\"\r\n  [style]=\"sidebarStyles()\"\r\n  [attr.aria-modal]=\"mode() === 'over' && opened() ? 'true' : null\"\r\n  [attr.role]=\"mode() === 'over' && opened() ? 'dialog' : null\"\r\n  [attr.aria-label]=\"mode() === 'over' && opened() ? 'Navigation sidebar' : null\"\r\n>\r\n  <!-- Header Content -->\r\n  <div class=\"fui-sidebar__header\">\r\n    <ng-content select=\"[header]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Navigation -->\r\n  @if (navItems().length > 0) {\r\n    <nav class=\"fui-sidebar__nav\" aria-label=\"Main navigation\">\r\n      <ul class=\"fui-sidebar__nav-list\">\r\n        @for (item of navItems(); track item.id) {\r\n          <li>\r\n            <!-- Navigation Item -->\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"getNavItemClasses(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              [attr.aria-expanded]=\"item.children?.length ? isItemExpanded(item.id) : null\"\r\n              [attr.aria-current]=\"item.active ? 'page' : null\"\r\n              (click)=\"onNavItemClick(item)\"\r\n            >\r\n              @if (item.icon) {\r\n                <fui-icon [name]=\"item.icon\" size=\"md\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n              }\r\n\r\n              <span class=\"fui-sidebar__nav-label\">{{ item.label }}</span>\r\n\r\n              @if (item.children && item.children.length > 0) {\r\n                <fui-icon\r\n                  name=\"caret-down\"\r\n                  size=\"sm\"\r\n                  class=\"fui-sidebar__nav-caret\"\r\n                  [class.fui-sidebar__nav-caret--expanded]=\"isItemExpanded(item.id)\"\r\n                >\r\n                </fui-icon>\r\n              }\r\n            </button>\r\n\r\n            <!-- Child Items -->\r\n            @if (item.children && item.children.length > 0 && isItemExpanded(item.id)) {\r\n              <ul class=\"fui-sidebar__nav-children\">\r\n                @for (child of item.children; track child.id) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      [class]=\"getNavItemClasses(child, 1)\"\r\n                      [disabled]=\"child.disabled\"\r\n                      [attr.aria-current]=\"child.active ? 'page' : null\"\r\n                      (click)=\"onNavItemClick(child)\"\r\n                    >\r\n                      @if (child.icon) {\r\n                        <fui-icon [name]=\"child.icon\" size=\"sm\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n                      }\r\n\r\n                      <span class=\"fui-sidebar__nav-label\">{{ child.label }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </nav>\r\n  }\r\n\r\n  <!-- Custom Content -->\r\n  <div class=\"fui-sidebar__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Footer Content -->\r\n  <div class=\"fui-sidebar__footer\">\r\n    <ng-content select=\"[footer]\"></ng-content>\r\n  </div>\r\n</aside>\r\n", styles: [".fui-sidebar-container{position:relative;display:flex;height:100%}.fui-sidebar-container--side .fui-sidebar{position:relative;transform:none}.fui-sidebar-container--side:not(.fui-sidebar-container--opened) .fui-sidebar{width:0;overflow:hidden}.fui-sidebar-container--over .fui-sidebar{position:fixed;top:0;bottom:0;transform:translate(-100%)}.fui-sidebar-container--over.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--over.fui-sidebar-container--end .fui-sidebar{transform:translate(100%)}.fui-sidebar-container--over.fui-sidebar-container--end.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--push .fui-sidebar{position:relative;transform:translate(-100%)}.fui-sidebar-container--push.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--push.fui-sidebar-container--end .fui-sidebar{transform:translate(100%)}.fui-sidebar-container--push.fui-sidebar-container--end.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--end .fui-sidebar{right:0;left:auto}.fui-sidebar-backdrop{position:fixed;inset:0;background-color:var(--fui-dialog-backdrop-color, rgba(0, 0, 0, .32));opacity:0;visibility:hidden}.fui-sidebar-backdrop--visible{opacity:1;visibility:visible}.fui-sidebar{--fui-sidebar-width: 16rem;--fui-sidebar-bg: var(--fui-surface-02);--fui-sidebar-border-color: var(--fui-border-color);--fui-sidebar-nav-item-min-height: 2rem;--fui-sidebar-nav-item-border-radius: var(--fui-border-radius-lg);--fui-sidebar-nav-item-font-size: var(--fui-font-size-02);contain:layout style;display:flex;flex-direction:column;width:var(--fui-sidebar-width);height:100%;background-color:var(--fui-sidebar-bg);border-right:1px solid var(--fui-sidebar-border-color);overflow:hidden}.fui-sidebar__header{flex-shrink:0;padding:1rem .75rem;border-bottom:1px solid var(--fui-border-color)}.fui-sidebar__header:empty{display:none}.fui-sidebar__header [header] h1,.fui-sidebar__header [header] h2,.fui-sidebar__header [header] h3,.fui-sidebar__header [header] h4,.fui-sidebar__header [header] h5,.fui-sidebar__header [header] h6{margin:0;color:var(--fui-text-primary);font-size:var(--fui-font-size-03);font-weight:600}.fui-sidebar__nav{flex:1;overflow-y:auto;padding:.5rem 0}.fui-sidebar__nav-list{list-style:none;margin:0;padding:0}.fui-sidebar__nav-item{display:flex;align-items:center;width:calc(100% - 1.5rem);margin:.25rem .75rem;border-radius:var(--fui-sidebar-nav-item-border-radius);padding:.5rem .75rem;border:none;background-color:transparent;color:var(--fui-text-primary);font-size:var(--fui-sidebar-nav-item-font-size);text-align:left;cursor:pointer;gap:.5rem;min-height:var(--fui-sidebar-nav-item-min-height)}.fui-sidebar__nav-item:hover:not(.fui-sidebar__nav-item--disabled){background-color:var(--fui-surface-02)}.fui-sidebar__nav-item:active:not(.fui-sidebar__nav-item--disabled){background-color:var(--fui-surface-05)}.fui-sidebar__nav-item--active{background-color:var(--fui-primary-10);color:var(--fui-primary);font-weight:600}.fui-sidebar__nav-item--active .fui-sidebar__nav-icon{color:var(--fui-primary)}.fui-sidebar__nav-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed}.fui-sidebar__nav-item--disabled .fui-sidebar__nav-icon{color:var(--fui-icon-on-color-disabled)}.fui-sidebar__nav-item--child{padding-left:2rem;font-size:.8125rem}.fui-sidebar__nav-item--expandable .fui-sidebar__nav-caret{margin-left:auto}.fui-sidebar__nav-item--expandable.fui-sidebar__nav-item--expanded .fui-sidebar__nav-caret{transform:rotate(180deg)}.fui-sidebar__nav-item:focus-visible{outline:2px solid var(--fui-primary);outline-offset:-2px}.fui-sidebar__nav-icon{flex-shrink:0;color:var(--fui-icon-secondary)}.fui-sidebar__nav-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fui-sidebar__nav-caret{flex-shrink:0;color:var(--fui-icon-tertiary)}.fui-sidebar__nav-children{list-style:none;margin:0;padding:0}.fui-sidebar__content{flex-shrink:0;padding:.75rem}.fui-sidebar__footer{flex-shrink:0;padding:.75rem;border-top:1px solid var(--fui-border-color);margin-top:auto}.fui-sidebar__footer [footer]{font-size:var(--fui-font-size-01);color:var(--fui-text-secondary);text-align:center}@media(max-width:768px){.fui-sidebar{width:14rem}.fui-sidebar__nav-item{padding:.5rem;font-size:.8125rem}.fui-sidebar__nav-item--child{padding-left:1.5rem}}@media(max-width:576px){.fui-sidebar{width:12rem}.fui-sidebar__header,.fui-sidebar__content,.fui-sidebar__footer{padding:.5rem}.fui-sidebar__nav-item{padding:.25rem .5rem;min-height:2.25rem}.fui-sidebar__nav-item--child{padding-left:1rem}}@media(prefers-reduced-motion:reduce){.fui-sidebar,.fui-sidebar-backdrop,.fui-sidebar-container.fui-sidebar-container--over .fui-sidebar,.fui-sidebar-container.fui-sidebar-container--push .fui-sidebar{transition:none!important}}.fui-theme-dark .fui-sidebar{border-right-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__header{border-bottom-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__footer{border-top-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__nav-children{background-color:var(--fui-surface-05)}\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: FuiSidebarComponent, isStandalone: true, selector: "fui-sidebar", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", navItemClick: "navItemClick", backdropClick: "backdropClick" }, host: { listeners: { "document:keydown.escape": "onEsc()" }, properties: { "class.fui-sidebar-container--opened": "opened()", "class.fui-sidebar-container--over": "mode() === \"over\"", "class.fui-sidebar-container--push": "mode() === \"push\"", "class.fui-sidebar-container--side": "mode() === \"side\"", "class.fui-sidebar-container--start": "position() === \"start\"", "class.fui-sidebar-container--end": "position() === \"end\"" }, classAttribute: "fui-sidebar-container" }, ngImport: i0, template: "<!-- Backdrop -->\r\n@if (backdrop()) {\r\n  <div [class]=\"backdropClasses()\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<!-- Sidebar -->\r\n<aside\r\n  [class]=\"sidebarClasses()\"\r\n  [style]=\"sidebarStyles()\"\r\n  [attr.aria-modal]=\"mode() === 'over' && opened() ? 'true' : null\"\r\n  [attr.role]=\"mode() === 'over' && opened() ? 'dialog' : null\"\r\n  [attr.aria-label]=\"mode() === 'over' && opened() ? intl.rootAriaLabel : null\"\r\n>\r\n  <!-- Header Content -->\r\n  <div class=\"fui-sidebar__header\">\r\n    <ng-content select=\"[header]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Navigation -->\r\n  @if (navItems().length > 0) {\r\n    <nav class=\"fui-sidebar__nav\" [attr.aria-label]=\"intl.navAriaLabel\">\r\n      <ul class=\"fui-sidebar__nav-list\">\r\n        @for (item of navItems(); track item.id) {\r\n          <li>\r\n            <!-- Navigation Item -->\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"getNavItemClasses(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              [attr.aria-expanded]=\"item.children?.length ? isItemExpanded(item.id) : null\"\r\n              [attr.aria-current]=\"item.active ? 'page' : null\"\r\n              (click)=\"onNavItemClick(item)\"\r\n            >\r\n              @if (item.icon) {\r\n                <fui-icon [name]=\"item.icon\" size=\"md\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n              }\r\n\r\n              <span class=\"fui-sidebar__nav-label\">{{ item.label }}</span>\r\n\r\n              @if (item.children && item.children.length > 0) {\r\n                <fui-icon\r\n                  name=\"caret-down\"\r\n                  size=\"sm\"\r\n                  class=\"fui-sidebar__nav-caret\"\r\n                  [class.fui-sidebar__nav-caret--expanded]=\"isItemExpanded(item.id)\"\r\n                >\r\n                </fui-icon>\r\n              }\r\n            </button>\r\n\r\n            <!-- Child Items -->\r\n            @if (item.children && item.children.length > 0 && isItemExpanded(item.id)) {\r\n              <ul class=\"fui-sidebar__nav-children\">\r\n                @for (child of item.children; track child.id) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      [class]=\"getNavItemClasses(child, 1)\"\r\n                      [disabled]=\"child.disabled\"\r\n                      [attr.aria-current]=\"child.active ? 'page' : null\"\r\n                      (click)=\"onNavItemClick(child)\"\r\n                    >\r\n                      @if (child.icon) {\r\n                        <fui-icon [name]=\"child.icon\" size=\"sm\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n                      }\r\n\r\n                      <span class=\"fui-sidebar__nav-label\">{{ child.label }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </nav>\r\n  }\r\n\r\n  <!-- Custom Content -->\r\n  <div class=\"fui-sidebar__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Footer Content -->\r\n  <div class=\"fui-sidebar__footer\">\r\n    <ng-content select=\"[footer]\"></ng-content>\r\n  </div>\r\n</aside>\r\n", styles: [".fui-sidebar-container{position:relative;display:flex;height:100%}.fui-sidebar-container--side .fui-sidebar{position:relative;transform:none}.fui-sidebar-container--side:not(.fui-sidebar-container--opened) .fui-sidebar{width:0;overflow:hidden}.fui-sidebar-container--over .fui-sidebar{position:fixed;top:0;bottom:0;transform:translate(-100%)}.fui-sidebar-container--over.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--over.fui-sidebar-container--end .fui-sidebar{transform:translate(100%)}.fui-sidebar-container--over.fui-sidebar-container--end.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--push .fui-sidebar{position:relative;transform:translate(-100%)}.fui-sidebar-container--push.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--push.fui-sidebar-container--end .fui-sidebar{transform:translate(100%)}.fui-sidebar-container--push.fui-sidebar-container--end.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--end .fui-sidebar{right:0;left:auto}.fui-sidebar-backdrop{position:fixed;inset:0;background-color:var(--fui-dialog-backdrop-color, rgba(0, 0, 0, .32));opacity:0;visibility:hidden}.fui-sidebar-backdrop--visible{opacity:1;visibility:visible}.fui-sidebar{--fui-sidebar-width: 16rem;--fui-sidebar-bg: var(--fui-surface-02);--fui-sidebar-border-color: var(--fui-border-color);--fui-sidebar-nav-item-min-height: 2rem;--fui-sidebar-nav-item-border-radius: var(--fui-border-radius-lg);--fui-sidebar-nav-item-font-size: var(--fui-font-size-02);contain:layout style;display:flex;flex-direction:column;width:var(--fui-sidebar-width);height:100%;background-color:var(--fui-sidebar-bg);border-right:1px solid var(--fui-sidebar-border-color);overflow:hidden}.fui-sidebar__header{flex-shrink:0;padding:1rem .75rem;border-bottom:1px solid var(--fui-border-color)}.fui-sidebar__header:empty{display:none}.fui-sidebar__header [header] h1,.fui-sidebar__header [header] h2,.fui-sidebar__header [header] h3,.fui-sidebar__header [header] h4,.fui-sidebar__header [header] h5,.fui-sidebar__header [header] h6{margin:0;color:var(--fui-text-primary);font-size:var(--fui-font-size-03);font-weight:600}.fui-sidebar__nav{flex:1;overflow-y:auto;padding:.5rem 0}.fui-sidebar__nav-list{list-style:none;margin:0;padding:0}.fui-sidebar__nav-item{display:flex;align-items:center;width:calc(100% - 1.5rem);margin:.25rem .75rem;border-radius:var(--fui-sidebar-nav-item-border-radius);padding:.5rem .75rem;border:none;background-color:transparent;color:var(--fui-text-primary);font-size:var(--fui-sidebar-nav-item-font-size);text-align:left;cursor:pointer;gap:.5rem;min-height:var(--fui-sidebar-nav-item-min-height)}.fui-sidebar__nav-item:hover:not(.fui-sidebar__nav-item--disabled){background-color:var(--fui-surface-02)}.fui-sidebar__nav-item:active:not(.fui-sidebar__nav-item--disabled){background-color:var(--fui-surface-05)}.fui-sidebar__nav-item--active{background-color:var(--fui-primary-10);color:var(--fui-primary);font-weight:600}.fui-sidebar__nav-item--active .fui-sidebar__nav-icon{color:var(--fui-primary)}.fui-sidebar__nav-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed}.fui-sidebar__nav-item--disabled .fui-sidebar__nav-icon{color:var(--fui-icon-on-color-disabled)}.fui-sidebar__nav-item--child{padding-left:2rem;font-size:.8125rem}.fui-sidebar__nav-item--expandable .fui-sidebar__nav-caret{margin-left:auto}.fui-sidebar__nav-item--expandable.fui-sidebar__nav-item--expanded .fui-sidebar__nav-caret{transform:rotate(180deg)}.fui-sidebar__nav-item:focus-visible{outline:2px solid var(--fui-primary);outline-offset:-2px}.fui-sidebar__nav-icon{flex-shrink:0;color:var(--fui-icon-secondary)}.fui-sidebar__nav-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fui-sidebar__nav-caret{flex-shrink:0;color:var(--fui-icon-tertiary)}.fui-sidebar__nav-children{list-style:none;margin:0;padding:0}.fui-sidebar__content{flex-shrink:0;padding:.75rem}.fui-sidebar__footer{flex-shrink:0;padding:.75rem;border-top:1px solid var(--fui-border-color);margin-top:auto}.fui-sidebar__footer [footer]{font-size:var(--fui-font-size-01);color:var(--fui-text-secondary);text-align:center}@media(max-width:768px){.fui-sidebar{width:14rem}.fui-sidebar__nav-item{padding:.5rem;font-size:.8125rem}.fui-sidebar__nav-item--child{padding-left:1.5rem}}@media(max-width:576px){.fui-sidebar{width:12rem}.fui-sidebar__header,.fui-sidebar__content,.fui-sidebar__footer{padding:.5rem}.fui-sidebar__nav-item{padding:.25rem .5rem;min-height:2.25rem}.fui-sidebar__nav-item--child{padding-left:1rem}}@media(prefers-reduced-motion:reduce){.fui-sidebar,.fui-sidebar-backdrop,.fui-sidebar-container.fui-sidebar-container--over .fui-sidebar,.fui-sidebar-container.fui-sidebar-container--push .fui-sidebar{transition:none!important}}.fui-theme-dark .fui-sidebar{border-right-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__header{border-bottom-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__footer{border-top-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__nav-children{background-color:var(--fui-surface-05)}\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: FuiSidebarComponent, decorators: [{
             type: Component,
@@ -243,8 +261,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[class.fui-sidebar-container--side]': 'mode() === "side"',
                         '[class.fui-sidebar-container--start]': 'position() === "start"',
                         '[class.fui-sidebar-container--end]': 'position() === "end"',
-                    }, template: "<!-- Backdrop -->\r\n@if (backdrop()) {\r\n  <div [class]=\"backdropClasses()\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<!-- Sidebar -->\r\n<aside\r\n  [class]=\"sidebarClasses()\"\r\n  [style]=\"sidebarStyles()\"\r\n  [attr.aria-modal]=\"mode() === 'over' && opened() ? 'true' : null\"\r\n  [attr.role]=\"mode() === 'over' && opened() ? 'dialog' : null\"\r\n  [attr.aria-label]=\"mode() === 'over' && opened() ? 'Navigation sidebar' : null\"\r\n>\r\n  <!-- Header Content -->\r\n  <div class=\"fui-sidebar__header\">\r\n    <ng-content select=\"[header]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Navigation -->\r\n  @if (navItems().length > 0) {\r\n    <nav class=\"fui-sidebar__nav\" aria-label=\"Main navigation\">\r\n      <ul class=\"fui-sidebar__nav-list\">\r\n        @for (item of navItems(); track item.id) {\r\n          <li>\r\n            <!-- Navigation Item -->\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"getNavItemClasses(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              [attr.aria-expanded]=\"item.children?.length ? isItemExpanded(item.id) : null\"\r\n              [attr.aria-current]=\"item.active ? 'page' : null\"\r\n              (click)=\"onNavItemClick(item)\"\r\n            >\r\n              @if (item.icon) {\r\n                <fui-icon [name]=\"item.icon\" size=\"md\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n              }\r\n\r\n              <span class=\"fui-sidebar__nav-label\">{{ item.label }}</span>\r\n\r\n              @if (item.children && item.children.length > 0) {\r\n                <fui-icon\r\n                  name=\"caret-down\"\r\n                  size=\"sm\"\r\n                  class=\"fui-sidebar__nav-caret\"\r\n                  [class.fui-sidebar__nav-caret--expanded]=\"isItemExpanded(item.id)\"\r\n                >\r\n                </fui-icon>\r\n              }\r\n            </button>\r\n\r\n            <!-- Child Items -->\r\n            @if (item.children && item.children.length > 0 && isItemExpanded(item.id)) {\r\n              <ul class=\"fui-sidebar__nav-children\">\r\n                @for (child of item.children; track child.id) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      [class]=\"getNavItemClasses(child, 1)\"\r\n                      [disabled]=\"child.disabled\"\r\n                      [attr.aria-current]=\"child.active ? 'page' : null\"\r\n                      (click)=\"onNavItemClick(child)\"\r\n                    >\r\n                      @if (child.icon) {\r\n                        <fui-icon [name]=\"child.icon\" size=\"sm\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n                      }\r\n\r\n                      <span class=\"fui-sidebar__nav-label\">{{ child.label }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </nav>\r\n  }\r\n\r\n  <!-- Custom Content -->\r\n  <div class=\"fui-sidebar__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Footer Content -->\r\n  <div class=\"fui-sidebar__footer\">\r\n    <ng-content select=\"[footer]\"></ng-content>\r\n  </div>\r\n</aside>\r\n", styles: [".fui-sidebar-container{position:relative;display:flex;height:100%}.fui-sidebar-container--side .fui-sidebar{position:relative;transform:none}.fui-sidebar-container--side:not(.fui-sidebar-container--opened) .fui-sidebar{width:0;overflow:hidden}.fui-sidebar-container--over .fui-sidebar{position:fixed;top:0;bottom:0;transform:translate(-100%)}.fui-sidebar-container--over.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--over.fui-sidebar-container--end .fui-sidebar{transform:translate(100%)}.fui-sidebar-container--over.fui-sidebar-container--end.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--push .fui-sidebar{position:relative;transform:translate(-100%)}.fui-sidebar-container--push.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--push.fui-sidebar-container--end .fui-sidebar{transform:translate(100%)}.fui-sidebar-container--push.fui-sidebar-container--end.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--end .fui-sidebar{right:0;left:auto}.fui-sidebar-backdrop{position:fixed;inset:0;background-color:var(--fui-dialog-backdrop-color, rgba(0, 0, 0, .32));opacity:0;visibility:hidden}.fui-sidebar-backdrop--visible{opacity:1;visibility:visible}.fui-sidebar{--fui-sidebar-width: 16rem;--fui-sidebar-bg: var(--fui-surface-02);--fui-sidebar-border-color: var(--fui-border-color);--fui-sidebar-nav-item-min-height: 2rem;--fui-sidebar-nav-item-border-radius: var(--fui-border-radius-lg);--fui-sidebar-nav-item-font-size: var(--fui-font-size-02);contain:layout style;display:flex;flex-direction:column;width:var(--fui-sidebar-width);height:100%;background-color:var(--fui-sidebar-bg);border-right:1px solid var(--fui-sidebar-border-color);overflow:hidden}.fui-sidebar__header{flex-shrink:0;padding:1rem .75rem;border-bottom:1px solid var(--fui-border-color)}.fui-sidebar__header:empty{display:none}.fui-sidebar__header [header] h1,.fui-sidebar__header [header] h2,.fui-sidebar__header [header] h3,.fui-sidebar__header [header] h4,.fui-sidebar__header [header] h5,.fui-sidebar__header [header] h6{margin:0;color:var(--fui-text-primary);font-size:var(--fui-font-size-03);font-weight:600}.fui-sidebar__nav{flex:1;overflow-y:auto;padding:.5rem 0}.fui-sidebar__nav-list{list-style:none;margin:0;padding:0}.fui-sidebar__nav-item{display:flex;align-items:center;width:calc(100% - 1.5rem);margin:.25rem .75rem;border-radius:var(--fui-sidebar-nav-item-border-radius);padding:.5rem .75rem;border:none;background-color:transparent;color:var(--fui-text-primary);font-size:var(--fui-sidebar-nav-item-font-size);text-align:left;cursor:pointer;gap:.5rem;min-height:var(--fui-sidebar-nav-item-min-height)}.fui-sidebar__nav-item:hover:not(.fui-sidebar__nav-item--disabled){background-color:var(--fui-surface-02)}.fui-sidebar__nav-item:active:not(.fui-sidebar__nav-item--disabled){background-color:var(--fui-surface-05)}.fui-sidebar__nav-item--active{background-color:var(--fui-primary-10);color:var(--fui-primary);font-weight:600}.fui-sidebar__nav-item--active .fui-sidebar__nav-icon{color:var(--fui-primary)}.fui-sidebar__nav-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed}.fui-sidebar__nav-item--disabled .fui-sidebar__nav-icon{color:var(--fui-icon-on-color-disabled)}.fui-sidebar__nav-item--child{padding-left:2rem;font-size:.8125rem}.fui-sidebar__nav-item--expandable .fui-sidebar__nav-caret{margin-left:auto}.fui-sidebar__nav-item--expandable.fui-sidebar__nav-item--expanded .fui-sidebar__nav-caret{transform:rotate(180deg)}.fui-sidebar__nav-item:focus-visible{outline:2px solid var(--fui-primary);outline-offset:-2px}.fui-sidebar__nav-icon{flex-shrink:0;color:var(--fui-icon-secondary)}.fui-sidebar__nav-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fui-sidebar__nav-caret{flex-shrink:0;color:var(--fui-icon-tertiary)}.fui-sidebar__nav-children{list-style:none;margin:0;padding:0}.fui-sidebar__content{flex-shrink:0;padding:.75rem}.fui-sidebar__footer{flex-shrink:0;padding:.75rem;border-top:1px solid var(--fui-border-color);margin-top:auto}.fui-sidebar__footer [footer]{font-size:var(--fui-font-size-01);color:var(--fui-text-secondary);text-align:center}@media(max-width:768px){.fui-sidebar{width:14rem}.fui-sidebar__nav-item{padding:.5rem;font-size:.8125rem}.fui-sidebar__nav-item--child{padding-left:1.5rem}}@media(max-width:576px){.fui-sidebar{width:12rem}.fui-sidebar__header,.fui-sidebar__content,.fui-sidebar__footer{padding:.5rem}.fui-sidebar__nav-item{padding:.25rem .5rem;min-height:2.25rem}.fui-sidebar__nav-item--child{padding-left:1rem}}@media(prefers-reduced-motion:reduce){.fui-sidebar,.fui-sidebar-backdrop,.fui-sidebar-container.fui-sidebar-container--over .fui-sidebar,.fui-sidebar-container.fui-sidebar-container--push .fui-sidebar{transition:none!important}}.fui-theme-dark .fui-sidebar{border-right-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__header{border-bottom-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__footer{border-top-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__nav-children{background-color:var(--fui-surface-05)}\n"] }]
-        }], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], navItemClick: [{ type: i0.Output, args: ["navItemClick"] }], backdropClick: [{ type: i0.Output, args: ["backdropClick"] }], onEsc: [{
+                    }, template: "<!-- Backdrop -->\r\n@if (backdrop()) {\r\n  <div [class]=\"backdropClasses()\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<!-- Sidebar -->\r\n<aside\r\n  [class]=\"sidebarClasses()\"\r\n  [style]=\"sidebarStyles()\"\r\n  [attr.aria-modal]=\"mode() === 'over' && opened() ? 'true' : null\"\r\n  [attr.role]=\"mode() === 'over' && opened() ? 'dialog' : null\"\r\n  [attr.aria-label]=\"mode() === 'over' && opened() ? intl.rootAriaLabel : null\"\r\n>\r\n  <!-- Header Content -->\r\n  <div class=\"fui-sidebar__header\">\r\n    <ng-content select=\"[header]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Navigation -->\r\n  @if (navItems().length > 0) {\r\n    <nav class=\"fui-sidebar__nav\" [attr.aria-label]=\"intl.navAriaLabel\">\r\n      <ul class=\"fui-sidebar__nav-list\">\r\n        @for (item of navItems(); track item.id) {\r\n          <li>\r\n            <!-- Navigation Item -->\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"getNavItemClasses(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              [attr.aria-expanded]=\"item.children?.length ? isItemExpanded(item.id) : null\"\r\n              [attr.aria-current]=\"item.active ? 'page' : null\"\r\n              (click)=\"onNavItemClick(item)\"\r\n            >\r\n              @if (item.icon) {\r\n                <fui-icon [name]=\"item.icon\" size=\"md\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n              }\r\n\r\n              <span class=\"fui-sidebar__nav-label\">{{ item.label }}</span>\r\n\r\n              @if (item.children && item.children.length > 0) {\r\n                <fui-icon\r\n                  name=\"caret-down\"\r\n                  size=\"sm\"\r\n                  class=\"fui-sidebar__nav-caret\"\r\n                  [class.fui-sidebar__nav-caret--expanded]=\"isItemExpanded(item.id)\"\r\n                >\r\n                </fui-icon>\r\n              }\r\n            </button>\r\n\r\n            <!-- Child Items -->\r\n            @if (item.children && item.children.length > 0 && isItemExpanded(item.id)) {\r\n              <ul class=\"fui-sidebar__nav-children\">\r\n                @for (child of item.children; track child.id) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      [class]=\"getNavItemClasses(child, 1)\"\r\n                      [disabled]=\"child.disabled\"\r\n                      [attr.aria-current]=\"child.active ? 'page' : null\"\r\n                      (click)=\"onNavItemClick(child)\"\r\n                    >\r\n                      @if (child.icon) {\r\n                        <fui-icon [name]=\"child.icon\" size=\"sm\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n                      }\r\n\r\n                      <span class=\"fui-sidebar__nav-label\">{{ child.label }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </nav>\r\n  }\r\n\r\n  <!-- Custom Content -->\r\n  <div class=\"fui-sidebar__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Footer Content -->\r\n  <div class=\"fui-sidebar__footer\">\r\n    <ng-content select=\"[footer]\"></ng-content>\r\n  </div>\r\n</aside>\r\n", styles: [".fui-sidebar-container{position:relative;display:flex;height:100%}.fui-sidebar-container--side .fui-sidebar{position:relative;transform:none}.fui-sidebar-container--side:not(.fui-sidebar-container--opened) .fui-sidebar{width:0;overflow:hidden}.fui-sidebar-container--over .fui-sidebar{position:fixed;top:0;bottom:0;transform:translate(-100%)}.fui-sidebar-container--over.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--over.fui-sidebar-container--end .fui-sidebar{transform:translate(100%)}.fui-sidebar-container--over.fui-sidebar-container--end.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--push .fui-sidebar{position:relative;transform:translate(-100%)}.fui-sidebar-container--push.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--push.fui-sidebar-container--end .fui-sidebar{transform:translate(100%)}.fui-sidebar-container--push.fui-sidebar-container--end.fui-sidebar-container--opened .fui-sidebar{transform:translate(0)}.fui-sidebar-container--end .fui-sidebar{right:0;left:auto}.fui-sidebar-backdrop{position:fixed;inset:0;background-color:var(--fui-dialog-backdrop-color, rgba(0, 0, 0, .32));opacity:0;visibility:hidden}.fui-sidebar-backdrop--visible{opacity:1;visibility:visible}.fui-sidebar{--fui-sidebar-width: 16rem;--fui-sidebar-bg: var(--fui-surface-02);--fui-sidebar-border-color: var(--fui-border-color);--fui-sidebar-nav-item-min-height: 2rem;--fui-sidebar-nav-item-border-radius: var(--fui-border-radius-lg);--fui-sidebar-nav-item-font-size: var(--fui-font-size-02);contain:layout style;display:flex;flex-direction:column;width:var(--fui-sidebar-width);height:100%;background-color:var(--fui-sidebar-bg);border-right:1px solid var(--fui-sidebar-border-color);overflow:hidden}.fui-sidebar__header{flex-shrink:0;padding:1rem .75rem;border-bottom:1px solid var(--fui-border-color)}.fui-sidebar__header:empty{display:none}.fui-sidebar__header [header] h1,.fui-sidebar__header [header] h2,.fui-sidebar__header [header] h3,.fui-sidebar__header [header] h4,.fui-sidebar__header [header] h5,.fui-sidebar__header [header] h6{margin:0;color:var(--fui-text-primary);font-size:var(--fui-font-size-03);font-weight:600}.fui-sidebar__nav{flex:1;overflow-y:auto;padding:.5rem 0}.fui-sidebar__nav-list{list-style:none;margin:0;padding:0}.fui-sidebar__nav-item{display:flex;align-items:center;width:calc(100% - 1.5rem);margin:.25rem .75rem;border-radius:var(--fui-sidebar-nav-item-border-radius);padding:.5rem .75rem;border:none;background-color:transparent;color:var(--fui-text-primary);font-size:var(--fui-sidebar-nav-item-font-size);text-align:left;cursor:pointer;gap:.5rem;min-height:var(--fui-sidebar-nav-item-min-height)}.fui-sidebar__nav-item:hover:not(.fui-sidebar__nav-item--disabled){background-color:var(--fui-surface-02)}.fui-sidebar__nav-item:active:not(.fui-sidebar__nav-item--disabled){background-color:var(--fui-surface-05)}.fui-sidebar__nav-item--active{background-color:var(--fui-primary-10);color:var(--fui-primary);font-weight:600}.fui-sidebar__nav-item--active .fui-sidebar__nav-icon{color:var(--fui-primary)}.fui-sidebar__nav-item--disabled{color:var(--fui-text-secondary);cursor:not-allowed}.fui-sidebar__nav-item--disabled .fui-sidebar__nav-icon{color:var(--fui-icon-on-color-disabled)}.fui-sidebar__nav-item--child{padding-left:2rem;font-size:.8125rem}.fui-sidebar__nav-item--expandable .fui-sidebar__nav-caret{margin-left:auto}.fui-sidebar__nav-item--expandable.fui-sidebar__nav-item--expanded .fui-sidebar__nav-caret{transform:rotate(180deg)}.fui-sidebar__nav-item:focus-visible{outline:2px solid var(--fui-primary);outline-offset:-2px}.fui-sidebar__nav-icon{flex-shrink:0;color:var(--fui-icon-secondary)}.fui-sidebar__nav-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fui-sidebar__nav-caret{flex-shrink:0;color:var(--fui-icon-tertiary)}.fui-sidebar__nav-children{list-style:none;margin:0;padding:0}.fui-sidebar__content{flex-shrink:0;padding:.75rem}.fui-sidebar__footer{flex-shrink:0;padding:.75rem;border-top:1px solid var(--fui-border-color);margin-top:auto}.fui-sidebar__footer [footer]{font-size:var(--fui-font-size-01);color:var(--fui-text-secondary);text-align:center}@media(max-width:768px){.fui-sidebar{width:14rem}.fui-sidebar__nav-item{padding:.5rem;font-size:.8125rem}.fui-sidebar__nav-item--child{padding-left:1.5rem}}@media(max-width:576px){.fui-sidebar{width:12rem}.fui-sidebar__header,.fui-sidebar__content,.fui-sidebar__footer{padding:.5rem}.fui-sidebar__nav-item{padding:.25rem .5rem;min-height:2.25rem}.fui-sidebar__nav-item--child{padding-left:1rem}}@media(prefers-reduced-motion:reduce){.fui-sidebar,.fui-sidebar-backdrop,.fui-sidebar-container.fui-sidebar-container--over .fui-sidebar,.fui-sidebar-container.fui-sidebar-container--push .fui-sidebar{transition:none!important}}.fui-theme-dark .fui-sidebar{border-right-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__header{border-bottom-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__footer{border-top-color:var(--fui-border-color)}.fui-theme-dark .fui-sidebar__nav-children{background-color:var(--fui-surface-05)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], navItemClick: [{ type: i0.Output, args: ["navItemClick"] }], backdropClick: [{ type: i0.Output, args: ["backdropClick"] }], onEsc: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }] } });
@@ -253,5 +271,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FuiSidebarComponent };
+export { FuiSidebarComponent, FuiSidebarIntl };
 //# sourceMappingURL=raintonic-formaui-components-sidebar.mjs.map

package/fesm2022/raintonic-formaui-components-sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-sidebar.mjs","sources":["../../../lib/components/sidebar/sidebar.component.ts","../../../lib/components/sidebar/sidebar.component.html","../../../lib/components/sidebar/raintonic-formaui-components-sidebar.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ViewEncapsulation,\r\n  input,\r\n  output,\r\n  computed,\r\n  signal,\r\n  InputSignal,\r\n  OutputEmitterRef,\r\n  Signal,\r\n  WritableSignal,\r\n  HostListener,\r\n} from '@angular/core';\r\n\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\n\r\n/**\r\n * Sidebar mode type\r\n */\r\nexport type FuiSidebarMode = 'side' | 'over' | 'push';\r\n\r\n/**\r\n * Sidebar position type\r\n */\r\nexport type FuiSidebarPosition = 'start' | 'end';\r\n\r\n/**\r\n * Sidebar navigation item interface\r\n */\r\nexport interface FuiSidebarNavItem {\r\n  id: string;\r\n  label: string;\r\n  icon?: string;\r\n  route?: string;\r\n  active?: boolean;\r\n  disabled?: boolean;\r\n  children?: FuiSidebarNavItem[];\r\n  expanded?: boolean;\r\n}\r\n\r\n/**\r\n * # FuiSidebar Component\r\n *\r\n * A flexible sidebar component following Carbon Design System principles.\r\n * Provides navigation with Angular Material-like APIs and responsive behavior.\r\n *\r\n * ## Features\r\n * - Multiple modes: side, over, push\r\n * - Collapsible with toggle functionality\r\n * - Hierarchical navigation support\r\n * - Responsive behavior\r\n * - Theme integration\r\n * - Accessibility support\r\n * - Custom content projection\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Sidebar\r\n * ```html\r\n * <fui-sidebar\r\n *   [opened]=\"sidebarOpen\"\r\n *   [mode]=\"'side'\"\r\n *   [navItems]=\"navigationItems\"\r\n *   (openedChange)=\"onSidebarToggle($event)\"\r\n *   (navItemClick)=\"onNavItemClick($event)\">\r\n *\r\n *   <div header>\r\n *     <h3>Navigation</h3>\r\n *   </div>\r\n *\r\n *   <div footer>\r\n *     <p>Version 1.0.0</p>\r\n *   </div>\r\n * </fui-sidebar>\r\n * ```\r\n *\r\n * ### Responsive Sidebar\r\n * ```html\r\n * <fui-sidebar\r\n *   [opened]=\"sidebarOpen\"\r\n *   [mode]=\"isDesktop ? 'side' : 'over'\"\r\n *   [backdrop]=\"!isDesktop\"\r\n *   [navItems]=\"navigationItems\">\r\n * </fui-sidebar>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiSidebarComponent, FuiSidebarNavItem } from '@raintonic/formaui/components/sidebar';\r\n *\r\n * @Component({\r\n *   standalone: true,\r\n *   imports: [FuiSidebarComponent],\r\n *   template: `\r\n *     <fui-sidebar\r\n *       [opened]=\"sidebarOpen\"\r\n *       [mode]=\"sidebarMode\"\r\n *       [navItems]=\"navItems\"\r\n *       (openedChange)=\"onSidebarToggle($event)\"\r\n *       (navItemClick)=\"onNavItemClick($event)\">\r\n *\r\n *       <div header class=\"sidebar-header\">\r\n *         <h3>Holiday ERP</h3>\r\n *       </div>\r\n *     </fui-sidebar>\r\n *   `\r\n * })\r\n * export class AppLayoutComponent {\r\n *   sidebarOpen = true;\r\n *   sidebarMode: FuiSidebarMode = 'side';\r\n *\r\n *   navItems: FuiSidebarNavItem[] = [\r\n *     { id: 'dashboard', label: 'Dashboard', icon: 'house', route: '/dashboard' },\r\n *     {\r\n *       id: 'sales',\r\n *       label: 'Sales',\r\n *       icon: 'shopping-cart',\r\n *       children: [\r\n *         { id: 'orders', label: 'Orders', route: '/sales/orders' },\r\n *         { id: 'invoices', label: 'Invoices', route: '/sales/invoices' },\r\n *       ]\r\n *     },\r\n *     { id: 'products', label: 'Products', icon: 'package', route: '/products' },\r\n *   ];\r\n *\r\n *   onSidebarToggle(opened: boolean): void {\r\n *     this.sidebarOpen = opened;\r\n *   }\r\n *\r\n *   onNavItemClick(item: FuiSidebarNavItem): void {\r\n *     console.log('Navigation item clicked:', item.id);\r\n *   }\r\n * }\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-sidebar',\r\n  standalone: true,\r\n  imports: [FuiIconComponent],\r\n  templateUrl: './sidebar.component.html',\r\n  styleUrls: ['./sidebar.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-sidebar-container',\r\n    '[class.fui-sidebar-container--opened]': 'opened()',\r\n    '[class.fui-sidebar-container--over]': 'mode() === \"over\"',\r\n    '[class.fui-sidebar-container--push]': 'mode() === \"push\"',\r\n    '[class.fui-sidebar-container--side]': 'mode() === \"side\"',\r\n    '[class.fui-sidebar-container--start]': 'position() === \"start\"',\r\n    '[class.fui-sidebar-container--end]': 'position() === \"end\"',\r\n  },\r\n})\r\nexport class FuiSidebarComponent {\r\n  // Inputs using signal-based API\r\n  readonly opened: InputSignal<boolean> = input(true);\r\n  readonly mode: InputSignal<FuiSidebarMode> = input<FuiSidebarMode>('side');\r\n  readonly position: InputSignal<FuiSidebarPosition> = input<FuiSidebarPosition>('start');\r\n  readonly backdrop: InputSignal<boolean> = input(false);\r\n  readonly width: InputSignal<string> = input('16rem');\r\n  readonly navItems: InputSignal<FuiSidebarNavItem[]> = input<FuiSidebarNavItem[]>([]);\r\n  readonly collapsible: InputSignal<boolean> = input(true);\r\n\r\n  // Outputs using signal-based API\r\n  readonly openedChange: OutputEmitterRef<boolean> = output<boolean>();\r\n  readonly navItemClick: OutputEmitterRef<FuiSidebarNavItem> = output<FuiSidebarNavItem>();\r\n  readonly backdropClick: OutputEmitterRef<void> = output();\r\n\r\n  // Internal state\r\n  readonly expandedItems: WritableSignal<Set<string>> = signal(new Set());\r\n\r\n  // Computed properties\r\n  readonly sidebarClasses: Signal<string> = computed(() => {\r\n    const classes: string[] = ['fui-sidebar'];\r\n\r\n    if (this.opened()) {\r\n      classes.push('fui-sidebar--opened');\r\n    }\r\n\r\n    classes.push(`fui-sidebar--${this.mode()}`);\r\n    classes.push(`fui-sidebar--${this.position()}`);\r\n\r\n    return classes.join(' ');\r\n  });\r\n\r\n  readonly backdropClasses: Signal<string> = computed(() => {\r\n    const classes: string[] = ['fui-sidebar-backdrop'];\r\n\r\n    if (this.opened() && this.backdrop()) {\r\n      classes.push('fui-sidebar-backdrop--visible');\r\n    }\r\n\r\n    return classes.join(' ');\r\n  });\r\n\r\n  readonly sidebarStyles: Signal<Record<string, string>> = computed(() => {\r\n    return {\r\n      width: this.width(),\r\n    };\r\n  });\r\n\r\n  /**\r\n   * Toggle sidebar open/closed state\r\n   */\r\n  toggle(): void {\r\n    const _isNewState = !this.opened();\r\n    this.openedChange.emit(_isNewState);\r\n  }\r\n\r\n  /**\r\n   * Open the sidebar\r\n   */\r\n  open(): void {\r\n    if (!this.opened()) {\r\n      this.openedChange.emit(true);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Close the sidebar\r\n   */\r\n  close(): void {\r\n    if (this.opened()) {\r\n      this.openedChange.emit(false);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle navigation item click\r\n   */\r\n  onNavItemClick(item: FuiSidebarNavItem): void {\r\n    if (item.disabled) {\r\n      return;\r\n    }\r\n\r\n    // Handle expandable items\r\n    if (item.children && item.children.length > 0) {\r\n      this.toggleItemExpansion(item.id);\r\n    } else {\r\n      this.navItemClick.emit(item);\r\n\r\n      // Close sidebar on mobile when item is clicked\r\n      if (this.mode() === 'over') {\r\n        this.close();\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Toggle expansion state of a navigation item\r\n   */\r\n  toggleItemExpansion(itemId: string): void {\r\n    const _areExpanded = this.expandedItems();\r\n    const _areNewExpanded = new Set(_areExpanded);\r\n\r\n    if (_areNewExpanded.has(itemId)) {\r\n      _areNewExpanded.delete(itemId);\r\n    } else {\r\n      _areNewExpanded.add(itemId);\r\n    }\r\n\r\n    this.expandedItems.set(_areNewExpanded);\r\n  }\r\n\r\n  /**\r\n   * Check if item is expanded\r\n   */\r\n  isItemExpanded(itemId: string): boolean {\r\n    return this.expandedItems().has(itemId);\r\n  }\r\n\r\n  /**\r\n   * Handle backdrop click\r\n   */\r\n  onBackdropClick(): void {\r\n    this.backdropClick.emit();\r\n    this.close();\r\n  }\r\n\r\n  /**\r\n   * Get navigation item classes\r\n   */\r\n  getNavItemClasses(item: FuiSidebarNavItem, level = 0): string {\r\n    const classes: string[] = ['fui-sidebar__nav-item'];\r\n\r\n    if (item.active) {\r\n      classes.push('fui-sidebar__nav-item--active');\r\n    }\r\n\r\n    if (item.disabled) {\r\n      classes.push('fui-sidebar__nav-item--disabled');\r\n    }\r\n\r\n    if (level > 0) {\r\n      classes.push('fui-sidebar__nav-item--child');\r\n    }\r\n\r\n    if (item.children && item.children.length > 0) {\r\n      classes.push('fui-sidebar__nav-item--expandable');\r\n\r\n      if (this.isItemExpanded(item.id)) {\r\n        classes.push('fui-sidebar__nav-item--expanded');\r\n      }\r\n    }\r\n\r\n    return classes.join(' ');\r\n  }\r\n\r\n  @HostListener('document:keydown.escape')\r\n  onEsc(): void {\r\n    if (this.opened() && (this.mode() === 'over' || this.backdrop())) {\r\n      this.close();\r\n    }\r\n  }\r\n}\r\n","<!-- Backdrop -->\r\n@if (backdrop()) {\r\n  <div [class]=\"backdropClasses()\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<!-- Sidebar -->\r\n<aside\r\n  [class]=\"sidebarClasses()\"\r\n  [style]=\"sidebarStyles()\"\r\n  [attr.aria-modal]=\"mode() === 'over' && opened() ? 'true' : null\"\r\n  [attr.role]=\"mode() === 'over' && opened() ? 'dialog' : null\"\r\n  [attr.aria-label]=\"mode() === 'over' && opened() ? 'Navigation sidebar' : null\"\r\n>\r\n  <!-- Header Content -->\r\n  <div class=\"fui-sidebar__header\">\r\n    <ng-content select=\"[header]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Navigation -->\r\n  @if (navItems().length > 0) {\r\n    <nav class=\"fui-sidebar__nav\" aria-label=\"Main navigation\">\r\n      <ul class=\"fui-sidebar__nav-list\">\r\n        @for (item of navItems(); track item.id) {\r\n          <li>\r\n            <!-- Navigation Item -->\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"getNavItemClasses(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              [attr.aria-expanded]=\"item.children?.length ? isItemExpanded(item.id) : null\"\r\n              [attr.aria-current]=\"item.active ? 'page' : null\"\r\n              (click)=\"onNavItemClick(item)\"\r\n            >\r\n              @if (item.icon) {\r\n                <fui-icon [name]=\"item.icon\" size=\"md\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n              }\r\n\r\n              <span class=\"fui-sidebar__nav-label\">{{ item.label }}</span>\r\n\r\n              @if (item.children && item.children.length > 0) {\r\n                <fui-icon\r\n                  name=\"caret-down\"\r\n                  size=\"sm\"\r\n                  class=\"fui-sidebar__nav-caret\"\r\n                  [class.fui-sidebar__nav-caret--expanded]=\"isItemExpanded(item.id)\"\r\n                >\r\n                </fui-icon>\r\n              }\r\n            </button>\r\n\r\n            <!-- Child Items -->\r\n            @if (item.children && item.children.length > 0 && isItemExpanded(item.id)) {\r\n              <ul class=\"fui-sidebar__nav-children\">\r\n                @for (child of item.children; track child.id) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      [class]=\"getNavItemClasses(child, 1)\"\r\n                      [disabled]=\"child.disabled\"\r\n                      [attr.aria-current]=\"child.active ? 'page' : null\"\r\n                      (click)=\"onNavItemClick(child)\"\r\n                    >\r\n                      @if (child.icon) {\r\n                        <fui-icon [name]=\"child.icon\" size=\"sm\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n                      }\r\n\r\n                      <span class=\"fui-sidebar__nav-label\">{{ child.label }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </nav>\r\n  }\r\n\r\n  <!-- Custom Content -->\r\n  <div class=\"fui-sidebar__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Footer Content -->\r\n  <div class=\"fui-sidebar__footer\">\r\n    <ng-content select=\"[footer]\"></ng-content>\r\n  </div>\r\n</aside>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"raintonic-formaui-components-sidebar.mjs","sources":["../../../lib/components/sidebar/sidebar.intl.ts","../../../lib/components/sidebar/sidebar.component.ts","../../../lib/components/sidebar/sidebar.component.html","../../../lib/components/sidebar/raintonic-formaui-components-sidebar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiSidebarIntl extends FuiIntlBase {\r\n  rootAriaLabel = 'Navigation sidebar';\r\n  navAriaLabel = 'Main navigation';\r\n}\r\n","import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  ViewEncapsulation,\r\n  input,\r\n  output,\r\n  computed,\r\n  signal,\r\n  inject,\r\n  InputSignal,\r\n  OutputEmitterRef,\r\n  Signal,\r\n  WritableSignal,\r\n  HostListener,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiSidebarIntl } from './sidebar.intl';\r\n\r\n/**\r\n * Sidebar mode type\r\n */\r\nexport type FuiSidebarMode = 'side' | 'over' | 'push';\r\n\r\n/**\r\n * Sidebar position type\r\n */\r\nexport type FuiSidebarPosition = 'start' | 'end';\r\n\r\n/**\r\n * Sidebar navigation item interface\r\n */\r\nexport interface FuiSidebarNavItem {\r\n  id: string;\r\n  label: string;\r\n  icon?: string;\r\n  route?: string;\r\n  active?: boolean;\r\n  disabled?: boolean;\r\n  children?: FuiSidebarNavItem[];\r\n  expanded?: boolean;\r\n}\r\n\r\n/**\r\n * # FuiSidebar Component\r\n *\r\n * A flexible sidebar component following Carbon Design System principles.\r\n * Provides navigation with Angular Material-like APIs and responsive behavior.\r\n *\r\n * ## Features\r\n * - Multiple modes: side, over, push\r\n * - Collapsible with toggle functionality\r\n * - Hierarchical navigation support\r\n * - Responsive behavior\r\n * - Theme integration\r\n * - Accessibility support\r\n * - Custom content projection\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Sidebar\r\n * ```html\r\n * <fui-sidebar\r\n *   [opened]=\"sidebarOpen\"\r\n *   [mode]=\"'side'\"\r\n *   [navItems]=\"navigationItems\"\r\n *   (openedChange)=\"onSidebarToggle($event)\"\r\n *   (navItemClick)=\"onNavItemClick($event)\">\r\n *\r\n *   <div header>\r\n *     <h3>Navigation</h3>\r\n *   </div>\r\n *\r\n *   <div footer>\r\n *     <p>Version 1.0.0</p>\r\n *   </div>\r\n * </fui-sidebar>\r\n * ```\r\n *\r\n * ### Responsive Sidebar\r\n * ```html\r\n * <fui-sidebar\r\n *   [opened]=\"sidebarOpen\"\r\n *   [mode]=\"isDesktop ? 'side' : 'over'\"\r\n *   [backdrop]=\"!isDesktop\"\r\n *   [navItems]=\"navigationItems\">\r\n * </fui-sidebar>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiSidebarComponent, FuiSidebarNavItem } from '@raintonic/formaui/components/sidebar';\r\n *\r\n * @Component({\r\n *   standalone: true,\r\n *   imports: [FuiSidebarComponent],\r\n *   template: `\r\n *     <fui-sidebar\r\n *       [opened]=\"sidebarOpen\"\r\n *       [mode]=\"sidebarMode\"\r\n *       [navItems]=\"navItems\"\r\n *       (openedChange)=\"onSidebarToggle($event)\"\r\n *       (navItemClick)=\"onNavItemClick($event)\">\r\n *\r\n *       <div header class=\"sidebar-header\">\r\n *         <h3>Holiday ERP</h3>\r\n *       </div>\r\n *     </fui-sidebar>\r\n *   `\r\n * })\r\n * export class AppLayoutComponent {\r\n *   sidebarOpen = true;\r\n *   sidebarMode: FuiSidebarMode = 'side';\r\n *\r\n *   navItems: FuiSidebarNavItem[] = [\r\n *     { id: 'dashboard', label: 'Dashboard', icon: 'house', route: '/dashboard' },\r\n *     {\r\n *       id: 'sales',\r\n *       label: 'Sales',\r\n *       icon: 'shopping-cart',\r\n *       children: [\r\n *         { id: 'orders', label: 'Orders', route: '/sales/orders' },\r\n *         { id: 'invoices', label: 'Invoices', route: '/sales/invoices' },\r\n *       ]\r\n *     },\r\n *     { id: 'products', label: 'Products', icon: 'package', route: '/products' },\r\n *   ];\r\n *\r\n *   onSidebarToggle(opened: boolean): void {\r\n *     this.sidebarOpen = opened;\r\n *   }\r\n *\r\n *   onNavItemClick(item: FuiSidebarNavItem): void {\r\n *     console.log('Navigation item clicked:', item.id);\r\n *   }\r\n * }\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-sidebar',\r\n  standalone: true,\r\n  imports: [FuiIconComponent],\r\n  templateUrl: './sidebar.component.html',\r\n  styleUrls: ['./sidebar.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-sidebar-container',\r\n    '[class.fui-sidebar-container--opened]': 'opened()',\r\n    '[class.fui-sidebar-container--over]': 'mode() === \"over\"',\r\n    '[class.fui-sidebar-container--push]': 'mode() === \"push\"',\r\n    '[class.fui-sidebar-container--side]': 'mode() === \"side\"',\r\n    '[class.fui-sidebar-container--start]': 'position() === \"start\"',\r\n    '[class.fui-sidebar-container--end]': 'position() === \"end\"',\r\n  },\r\n})\r\nexport class FuiSidebarComponent {\r\n  readonly intl = inject(FuiSidebarIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n  constructor() {\r\n    this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n  }\r\n\r\n  // Inputs using signal-based API\r\n  readonly opened: InputSignal<boolean> = input(true);\r\n  readonly mode: InputSignal<FuiSidebarMode> = input<FuiSidebarMode>('side');\r\n  readonly position: InputSignal<FuiSidebarPosition> = input<FuiSidebarPosition>('start');\r\n  readonly backdrop: InputSignal<boolean> = input(false);\r\n  readonly width: InputSignal<string> = input('16rem');\r\n  readonly navItems: InputSignal<FuiSidebarNavItem[]> = input<FuiSidebarNavItem[]>([]);\r\n  readonly collapsible: InputSignal<boolean> = input(true);\r\n\r\n  // Outputs using signal-based API\r\n  readonly openedChange: OutputEmitterRef<boolean> = output<boolean>();\r\n  readonly navItemClick: OutputEmitterRef<FuiSidebarNavItem> = output<FuiSidebarNavItem>();\r\n  readonly backdropClick: OutputEmitterRef<void> = output();\r\n\r\n  // Internal state\r\n  readonly expandedItems: WritableSignal<Set<string>> = signal(new Set());\r\n\r\n  // Computed properties\r\n  readonly sidebarClasses: Signal<string> = computed(() => {\r\n    const classes: string[] = ['fui-sidebar'];\r\n\r\n    if (this.opened()) {\r\n      classes.push('fui-sidebar--opened');\r\n    }\r\n\r\n    classes.push(`fui-sidebar--${this.mode()}`);\r\n    classes.push(`fui-sidebar--${this.position()}`);\r\n\r\n    return classes.join(' ');\r\n  });\r\n\r\n  readonly backdropClasses: Signal<string> = computed(() => {\r\n    const classes: string[] = ['fui-sidebar-backdrop'];\r\n\r\n    if (this.opened() && this.backdrop()) {\r\n      classes.push('fui-sidebar-backdrop--visible');\r\n    }\r\n\r\n    return classes.join(' ');\r\n  });\r\n\r\n  readonly sidebarStyles: Signal<Record<string, string>> = computed(() => {\r\n    return {\r\n      width: this.width(),\r\n    };\r\n  });\r\n\r\n  /**\r\n   * Toggle sidebar open/closed state\r\n   */\r\n  toggle(): void {\r\n    const _isNewState = !this.opened();\r\n    this.openedChange.emit(_isNewState);\r\n  }\r\n\r\n  /**\r\n   * Open the sidebar\r\n   */\r\n  open(): void {\r\n    if (!this.opened()) {\r\n      this.openedChange.emit(true);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Close the sidebar\r\n   */\r\n  close(): void {\r\n    if (this.opened()) {\r\n      this.openedChange.emit(false);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle navigation item click\r\n   */\r\n  onNavItemClick(item: FuiSidebarNavItem): void {\r\n    if (item.disabled) {\r\n      return;\r\n    }\r\n\r\n    // Handle expandable items\r\n    if (item.children && item.children.length > 0) {\r\n      this.toggleItemExpansion(item.id);\r\n    } else {\r\n      this.navItemClick.emit(item);\r\n\r\n      // Close sidebar on mobile when item is clicked\r\n      if (this.mode() === 'over') {\r\n        this.close();\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Toggle expansion state of a navigation item\r\n   */\r\n  toggleItemExpansion(itemId: string): void {\r\n    const _areExpanded = this.expandedItems();\r\n    const _areNewExpanded = new Set(_areExpanded);\r\n\r\n    if (_areNewExpanded.has(itemId)) {\r\n      _areNewExpanded.delete(itemId);\r\n    } else {\r\n      _areNewExpanded.add(itemId);\r\n    }\r\n\r\n    this.expandedItems.set(_areNewExpanded);\r\n  }\r\n\r\n  /**\r\n   * Check if item is expanded\r\n   */\r\n  isItemExpanded(itemId: string): boolean {\r\n    return this.expandedItems().has(itemId);\r\n  }\r\n\r\n  /**\r\n   * Handle backdrop click\r\n   */\r\n  onBackdropClick(): void {\r\n    this.backdropClick.emit();\r\n    this.close();\r\n  }\r\n\r\n  /**\r\n   * Get navigation item classes\r\n   */\r\n  getNavItemClasses(item: FuiSidebarNavItem, level = 0): string {\r\n    const classes: string[] = ['fui-sidebar__nav-item'];\r\n\r\n    if (item.active) {\r\n      classes.push('fui-sidebar__nav-item--active');\r\n    }\r\n\r\n    if (item.disabled) {\r\n      classes.push('fui-sidebar__nav-item--disabled');\r\n    }\r\n\r\n    if (level > 0) {\r\n      classes.push('fui-sidebar__nav-item--child');\r\n    }\r\n\r\n    if (item.children && item.children.length > 0) {\r\n      classes.push('fui-sidebar__nav-item--expandable');\r\n\r\n      if (this.isItemExpanded(item.id)) {\r\n        classes.push('fui-sidebar__nav-item--expanded');\r\n      }\r\n    }\r\n\r\n    return classes.join(' ');\r\n  }\r\n\r\n  @HostListener('document:keydown.escape')\r\n  onEsc(): void {\r\n    if (this.opened() && (this.mode() === 'over' || this.backdrop())) {\r\n      this.close();\r\n    }\r\n  }\r\n}\r\n","<!-- Backdrop -->\r\n@if (backdrop()) {\r\n  <div [class]=\"backdropClasses()\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<!-- Sidebar -->\r\n<aside\r\n  [class]=\"sidebarClasses()\"\r\n  [style]=\"sidebarStyles()\"\r\n  [attr.aria-modal]=\"mode() === 'over' && opened() ? 'true' : null\"\r\n  [attr.role]=\"mode() === 'over' && opened() ? 'dialog' : null\"\r\n  [attr.aria-label]=\"mode() === 'over' && opened() ? intl.rootAriaLabel : null\"\r\n>\r\n  <!-- Header Content -->\r\n  <div class=\"fui-sidebar__header\">\r\n    <ng-content select=\"[header]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Navigation -->\r\n  @if (navItems().length > 0) {\r\n    <nav class=\"fui-sidebar__nav\" [attr.aria-label]=\"intl.navAriaLabel\">\r\n      <ul class=\"fui-sidebar__nav-list\">\r\n        @for (item of navItems(); track item.id) {\r\n          <li>\r\n            <!-- Navigation Item -->\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"getNavItemClasses(item)\"\r\n              [disabled]=\"item.disabled\"\r\n              [attr.aria-expanded]=\"item.children?.length ? isItemExpanded(item.id) : null\"\r\n              [attr.aria-current]=\"item.active ? 'page' : null\"\r\n              (click)=\"onNavItemClick(item)\"\r\n            >\r\n              @if (item.icon) {\r\n                <fui-icon [name]=\"item.icon\" size=\"md\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n              }\r\n\r\n              <span class=\"fui-sidebar__nav-label\">{{ item.label }}</span>\r\n\r\n              @if (item.children && item.children.length > 0) {\r\n                <fui-icon\r\n                  name=\"caret-down\"\r\n                  size=\"sm\"\r\n                  class=\"fui-sidebar__nav-caret\"\r\n                  [class.fui-sidebar__nav-caret--expanded]=\"isItemExpanded(item.id)\"\r\n                >\r\n                </fui-icon>\r\n              }\r\n            </button>\r\n\r\n            <!-- Child Items -->\r\n            @if (item.children && item.children.length > 0 && isItemExpanded(item.id)) {\r\n              <ul class=\"fui-sidebar__nav-children\">\r\n                @for (child of item.children; track child.id) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      [class]=\"getNavItemClasses(child, 1)\"\r\n                      [disabled]=\"child.disabled\"\r\n                      [attr.aria-current]=\"child.active ? 'page' : null\"\r\n                      (click)=\"onNavItemClick(child)\"\r\n                    >\r\n                      @if (child.icon) {\r\n                        <fui-icon [name]=\"child.icon\" size=\"sm\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\r\n                      }\r\n\r\n                      <span class=\"fui-sidebar__nav-label\">{{ child.label }}</span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </nav>\r\n  }\r\n\r\n  <!-- Custom Content -->\r\n  <div class=\"fui-sidebar__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Footer Content -->\r\n  <div class=\"fui-sidebar__footer\">\r\n    <ng-content select=\"[footer]\"></ng-content>\r\n  </div>\r\n</aside>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAIM,MAAO,cAAe,SAAQ,WAAW,CAAA;IAC7C,aAAa,GAAG,oBAAoB;IACpC,YAAY,GAAG,iBAAiB;uGAFrB,cAAc,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAd,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,cADD,MAAM,EAAA,CAAA;;2FACnB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAD1B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;AC0ClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FG;MAmBU,mBAAmB,CAAA;AACrB,IAAA,IAAI,GAAG,MAAM,CAAC,cAAc,CAAC;AACrB,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAEjD,IAAA,WAAA,GAAA;QACE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,SAAS,CAAC,MAAK,EAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IAC7F;;AAGS,IAAA,MAAM,GAAyB,KAAK,CAAC,IAAI,6EAAC;AAC1C,IAAA,IAAI,GAAgC,KAAK,CAAiB,MAAM,2EAAC;AACjE,IAAA,QAAQ,GAAoC,KAAK,CAAqB,OAAO,+EAAC;AAC9E,IAAA,QAAQ,GAAyB,KAAK,CAAC,KAAK,+EAAC;AAC7C,IAAA,KAAK,GAAwB,KAAK,CAAC,OAAO,4EAAC;AAC3C,IAAA,QAAQ,GAAqC,KAAK,CAAsB,EAAE,+EAAC;AAC3E,IAAA,WAAW,GAAyB,KAAK,CAAC,IAAI,kFAAC;;IAG/C,YAAY,GAA8B,MAAM,EAAW;IAC3D,YAAY,GAAwC,MAAM,EAAqB;IAC/E,aAAa,GAA2B,MAAM,EAAE;;AAGhD,IAAA,aAAa,GAAgC,MAAM,CAAC,IAAI,GAAG,EAAE,oFAAC;;AAG9D,IAAA,cAAc,GAAmB,QAAQ,CAAC,MAAK;AACtD,QAAA,MAAM,OAAO,GAAa,CAAC,aAAa,CAAC;AAEzC,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC;QACrC;QAEA,OAAO,CAAC,IAAI,CAAC,CAAA,aAAA,EAAgB,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,CAAC;QAC3C,OAAO,CAAC,IAAI,CAAC,CAAA,aAAA,EAAgB,IAAI,CAAC,QAAQ,EAAE,CAAA,CAAE,CAAC;AAE/C,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC1B,IAAA,CAAC,qFAAC;AAEO,IAAA,eAAe,GAAmB,QAAQ,CAAC,MAAK;AACvD,QAAA,MAAM,OAAO,GAAa,CAAC,sBAAsB,CAAC;QAElD,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACpC,YAAA,OAAO,CAAC,IAAI,CAAC,+BAA+B,CAAC;QAC/C;AAEA,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC1B,IAAA,CAAC,sFAAC;AAEO,IAAA,aAAa,GAAmC,QAAQ,CAAC,MAAK;QACrE,OAAO;AACL,YAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;SACpB;AACH,IAAA,CAAC,oFAAC;AAEF;;AAEG;IACH,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE;AAClC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;IACrC;AAEA;;AAEG;IACH,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;AAClB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9B;IACF;AAEA;;AAEG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;AACjB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;QAC/B;IACF;AAEA;;AAEG;AACH,IAAA,cAAc,CAAC,IAAuB,EAAA;AACpC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB;QACF;;AAGA,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AAC7C,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;QACnC;aAAO;AACL,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;;AAG5B,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,MAAM,EAAE;gBAC1B,IAAI,CAAC,KAAK,EAAE;YACd;QACF;IACF;AAEA;;AAEG;AACH,IAAA,mBAAmB,CAAC,MAAc,EAAA;AAChC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE;AACzC,QAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC;AAE7C,QAAA,IAAI,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;AAC/B,YAAA,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC;QAChC;aAAO;AACL,YAAA,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC;QAC7B;AAEA,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,eAAe,CAAC;IACzC;AAEA;;AAEG;AACH,IAAA,cAAc,CAAC,MAAc,EAAA;QAC3B,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC;IACzC;AAEA;;AAEG;IACH,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;QACzB,IAAI,CAAC,KAAK,EAAE;IACd;AAEA;;AAEG;AACH,IAAA,iBAAiB,CAAC,IAAuB,EAAE,KAAK,GAAG,CAAC,EAAA;AAClD,QAAA,MAAM,OAAO,GAAa,CAAC,uBAAuB,CAAC;AAEnD,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,YAAA,OAAO,CAAC,IAAI,CAAC,+BAA+B,CAAC;QAC/C;AAEA,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC;QACjD;AAEA,QAAA,IAAI,KAAK,GAAG,CAAC,EAAE;AACb,YAAA,OAAO,CAAC,IAAI,CAAC,8BAA8B,CAAC;QAC9C;AAEA,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AAC7C,YAAA,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC;YAEjD,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AAChC,gBAAA,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC;YACjD;QACF;AAEA,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC1B;IAGA,KAAK,GAAA;AACH,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI,CAAC,IAAI,EAAE,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE;YAChE,IAAI,CAAC,KAAK,EAAE;QACd;IACF;uGAvKW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,YAAA,EAAA,cAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,yBAAA,EAAA,SAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qCAAA,EAAA,UAAA,EAAA,mCAAA,EAAA,qBAAA,EAAA,mCAAA,EAAA,qBAAA,EAAA,mCAAA,EAAA,qBAAA,EAAA,oCAAA,EAAA,0BAAA,EAAA,kCAAA,EAAA,wBAAA,EAAA,EAAA,cAAA,EAAA,uBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9JhC,8wGAwFA,EAAA,MAAA,EAAA,CAAA,ulKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDuDY,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAef,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAlB/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,CAAC,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,uBAAuB;AAC9B,wBAAA,uCAAuC,EAAE,UAAU;AACnD,wBAAA,qCAAqC,EAAE,mBAAmB;AAC1D,wBAAA,qCAAqC,EAAE,mBAAmB;AAC1D,wBAAA,qCAAqC,EAAE,mBAAmB;AAC1D,wBAAA,sCAAsC,EAAE,wBAAwB;AAChE,wBAAA,oCAAoC,EAAE,sBAAsB;AAC7D,qBAAA,EAAA,QAAA,EAAA,8wGAAA,EAAA,MAAA,EAAA,CAAA,ulKAAA,CAAA,EAAA;;sBAoKA,YAAY;uBAAC,yBAAyB;;;AEhUzC;;AAEG;;;;"}

package/fesm2022/raintonic-formaui-components-skeleton.mjs

@@ -26,7 +26,7 @@ class FuiSkeletonComponent {
     }, ...(ngDevMode ? [{ debugName: "computedStyles" }] : /* istanbul ignore next */ []));
     linesArray = computed(() => Array.from({ length: this.lines() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "linesArray" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiSkeletonComponent, isStandalone: true, selector: "fui-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fui-skeleton--text": "variant() === \"text\"", "class.fui-skeleton--circle": "variant() === \"circle\"", "class.fui-skeleton--rect": "variant() === \"rect\"", "class.fui-skeleton--animated": "animated()", "attr.aria-busy": "true", "attr.aria-label": "\"Loading\"", "attr.role": "\"status\"" }, classAttribute: "fui-skeleton" }, ngImport: i0, template: "@if (variant() === 'text' && lines() > 1) {\r\n  <div class=\"fui-skeleton__lines\">\r\n    @for (line of linesArray(); track line; let last = $last) {\r\n      <div class=\"fui-skeleton__line\" [class.fui-skeleton__line--last]=\"last\" [style]=\"computedStyles()\"></div>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"fui-skeleton__shape\" [style]=\"computedStyles()\"></div>\r\n}\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}.fui-skeleton{display:block}.fui-skeleton__shape,.fui-skeleton__line{background-color:var(--fui-surface-05, #e2e8f0);border-radius:var(--fui-border-radius-sm, 8px)}.fui-skeleton--animated .fui-skeleton__shape,.fui-skeleton--animated .fui-skeleton__line{animation:fui-skeleton-pulse 1.5s ease-in-out infinite;background-color:var(--fui-surface-05);border-radius:var(--fui-border-radius-md)}.fui-skeleton--text .fui-skeleton__shape{height:1rem;width:100%;border-radius:var(--fui-border-radius-sm, 8px)}.fui-skeleton--text .fui-skeleton__line{height:1rem;width:100%;margin-bottom:var(--fui-gap-8, .5rem)}.fui-skeleton--text .fui-skeleton__line--last{width:60%;margin-bottom:0}.fui-skeleton--circle .fui-skeleton__shape{width:2.5rem;height:2.5rem;border-radius:50%}.fui-skeleton--rect .fui-skeleton__shape{width:100%;height:6rem;border-radius:var(--fui-border-radius-md, 12px)}.fui-skeleton__lines{display:flex;flex-direction:column}@media(prefers-reduced-motion:reduce){.fui-skeleton--animated .fui-skeleton__shape,.fui-skeleton--animated .fui-skeleton__line{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiSkeletonComponent, isStandalone: true, selector: "fui-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fui-skeleton--text": "variant() === \"text\"", "class.fui-skeleton--circle": "variant() === \"circle\"", "class.fui-skeleton--rect": "variant() === \"rect\"", "class.fui-skeleton--animated": "animated()", "attr.aria-busy": "true", "attr.aria-label": "\"Loading\"", "attr.role": "\"status\"" }, classAttribute: "fui-skeleton" }, ngImport: i0, template: "@if (variant() === 'text' && lines() > 1) {\r\n  <div class=\"fui-skeleton__lines\">\r\n    @for (line of linesArray(); track line; let last = $last) {\r\n      <div class=\"fui-skeleton__line\" [class.fui-skeleton__line--last]=\"last\" [style]=\"computedStyles()\"></div>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"fui-skeleton__shape\" [style]=\"computedStyles()\"></div>\r\n}\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-skeleton{display:block}.fui-skeleton__shape,.fui-skeleton__line{background-color:var(--fui-surface-05, #e2e8f0);border-radius:var(--fui-border-radius-sm, 8px)}.fui-skeleton--animated .fui-skeleton__shape,.fui-skeleton--animated .fui-skeleton__line{animation:fui-skeleton-pulse 1.5s ease-in-out infinite;background-color:var(--fui-surface-05);border-radius:var(--fui-border-radius-md)}.fui-skeleton--text .fui-skeleton__shape{height:1rem;width:100%;border-radius:var(--fui-border-radius-sm, 8px)}.fui-skeleton--text .fui-skeleton__line{height:1rem;width:100%;margin-bottom:var(--fui-gap-8, .5rem)}.fui-skeleton--text .fui-skeleton__line--last{width:60%;margin-bottom:0}.fui-skeleton--circle .fui-skeleton__shape{width:2.5rem;height:2.5rem;border-radius:50%}.fui-skeleton--rect .fui-skeleton__shape{width:100%;height:6rem;border-radius:var(--fui-border-radius-md, 12px)}.fui-skeleton__lines{display:flex;flex-direction:column}@media(prefers-reduced-motion:reduce){.fui-skeleton--animated .fui-skeleton__shape,.fui-skeleton--animated .fui-skeleton__line{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSkeletonComponent, decorators: [{
             type: Component,
@@ -39,7 +39,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[attr.aria-busy]': 'true',
                         '[attr.aria-label]': '"Loading"',
                         '[attr.role]': '"status"',
-                    }, template: "@if (variant() === 'text' && lines() > 1) {\r\n  <div class=\"fui-skeleton__lines\">\r\n    @for (line of linesArray(); track line; let last = $last) {\r\n      <div class=\"fui-skeleton__line\" [class.fui-skeleton__line--last]=\"last\" [style]=\"computedStyles()\"></div>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"fui-skeleton__shape\" [style]=\"computedStyles()\"></div>\r\n}\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}.fui-skeleton{display:block}.fui-skeleton__shape,.fui-skeleton__line{background-color:var(--fui-surface-05, #e2e8f0);border-radius:var(--fui-border-radius-sm, 8px)}.fui-skeleton--animated .fui-skeleton__shape,.fui-skeleton--animated .fui-skeleton__line{animation:fui-skeleton-pulse 1.5s ease-in-out infinite;background-color:var(--fui-surface-05);border-radius:var(--fui-border-radius-md)}.fui-skeleton--text .fui-skeleton__shape{height:1rem;width:100%;border-radius:var(--fui-border-radius-sm, 8px)}.fui-skeleton--text .fui-skeleton__line{height:1rem;width:100%;margin-bottom:var(--fui-gap-8, .5rem)}.fui-skeleton--text .fui-skeleton__line--last{width:60%;margin-bottom:0}.fui-skeleton--circle .fui-skeleton__shape{width:2.5rem;height:2.5rem;border-radius:50%}.fui-skeleton--rect .fui-skeleton__shape{width:100%;height:6rem;border-radius:var(--fui-border-radius-md, 12px)}.fui-skeleton__lines{display:flex;flex-direction:column}@media(prefers-reduced-motion:reduce){.fui-skeleton--animated .fui-skeleton__shape,.fui-skeleton--animated .fui-skeleton__line{animation:none}}\n"] }]
+                    }, template: "@if (variant() === 'text' && lines() > 1) {\r\n  <div class=\"fui-skeleton__lines\">\r\n    @for (line of linesArray(); track line; let last = $last) {\r\n      <div class=\"fui-skeleton__line\" [class.fui-skeleton__line--last]=\"last\" [style]=\"computedStyles()\"></div>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"fui-skeleton__shape\" [style]=\"computedStyles()\"></div>\r\n}\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-skeleton{display:block}.fui-skeleton__shape,.fui-skeleton__line{background-color:var(--fui-surface-05, #e2e8f0);border-radius:var(--fui-border-radius-sm, 8px)}.fui-skeleton--animated .fui-skeleton__shape,.fui-skeleton--animated .fui-skeleton__line{animation:fui-skeleton-pulse 1.5s ease-in-out infinite;background-color:var(--fui-surface-05);border-radius:var(--fui-border-radius-md)}.fui-skeleton--text .fui-skeleton__shape{height:1rem;width:100%;border-radius:var(--fui-border-radius-sm, 8px)}.fui-skeleton--text .fui-skeleton__line{height:1rem;width:100%;margin-bottom:var(--fui-gap-8, .5rem)}.fui-skeleton--text .fui-skeleton__line--last{width:60%;margin-bottom:0}.fui-skeleton--circle .fui-skeleton__shape{width:2.5rem;height:2.5rem;border-radius:50%}.fui-skeleton--rect .fui-skeleton__shape{width:100%;height:6rem;border-radius:var(--fui-border-radius-md, 12px)}.fui-skeleton__lines{display:flex;flex-direction:column}@media(prefers-reduced-motion:reduce){.fui-skeleton--animated .fui-skeleton__shape,.fui-skeleton--animated .fui-skeleton__line{animation:none}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }] } });
 
 /**

package/fesm2022/raintonic-formaui-components-skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-skeleton.mjs","sources":["../../../lib/components/skeleton/skeleton.component.ts","../../../lib/components/skeleton/skeleton.component.html","../../../lib/components/skeleton/raintonic-formaui-components-skeleton.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed } from '@angular/core';\r\nimport { FuiSkeletonVariant } from './skeleton.types';\r\n\r\n@Component({\r\n  selector: 'fui-skeleton',\r\n  standalone: true,\r\n  templateUrl: './skeleton.component.html',\r\n  styleUrls: ['./skeleton.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-skeleton',\r\n    '[class.fui-skeleton--text]': 'variant() === \"text\"',\r\n    '[class.fui-skeleton--circle]': 'variant() === \"circle\"',\r\n    '[class.fui-skeleton--rect]': 'variant() === \"rect\"',\r\n    '[class.fui-skeleton--animated]': 'animated()',\r\n    '[attr.aria-busy]': 'true',\r\n    '[attr.aria-label]': '\"Loading\"',\r\n    '[attr.role]': '\"status\"',\r\n  },\r\n})\r\nexport class FuiSkeletonComponent {\r\n  readonly variant = input<FuiSkeletonVariant>('text');\r\n  readonly width = input<string | null>(null);\r\n  readonly height = input<string | null>(null);\r\n  readonly lines = input(1);\r\n  readonly animated = input(true);\r\n  readonly borderRadius = input<string | null>(null);\r\n\r\n  readonly computedStyles = computed(() => {\r\n    const styles: Record<string, string> = {};\r\n    const w = this.width();\r\n    const h = this.height();\r\n    const br = this.borderRadius();\r\n\r\n    if (w) {\r\n      styles['width'] = w;\r\n    }\r\n    if (h) {\r\n      styles['height'] = h;\r\n    }\r\n    if (br) {\r\n      styles['border-radius'] = br;\r\n    }\r\n\r\n    return styles;\r\n  });\r\n\r\n  readonly linesArray = computed(() => Array.from({ length: this.lines() }, (_, i) => i));\r\n}\r\n","@if (variant() === 'text' && lines() > 1) {\r\n  <div class=\"fui-skeleton__lines\">\r\n    @for (line of linesArray(); track line; let last = $last) {\r\n      <div class=\"fui-skeleton__line\" [class.fui-skeleton__line--last]=\"last\" [style]=\"computedStyles()\"></div>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"fui-skeleton__shape\" [style]=\"computedStyles()\"></div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAqBa,oBAAoB,CAAA;AACtB,IAAA,OAAO,GAAG,KAAK,CAAqB,MAAM,8EAAC;AAC3C,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;AAClC,IAAA,MAAM,GAAG,KAAK,CAAgB,IAAI,6EAAC;AACnC,IAAA,KAAK,GAAG,KAAK,CAAC,CAAC,4EAAC;AAChB,IAAA,QAAQ,GAAG,KAAK,CAAC,IAAI,+EAAC;AACtB,IAAA,YAAY,GAAG,KAAK,CAAgB,IAAI,mFAAC;AAEzC,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;QACtC,MAAM,MAAM,GAA2B,EAAE;AACzC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE;AACtB,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE;AACvB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;QAE9B,IAAI,CAAC,EAAE;AACL,YAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;QACrB;QACA,IAAI,CAAC,EAAE;AACL,YAAA,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QACtB;QACA,IAAI,EAAE,EAAE;AACN,YAAA,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE;QAC9B;AAEA,QAAA,OAAO,MAAM;AACf,IAAA,CAAC,qFAAC;AAEO,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,iFAAC;uGA3B5E,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,grCCrBjC,yYASA,EAAA,MAAA,EAAA,CAAA,4mFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDYa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAlBhC,SAAS;+BACE,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,cAAc;AACrB,wBAAA,4BAA4B,EAAE,sBAAsB;AACpD,wBAAA,8BAA8B,EAAE,wBAAwB;AACxD,wBAAA,4BAA4B,EAAE,sBAAsB;AACpD,wBAAA,gCAAgC,EAAE,YAAY;AAC9C,wBAAA,kBAAkB,EAAE,MAAM;AAC1B,wBAAA,mBAAmB,EAAE,WAAW;AAChC,wBAAA,aAAa,EAAE,UAAU;AAC1B,qBAAA,EAAA,QAAA,EAAA,yYAAA,EAAA,MAAA,EAAA,CAAA,4mFAAA,CAAA,EAAA;;;AEnBH;;AAEG;;;;"}
+{"version":3,"file":"raintonic-formaui-components-skeleton.mjs","sources":["../../../lib/components/skeleton/skeleton.component.ts","../../../lib/components/skeleton/skeleton.component.html","../../../lib/components/skeleton/raintonic-formaui-components-skeleton.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed } from '@angular/core';\r\nimport { FuiSkeletonVariant } from './skeleton.types';\r\n\r\n@Component({\r\n  selector: 'fui-skeleton',\r\n  standalone: true,\r\n  templateUrl: './skeleton.component.html',\r\n  styleUrls: ['./skeleton.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-skeleton',\r\n    '[class.fui-skeleton--text]': 'variant() === \"text\"',\r\n    '[class.fui-skeleton--circle]': 'variant() === \"circle\"',\r\n    '[class.fui-skeleton--rect]': 'variant() === \"rect\"',\r\n    '[class.fui-skeleton--animated]': 'animated()',\r\n    '[attr.aria-busy]': 'true',\r\n    '[attr.aria-label]': '\"Loading\"',\r\n    '[attr.role]': '\"status\"',\r\n  },\r\n})\r\nexport class FuiSkeletonComponent {\r\n  readonly variant = input<FuiSkeletonVariant>('text');\r\n  readonly width = input<string | null>(null);\r\n  readonly height = input<string | null>(null);\r\n  readonly lines = input(1);\r\n  readonly animated = input(true);\r\n  readonly borderRadius = input<string | null>(null);\r\n\r\n  readonly computedStyles = computed(() => {\r\n    const styles: Record<string, string> = {};\r\n    const w = this.width();\r\n    const h = this.height();\r\n    const br = this.borderRadius();\r\n\r\n    if (w) {\r\n      styles['width'] = w;\r\n    }\r\n    if (h) {\r\n      styles['height'] = h;\r\n    }\r\n    if (br) {\r\n      styles['border-radius'] = br;\r\n    }\r\n\r\n    return styles;\r\n  });\r\n\r\n  readonly linesArray = computed(() => Array.from({ length: this.lines() }, (_, i) => i));\r\n}\r\n","@if (variant() === 'text' && lines() > 1) {\r\n  <div class=\"fui-skeleton__lines\">\r\n    @for (line of linesArray(); track line; let last = $last) {\r\n      <div class=\"fui-skeleton__line\" [class.fui-skeleton__line--last]=\"last\" [style]=\"computedStyles()\"></div>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"fui-skeleton__shape\" [style]=\"computedStyles()\"></div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAqBa,oBAAoB,CAAA;AACtB,IAAA,OAAO,GAAG,KAAK,CAAqB,MAAM,8EAAC;AAC3C,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;AAClC,IAAA,MAAM,GAAG,KAAK,CAAgB,IAAI,6EAAC;AACnC,IAAA,KAAK,GAAG,KAAK,CAAC,CAAC,4EAAC;AAChB,IAAA,QAAQ,GAAG,KAAK,CAAC,IAAI,+EAAC;AACtB,IAAA,YAAY,GAAG,KAAK,CAAgB,IAAI,mFAAC;AAEzC,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;QACtC,MAAM,MAAM,GAA2B,EAAE;AACzC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE;AACtB,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE;AACvB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;QAE9B,IAAI,CAAC,EAAE;AACL,YAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;QACrB;QACA,IAAI,CAAC,EAAE;AACL,YAAA,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QACtB;QACA,IAAI,EAAE,EAAE;AACN,YAAA,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE;QAC9B;AAEA,QAAA,OAAO,MAAM;AACf,IAAA,CAAC,qFAAC;AAEO,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,iFAAC;uGA3B5E,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,grCCrBjC,yYASA,EAAA,MAAA,EAAA,CAAA,suFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDYa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAlBhC,SAAS;+BACE,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,cAAc;AACrB,wBAAA,4BAA4B,EAAE,sBAAsB;AACpD,wBAAA,8BAA8B,EAAE,wBAAwB;AACxD,wBAAA,4BAA4B,EAAE,sBAAsB;AACpD,wBAAA,gCAAgC,EAAE,YAAY;AAC9C,wBAAA,kBAAkB,EAAE,MAAM;AAC1B,wBAAA,mBAAmB,EAAE,WAAW;AAChC,wBAAA,aAAa,EAAE,UAAU;AAC1B,qBAAA,EAAA,QAAA,EAAA,yYAAA,EAAA,MAAA,EAAA,CAAA,suFAAA,CAAA,EAAA;;;AEnBH;;AAEG;;;;"}

package/fesm2022/raintonic-formaui-components-slider.mjs

@@ -1,6 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, input, booleanAttribute, output, signal, viewChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Injectable, inject, DOCUMENT, ChangeDetectorRef, input, booleanAttribute, output, signal, viewChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FuiIntlBase } from '@raintonic/formaui/core';
+
+class FuiSliderIntl extends FuiIntlBase {
+    minValueAriaLabel = 'Minimum value';
+    maxValueAriaLabel = 'Maximum value';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSliderIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSliderIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSliderIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /**
  * # FuiSliderComponent
@@ -36,6 +49,11 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
  */
 class FuiSliderComponent {
     _document = inject(DOCUMENT);
+    intl = inject(FuiSliderIntl);
+    _cdr = inject(ChangeDetectorRef);
+    constructor() {
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
+    }
     // Inputs
     min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
@@ -321,7 +339,7 @@ class FuiSliderComponent {
                 useExisting: FuiSliderComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "_sliderContainer", first: true, predicate: ["sliderContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fui-slider__container\" (click)=\"_onTrackClick($event)\" #sliderContainer>\r\n  <div class=\"fui-slider__track\">\r\n    <div\r\n      class=\"fui-slider__track-fill\"\r\n      [style.left.%]=\"range() ? _percentageLow() : 0\"\r\n      [style.width.%]=\"range() ? _percentageHigh() - _percentageLow() : _percentage()\"\r\n    ></div>\r\n  </div>\r\n\r\n  @if (showTicks()) {\r\n    <div class=\"fui-slider__ticks\">\r\n      @for (tick of _tickValues(); track tick) {\r\n        <div\r\n          class=\"fui-slider__tick\"\r\n          [style.left.%]=\"_valueToPercent(tick)\"\r\n          [class.fui-slider__tick--active]=\"_isTickActive(tick)\"\r\n        ></div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"fui-slider__thumb fui-slider__thumb--low\"\r\n    [style.left.%]=\"range() ? _percentageLow() : _percentage()\"\r\n    role=\"slider\"\r\n    [attr.aria-valuenow]=\"range() ? _valueLow() : _value()\"\r\n    [attr.aria-valuemin]=\"min()\"\r\n    [attr.aria-valuemax]=\"range() ? _valueHigh() : max()\"\r\n    [attr.aria-label]=\"range() ? ariaLabelLow() || 'Minimum value' : ariaLabel() || null\"\r\n    aria-orientation=\"horizontal\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n    (mousedown)=\"_onThumbMouseDown($event, 'low')\"\r\n    (touchstart)=\"_onThumbTouchStart($event, 'low')\"\r\n    (keydown)=\"_onThumbKeydown($event, 'low')\"\r\n    (focus)=\"_hovered.set('low')\"\r\n    (blur)=\"_hovered.set(null)\"\r\n  >\r\n    @if (showTooltip() && (_dragging() === 'low' || _hovered() === 'low')) {\r\n      <div class=\"fui-slider__tooltip\">{{ formatLabel()(range() ? _valueLow() : _value()) }}</div>\r\n    }\r\n  </div>\r\n\r\n  @if (range()) {\r\n    <div\r\n      class=\"fui-slider__thumb fui-slider__thumb--high\"\r\n      [style.left.%]=\"_percentageHigh()\"\r\n      role=\"slider\"\r\n      [attr.aria-valuenow]=\"_valueHigh()\"\r\n      [attr.aria-valuemin]=\"_valueLow()\"\r\n      [attr.aria-valuemax]=\"max()\"\r\n      [attr.aria-label]=\"ariaLabelHigh() || 'Maximum value'\"\r\n      aria-orientation=\"horizontal\"\r\n      [attr.aria-disabled]=\"disabled()\"\r\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n      (mousedown)=\"_onThumbMouseDown($event, 'high')\"\r\n      (touchstart)=\"_onThumbTouchStart($event, 'high')\"\r\n      (keydown)=\"_onThumbKeydown($event, 'high')\"\r\n      (focus)=\"_hovered.set('high')\"\r\n      (blur)=\"_hovered.set(null)\"\r\n    >\r\n      @if (showTooltip() && (_dragging() === 'high' || _hovered() === 'high')) {\r\n        <div class=\"fui-slider__tooltip\">{{ formatLabel()(_valueHigh()) }}</div>\r\n      }\r\n    </div>\r\n  }\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}.fui-slider{display:block;position:relative;width:100%;padding:10px 0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.fui-slider__container{position:relative;width:100%;height:20px;display:flex;align-items:center}.fui-slider__track{position:absolute;left:0;right:0;height:4px;border-radius:var(--fui-border-radius-pill, 999px);background-color:var(--fui-secondary-30, #e2e8f0);overflow:hidden}.fui-slider__track-fill{position:absolute;top:0;bottom:0;background-color:var(--fui-primary);border-radius:var(--fui-border-radius-pill, 999px);transition:left,width var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__ticks{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none}.fui-slider__tick{position:absolute;width:4px;height:4px;border-radius:50%;background-color:var(--fui-secondary-50, #94a3b8);transform:translate(-50%,-50%);top:50%;transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-slider__tick--active{background-color:var(--fui-primary)}.fui-slider__thumb{position:absolute;width:20px;height:20px;border-radius:50%;background-color:var(--fui-primary);transform:translate(-50%);cursor:grab;z-index:2;outline:none;transition:left,transform,box-shadow var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__thumb:hover{box-shadow:0 0 0 6px rgba(var(--fui-primary-rgb, 99, 102, 241),.15)}.fui-slider__thumb:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-slider__tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:4px 8px;background-color:var(--fui-surface-inverse, #1e293b);color:var(--fui-text-inverse, #fff);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01, .75rem);font-weight:var(--fui-font-weight-medium, 500);line-height:1.2;white-space:nowrap;border-radius:var(--fui-border-radius-sm, 4px);pointer-events:none;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-slider__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--fui-surface-inverse, #1e293b)}.fui-slider--dragging .fui-slider__thumb{cursor:grabbing;transform:translate(-50%) scale(1.15);box-shadow:0 0 0 8px rgba(var(--fui-primary-rgb, 99, 102, 241),.2)}.fui-slider--dragging .fui-slider__track-fill{transition:none}.fui-slider--disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled, .38);pointer-events:none}.fui-slider--disabled .fui-slider__thumb{cursor:not-allowed}.fui-slider--range .fui-slider__thumb--high{z-index:3}@media(prefers-contrast:high){.fui-slider__thumb{border:2px solid CanvasText}.fui-slider__track{border:1px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fui-slider__thumb,.fui-slider__track-fill,.fui-slider__tooltip,.fui-slider__tick{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "_sliderContainer", first: true, predicate: ["sliderContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fui-slider__container\" (click)=\"_onTrackClick($event)\" #sliderContainer>\r\n  <div class=\"fui-slider__track\">\r\n    <div\r\n      class=\"fui-slider__track-fill\"\r\n      [style.left.%]=\"range() ? _percentageLow() : 0\"\r\n      [style.width.%]=\"range() ? _percentageHigh() - _percentageLow() : _percentage()\"\r\n    ></div>\r\n  </div>\r\n\r\n  @if (showTicks()) {\r\n    <div class=\"fui-slider__ticks\">\r\n      @for (tick of _tickValues(); track tick) {\r\n        <div\r\n          class=\"fui-slider__tick\"\r\n          [style.left.%]=\"_valueToPercent(tick)\"\r\n          [class.fui-slider__tick--active]=\"_isTickActive(tick)\"\r\n        ></div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"fui-slider__thumb fui-slider__thumb--low\"\r\n    [style.left.%]=\"range() ? _percentageLow() : _percentage()\"\r\n    role=\"slider\"\r\n    [attr.aria-valuenow]=\"range() ? _valueLow() : _value()\"\r\n    [attr.aria-valuemin]=\"min()\"\r\n    [attr.aria-valuemax]=\"range() ? _valueHigh() : max()\"\r\n    [attr.aria-label]=\"range() ? (ariaLabelLow() || intl.minValueAriaLabel) : (ariaLabel() || null)\"\r\n    aria-orientation=\"horizontal\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n    (mousedown)=\"_onThumbMouseDown($event, 'low')\"\r\n    (touchstart)=\"_onThumbTouchStart($event, 'low')\"\r\n    (keydown)=\"_onThumbKeydown($event, 'low')\"\r\n    (focus)=\"_hovered.set('low')\"\r\n    (blur)=\"_hovered.set(null)\"\r\n  >\r\n    @if (showTooltip() && (_dragging() === 'low' || _hovered() === 'low')) {\r\n      <div class=\"fui-slider__tooltip\">{{ formatLabel()(range() ? _valueLow() : _value()) }}</div>\r\n    }\r\n  </div>\r\n\r\n  @if (range()) {\r\n    <div\r\n      class=\"fui-slider__thumb fui-slider__thumb--high\"\r\n      [style.left.%]=\"_percentageHigh()\"\r\n      role=\"slider\"\r\n      [attr.aria-valuenow]=\"_valueHigh()\"\r\n      [attr.aria-valuemin]=\"_valueLow()\"\r\n      [attr.aria-valuemax]=\"max()\"\r\n      [attr.aria-label]=\"ariaLabelHigh() || intl.maxValueAriaLabel\"\r\n      aria-orientation=\"horizontal\"\r\n      [attr.aria-disabled]=\"disabled()\"\r\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n      (mousedown)=\"_onThumbMouseDown($event, 'high')\"\r\n      (touchstart)=\"_onThumbTouchStart($event, 'high')\"\r\n      (keydown)=\"_onThumbKeydown($event, 'high')\"\r\n      (focus)=\"_hovered.set('high')\"\r\n      (blur)=\"_hovered.set(null)\"\r\n    >\r\n      @if (showTooltip() && (_dragging() === 'high' || _hovered() === 'high')) {\r\n        <div class=\"fui-slider__tooltip\">{{ formatLabel()(_valueHigh()) }}</div>\r\n      }\r\n    </div>\r\n  }\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-slider{display:block;position:relative;width:100%;padding:10px 0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.fui-slider__container{position:relative;width:100%;height:20px;display:flex;align-items:center}.fui-slider__track{position:absolute;left:0;right:0;height:4px;border-radius:var(--fui-border-radius-pill, 999px);background-color:var(--fui-secondary-30, #e2e8f0);overflow:hidden}.fui-slider__track-fill{position:absolute;top:0;bottom:0;background-color:var(--fui-primary);border-radius:var(--fui-border-radius-pill, 999px);transition:left,width var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__ticks{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none}.fui-slider__tick{position:absolute;width:4px;height:4px;border-radius:50%;background-color:var(--fui-secondary-50, #94a3b8);transform:translate(-50%,-50%);top:50%;transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-slider__tick--active{background-color:var(--fui-primary)}.fui-slider__thumb{position:absolute;width:20px;height:20px;border-radius:50%;background-color:var(--fui-primary);transform:translate(-50%);cursor:grab;z-index:2;outline:none;transition:left,transform,box-shadow var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__thumb:hover{box-shadow:0 0 0 6px rgba(var(--fui-primary-rgb, 99, 102, 241),.15)}.fui-slider__thumb:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-slider__tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:4px 8px;background-color:var(--fui-surface-inverse, #1e293b);color:var(--fui-text-inverse, #fff);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01, .75rem);font-weight:var(--fui-font-weight-medium, 500);line-height:1.2;white-space:nowrap;border-radius:var(--fui-border-radius-sm, 4px);pointer-events:none;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-slider__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--fui-surface-inverse, #1e293b)}.fui-slider--dragging .fui-slider__thumb{cursor:grabbing;transform:translate(-50%) scale(1.15);box-shadow:0 0 0 8px rgba(var(--fui-primary-rgb, 99, 102, 241),.2)}.fui-slider--dragging .fui-slider__track-fill{transition:none}.fui-slider--disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled, .38);pointer-events:none}.fui-slider--disabled .fui-slider__thumb{cursor:not-allowed}.fui-slider--range .fui-slider__thumb--high{z-index:3}@media(prefers-contrast:high){.fui-slider__thumb{border:2px solid CanvasText}.fui-slider__track{border:1px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fui-slider__thumb,.fui-slider__track-fill,.fui-slider__tooltip,.fui-slider__tick{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSliderComponent, decorators: [{
             type: Component,
@@ -336,12 +354,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                             useExisting: FuiSliderComponent,
                             multi: true,
                         },
-                    ], template: "<div class=\"fui-slider__container\" (click)=\"_onTrackClick($event)\" #sliderContainer>\r\n  <div class=\"fui-slider__track\">\r\n    <div\r\n      class=\"fui-slider__track-fill\"\r\n      [style.left.%]=\"range() ? _percentageLow() : 0\"\r\n      [style.width.%]=\"range() ? _percentageHigh() - _percentageLow() : _percentage()\"\r\n    ></div>\r\n  </div>\r\n\r\n  @if (showTicks()) {\r\n    <div class=\"fui-slider__ticks\">\r\n      @for (tick of _tickValues(); track tick) {\r\n        <div\r\n          class=\"fui-slider__tick\"\r\n          [style.left.%]=\"_valueToPercent(tick)\"\r\n          [class.fui-slider__tick--active]=\"_isTickActive(tick)\"\r\n        ></div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"fui-slider__thumb fui-slider__thumb--low\"\r\n    [style.left.%]=\"range() ? _percentageLow() : _percentage()\"\r\n    role=\"slider\"\r\n    [attr.aria-valuenow]=\"range() ? _valueLow() : _value()\"\r\n    [attr.aria-valuemin]=\"min()\"\r\n    [attr.aria-valuemax]=\"range() ? _valueHigh() : max()\"\r\n    [attr.aria-label]=\"range() ? ariaLabelLow() || 'Minimum value' : ariaLabel() || null\"\r\n    aria-orientation=\"horizontal\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n    (mousedown)=\"_onThumbMouseDown($event, 'low')\"\r\n    (touchstart)=\"_onThumbTouchStart($event, 'low')\"\r\n    (keydown)=\"_onThumbKeydown($event, 'low')\"\r\n    (focus)=\"_hovered.set('low')\"\r\n    (blur)=\"_hovered.set(null)\"\r\n  >\r\n    @if (showTooltip() && (_dragging() === 'low' || _hovered() === 'low')) {\r\n      <div class=\"fui-slider__tooltip\">{{ formatLabel()(range() ? _valueLow() : _value()) }}</div>\r\n    }\r\n  </div>\r\n\r\n  @if (range()) {\r\n    <div\r\n      class=\"fui-slider__thumb fui-slider__thumb--high\"\r\n      [style.left.%]=\"_percentageHigh()\"\r\n      role=\"slider\"\r\n      [attr.aria-valuenow]=\"_valueHigh()\"\r\n      [attr.aria-valuemin]=\"_valueLow()\"\r\n      [attr.aria-valuemax]=\"max()\"\r\n      [attr.aria-label]=\"ariaLabelHigh() || 'Maximum value'\"\r\n      aria-orientation=\"horizontal\"\r\n      [attr.aria-disabled]=\"disabled()\"\r\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n      (mousedown)=\"_onThumbMouseDown($event, 'high')\"\r\n      (touchstart)=\"_onThumbTouchStart($event, 'high')\"\r\n      (keydown)=\"_onThumbKeydown($event, 'high')\"\r\n      (focus)=\"_hovered.set('high')\"\r\n      (blur)=\"_hovered.set(null)\"\r\n    >\r\n      @if (showTooltip() && (_dragging() === 'high' || _hovered() === 'high')) {\r\n        <div class=\"fui-slider__tooltip\">{{ formatLabel()(_valueHigh()) }}</div>\r\n      }\r\n    </div>\r\n  }\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}.fui-slider{display:block;position:relative;width:100%;padding:10px 0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.fui-slider__container{position:relative;width:100%;height:20px;display:flex;align-items:center}.fui-slider__track{position:absolute;left:0;right:0;height:4px;border-radius:var(--fui-border-radius-pill, 999px);background-color:var(--fui-secondary-30, #e2e8f0);overflow:hidden}.fui-slider__track-fill{position:absolute;top:0;bottom:0;background-color:var(--fui-primary);border-radius:var(--fui-border-radius-pill, 999px);transition:left,width var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__ticks{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none}.fui-slider__tick{position:absolute;width:4px;height:4px;border-radius:50%;background-color:var(--fui-secondary-50, #94a3b8);transform:translate(-50%,-50%);top:50%;transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-slider__tick--active{background-color:var(--fui-primary)}.fui-slider__thumb{position:absolute;width:20px;height:20px;border-radius:50%;background-color:var(--fui-primary);transform:translate(-50%);cursor:grab;z-index:2;outline:none;transition:left,transform,box-shadow var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__thumb:hover{box-shadow:0 0 0 6px rgba(var(--fui-primary-rgb, 99, 102, 241),.15)}.fui-slider__thumb:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-slider__tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:4px 8px;background-color:var(--fui-surface-inverse, #1e293b);color:var(--fui-text-inverse, #fff);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01, .75rem);font-weight:var(--fui-font-weight-medium, 500);line-height:1.2;white-space:nowrap;border-radius:var(--fui-border-radius-sm, 4px);pointer-events:none;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-slider__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--fui-surface-inverse, #1e293b)}.fui-slider--dragging .fui-slider__thumb{cursor:grabbing;transform:translate(-50%) scale(1.15);box-shadow:0 0 0 8px rgba(var(--fui-primary-rgb, 99, 102, 241),.2)}.fui-slider--dragging .fui-slider__track-fill{transition:none}.fui-slider--disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled, .38);pointer-events:none}.fui-slider--disabled .fui-slider__thumb{cursor:not-allowed}.fui-slider--range .fui-slider__thumb--high{z-index:3}@media(prefers-contrast:high){.fui-slider__thumb{border:2px solid CanvasText}.fui-slider__track{border:1px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fui-slider__thumb,.fui-slider__track-fill,.fui-slider__tooltip,.fui-slider__tick{transition:none}}\n"] }]
-        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], formatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelLow: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelLow", required: false }] }], ariaLabelHigh: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelHigh", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], _sliderContainer: [{ type: i0.ViewChild, args: ['sliderContainer', { isSignal: true }] }] } });
+                    ], template: "<div class=\"fui-slider__container\" (click)=\"_onTrackClick($event)\" #sliderContainer>\r\n  <div class=\"fui-slider__track\">\r\n    <div\r\n      class=\"fui-slider__track-fill\"\r\n      [style.left.%]=\"range() ? _percentageLow() : 0\"\r\n      [style.width.%]=\"range() ? _percentageHigh() - _percentageLow() : _percentage()\"\r\n    ></div>\r\n  </div>\r\n\r\n  @if (showTicks()) {\r\n    <div class=\"fui-slider__ticks\">\r\n      @for (tick of _tickValues(); track tick) {\r\n        <div\r\n          class=\"fui-slider__tick\"\r\n          [style.left.%]=\"_valueToPercent(tick)\"\r\n          [class.fui-slider__tick--active]=\"_isTickActive(tick)\"\r\n        ></div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    class=\"fui-slider__thumb fui-slider__thumb--low\"\r\n    [style.left.%]=\"range() ? _percentageLow() : _percentage()\"\r\n    role=\"slider\"\r\n    [attr.aria-valuenow]=\"range() ? _valueLow() : _value()\"\r\n    [attr.aria-valuemin]=\"min()\"\r\n    [attr.aria-valuemax]=\"range() ? _valueHigh() : max()\"\r\n    [attr.aria-label]=\"range() ? (ariaLabelLow() || intl.minValueAriaLabel) : (ariaLabel() || null)\"\r\n    aria-orientation=\"horizontal\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n    (mousedown)=\"_onThumbMouseDown($event, 'low')\"\r\n    (touchstart)=\"_onThumbTouchStart($event, 'low')\"\r\n    (keydown)=\"_onThumbKeydown($event, 'low')\"\r\n    (focus)=\"_hovered.set('low')\"\r\n    (blur)=\"_hovered.set(null)\"\r\n  >\r\n    @if (showTooltip() && (_dragging() === 'low' || _hovered() === 'low')) {\r\n      <div class=\"fui-slider__tooltip\">{{ formatLabel()(range() ? _valueLow() : _value()) }}</div>\r\n    }\r\n  </div>\r\n\r\n  @if (range()) {\r\n    <div\r\n      class=\"fui-slider__thumb fui-slider__thumb--high\"\r\n      [style.left.%]=\"_percentageHigh()\"\r\n      role=\"slider\"\r\n      [attr.aria-valuenow]=\"_valueHigh()\"\r\n      [attr.aria-valuemin]=\"_valueLow()\"\r\n      [attr.aria-valuemax]=\"max()\"\r\n      [attr.aria-label]=\"ariaLabelHigh() || intl.maxValueAriaLabel\"\r\n      aria-orientation=\"horizontal\"\r\n      [attr.aria-disabled]=\"disabled()\"\r\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n      (mousedown)=\"_onThumbMouseDown($event, 'high')\"\r\n      (touchstart)=\"_onThumbTouchStart($event, 'high')\"\r\n      (keydown)=\"_onThumbKeydown($event, 'high')\"\r\n      (focus)=\"_hovered.set('high')\"\r\n      (blur)=\"_hovered.set(null)\"\r\n    >\r\n      @if (showTooltip() && (_dragging() === 'high' || _hovered() === 'high')) {\r\n        <div class=\"fui-slider__tooltip\">{{ formatLabel()(_valueHigh()) }}</div>\r\n      }\r\n    </div>\r\n  }\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:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 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-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-slider{display:block;position:relative;width:100%;padding:10px 0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.fui-slider__container{position:relative;width:100%;height:20px;display:flex;align-items:center}.fui-slider__track{position:absolute;left:0;right:0;height:4px;border-radius:var(--fui-border-radius-pill, 999px);background-color:var(--fui-secondary-30, #e2e8f0);overflow:hidden}.fui-slider__track-fill{position:absolute;top:0;bottom:0;background-color:var(--fui-primary);border-radius:var(--fui-border-radius-pill, 999px);transition:left,width var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__ticks{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none}.fui-slider__tick{position:absolute;width:4px;height:4px;border-radius:50%;background-color:var(--fui-secondary-50, #94a3b8);transform:translate(-50%,-50%);top:50%;transition:background-color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-slider__tick--active{background-color:var(--fui-primary)}.fui-slider__thumb{position:absolute;width:20px;height:20px;border-radius:50%;background-color:var(--fui-primary);transform:translate(-50%);cursor:grab;z-index:2;outline:none;transition:left,transform,box-shadow var(--fui-duration-fast-01, 70ms) var(--fui-ease-standard, cubic-bezier(.4, 0, .2, 1)) 0ms}.fui-slider__thumb:hover{box-shadow:0 0 0 6px rgba(var(--fui-primary-rgb, 99, 102, 241),.15)}.fui-slider__thumb:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-slider__tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:4px 8px;background-color:var(--fui-surface-inverse, #1e293b);color:var(--fui-text-inverse, #fff);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01, .75rem);font-weight:var(--fui-font-weight-medium, 500);line-height:1.2;white-space:nowrap;border-radius:var(--fui-border-radius-sm, 4px);pointer-events:none;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-slider__tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--fui-surface-inverse, #1e293b)}.fui-slider--dragging .fui-slider__thumb{cursor:grabbing;transform:translate(-50%) scale(1.15);box-shadow:0 0 0 8px rgba(var(--fui-primary-rgb, 99, 102, 241),.2)}.fui-slider--dragging .fui-slider__track-fill{transition:none}.fui-slider--disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled, .38);pointer-events:none}.fui-slider--disabled .fui-slider__thumb{cursor:not-allowed}.fui-slider--range .fui-slider__thumb--high{z-index:3}@media(prefers-contrast:high){.fui-slider__thumb{border:2px solid CanvasText}.fui-slider__track{border:1px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fui-slider__thumb,.fui-slider__track-fill,.fui-slider__tooltip,.fui-slider__tick{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], formatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelLow: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelLow", required: false }] }], ariaLabelHigh: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelHigh", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], _sliderContainer: [{ type: i0.ViewChild, args: ['sliderContainer', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FuiSliderComponent };
+export { FuiSliderComponent, FuiSliderIntl };
 //# sourceMappingURL=raintonic-formaui-components-slider.mjs.map