@semantic-components/ui 0.69.0 → 0.70.0

package/esm2022/lib/components/sidebar/sidebar-provider.js

@@ -0,0 +1,102 @@
+import { Component, computed, effect, inject, input, model, ViewEncapsulation, } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+import { cn } from '../../utils';
+import { ScSidebarState } from './sidebar-state';
+import * as i0 from "@angular/core";
+const SIDEBAR_STORAGE_KEY = 'sc-sidebar-state';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const MOBILE_BREAKPOINT = 768;
+export class ScSidebarProvider {
+    state = inject(ScSidebarState);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    // Two-way binding support
+    open = model(true, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    class = computed(() => cn('group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    keydownHandler;
+    resizeHandler;
+    router = inject(Router);
+    constructor() {
+        // Sync model with state
+        effect(() => this.state.setOpen(this.open()));
+        effect(() => this.open.set(this.state.open()));
+        // Save to localStorage when state changes
+        effect(() => {
+            this.saveToStorage(this.state.open());
+        });
+        // Close mobile sidebar on navigation
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), filter(() => this.state.isMobile() && this.state.openMobile()), takeUntilDestroyed())
+            .subscribe(() => this.state.setOpenMobile(false));
+    }
+    ngOnInit() {
+        // Load initial state from localStorage
+        const savedState = this.loadFromStorage();
+        if (savedState !== null) {
+            this.open.set(savedState);
+        }
+        // Setup keyboard shortcut (Cmd/Ctrl + B)
+        this.keydownHandler = (event) => {
+            if ((event.metaKey || event.ctrlKey) &&
+                event.key === SIDEBAR_KEYBOARD_SHORTCUT) {
+                event.preventDefault();
+                this.state.toggle();
+            }
+        };
+        window.addEventListener('keydown', this.keydownHandler);
+        // Setup mobile detection
+        this.resizeHandler = () => {
+            const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
+            this.state.setIsMobile(isMobile);
+        };
+        this.resizeHandler(); // Initial check
+        window.addEventListener('resize', this.resizeHandler);
+    }
+    ngOnDestroy() {
+        if (this.keydownHandler) {
+            window.removeEventListener('keydown', this.keydownHandler);
+        }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+        }
+    }
+    saveToStorage(open) {
+        try {
+            localStorage.setItem(SIDEBAR_STORAGE_KEY, String(open));
+        }
+        catch (error) {
+            // localStorage unavailable
+            console.warn('Unable to save sidebar state to localStorage:', error);
+        }
+    }
+    loadFromStorage() {
+        try {
+            const value = localStorage.getItem(SIDEBAR_STORAGE_KEY);
+            return value !== null ? value === 'true' : null;
+        }
+        catch (error) {
+            console.warn('Unable to load sidebar state from localStorage:', error);
+            return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebarProvider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScSidebarProvider, isStandalone: true, selector: "div[scSidebarProvider]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "sidebar-wrapper" }, properties: { "class": "class()", "style.--sidebar-width": "\"16rem\"", "style.--sidebar-width-mobile": "\"18rem\"", "style.--sidebar-width-icon": "\"3rem\"" } }, providers: [ScSidebarState], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebarProvider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scSidebarProvider]',
+                    template: '<ng-content />',
+                    providers: [ScSidebarState],
+                    host: {
+                        'data-slot': 'sidebar-wrapper',
+                        '[class]': 'class()',
+                        '[style.--sidebar-width]': '"16rem"',
+                        '[style.--sidebar-width-mobile]': '"18rem"',
+                        '[style.--sidebar-width-icon]': '"3rem"',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
+//# sourceMappingURL=sidebar-provider.js.map

package/esm2022/lib/components/sidebar/sidebar-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-provider.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sidebar/sidebar-provider.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  OnDestroy,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { filter } from 'rxjs';\nimport { cn } from '../../utils';\nimport { ScSidebarState } from './sidebar-state';\n\nconst SIDEBAR_STORAGE_KEY = 'sc-sidebar-state';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\nconst MOBILE_BREAKPOINT = 768;\n\n@Component({\n  selector: 'div[scSidebarProvider]',\n  template: '<ng-content />',\n  providers: [ScSidebarState],\n  host: {\n    'data-slot': 'sidebar-wrapper',\n    '[class]': 'class()',\n    '[style.--sidebar-width]': '\"16rem\"',\n    '[style.--sidebar-width-mobile]': '\"18rem\"',\n    '[style.--sidebar-width-icon]': '\"3rem\"',\n  },\n  encapsulation: ViewEncapsulation.None,\n})\nexport class ScSidebarProvider implements OnInit, OnDestroy {\n  readonly state = inject(ScSidebarState);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  // Two-way binding support\n  readonly open = model<boolean>(true);\n\n  protected readonly class = computed(() =>\n    cn(\n      'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',\n      this.classInput(),\n    ),\n  );\n\n  private keydownHandler?: (event: KeyboardEvent) => void;\n  private resizeHandler?: () => void;\n\n  private readonly router = inject(Router);\n\n  constructor() {\n    // Sync model with state\n    effect(() => this.state.setOpen(this.open()));\n    effect(() => this.open.set(this.state.open()));\n\n    // Save to localStorage when state changes\n    effect(() => {\n      this.saveToStorage(this.state.open());\n    });\n\n    // Close mobile sidebar on navigation\n    this.router.events\n      .pipe(\n        filter((event) => event instanceof NavigationEnd),\n        filter(() => this.state.isMobile() && this.state.openMobile()),\n        takeUntilDestroyed(),\n      )\n      .subscribe(() => this.state.setOpenMobile(false));\n  }\n\n  ngOnInit(): void {\n    // Load initial state from localStorage\n    const savedState = this.loadFromStorage();\n    if (savedState !== null) {\n      this.open.set(savedState);\n    }\n\n    // Setup keyboard shortcut (Cmd/Ctrl + B)\n    this.keydownHandler = (event: KeyboardEvent) => {\n      if (\n        (event.metaKey || event.ctrlKey) &&\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT\n      ) {\n        event.preventDefault();\n        this.state.toggle();\n      }\n    };\n    window.addEventListener('keydown', this.keydownHandler);\n\n    // Setup mobile detection\n    this.resizeHandler = () => {\n      const isMobile = window.innerWidth < MOBILE_BREAKPOINT;\n      this.state.setIsMobile(isMobile);\n    };\n    this.resizeHandler(); // Initial check\n    window.addEventListener('resize', this.resizeHandler);\n  }\n\n  ngOnDestroy(): void {\n    if (this.keydownHandler) {\n      window.removeEventListener('keydown', this.keydownHandler);\n    }\n    if (this.resizeHandler) {\n      window.removeEventListener('resize', this.resizeHandler);\n    }\n  }\n\n  private saveToStorage(open: boolean): void {\n    try {\n      localStorage.setItem(SIDEBAR_STORAGE_KEY, String(open));\n    } catch (error) {\n      // localStorage unavailable\n      console.warn('Unable to save sidebar state to localStorage:', error);\n    }\n  }\n\n  private loadFromStorage(): boolean | null {\n    try {\n      const value = localStorage.getItem(SIDEBAR_STORAGE_KEY);\n      return value !== null ? value === 'true' : null;\n    } catch (error) {\n      console.warn('Unable to load sidebar state from localStorage:', error);\n      return null;\n    }\n  }\n}\n"]}

package/esm2022/lib/components/sidebar/sidebar-rail.js

@@ -0,0 +1,27 @@
+import { Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import { ScSidebarState } from './sidebar-state';
+import * as i0 from "@angular/core";
+export class ScSidebarRail {
+    state = inject(ScSidebarState);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('absolute inset-y-0 z-20 hidden w-4 ltr:-translate-x-1/2 rtl:-translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebarRail, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScSidebarRail, isStandalone: true, selector: "button[scSidebarRail]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sidebar-rail", "tabindex": "-1", "title": "Toggle Sidebar" }, listeners: { "click": "state.toggle()" }, properties: { "class": "class()" } }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebarRail, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[scSidebarRail]',
+                    template: '',
+                    host: {
+                        'data-slot': 'sidebar-rail',
+                        '[class]': 'class()',
+                        '(click)': 'state.toggle()',
+                        tabindex: '-1',
+                        title: 'Toggle Sidebar',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=sidebar-rail.js.map

package/esm2022/lib/components/sidebar/sidebar-rail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-rail.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sidebar/sidebar-rail.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAcjD,MAAM,OAAO,aAAa;IACf,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAE/B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,2QAA2Q,EAC3Q,0EAA0E,EAC1E,wHAAwH,EACxH,yJAAyJ,EACzJ,2DAA2D,EAC3D,2DAA2D,EAC3D,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAfS,aAAa;2FAAb,aAAa,iZAVd,EAAE;;2FAUD,aAAa;kBAZzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,QAAQ,EAAE,EAAE;oBACZ,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,gBAAgB;wBAC3B,QAAQ,EAAE,IAAI;wBACd,KAAK,EAAE,gBAAgB;qBACxB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;iBACtC","sourcesContent":["import {\n  Component,\n  computed,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScSidebarState } from './sidebar-state';\n\n@Component({\n  selector: 'button[scSidebarRail]',\n  template: '',\n  host: {\n    'data-slot': 'sidebar-rail',\n    '[class]': 'class()',\n    '(click)': 'state.toggle()',\n    tabindex: '-1',\n    title: 'Toggle Sidebar',\n  },\n  encapsulation: ViewEncapsulation.None,\n})\nexport class ScSidebarRail {\n  readonly state = inject(ScSidebarState);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'absolute inset-y-0 z-20 hidden w-4 ltr:-translate-x-1/2 rtl:-translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',\n      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/sidebar/sidebar-separator.js

@@ -0,0 +1,20 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScSidebarSeparator {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('mx-2 w-auto bg-sidebar-border', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebarSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScSidebarSeparator, isStandalone: true, selector: "div[scSidebarSeparator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sidebar-separator" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebarSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[scSidebarSeparator]',
+                    host: {
+                        'data-slot': 'sidebar-separator',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=sidebar-separator.js.map

package/esm2022/lib/components/sidebar/sidebar-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-separator.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sidebar/sidebar-separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AASjC,MAAM,OAAO,kBAAkB;IACpB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,+BAA+B,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACvD,CAAC;uGALS,kBAAkB;2FAAlB,kBAAkB;;2FAAlB,kBAAkB;kBAP9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,IAAI,EAAE;wBACJ,WAAW,EAAE,mBAAmB;wBAChC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { Directive, computed, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'div[scSidebarSeparator]',\n  host: {\n    'data-slot': 'sidebar-separator',\n    '[class]': 'class()',\n  },\n})\nexport class ScSidebarSeparator {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('mx-2 w-auto bg-sidebar-border', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/sidebar/sidebar-state.js

@@ -0,0 +1,32 @@
+import { Injectable, computed, signal } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ScSidebarState {
+    // Signals for reactive state
+    open = signal(true, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    openMobile = signal(false, ...(ngDevMode ? [{ debugName: "openMobile" }] : []));
+    isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
+    // Computed state
+    state = computed(() => (this.open() ? 'expanded' : 'collapsed'), ...(ngDevMode ? [{ debugName: "state" }] : []));
+    // Methods
+    toggle() {
+        this.open.update((value) => !value);
+    }
+    toggleMobile() {
+        this.openMobile.update((value) => !value);
+    }
+    setOpen(value) {
+        this.open.set(value);
+    }
+    setOpenMobile(value) {
+        this.openMobile.set(value);
+    }
+    setIsMobile(value) {
+        this.isMobile.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebarState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebarState });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebarState, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=sidebar-state.js.map

package/esm2022/lib/components/sidebar/sidebar-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-state.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sidebar/sidebar-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;AAG7D,MAAM,OAAO,cAAc;IACzB,6BAA6B;IACpB,IAAI,GAAG,MAAM,CAAC,IAAI,gDAAC,CAAC;IACpB,UAAU,GAAG,MAAM,CAAC,KAAK,sDAAC,CAAC;IAC3B,QAAQ,GAAG,MAAM,CAAC,KAAK,oDAAC,CAAC;IAElC,iBAAiB;IACR,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,iDAAC,CAAC;IAE1E,UAAU;IACV,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAED,OAAO,CAAC,KAAc;QACpB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAED,aAAa,CAAC,KAAc;QAC1B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;IAED,WAAW,CAAC,KAAc;QACxB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;uGA5BU,cAAc;2GAAd,cAAc;;2FAAd,cAAc;kBAD1B,UAAU","sourcesContent":["import { Injectable, computed, signal } from '@angular/core';\n\n@Injectable()\nexport class ScSidebarState {\n  // Signals for reactive state\n  readonly open = signal(true);\n  readonly openMobile = signal(false);\n  readonly isMobile = signal(false);\n\n  // Computed state\n  readonly state = computed(() => (this.open() ? 'expanded' : 'collapsed'));\n\n  // Methods\n  toggle(): void {\n    this.open.update((value) => !value);\n  }\n\n  toggleMobile(): void {\n    this.openMobile.update((value) => !value);\n  }\n\n  setOpen(value: boolean): void {\n    this.open.set(value);\n  }\n\n  setOpenMobile(value: boolean): void {\n    this.openMobile.set(value);\n  }\n\n  setIsMobile(value: boolean): void {\n    this.isMobile.set(value);\n  }\n}\n"]}

package/esm2022/lib/components/sidebar/sidebar-trigger.js

@@ -0,0 +1,36 @@
+import { Directive, computed, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { buttonVariants } from '../button';
+import { ScSidebarState } from './sidebar-state';
+import * as i0 from "@angular/core";
+export class ScSidebarTrigger {
+    state = inject(ScSidebarState);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('icon-sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    class = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick(event) {
+        event.preventDefault();
+        if (this.state.isMobile()) {
+            this.state.toggleMobile();
+        }
+        else {
+            this.state.toggle();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebarTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScSidebarTrigger, isStandalone: true, selector: "button[scSidebarTrigger]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sidebar-trigger", "type": "button" }, listeners: { "click": "onClick($event)" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebarTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[scSidebarTrigger]',
+                    host: {
+                        'data-slot': 'sidebar-trigger',
+                        type: 'button',
+                        '[class]': 'class()',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+//# sourceMappingURL=sidebar-trigger.js.map

package/esm2022/lib/components/sidebar/sidebar-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-trigger.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sidebar/sidebar-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,cAAc,EAAoB,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAWjD,MAAM,OAAO,gBAAgB;IAClB,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAE/B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEnD,OAAO,GAAG,KAAK,CAA8B,OAAO,mDAAC,CAAC;IACtD,IAAI,GAAG,KAAK,CAA2B,SAAS,gDAAC,CAAC;IAExC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAC9D,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEQ,OAAO,CAAC,KAAiB;QACjC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;QAC5B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;uGAtBU,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAT5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;oBACpC,IAAI,EAAE;wBACJ,WAAW,EAAE,iBAAiB;wBAC9B,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,iBAAiB;qBAC7B;iBACF","sourcesContent":["import { Directive, computed, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { buttonVariants, ScButtonVariants } from '../button';\nimport { ScSidebarState } from './sidebar-state';\n\n@Directive({\n  selector: 'button[scSidebarTrigger]',\n  host: {\n    'data-slot': 'sidebar-trigger',\n    type: 'button',\n    '[class]': 'class()',\n    '(click)': 'onClick($event)',\n  },\n})\nexport class ScSidebarTrigger {\n  readonly state = inject(ScSidebarState);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  readonly variant = input<ScButtonVariants['variant']>('ghost');\n  readonly size = input<ScButtonVariants['size']>('icon-sm');\n\n  protected readonly class = computed(() =>\n    cn(\n      buttonVariants({ variant: this.variant(), size: this.size() }),\n      this.classInput(),\n    ),\n  );\n\n  protected onClick(event: MouseEvent): void {\n    event.preventDefault();\n    if (this.state.isMobile()) {\n      this.state.toggleMobile();\n    } else {\n      this.state.toggle();\n    }\n  }\n}\n"]}

package/esm2022/lib/components/sidebar/sidebar.js

@@ -0,0 +1,137 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
+import { SiXIcon } from '@semantic-icons/lucide-icons';
+import { ScSheet, ScSheetClose, ScSheetPortal, ScSheetProvider, } from '../sheet';
+import { ScSidebarContainer } from './sidebar-container';
+import { ScSidebarGap } from './sidebar-gap';
+import { ScSidebarInner } from './sidebar-inner';
+import { ScSidebarState } from './sidebar-state';
+import * as i0 from "@angular/core";
+export class ScSidebar {
+    state = inject(ScSidebarState);
+    side = input('left', ...(ngDevMode ? [{ debugName: "side" }] : []));
+    variant = input('sidebar', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    collapsible = input('offcanvas', ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    isMobile = computed(() => this.state.isMobile(), ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ScSidebar, isStandalone: true, selector: "div[scSidebar]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sidebar" }, properties: { "attr.data-state": "state.state()", "attr.data-variant": "variant()", "attr.data-side": "side()", "attr.data-collapsible": "collapsible()" } }, ngImport: i0, template: `
+    <ng-template #content>
+      <ng-content />
+    </ng-template>
+
+    <!-- Mobile sidebar uses default width from sheet component -->
+    @if (isMobile()) {
+      <div scSheetProvider [(open)]="state.openMobile" [side]="side()">
+        <ng-template scSheetPortal>
+          <div
+            scSheet
+            class="bg-sidebar text-sidebar-foreground flex h-full flex-col p-0"
+          >
+            <button scSheetClose>
+              <svg siXIcon></svg>
+              <span class="sr-only">Close</span>
+            </button>
+            <ng-container *ngTemplateOutlet="content" />
+          </div>
+        </ng-template>
+      </div>
+    } @else if (collapsible() === 'none') {
+      <div
+        scSidebarInner
+        class="bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col"
+      >
+        <ng-container *ngTemplateOutlet="content" />
+      </div>
+    } @else {
+      <div
+        class="group peer text-sidebar-foreground hidden md:block"
+        [attr.data-state]="state.state()"
+        [attr.data-collapsible]="
+          state.state() === 'collapsed' ? collapsible() : ''
+        "
+        [attr.data-variant]="variant()"
+        [attr.data-side]="side()"
+      >
+        <div scSidebarGap [variant]="variant()"></div>
+        <div scSidebarContainer [variant]="variant()">
+          <div scSidebarInner>
+            <ng-container *ngTemplateOutlet="content" />
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ScSheetProvider, selector: "div[scSheetProvider]", inputs: ["class", "side", "open"], outputs: ["openChange"] }, { kind: "directive", type: ScSheetPortal, selector: "ng-template[scSheetPortal]" }, { kind: "component", type: ScSheet, selector: "div[scSheet]", inputs: ["class"] }, { kind: "directive", type: ScSheetClose, selector: "button[scSheetClose]", inputs: ["class", "variant", "size"] }, { kind: "component", type: SiXIcon, selector: "svg[siXIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ScSidebarContainer, selector: "div[scSidebarContainer]", inputs: ["class", "variant"] }, { kind: "directive", type: ScSidebarGap, selector: "div[scSidebarGap]", inputs: ["class", "variant"] }, { kind: "directive", type: ScSidebarInner, selector: "div[scSidebarInner]", inputs: ["class"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSidebar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scSidebar]',
+                    imports: [
+                        ScSheetProvider,
+                        ScSheetPortal,
+                        ScSheet,
+                        ScSheetClose,
+                        SiXIcon,
+                        NgTemplateOutlet,
+                        ScSidebarContainer,
+                        ScSidebarGap,
+                        ScSidebarInner,
+                    ],
+                    template: `
+    <ng-template #content>
+      <ng-content />
+    </ng-template>
+
+    <!-- Mobile sidebar uses default width from sheet component -->
+    @if (isMobile()) {
+      <div scSheetProvider [(open)]="state.openMobile" [side]="side()">
+        <ng-template scSheetPortal>
+          <div
+            scSheet
+            class="bg-sidebar text-sidebar-foreground flex h-full flex-col p-0"
+          >
+            <button scSheetClose>
+              <svg siXIcon></svg>
+              <span class="sr-only">Close</span>
+            </button>
+            <ng-container *ngTemplateOutlet="content" />
+          </div>
+        </ng-template>
+      </div>
+    } @else if (collapsible() === 'none') {
+      <div
+        scSidebarInner
+        class="bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col"
+      >
+        <ng-container *ngTemplateOutlet="content" />
+      </div>
+    } @else {
+      <div
+        class="group peer text-sidebar-foreground hidden md:block"
+        [attr.data-state]="state.state()"
+        [attr.data-collapsible]="
+          state.state() === 'collapsed' ? collapsible() : ''
+        "
+        [attr.data-variant]="variant()"
+        [attr.data-side]="side()"
+      >
+        <div scSidebarGap [variant]="variant()"></div>
+        <div scSidebarContainer [variant]="variant()">
+          <div scSidebarInner>
+            <ng-container *ngTemplateOutlet="content" />
+          </div>
+        </div>
+      </div>
+    }
+  `,
+                    host: {
+                        'data-slot': 'sidebar',
+                        '[attr.data-state]': 'state.state()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-side]': 'side()',
+                        '[attr.data-collapsible]': 'collapsible()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }] } });
+//# sourceMappingURL=sidebar.js.map

package/esm2022/lib/components/sidebar/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sidebar/sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAuEjD,MAAM,OAAO,SAAS;IACX,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAE/B,IAAI,GAAG,KAAK,CAAmB,MAAM,gDAAC,CAAC;IACvC,OAAO,GAAG,KAAK,CAAmC,SAAS,mDAAC,CAAC;IAC7D,WAAW,GAAG,KAAK,CAAgC,WAAW,uDAAC,CAAC;IAEtD,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,oDAAC,CAAC;uGAPzD,SAAS;2FAAT,SAAS,iqBAxDV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CT,4DAxDC,eAAe,6HACf,aAAa,uEACb,OAAO,4EACP,YAAY,uGACZ,OAAO,sLACP,gBAAgB,oJAChB,kBAAkB,kGAClB,YAAY,4FACZ,cAAc;;2FA0DL,SAAS;kBArErB,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,OAAO,EAAE;wBACP,eAAe;wBACf,aAAa;wBACb,OAAO;wBACP,YAAY;wBACZ,OAAO;wBACP,gBAAgB;wBAChB,kBAAkB;wBAClB,YAAY;wBACZ,cAAc;qBACf;oBACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CT;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,SAAS;wBACtB,mBAAmB,EAAE,eAAe;wBACpC,qBAAqB,EAAE,WAAW;wBAClC,kBAAkB,EAAE,QAAQ;wBAC5B,yBAAyB,EAAE,eAAe;qBAC3C;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;iBACtC","sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  Component,\n  computed,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SiXIcon } from '@semantic-icons/lucide-icons';\nimport {\n  ScSheet,\n  ScSheetClose,\n  ScSheetPortal,\n  ScSheetProvider,\n} from '../sheet';\nimport { ScSidebarContainer } from './sidebar-container';\nimport { ScSidebarGap } from './sidebar-gap';\nimport { ScSidebarInner } from './sidebar-inner';\nimport { ScSidebarState } from './sidebar-state';\n\n@Component({\n  selector: 'div[scSidebar]',\n  imports: [\n    ScSheetProvider,\n    ScSheetPortal,\n    ScSheet,\n    ScSheetClose,\n    SiXIcon,\n    NgTemplateOutlet,\n    ScSidebarContainer,\n    ScSidebarGap,\n    ScSidebarInner,\n  ],\n  template: `\n    <ng-template #content>\n      <ng-content />\n    </ng-template>\n\n    <!-- Mobile sidebar uses default width from sheet component -->\n    @if (isMobile()) {\n      <div scSheetProvider [(open)]=\"state.openMobile\" [side]=\"side()\">\n        <ng-template scSheetPortal>\n          <div\n            scSheet\n            class=\"bg-sidebar text-sidebar-foreground flex h-full flex-col p-0\"\n          >\n            <button scSheetClose>\n              <svg siXIcon></svg>\n              <span class=\"sr-only\">Close</span>\n            </button>\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </div>\n        </ng-template>\n      </div>\n    } @else if (collapsible() === 'none') {\n      <div\n        scSidebarInner\n        class=\"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\"\n      >\n        <ng-container *ngTemplateOutlet=\"content\" />\n      </div>\n    } @else {\n      <div\n        class=\"group peer text-sidebar-foreground hidden md:block\"\n        [attr.data-state]=\"state.state()\"\n        [attr.data-collapsible]=\"\n          state.state() === 'collapsed' ? collapsible() : ''\n        \"\n        [attr.data-variant]=\"variant()\"\n        [attr.data-side]=\"side()\"\n      >\n        <div scSidebarGap [variant]=\"variant()\"></div>\n        <div scSidebarContainer [variant]=\"variant()\">\n          <div scSidebarInner>\n            <ng-container *ngTemplateOutlet=\"content\" />\n          </div>\n        </div>\n      </div>\n    }\n  `,\n  host: {\n    'data-slot': 'sidebar',\n    '[attr.data-state]': 'state.state()',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-side]': 'side()',\n    '[attr.data-collapsible]': 'collapsible()',\n  },\n  encapsulation: ViewEncapsulation.None,\n})\nexport class ScSidebar {\n  readonly state = inject(ScSidebarState);\n\n  readonly side = input<'left' | 'right'>('left');\n  readonly variant = input<'sidebar' | 'floating' | 'inset'>('sidebar');\n  readonly collapsible = input<'offcanvas' | 'icon' | 'none'>('offcanvas');\n\n  protected readonly isMobile = computed(() => this.state.isMobile());\n}\n"]}

package/esm2022/lib/components/slider/slider.js

@@ -10,7 +10,7 @@ export class ScSlider {
     idInput = input('', { ...(ngDevMode ? { debugName: "idInput" } : {}), alias: 'id' });
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     id = computed(() => this.idInput() || this.field?.id() || this.fallbackId, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    class = computed(() => cn('w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:opacity-50', '[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,var(--primary)_var(--fill-percent,0%),var(--muted)_var(--fill-percent,0%))]', '[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted', '[&::-moz-range-progress]:h-1 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-primary', '[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:transition-shadow', '[&::-webkit-slider-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', '[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:transition-shadow', '[&::-moz-range-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', 'focus-visible:outline-none [&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', '[&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    class = computed(() => cn('w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:opacity-50', '[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--primary)_var(--fill-percent,0%),var(--muted)_var(--fill-percent,0%))]', '[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted', '[&::-moz-range-progress]:h-1 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-primary', '[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:transition-shadow', '[&::-webkit-slider-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', '[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:transition-shadow', '[&::-moz-range-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', 'focus-visible:outline-none [&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', '[&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     constructor() {
         afterNextRender(() => {
             this.updateFillPercent();

package/esm2022/lib/components/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EACL,eAAe,EACf,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;;AAYpC,MAAM,OAAO,QAAQ;IACF,KAAK,GAAG,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IACtD,EAAE,GAAG,MAAM,CAA+B,UAAU,CAAC,CAAC;IAE9D,OAAO,GAAG,KAAK,CAAC,EAAE,oDAAI,KAAK,EAAE,IAAI,GAAG,CAAC;IACrC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEnD,EAAE,GAAG,QAAQ,CACpB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,UAAU,8CAC5D,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,uGAAuG,EACvG,0OAA0O,EAC1O,6FAA6F,EAC7F,wGAAwG,EACxG,uQAAuQ,EACvQ,sFAAsF,EACtF,+MAA+M,EAC/M,kFAAkF,EAClF,yHAAyH,EACzH,0FAA0F,EAC1F,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF;QACE,eAAe,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAES,OAAO;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEO,iBAAiB;QACvB,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QACjC,MAAM,GAAG,GAAG,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACpC,MAAM,GAAG,GAAG,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;QACtC,MAAM,KAAK,GAAG,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;QAEpD,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;IACxD,CAAC;uGA9CU,QAAQ;2FAAR,QAAQ;;2FAAR,QAAQ;kBAVpB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,IAAI,EAAE;wBACJ,IAAI,EAAE,OAAO;wBACb,WAAW,EAAE,QAAQ;wBACrB,WAAW,EAAE,MAAM;wBACnB,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,WAAW;qBACvB;iBACF","sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  afterNextRender,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { SC_FIELD } from '../field';\n\n@Directive({\n  selector: 'input[scSlider]',\n  host: {\n    type: 'range',\n    'data-slot': 'slider',\n    '[attr.id]': 'id()',\n    '[class]': 'class()',\n    '(input)': 'onInput()',\n  },\n})\nexport class ScSlider {\n  private readonly field = inject(SC_FIELD, { optional: true });\n  private readonly fallbackId = inject(_IdGenerator).getId('sc-slider-');\n  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);\n\n  readonly idInput = input('', { alias: 'id' });\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  readonly id = computed(\n    () => this.idInput() || this.field?.id() || this.fallbackId,\n  );\n\n  protected readonly class = computed(() =>\n    cn(\n      'w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:opacity-50',\n      '[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,var(--primary)_var(--fill-percent,0%),var(--muted)_var(--fill-percent,0%))]',\n      '[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted',\n      '[&::-moz-range-progress]:h-1 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-primary',\n      '[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:transition-shadow',\n      '[&::-webkit-slider-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      '[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:transition-shadow',\n      '[&::-moz-range-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      'focus-visible:outline-none [&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      '[&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      this.classInput(),\n    ),\n  );\n\n  constructor() {\n    afterNextRender(() => {\n      this.updateFillPercent();\n    });\n  }\n\n  protected onInput() {\n    this.updateFillPercent();\n  }\n\n  private updateFillPercent() {\n    const el = this.el.nativeElement;\n    const min = parseFloat(el.min) || 0;\n    const max = parseFloat(el.max) || 100;\n    const value = parseFloat(el.value) || 0;\n    const percent = ((value - min) / (max - min)) * 100;\n\n    el.style.setProperty('--fill-percent', `${percent}%`);\n  }\n}\n"]}
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EACL,eAAe,EACf,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;;AAYpC,MAAM,OAAO,QAAQ;IACF,KAAK,GAAG,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IACtD,EAAE,GAAG,MAAM,CAA+B,UAAU,CAAC,CAAC;IAE9D,OAAO,GAAG,KAAK,CAAC,EAAE,oDAAI,KAAK,EAAE,IAAI,GAAG,CAAC;IACrC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEnD,EAAE,GAAG,QAAQ,CACpB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,UAAU,8CAC5D,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,uGAAuG,EACvG,oOAAoO,EACpO,6FAA6F,EAC7F,wGAAwG,EACxG,uQAAuQ,EACvQ,sFAAsF,EACtF,+MAA+M,EAC/M,kFAAkF,EAClF,yHAAyH,EACzH,0FAA0F,EAC1F,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF;QACE,eAAe,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAES,OAAO;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEO,iBAAiB;QACvB,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QACjC,MAAM,GAAG,GAAG,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACpC,MAAM,GAAG,GAAG,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;QACtC,MAAM,KAAK,GAAG,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;QAEpD,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;IACxD,CAAC;uGA9CU,QAAQ;2FAAR,QAAQ;;2FAAR,QAAQ;kBAVpB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,IAAI,EAAE;wBACJ,IAAI,EAAE,OAAO;wBACb,WAAW,EAAE,QAAQ;wBACrB,WAAW,EAAE,MAAM;wBACnB,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,WAAW;qBACvB;iBACF","sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  afterNextRender,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { SC_FIELD } from '../field';\n\n@Directive({\n  selector: 'input[scSlider]',\n  host: {\n    type: 'range',\n    'data-slot': 'slider',\n    '[attr.id]': 'id()',\n    '[class]': 'class()',\n    '(input)': 'onInput()',\n  },\n})\nexport class ScSlider {\n  private readonly field = inject(SC_FIELD, { optional: true });\n  private readonly fallbackId = inject(_IdGenerator).getId('sc-slider-');\n  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);\n\n  readonly idInput = input('', { alias: 'id' });\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  readonly id = computed(\n    () => this.idInput() || this.field?.id() || this.fallbackId,\n  );\n\n  protected readonly class = computed(() =>\n    cn(\n      'w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:opacity-50',\n      '[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--primary)_var(--fill-percent,0%),var(--muted)_var(--fill-percent,0%))]',\n      '[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted',\n      '[&::-moz-range-progress]:h-1 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-primary',\n      '[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:transition-shadow',\n      '[&::-webkit-slider-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      '[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:transition-shadow',\n      '[&::-moz-range-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      'focus-visible:outline-none [&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      '[&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      this.classInput(),\n    ),\n  );\n\n  constructor() {\n    afterNextRender(() => {\n      this.updateFillPercent();\n    });\n  }\n\n  protected onInput() {\n    this.updateFillPercent();\n  }\n\n  private updateFillPercent() {\n    const el = this.el.nativeElement;\n    const min = parseFloat(el.min) || 0;\n    const max = parseFloat(el.max) || 100;\n    const value = parseFloat(el.value) || 0;\n    const percent = ((value - min) / (max - min)) * 100;\n\n    el.style.setProperty('--fill-percent', `${percent}%`);\n  }\n}\n"]}

package/esm2022/lib/components/switch/switch-field.js

@@ -18,7 +18,7 @@ export class ScSwitchField {
     checked = computed(() => this.switchInput()?.checked() ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
     disabled = computed(() => this.switchInput()?.disabledSignal() ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     dataState = computed(() => this.checked() ? 'checked' : 'unchecked', ...(ngDevMode ? [{ debugName: "dataState" }] : []));
-    class = computed(() => cn('inline-flex cursor-pointer items-center gap-2 has-[:disabled]:cursor-not-allowed', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    class = computed(() => cn('inline-flex cursor-pointer items-center gap-2 has-disabled:cursor-not-allowed', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSwitchField, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: ScSwitchField, isStandalone: true, selector: "div[scSwitchField], label[scSwitchField]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "switch-field" }, properties: { "attr.role": "role()", "class": "class()", "attr.data-state": "dataState()", "attr.data-disabled": "disabled() ? \"\" : null" } }, providers: [
             { provide: SC_SWITCH_FIELD, useExisting: ScSwitchField },

package/esm2022/lib/components/switch/switch-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-field.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/switch/switch-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAwB,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAwBjD,MAAM,OAAO,aAAa;IACP,UAAU,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAC7C,WAAW,GAAG,YAAY,CAAC,QAAQ,uDAAC,CAAC;IAEnC,IAAI,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC;QACtD,OAAO,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;IAC9C,CAAC,gDAAC,CAAC;IAEM,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,8CAAC,CAAC;IAE3D,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,KAAK,mDAAC,CAAC;IACjE,QAAQ,GAAG,QAAQ,CAC1B,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,cAAc,EAAE,IAAI,KAAK,oDACpD,CAAC;IACO,SAAS,GAAG,QAAQ,CAAC,GAA4B,EAAE,CAC1D,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,qDACzC,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kFAAkF,EAClF,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAzBS,aAAa;2FAAb,aAAa,0hBAnBb;YACT,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE;YACxD,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE;SAClD,mEAkB2C,QAAQ,gEAV1C;;;;GAIT,4DAhBS,cAAc;;2FAoBb,aAAa;kBAtBzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,0CAA0C;oBACpD,OAAO,EAAE,CAAC,cAAc,CAAC;oBACzB,SAAS,EAAE;wBACT,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,eAAe,EAAE;wBACxD,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,eAAe,EAAE;qBAClD;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,aAAa,EAAE,QAAQ;wBACvB,SAAS,EAAE,SAAS;wBACpB,mBAAmB,EAAE,aAAa;wBAClC,sBAAsB,EAAE,wBAAwB;qBACjD;oBACD,QAAQ,EAAE;;;;GAIT;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;gGAG6C,QAAQ","sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  ElementRef,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { SC_FIELD } from '../field';\nimport { type ScSwitchContext, SC_SWITCH_FIELD } from './switch-types';\nimport { ScSwitch } from './switch';\nimport { ScSwitchVisual } from './switch-visual';\n\n@Component({\n  selector: 'div[scSwitchField], label[scSwitchField]',\n  imports: [ScSwitchVisual],\n  providers: [\n    { provide: SC_SWITCH_FIELD, useExisting: ScSwitchField },\n    { provide: SC_FIELD, useExisting: ScSwitchField },\n  ],\n  host: {\n    'data-slot': 'switch-field',\n    '[attr.role]': 'role()',\n    '[class]': 'class()',\n    '[attr.data-state]': 'dataState()',\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\n  },\n  template: `\n    <ng-content select=\"[scSwitch]\" />\n    <span scSwitchVisual></span>\n    <ng-content />\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSwitchField implements ScSwitchContext {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n  private readonly switchInput = contentChild(ScSwitch);\n\n  protected readonly role = computed(() => {\n    const tagName = this.elementRef.nativeElement.tagName;\n    return tagName === 'LABEL' ? null : 'group';\n  });\n\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly id = input(inject(_IdGenerator).getId('sc-switch-field-'));\n\n  readonly checked = computed(() => this.switchInput()?.checked() ?? false);\n  readonly disabled = computed(\n    () => this.switchInput()?.disabledSignal() ?? false,\n  );\n  readonly dataState = computed((): 'checked' | 'unchecked' =>\n    this.checked() ? 'checked' : 'unchecked',\n  );\n\n  protected readonly class = computed(() =>\n    cn(\n      'inline-flex cursor-pointer items-center gap-2 has-[:disabled]:cursor-not-allowed',\n      this.classInput(),\n    ),\n  );\n}\n"]}
+{"version":3,"file":"switch-field.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/switch/switch-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAwB,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAwBjD,MAAM,OAAO,aAAa;IACP,UAAU,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAC7C,WAAW,GAAG,YAAY,CAAC,QAAQ,uDAAC,CAAC;IAEnC,IAAI,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC;QACtD,OAAO,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;IAC9C,CAAC,gDAAC,CAAC;IAEM,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,8CAAC,CAAC;IAE3D,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,KAAK,mDAAC,CAAC;IACjE,QAAQ,GAAG,QAAQ,CAC1B,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,cAAc,EAAE,IAAI,KAAK,oDACpD,CAAC;IACO,SAAS,GAAG,QAAQ,CAAC,GAA4B,EAAE,CAC1D,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,qDACzC,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,+EAA+E,EAC/E,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAzBS,aAAa;2FAAb,aAAa,0hBAnBb;YACT,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE;YACxD,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE;SAClD,mEAkB2C,QAAQ,gEAV1C;;;;GAIT,4DAhBS,cAAc;;2FAoBb,aAAa;kBAtBzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,0CAA0C;oBACpD,OAAO,EAAE,CAAC,cAAc,CAAC;oBACzB,SAAS,EAAE;wBACT,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,eAAe,EAAE;wBACxD,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,eAAe,EAAE;qBAClD;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,aAAa,EAAE,QAAQ;wBACvB,SAAS,EAAE,SAAS;wBACpB,mBAAmB,EAAE,aAAa;wBAClC,sBAAsB,EAAE,wBAAwB;qBACjD;oBACD,QAAQ,EAAE;;;;GAIT;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;gGAG6C,QAAQ","sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  ElementRef,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { SC_FIELD } from '../field';\nimport { type ScSwitchContext, SC_SWITCH_FIELD } from './switch-types';\nimport { ScSwitch } from './switch';\nimport { ScSwitchVisual } from './switch-visual';\n\n@Component({\n  selector: 'div[scSwitchField], label[scSwitchField]',\n  imports: [ScSwitchVisual],\n  providers: [\n    { provide: SC_SWITCH_FIELD, useExisting: ScSwitchField },\n    { provide: SC_FIELD, useExisting: ScSwitchField },\n  ],\n  host: {\n    'data-slot': 'switch-field',\n    '[attr.role]': 'role()',\n    '[class]': 'class()',\n    '[attr.data-state]': 'dataState()',\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\n  },\n  template: `\n    <ng-content select=\"[scSwitch]\" />\n    <span scSwitchVisual></span>\n    <ng-content />\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSwitchField implements ScSwitchContext {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n  private readonly switchInput = contentChild(ScSwitch);\n\n  protected readonly role = computed(() => {\n    const tagName = this.elementRef.nativeElement.tagName;\n    return tagName === 'LABEL' ? null : 'group';\n  });\n\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly id = input(inject(_IdGenerator).getId('sc-switch-field-'));\n\n  readonly checked = computed(() => this.switchInput()?.checked() ?? false);\n  readonly disabled = computed(\n    () => this.switchInput()?.disabledSignal() ?? false,\n  );\n  readonly dataState = computed((): 'checked' | 'unchecked' =>\n    this.checked() ? 'checked' : 'unchecked',\n  );\n\n  protected readonly class = computed(() =>\n    cn(\n      'inline-flex cursor-pointer items-center gap-2 has-disabled:cursor-not-allowed',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/tabs/tab-panel.js

@@ -5,7 +5,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/aria/tabs";
 export class ScTabPanel {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('text-sm flex-1 outline-none [&[inert]]:hidden', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    class = computed(() => cn('text-sm flex-1 outline-none [[inert]]:hidden', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScTabPanel, isStandalone: true, selector: "[scTabPanel]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-content" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.TabPanel, inputs: ["value", "value", "id", "id"] }], ngImport: i0, template: `
     <ng-content />

package/esm2022/lib/components/tabs/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;;AAoBjC,MAAM,OAAO,UAAU;IACZ,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC7B,EAAE,CAAC,+CAA+C,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACvE,CAAC;uGAJS,UAAU;2FAAV,UAAU,uYAJX;;GAET;;2FAEU,UAAU;kBAlBtB,SAAS;mBAAC;oBACT,QAAQ,EAAE,cAAc;oBACxB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,cAAc,EAAE;wBACd;4BACE,SAAS,EAAE,QAAQ;4BACnB,MAAM,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;yBACxB;qBACF;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,SAAS,EAAE,SAAS;qBACrB;oBACD,QAAQ,EAAE;;GAET;iBACF","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { TabPanel } from '@angular/aria/tabs';\nimport { cn } from '../../utils';\n\n@Component({\n  selector: '[scTabPanel]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  hostDirectives: [\n    {\n      directive: TabPanel,\n      inputs: ['value', 'id'],\n    },\n  ],\n  host: {\n    'data-slot': 'tabs-content',\n    '[class]': 'class()',\n  },\n  template: `\n    <ng-content />\n  `,\n})\nexport class ScTabPanel {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly class = computed(() =>\n    cn('text-sm flex-1 outline-none [&[inert]]:hidden', this.classInput()),\n  );\n}\n"]}
+{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;;AAoBjC,MAAM,OAAO,UAAU;IACZ,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC7B,EAAE,CAAC,8CAA8C,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACtE,CAAC;uGAJS,UAAU;2FAAV,UAAU,uYAJX;;GAET;;2FAEU,UAAU;kBAlBtB,SAAS;mBAAC;oBACT,QAAQ,EAAE,cAAc;oBACxB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,cAAc,EAAE;wBACd;4BACE,SAAS,EAAE,QAAQ;4BACnB,MAAM,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;yBACxB;qBACF;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,SAAS,EAAE,SAAS;qBACrB;oBACD,QAAQ,EAAE;;GAET;iBACF","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { TabPanel } from '@angular/aria/tabs';\nimport { cn } from '../../utils';\n\n@Component({\n  selector: '[scTabPanel]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  hostDirectives: [\n    {\n      directive: TabPanel,\n      inputs: ['value', 'id'],\n    },\n  ],\n  host: {\n    'data-slot': 'tabs-content',\n    '[class]': 'class()',\n  },\n  template: `\n    <ng-content />\n  `,\n})\nexport class ScTabPanel {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly class = computed(() =>\n    cn('text-sm flex-1 outline-none [[inert]]:hidden', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/tooltip/tooltip.js

@@ -24,11 +24,7 @@ export class ScTooltip {
     {{ data.content }}
     <span
       [attr.data-side]="side()"
-      class="absolute size-2.5 rotate-45 rounded-[2px] bg-primary z-50
-             data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2
-             data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2
-             data-[side=left]:-right-[5px] data-[side=left]:top-1/2 data-[side=left]:-translate-y-1/2
-             data-[side=right]:-left-[5px] data-[side=right]:top-1/2 data-[side=right]:-translate-y-1/2"
+      class="bg-primary absolute z-50 size-2.5 rotate-45 rounded-[2px] data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2 data-[side=left]:top-1/2 data-[side=left]:-right-[5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2 data-[side=right]:-left-[5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2"
     ></span>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -40,11 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     {{ data.content }}
     <span
       [attr.data-side]="side()"
-      class="absolute size-2.5 rotate-45 rounded-[2px] bg-primary z-50
-             data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2
-             data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2
-             data-[side=left]:-right-[5px] data-[side=left]:top-1/2 data-[side=left]:-translate-y-1/2
-             data-[side=right]:-left-[5px] data-[side=right]:top-1/2 data-[side=right]:-translate-y-1/2"
+      class="bg-primary absolute z-50 size-2.5 rotate-45 rounded-[2px] data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2 data-[side=left]:top-1/2 data-[side=left]:-right-[5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2 data-[side=right]:-left-[5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2"
     ></span>
   `,
                     host: {

package/esm2022/lib/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,MAAM,EACN,cAAc,EACd,MAAM,EACN,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAOjC,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,cAAc,CAC/C,iBAAiB,CAClB,CAAC;AAiCF,MAAM,OAAO,SAAS;IACH,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAExC,IAAI,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IAC/B,KAAK,GAAG,MAAM,CAAiB,MAAM,iDAAC,CAAC;IACvC,IAAI,GAAG,MAAM,CAAgB,KAAK,gDAAC,CAAC;IACpC,iBAAiB,GAAG,MAAM,EAAQ,CAAC;IAEzB,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC3C,EAAE,CACA,uFAAuF,EACvF,+DAA+D,EAC/D,wEAAwE,EACxE,6JAA6J,CAC9J,qDACF,CAAC;IAEQ,cAAc,CAAC,KAAqB;QAC5C,2CAA2C;QAC3C,IACE,IAAI,CAAC,KAAK,EAAE,KAAK,QAAQ;YACzB,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,aAAa,EAC9C,CAAC;YACD,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC;uGA7BU,SAAS;2FAAT,SAAS,ufA1BV;;;;;;;;;;GAUT;;2FAgBU,SAAS;kBA5BrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,QAAQ,EAAE;;;;;;;;;;GAUT;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,SAAS;wBACtB,IAAI,EAAE,SAAS;wBACf,WAAW,EAAE,QAAQ;wBACrB,aAAa,EAAE,MAAM;wBACrB,MAAM,EAAE,gBAAgB;wBACxB,SAAS,EAAE,aAAa;wBACxB,kBAAkB,EAAE,kCAAkC;wBACtD,oBAAoB,EAAE,oCAAoC;wBAC1D,kBAAkB,EAAE,QAAQ;wBAC5B,gBAAgB,EAAE,wBAAwB;qBAC3C;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  InjectionToken,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\nexport interface ScTooltipData {\n  content: string;\n  tooltipId: string;\n}\n\nexport const SC_TOOLTIP_DATA = new InjectionToken<ScTooltipData>(\n  'SC_TOOLTIP_DATA',\n);\n\ntype ScTooltipState = 'open' | 'closed';\ntype ScTooltipSide = 'top' | 'right' | 'bottom' | 'left';\n\n@Component({\n  selector: 'sc-tooltip',\n  template: `\n    {{ data.content }}\n    <span\n      [attr.data-side]=\"side()\"\n      class=\"absolute size-2.5 rotate-45 rounded-[2px] bg-primary z-50\n             data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2\n             data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2\n             data-[side=left]:-right-[5px] data-[side=left]:top-1/2 data-[side=left]:-translate-y-1/2\n             data-[side=right]:-left-[5px] data-[side=right]:top-1/2 data-[side=right]:-translate-y-1/2\"\n    ></span>\n  `,\n  host: {\n    'data-slot': 'tooltip',\n    role: 'tooltip',\n    'aria-live': 'polite',\n    'aria-atomic': 'true',\n    '[id]': 'data.tooltipId',\n    '[class]': 'hostClass()',\n    '[attr.data-open]': 'state() === \"open\" ? true : null',\n    '[attr.data-closed]': 'state() === \"closed\" ? true : null',\n    '[attr.data-side]': 'side()',\n    '(animationend)': 'onAnimationEnd($event)',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScTooltip {\n  private readonly elementRef = inject(ElementRef);\n\n  readonly data = inject(SC_TOOLTIP_DATA);\n  readonly state = signal<ScTooltipState>('open');\n  readonly side = signal<ScTooltipSide>('top');\n  readonly animationComplete = output<void>();\n\n  protected readonly hostClass = computed(() =>\n    cn(\n      'bg-primary text-primary-foreground z-50 rounded-md px-3 py-1.5 text-xs w-fit max-w-xs',\n      'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',\n      'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n      'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n    ),\n  );\n\n  protected onAnimationEnd(event: AnimationEvent): void {\n    // Only emit when close animation completes\n    if (\n      this.state() === 'closed' &&\n      event.target === this.elementRef.nativeElement\n    ) {\n      this.animationComplete.emit();\n    }\n  }\n\n  close(): void {\n    this.state.set('closed');\n  }\n}\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,MAAM,EACN,cAAc,EACd,MAAM,EACN,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAOjC,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,cAAc,CAC/C,iBAAiB,CAClB,CAAC;AA6BF,MAAM,OAAO,SAAS;IACH,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAExC,IAAI,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IAC/B,KAAK,GAAG,MAAM,CAAiB,MAAM,iDAAC,CAAC;IACvC,IAAI,GAAG,MAAM,CAAgB,KAAK,gDAAC,CAAC;IACpC,iBAAiB,GAAG,MAAM,EAAQ,CAAC;IAEzB,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC3C,EAAE,CACA,uFAAuF,EACvF,+DAA+D,EAC/D,wEAAwE,EACxE,6JAA6J,CAC9J,qDACF,CAAC;IAEQ,cAAc,CAAC,KAAqB;QAC5C,2CAA2C;QAC3C,IACE,IAAI,CAAC,KAAK,EAAE,KAAK,QAAQ;YACzB,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,aAAa,EAC9C,CAAC;YACD,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC;uGA7BU,SAAS;2FAAT,SAAS,ufAtBV;;;;;;GAMT;;2FAgBU,SAAS;kBAxBrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,QAAQ,EAAE;;;;;;GAMT;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,SAAS;wBACtB,IAAI,EAAE,SAAS;wBACf,WAAW,EAAE,QAAQ;wBACrB,aAAa,EAAE,MAAM;wBACrB,MAAM,EAAE,gBAAgB;wBACxB,SAAS,EAAE,aAAa;wBACxB,kBAAkB,EAAE,kCAAkC;wBACtD,oBAAoB,EAAE,oCAAoC;wBAC1D,kBAAkB,EAAE,QAAQ;wBAC5B,gBAAgB,EAAE,wBAAwB;qBAC3C;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  InjectionToken,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\nexport interface ScTooltipData {\n  content: string;\n  tooltipId: string;\n}\n\nexport const SC_TOOLTIP_DATA = new InjectionToken<ScTooltipData>(\n  'SC_TOOLTIP_DATA',\n);\n\ntype ScTooltipState = 'open' | 'closed';\ntype ScTooltipSide = 'top' | 'right' | 'bottom' | 'left';\n\n@Component({\n  selector: 'sc-tooltip',\n  template: `\n    {{ data.content }}\n    <span\n      [attr.data-side]=\"side()\"\n      class=\"bg-primary absolute z-50 size-2.5 rotate-45 rounded-[2px] data-[side=bottom]:-top-[5px] data-[side=bottom]:left-1/2 data-[side=bottom]:-translate-x-1/2 data-[side=left]:top-1/2 data-[side=left]:-right-[5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2 data-[side=right]:-left-[5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-[5px] data-[side=top]:left-1/2 data-[side=top]:-translate-x-1/2\"\n    ></span>\n  `,\n  host: {\n    'data-slot': 'tooltip',\n    role: 'tooltip',\n    'aria-live': 'polite',\n    'aria-atomic': 'true',\n    '[id]': 'data.tooltipId',\n    '[class]': 'hostClass()',\n    '[attr.data-open]': 'state() === \"open\" ? true : null',\n    '[attr.data-closed]': 'state() === \"closed\" ? true : null',\n    '[attr.data-side]': 'side()',\n    '(animationend)': 'onAnimationEnd($event)',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScTooltip {\n  private readonly elementRef = inject(ElementRef);\n\n  readonly data = inject(SC_TOOLTIP_DATA);\n  readonly state = signal<ScTooltipState>('open');\n  readonly side = signal<ScTooltipSide>('top');\n  readonly animationComplete = output<void>();\n\n  protected readonly hostClass = computed(() =>\n    cn(\n      'bg-primary text-primary-foreground z-50 rounded-md px-3 py-1.5 text-xs w-fit max-w-xs',\n      'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',\n      'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n      'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n    ),\n  );\n\n  protected onAnimationEnd(event: AnimationEvent): void {\n    // Only emit when close animation completes\n    if (\n      this.state() === 'closed' &&\n      event.target === this.elementRef.nativeElement\n    ) {\n      this.animationComplete.emit();\n    }\n  }\n\n  close(): void {\n    this.state.set('closed');\n  }\n}\n"]}

package/lib/components/index.d.ts

@@ -34,10 +34,12 @@ export * from './popover';
 export * from './progress';
 export * from './radio-group';
 export * from './range-slider';
+export * from './resizable';
 export * from './scroll-area';
 export * from './select';
 export * from './separator';
 export * from './sheet';
+export * from './sidebar';
 export * from './skeleton';
 export * from './slider';
 export * from './spinner';