@raintonic/formaui 0.2.0

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

@@ -0,0 +1,257 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+
+/**
+ * # FuiSidebar Component
+ *
+ * A flexible sidebar component following Carbon Design System principles.
+ * Provides navigation with Angular Material-like APIs and responsive behavior.
+ *
+ * ## Features
+ * - Multiple modes: side, over, push
+ * - Collapsible with toggle functionality
+ * - Hierarchical navigation support
+ * - Responsive behavior
+ * - Theme integration
+ * - Accessibility support
+ * - Custom content projection
+ *
+ * ## Usage
+ *
+ * ### Basic Sidebar
+ * ```html
+ * <fui-sidebar
+ *   [opened]="sidebarOpen"
+ *   [mode]="'side'"
+ *   [navItems]="navigationItems"
+ *   (openedChange)="onSidebarToggle($event)"
+ *   (navItemClick)="onNavItemClick($event)">
+ *
+ *   <div header>
+ *     <h3>Navigation</h3>
+ *   </div>
+ *
+ *   <div footer>
+ *     <p>Version 1.0.0</p>
+ *   </div>
+ * </fui-sidebar>
+ * ```
+ *
+ * ### Responsive Sidebar
+ * ```html
+ * <fui-sidebar
+ *   [opened]="sidebarOpen"
+ *   [mode]="isDesktop ? 'side' : 'over'"
+ *   [backdrop]="!isDesktop"
+ *   [navItems]="navigationItems">
+ * </fui-sidebar>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * import { FuiSidebarComponent, FuiSidebarNavItem } from '@raintonic/formaui/components/sidebar';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [FuiSidebarComponent],
+ *   template: `
+ *     <fui-sidebar
+ *       [opened]="sidebarOpen"
+ *       [mode]="sidebarMode"
+ *       [navItems]="navItems"
+ *       (openedChange)="onSidebarToggle($event)"
+ *       (navItemClick)="onNavItemClick($event)">
+ *
+ *       <div header class="sidebar-header">
+ *         <h3>Holiday ERP</h3>
+ *       </div>
+ *     </fui-sidebar>
+ *   `
+ * })
+ * export class AppLayoutComponent {
+ *   sidebarOpen = true;
+ *   sidebarMode: FuiSidebarMode = 'side';
+ *
+ *   navItems: FuiSidebarNavItem[] = [
+ *     { id: 'dashboard', label: 'Dashboard', icon: 'house', route: '/dashboard' },
+ *     {
+ *       id: 'sales',
+ *       label: 'Sales',
+ *       icon: 'shopping-cart',
+ *       children: [
+ *         { id: 'orders', label: 'Orders', route: '/sales/orders' },
+ *         { id: 'invoices', label: 'Invoices', route: '/sales/invoices' },
+ *       ]
+ *     },
+ *     { id: 'products', label: 'Products', icon: 'package', route: '/products' },
+ *   ];
+ *
+ *   onSidebarToggle(opened: boolean): void {
+ *     this.sidebarOpen = opened;
+ *   }
+ *
+ *   onNavItemClick(item: FuiSidebarNavItem): void {
+ *     console.log('Navigation item clicked:', item.id);
+ *   }
+ * }
+ * ```
+ */
+class FuiSidebarComponent {
+    // Inputs using signal-based API
+    opened = input(true, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    mode = input('side', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    position = input('start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    backdrop = input(false, ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
+    width = input('16rem', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    navItems = input([], ...(ngDevMode ? [{ debugName: "navItems" }] : /* istanbul ignore next */ []));
+    collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    // Outputs using signal-based API
+    openedChange = output();
+    navItemClick = output();
+    backdropClick = output();
+    // Internal state
+    expandedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedItems" }] : /* istanbul ignore next */ []));
+    // Computed properties
+    sidebarClasses = computed(() => {
+        const classes = ['fui-sidebar'];
+        if (this.opened()) {
+            classes.push('fui-sidebar--opened');
+        }
+        classes.push(`fui-sidebar--${this.mode()}`);
+        classes.push(`fui-sidebar--${this.position()}`);
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "sidebarClasses" }] : /* istanbul ignore next */ []));
+    backdropClasses = computed(() => {
+        const classes = ['fui-sidebar-backdrop'];
+        if (this.opened() && this.backdrop()) {
+            classes.push('fui-sidebar-backdrop--visible');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "backdropClasses" }] : /* istanbul ignore next */ []));
+    sidebarStyles = computed(() => {
+        return {
+            width: this.width(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "sidebarStyles" }] : /* istanbul ignore next */ []));
+    /**
+     * Toggle sidebar open/closed state
+     */
+    toggle() {
+        const _isNewState = !this.opened();
+        this.openedChange.emit(_isNewState);
+    }
+    /**
+     * Open the sidebar
+     */
+    open() {
+        if (!this.opened()) {
+            this.openedChange.emit(true);
+        }
+    }
+    /**
+     * Close the sidebar
+     */
+    close() {
+        if (this.opened()) {
+            this.openedChange.emit(false);
+        }
+    }
+    /**
+     * Handle navigation item click
+     */
+    onNavItemClick(item) {
+        if (item.disabled) {
+            return;
+        }
+        // Handle expandable items
+        if (item.children && item.children.length > 0) {
+            this.toggleItemExpansion(item.id);
+        }
+        else {
+            this.navItemClick.emit(item);
+            // Close sidebar on mobile when item is clicked
+            if (this.mode() === 'over') {
+                this.close();
+            }
+        }
+    }
+    /**
+     * Toggle expansion state of a navigation item
+     */
+    toggleItemExpansion(itemId) {
+        const _areExpanded = this.expandedItems();
+        const _areNewExpanded = new Set(_areExpanded);
+        if (_areNewExpanded.has(itemId)) {
+            _areNewExpanded.delete(itemId);
+        }
+        else {
+            _areNewExpanded.add(itemId);
+        }
+        this.expandedItems.set(_areNewExpanded);
+    }
+    /**
+     * Check if item is expanded
+     */
+    isItemExpanded(itemId) {
+        return this.expandedItems().has(itemId);
+    }
+    /**
+     * Handle backdrop click
+     */
+    onBackdropClick() {
+        this.backdropClick.emit();
+        this.close();
+    }
+    /**
+     * Get navigation item classes
+     */
+    getNavItemClasses(item, level = 0) {
+        const classes = ['fui-sidebar__nav-item'];
+        if (item.active) {
+            classes.push('fui-sidebar__nav-item--active');
+        }
+        if (item.disabled) {
+            classes.push('fui-sidebar__nav-item--disabled');
+        }
+        if (level > 0) {
+            classes.push('fui-sidebar__nav-item--child');
+        }
+        if (item.children && item.children.length > 0) {
+            classes.push('fui-sidebar__nav-item--expandable');
+            if (this.isItemExpanded(item.id)) {
+                classes.push('fui-sidebar__nav-item--expanded');
+            }
+        }
+        return classes.join(' ');
+    }
+    onEsc() {
+        if (this.opened() && (this.mode() === 'over' || this.backdrop())) {
+            this.close();
+        }
+    }
+    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 -->\n@if (backdrop()) {\n  <div [class]=\"backdropClasses()\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Sidebar -->\n<aside\n  [class]=\"sidebarClasses()\"\n  [style]=\"sidebarStyles()\"\n  [attr.aria-modal]=\"mode() === 'over' && opened() ? 'true' : null\"\n  [attr.role]=\"mode() === 'over' && opened() ? 'dialog' : null\"\n  [attr.aria-label]=\"mode() === 'over' && opened() ? 'Navigation sidebar' : null\"\n>\n  <!-- Header Content -->\n  <div class=\"fui-sidebar__header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </div>\n\n  <!-- Navigation -->\n  @if (navItems().length > 0) {\n    <nav class=\"fui-sidebar__nav\" aria-label=\"Main navigation\">\n      <ul class=\"fui-sidebar__nav-list\">\n        @for (item of navItems(); track item.id) {\n          <li>\n            <!-- Navigation Item -->\n            <button\n              type=\"button\"\n              [class]=\"getNavItemClasses(item)\"\n              [disabled]=\"item.disabled\"\n              [attr.aria-expanded]=\"item.children?.length ? isItemExpanded(item.id) : null\"\n              [attr.aria-current]=\"item.active ? 'page' : null\"\n              (click)=\"onNavItemClick(item)\"\n            >\n              @if (item.icon) {\n                <fui-icon [name]=\"item.icon\" size=\"md\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\n              }\n\n              <span class=\"fui-sidebar__nav-label\">{{ item.label }}</span>\n\n              @if (item.children && item.children.length > 0) {\n                <fui-icon\n                  name=\"caret-down\"\n                  size=\"sm\"\n                  class=\"fui-sidebar__nav-caret\"\n                  [class.fui-sidebar__nav-caret--expanded]=\"isItemExpanded(item.id)\"\n                >\n                </fui-icon>\n              }\n            </button>\n\n            <!-- Child Items -->\n            @if (item.children && item.children.length > 0 && isItemExpanded(item.id)) {\n              <ul class=\"fui-sidebar__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <li>\n                    <button\n                      type=\"button\"\n                      [class]=\"getNavItemClasses(child, 1)\"\n                      [disabled]=\"child.disabled\"\n                      [attr.aria-current]=\"child.active ? 'page' : null\"\n                      (click)=\"onNavItemClick(child)\"\n                    >\n                      @if (child.icon) {\n                        <fui-icon [name]=\"child.icon\" size=\"sm\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\n                      }\n\n                      <span class=\"fui-sidebar__nav-label\">{{ child.label }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n          </li>\n        }\n      </ul>\n    </nav>\n  }\n\n  <!-- Custom Content -->\n  <div class=\"fui-sidebar__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer Content -->\n  <div class=\"fui-sidebar__footer\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n</aside>\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,
+            args: [{ selector: 'fui-sidebar', standalone: true, imports: [FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-sidebar-container',
+                        '[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"',
+                    }, template: "<!-- Backdrop -->\n@if (backdrop()) {\n  <div [class]=\"backdropClasses()\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Sidebar -->\n<aside\n  [class]=\"sidebarClasses()\"\n  [style]=\"sidebarStyles()\"\n  [attr.aria-modal]=\"mode() === 'over' && opened() ? 'true' : null\"\n  [attr.role]=\"mode() === 'over' && opened() ? 'dialog' : null\"\n  [attr.aria-label]=\"mode() === 'over' && opened() ? 'Navigation sidebar' : null\"\n>\n  <!-- Header Content -->\n  <div class=\"fui-sidebar__header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </div>\n\n  <!-- Navigation -->\n  @if (navItems().length > 0) {\n    <nav class=\"fui-sidebar__nav\" aria-label=\"Main navigation\">\n      <ul class=\"fui-sidebar__nav-list\">\n        @for (item of navItems(); track item.id) {\n          <li>\n            <!-- Navigation Item -->\n            <button\n              type=\"button\"\n              [class]=\"getNavItemClasses(item)\"\n              [disabled]=\"item.disabled\"\n              [attr.aria-expanded]=\"item.children?.length ? isItemExpanded(item.id) : null\"\n              [attr.aria-current]=\"item.active ? 'page' : null\"\n              (click)=\"onNavItemClick(item)\"\n            >\n              @if (item.icon) {\n                <fui-icon [name]=\"item.icon\" size=\"md\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\n              }\n\n              <span class=\"fui-sidebar__nav-label\">{{ item.label }}</span>\n\n              @if (item.children && item.children.length > 0) {\n                <fui-icon\n                  name=\"caret-down\"\n                  size=\"sm\"\n                  class=\"fui-sidebar__nav-caret\"\n                  [class.fui-sidebar__nav-caret--expanded]=\"isItemExpanded(item.id)\"\n                >\n                </fui-icon>\n              }\n            </button>\n\n            <!-- Child Items -->\n            @if (item.children && item.children.length > 0 && isItemExpanded(item.id)) {\n              <ul class=\"fui-sidebar__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <li>\n                    <button\n                      type=\"button\"\n                      [class]=\"getNavItemClasses(child, 1)\"\n                      [disabled]=\"child.disabled\"\n                      [attr.aria-current]=\"child.active ? 'page' : null\"\n                      (click)=\"onNavItemClick(child)\"\n                    >\n                      @if (child.icon) {\n                        <fui-icon [name]=\"child.icon\" size=\"sm\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\n                      }\n\n                      <span class=\"fui-sidebar__nav-label\">{{ child.label }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n          </li>\n        }\n      </ul>\n    </nav>\n  }\n\n  <!-- Custom Content -->\n  <div class=\"fui-sidebar__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer Content -->\n  <div class=\"fui-sidebar__footer\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n</aside>\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: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiSidebarComponent };
+//# sourceMappingURL=raintonic-formaui-components-sidebar.mjs.map

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

@@ -0,0 +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 {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  output,\n  computed,\n  signal,\n  InputSignal,\n  OutputEmitterRef,\n  Signal,\n  WritableSignal,\n  HostListener,\n} from '@angular/core';\n\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\n\n/**\n * Sidebar mode type\n */\nexport type FuiSidebarMode = 'side' | 'over' | 'push';\n\n/**\n * Sidebar position type\n */\nexport type FuiSidebarPosition = 'start' | 'end';\n\n/**\n * Sidebar navigation item interface\n */\nexport interface FuiSidebarNavItem {\n  id: string;\n  label: string;\n  icon?: string;\n  route?: string;\n  active?: boolean;\n  disabled?: boolean;\n  children?: FuiSidebarNavItem[];\n  expanded?: boolean;\n}\n\n/**\n * # FuiSidebar Component\n *\n * A flexible sidebar component following Carbon Design System principles.\n * Provides navigation with Angular Material-like APIs and responsive behavior.\n *\n * ## Features\n * - Multiple modes: side, over, push\n * - Collapsible with toggle functionality\n * - Hierarchical navigation support\n * - Responsive behavior\n * - Theme integration\n * - Accessibility support\n * - Custom content projection\n *\n * ## Usage\n *\n * ### Basic Sidebar\n * ```html\n * <fui-sidebar\n *   [opened]=\"sidebarOpen\"\n *   [mode]=\"'side'\"\n *   [navItems]=\"navigationItems\"\n *   (openedChange)=\"onSidebarToggle($event)\"\n *   (navItemClick)=\"onNavItemClick($event)\">\n *\n *   <div header>\n *     <h3>Navigation</h3>\n *   </div>\n *\n *   <div footer>\n *     <p>Version 1.0.0</p>\n *   </div>\n * </fui-sidebar>\n * ```\n *\n * ### Responsive Sidebar\n * ```html\n * <fui-sidebar\n *   [opened]=\"sidebarOpen\"\n *   [mode]=\"isDesktop ? 'side' : 'over'\"\n *   [backdrop]=\"!isDesktop\"\n *   [navItems]=\"navigationItems\">\n * </fui-sidebar>\n * ```\n *\n * @example\n * ```typescript\n * import { FuiSidebarComponent, FuiSidebarNavItem } from '@raintonic/formaui/components/sidebar';\n *\n * @Component({\n *   standalone: true,\n *   imports: [FuiSidebarComponent],\n *   template: `\n *     <fui-sidebar\n *       [opened]=\"sidebarOpen\"\n *       [mode]=\"sidebarMode\"\n *       [navItems]=\"navItems\"\n *       (openedChange)=\"onSidebarToggle($event)\"\n *       (navItemClick)=\"onNavItemClick($event)\">\n *\n *       <div header class=\"sidebar-header\">\n *         <h3>Holiday ERP</h3>\n *       </div>\n *     </fui-sidebar>\n *   `\n * })\n * export class AppLayoutComponent {\n *   sidebarOpen = true;\n *   sidebarMode: FuiSidebarMode = 'side';\n *\n *   navItems: FuiSidebarNavItem[] = [\n *     { id: 'dashboard', label: 'Dashboard', icon: 'house', route: '/dashboard' },\n *     {\n *       id: 'sales',\n *       label: 'Sales',\n *       icon: 'shopping-cart',\n *       children: [\n *         { id: 'orders', label: 'Orders', route: '/sales/orders' },\n *         { id: 'invoices', label: 'Invoices', route: '/sales/invoices' },\n *       ]\n *     },\n *     { id: 'products', label: 'Products', icon: 'package', route: '/products' },\n *   ];\n *\n *   onSidebarToggle(opened: boolean): void {\n *     this.sidebarOpen = opened;\n *   }\n *\n *   onNavItemClick(item: FuiSidebarNavItem): void {\n *     console.log('Navigation item clicked:', item.id);\n *   }\n * }\n * ```\n */\n@Component({\n  selector: 'fui-sidebar',\n  standalone: true,\n  imports: [FuiIconComponent],\n  templateUrl: './sidebar.component.html',\n  styleUrls: ['./sidebar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-sidebar-container',\n    '[class.fui-sidebar-container--opened]': 'opened()',\n    '[class.fui-sidebar-container--over]': 'mode() === \"over\"',\n    '[class.fui-sidebar-container--push]': 'mode() === \"push\"',\n    '[class.fui-sidebar-container--side]': 'mode() === \"side\"',\n    '[class.fui-sidebar-container--start]': 'position() === \"start\"',\n    '[class.fui-sidebar-container--end]': 'position() === \"end\"',\n  },\n})\nexport class FuiSidebarComponent {\n  // Inputs using signal-based API\n  readonly opened: InputSignal<boolean> = input(true);\n  readonly mode: InputSignal<FuiSidebarMode> = input<FuiSidebarMode>('side');\n  readonly position: InputSignal<FuiSidebarPosition> = input<FuiSidebarPosition>('start');\n  readonly backdrop: InputSignal<boolean> = input(false);\n  readonly width: InputSignal<string> = input('16rem');\n  readonly navItems: InputSignal<FuiSidebarNavItem[]> = input<FuiSidebarNavItem[]>([]);\n  readonly collapsible: InputSignal<boolean> = input(true);\n\n  // Outputs using signal-based API\n  readonly openedChange: OutputEmitterRef<boolean> = output<boolean>();\n  readonly navItemClick: OutputEmitterRef<FuiSidebarNavItem> = output<FuiSidebarNavItem>();\n  readonly backdropClick: OutputEmitterRef<void> = output();\n\n  // Internal state\n  readonly expandedItems: WritableSignal<Set<string>> = signal(new Set());\n\n  // Computed properties\n  readonly sidebarClasses: Signal<string> = computed(() => {\n    const classes: string[] = ['fui-sidebar'];\n\n    if (this.opened()) {\n      classes.push('fui-sidebar--opened');\n    }\n\n    classes.push(`fui-sidebar--${this.mode()}`);\n    classes.push(`fui-sidebar--${this.position()}`);\n\n    return classes.join(' ');\n  });\n\n  readonly backdropClasses: Signal<string> = computed(() => {\n    const classes: string[] = ['fui-sidebar-backdrop'];\n\n    if (this.opened() && this.backdrop()) {\n      classes.push('fui-sidebar-backdrop--visible');\n    }\n\n    return classes.join(' ');\n  });\n\n  readonly sidebarStyles: Signal<Record<string, string>> = computed(() => {\n    return {\n      width: this.width(),\n    };\n  });\n\n  /**\n   * Toggle sidebar open/closed state\n   */\n  toggle(): void {\n    const _isNewState = !this.opened();\n    this.openedChange.emit(_isNewState);\n  }\n\n  /**\n   * Open the sidebar\n   */\n  open(): void {\n    if (!this.opened()) {\n      this.openedChange.emit(true);\n    }\n  }\n\n  /**\n   * Close the sidebar\n   */\n  close(): void {\n    if (this.opened()) {\n      this.openedChange.emit(false);\n    }\n  }\n\n  /**\n   * Handle navigation item click\n   */\n  onNavItemClick(item: FuiSidebarNavItem): void {\n    if (item.disabled) {\n      return;\n    }\n\n    // Handle expandable items\n    if (item.children && item.children.length > 0) {\n      this.toggleItemExpansion(item.id);\n    } else {\n      this.navItemClick.emit(item);\n\n      // Close sidebar on mobile when item is clicked\n      if (this.mode() === 'over') {\n        this.close();\n      }\n    }\n  }\n\n  /**\n   * Toggle expansion state of a navigation item\n   */\n  toggleItemExpansion(itemId: string): void {\n    const _areExpanded = this.expandedItems();\n    const _areNewExpanded = new Set(_areExpanded);\n\n    if (_areNewExpanded.has(itemId)) {\n      _areNewExpanded.delete(itemId);\n    } else {\n      _areNewExpanded.add(itemId);\n    }\n\n    this.expandedItems.set(_areNewExpanded);\n  }\n\n  /**\n   * Check if item is expanded\n   */\n  isItemExpanded(itemId: string): boolean {\n    return this.expandedItems().has(itemId);\n  }\n\n  /**\n   * Handle backdrop click\n   */\n  onBackdropClick(): void {\n    this.backdropClick.emit();\n    this.close();\n  }\n\n  /**\n   * Get navigation item classes\n   */\n  getNavItemClasses(item: FuiSidebarNavItem, level = 0): string {\n    const classes: string[] = ['fui-sidebar__nav-item'];\n\n    if (item.active) {\n      classes.push('fui-sidebar__nav-item--active');\n    }\n\n    if (item.disabled) {\n      classes.push('fui-sidebar__nav-item--disabled');\n    }\n\n    if (level > 0) {\n      classes.push('fui-sidebar__nav-item--child');\n    }\n\n    if (item.children && item.children.length > 0) {\n      classes.push('fui-sidebar__nav-item--expandable');\n\n      if (this.isItemExpanded(item.id)) {\n        classes.push('fui-sidebar__nav-item--expanded');\n      }\n    }\n\n    return classes.join(' ');\n  }\n\n  @HostListener('document:keydown.escape')\n  onEsc(): void {\n    if (this.opened() && (this.mode() === 'over' || this.backdrop())) {\n      this.close();\n    }\n  }\n}\n","<!-- Backdrop -->\n@if (backdrop()) {\n  <div [class]=\"backdropClasses()\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Sidebar -->\n<aside\n  [class]=\"sidebarClasses()\"\n  [style]=\"sidebarStyles()\"\n  [attr.aria-modal]=\"mode() === 'over' && opened() ? 'true' : null\"\n  [attr.role]=\"mode() === 'over' && opened() ? 'dialog' : null\"\n  [attr.aria-label]=\"mode() === 'over' && opened() ? 'Navigation sidebar' : null\"\n>\n  <!-- Header Content -->\n  <div class=\"fui-sidebar__header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </div>\n\n  <!-- Navigation -->\n  @if (navItems().length > 0) {\n    <nav class=\"fui-sidebar__nav\" aria-label=\"Main navigation\">\n      <ul class=\"fui-sidebar__nav-list\">\n        @for (item of navItems(); track item.id) {\n          <li>\n            <!-- Navigation Item -->\n            <button\n              type=\"button\"\n              [class]=\"getNavItemClasses(item)\"\n              [disabled]=\"item.disabled\"\n              [attr.aria-expanded]=\"item.children?.length ? isItemExpanded(item.id) : null\"\n              [attr.aria-current]=\"item.active ? 'page' : null\"\n              (click)=\"onNavItemClick(item)\"\n            >\n              @if (item.icon) {\n                <fui-icon [name]=\"item.icon\" size=\"md\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\n              }\n\n              <span class=\"fui-sidebar__nav-label\">{{ item.label }}</span>\n\n              @if (item.children && item.children.length > 0) {\n                <fui-icon\n                  name=\"caret-down\"\n                  size=\"sm\"\n                  class=\"fui-sidebar__nav-caret\"\n                  [class.fui-sidebar__nav-caret--expanded]=\"isItemExpanded(item.id)\"\n                >\n                </fui-icon>\n              }\n            </button>\n\n            <!-- Child Items -->\n            @if (item.children && item.children.length > 0 && isItemExpanded(item.id)) {\n              <ul class=\"fui-sidebar__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <li>\n                    <button\n                      type=\"button\"\n                      [class]=\"getNavItemClasses(child, 1)\"\n                      [disabled]=\"child.disabled\"\n                      [attr.aria-current]=\"child.active ? 'page' : null\"\n                      (click)=\"onNavItemClick(child)\"\n                    >\n                      @if (child.icon) {\n                        <fui-icon [name]=\"child.icon\" size=\"sm\" class=\"fui-sidebar__nav-icon\"> </fui-icon>\n                      }\n\n                      <span class=\"fui-sidebar__nav-label\">{{ child.label }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n          </li>\n        }\n      </ul>\n    </nav>\n  }\n\n  <!-- Custom Content -->\n  <div class=\"fui-sidebar__content\">\n    <ng-content></ng-content>\n  </div>\n\n  <!-- Footer Content -->\n  <div class=\"fui-sidebar__footer\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n</aside>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,50 @@
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class FuiSkeletonComponent {
+    variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    animated = input(true, ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+    borderRadius = input(null, ...(ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []));
+    computedStyles = computed(() => {
+        const styles = {};
+        const w = this.width();
+        const h = this.height();
+        const br = this.borderRadius();
+        if (w) {
+            styles['width'] = w;
+        }
+        if (h) {
+            styles['height'] = h;
+        }
+        if (br) {
+            styles['border-radius'] = br;
+        }
+        return styles;
+    }, ...(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) {\n  <div class=\"fui-skeleton__lines\">\n    @for (line of linesArray(); track line; let last = $last) {\n      <div class=\"fui-skeleton__line\" [class.fui-skeleton__line--last]=\"last\" [style]=\"computedStyles()\"></div>\n    }\n  </div>\n} @else {\n  <div class=\"fui-skeleton__shape\" [style]=\"computedStyles()\"></div>\n}\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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-skeleton',
+                        '[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"',
+                    }, template: "@if (variant() === 'text' && lines() > 1) {\n  <div class=\"fui-skeleton__lines\">\n    @for (line of linesArray(); track line; let last = $last) {\n      <div class=\"fui-skeleton__line\" [class.fui-skeleton__line--last]=\"last\" [style]=\"computedStyles()\"></div>\n    }\n  </div>\n} @else {\n  <div class=\"fui-skeleton__shape\" [style]=\"computedStyles()\"></div>\n}\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"] }]
+        }], 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiSkeletonComponent };
+//# sourceMappingURL=raintonic-formaui-components-skeleton.mjs.map

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

@@ -0,0 +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';\nimport { FuiSkeletonVariant } from './skeleton.types';\n\n@Component({\n  selector: 'fui-skeleton',\n  standalone: true,\n  templateUrl: './skeleton.component.html',\n  styleUrls: ['./skeleton.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-skeleton',\n    '[class.fui-skeleton--text]': 'variant() === \"text\"',\n    '[class.fui-skeleton--circle]': 'variant() === \"circle\"',\n    '[class.fui-skeleton--rect]': 'variant() === \"rect\"',\n    '[class.fui-skeleton--animated]': 'animated()',\n    '[attr.aria-busy]': 'true',\n    '[attr.aria-label]': '\"Loading\"',\n    '[attr.role]': '\"status\"',\n  },\n})\nexport class FuiSkeletonComponent {\n  readonly variant = input<FuiSkeletonVariant>('text');\n  readonly width = input<string | null>(null);\n  readonly height = input<string | null>(null);\n  readonly lines = input(1);\n  readonly animated = input(true);\n  readonly borderRadius = input<string | null>(null);\n\n  readonly computedStyles = computed(() => {\n    const styles: Record<string, string> = {};\n    const w = this.width();\n    const h = this.height();\n    const br = this.borderRadius();\n\n    if (w) {\n      styles['width'] = w;\n    }\n    if (h) {\n      styles['height'] = h;\n    }\n    if (br) {\n      styles['border-radius'] = br;\n    }\n\n    return styles;\n  });\n\n  readonly linesArray = computed(() => Array.from({ length: this.lines() }, (_, i) => i));\n}\n","@if (variant() === 'text' && lines() > 1) {\n  <div class=\"fui-skeleton__lines\">\n    @for (line of linesArray(); track line; let last = $last) {\n      <div class=\"fui-skeleton__line\" [class.fui-skeleton__line--last]=\"last\" [style]=\"computedStyles()\"></div>\n    }\n  </div>\n} @else {\n  <div class=\"fui-skeleton__shape\" [style]=\"computedStyles()\"></div>\n}\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,uXASA,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,uXAAA,EAAA,MAAA,EAAA,CAAA,4mFAAA,CAAA,EAAA;;;AEnBH;;AAEG;;;;"}