@semantic-components/ui 0.64.0 → 0.66.0

package/esm2022/lib/components/sheet/sheet-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-description.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sheet/sheet-description.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;;AAUlC,MAAM,OAAO,kBAAkB;IACpB,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,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;uGANS,kBAAkB;2FAAlB,kBAAkB;;2FAAlB,kBAAkB;kBAR9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,IAAI,EAAE;wBACJ,WAAW,EAAE,mBAAmB;wBAChC,MAAM,EAAE,qBAAqB;wBAC7B,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScSheet } from './sheet';\n\n@Directive({\n  selector: 'p[scSheetDescription]',\n  host: {\n    'data-slot': 'sheet-description',\n    '[id]': 'sheet.descriptionId',\n    '[class]': 'class()',\n  },\n})\nexport class ScSheetDescription {\n  readonly sheet = inject(ScSheet);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('text-muted-foreground text-sm', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/sheet/sheet-footer.js

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScSheetFooter {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScSheetFooter, isStandalone: true, selector: "div[scSheetFooter]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sheet-footer" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[scSheetFooter]',
+                    host: {
+                        'data-slot': 'sheet-footer',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=sheet-footer.js.map

package/esm2022/lib/components/sheet/sheet-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-footer.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sheet/sheet-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AASjC,MAAM,OAAO,aAAa;IACf,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,wDAAwD,EACxD,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGARS,aAAa;2FAAb,aAAa;;2FAAb,aAAa;kBAPzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'div[scSheetFooter]',\n  host: {\n    'data-slot': 'sheet-footer',\n    '[class]': 'class()',\n  },\n})\nexport class ScSheetFooter {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/sheet/sheet-header.js

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScSheetHeader {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('flex flex-col gap-2 text-center sm:text-left', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScSheetHeader, isStandalone: true, selector: "div[scSheetHeader]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sheet-header" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[scSheetHeader]',
+                    host: {
+                        'data-slot': 'sheet-header',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=sheet-header.js.map

package/esm2022/lib/components/sheet/sheet-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-header.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sheet/sheet-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AASjC,MAAM,OAAO,aAAa;IACf,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,8CAA8C,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACtE,CAAC;uGALS,aAAa;2FAAb,aAAa;;2FAAb,aAAa;kBAPzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'div[scSheetHeader]',\n  host: {\n    'data-slot': 'sheet-header',\n    '[class]': 'class()',\n  },\n})\nexport class ScSheetHeader {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('flex flex-col gap-2 text-center sm:text-left', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/sheet/sheet-portal.js

@@ -0,0 +1,14 @@
+import { Directive, inject, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ScSheetPortal {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: ScSheetPortal, isStandalone: true, selector: "ng-template[scSheetPortal]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[scSheetPortal]',
+                }]
+        }] });
+//# sourceMappingURL=sheet-portal.js.map

package/esm2022/lib/components/sheet/sheet-portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-portal.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sheet/sheet-portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAK/D,MAAM,OAAO,aAAa;IACf,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;uGADhC,aAAa;2FAAb,aAAa;;2FAAb,aAAa;kBAHzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,4BAA4B;iBACvC","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: 'ng-template[scSheetPortal]',\n})\nexport class ScSheetPortal {\n  readonly templateRef = inject(TemplateRef);\n}\n"]}

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

@@ -0,0 +1,127 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { ChangeDetectionStrategy, Component, computed, contentChild, effect, inject, input, model, signal, viewChild, ViewContainerRef, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import { ScBackdrop } from '../backdrop';
+import { ScSheetPortal } from './sheet-portal';
+import * as i0 from "@angular/core";
+export class ScSheetProvider {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : []));
+    overlayTemplate = viewChild.required('overlayTemplate');
+    sheetPortal = contentChild.required(ScSheetPortal);
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    overlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
+    animationsCompleted = signal(0, ...(ngDevMode ? [{ debugName: "animationsCompleted" }] : []));
+    overlayRef = null;
+    class = computed(() => cn('contents', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    constructor() {
+        effect(() => {
+            if (this.open()) {
+                this.overlayOpen.set(true);
+                this.animationsCompleted.set(0);
+            }
+        });
+        effect(() => {
+            const completed = this.animationsCompleted();
+            if (completed === 2 && !this.open()) {
+                this.overlayOpen.set(false);
+                this.animationsCompleted.set(0);
+            }
+        });
+        effect(() => {
+            if (this.overlayOpen()) {
+                this.attachSheet();
+            }
+            else {
+                this.detachSheet();
+            }
+        });
+    }
+    onSheetAnimationComplete() {
+        if (!this.open()) {
+            this.animationsCompleted.update((n) => n + 1);
+        }
+    }
+    onBackdropAnimationComplete() {
+        if (!this.open()) {
+            this.animationsCompleted.update((n) => n + 1);
+        }
+    }
+    getOverlayRef() {
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay.position().global(),
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+                scrollStrategy: this.overlay.scrollStrategies.block(),
+            });
+            this.overlayRef.backdropClick().subscribe(() => this.closeSheet());
+            this.overlayRef.keydownEvents().subscribe((event) => {
+                if (event.key === 'Escape')
+                    this.closeSheet();
+            });
+        }
+        return this.overlayRef;
+    }
+    attachSheet() {
+        const ref = this.getOverlayRef();
+        if (!ref.hasAttached()) {
+            const portal = new TemplatePortal(this.overlayTemplate(), this.viewContainerRef);
+            ref.attach(portal);
+        }
+    }
+    detachSheet() {
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef.detach();
+        }
+    }
+    closeSheet() {
+        this.open.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetProvider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: ScSheetProvider, isStandalone: true, selector: "div[scSheetProvider]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "sheet-provider" }, properties: { "class": "class()" } }, queries: [{ propertyName: "sheetPortal", first: true, predicate: ScSheetPortal, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-content />
+    <ng-template #overlayTemplate>
+      <div
+        scBackdrop
+        [open]="open()"
+        (animationComplete)="onBackdropAnimationComplete()"
+      ></div>
+      <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
+        <ng-container [ngTemplateOutlet]="sheetPortal().templateRef" />
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "component", type: ScBackdrop, selector: "div[scBackdrop]", inputs: ["class", "open"], outputs: ["animationComplete"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetProvider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scSheetProvider]',
+                    imports: [OverlayModule, ScBackdrop, CdkTrapFocus, NgTemplateOutlet],
+                    template: `
+    <ng-content />
+    <ng-template #overlayTemplate>
+      <div
+        scBackdrop
+        [open]="open()"
+        (animationComplete)="onBackdropAnimationComplete()"
+      ></div>
+      <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
+        <ng-container [ngTemplateOutlet]="sheetPortal().templateRef" />
+      </div>
+    </ng-template>
+  `,
+                    host: {
+                        'data-slot': 'sheet-provider',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], overlayTemplate: [{ type: i0.ViewChild, args: ['overlayTemplate', { isSignal: true }] }], sheetPortal: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ScSheetPortal), { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
+//# sourceMappingURL=sheet-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-provider.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sheet/sheet-provider.ts"],"names":[],"mappings":"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","sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\nimport { Overlay, OverlayModule, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  effect,\n  inject,\n  input,\n  model,\n  signal,\n  TemplateRef,\n  viewChild,\n  ViewContainerRef,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScBackdrop } from '../backdrop';\nimport { ScSheetPortal } from './sheet-portal';\n\nexport type ScSheetSide = 'top' | 'right' | 'bottom' | 'left';\n\n@Component({\n  selector: 'div[scSheetProvider]',\n  imports: [OverlayModule, ScBackdrop, CdkTrapFocus, NgTemplateOutlet],\n  template: `\n    <ng-content />\n    <ng-template #overlayTemplate>\n      <div\n        scBackdrop\n        [open]=\"open()\"\n        (animationComplete)=\"onBackdropAnimationComplete()\"\n      ></div>\n      <div cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n        <ng-container [ngTemplateOutlet]=\"sheetPortal().templateRef\" />\n      </div>\n    </ng-template>\n  `,\n  host: {\n    'data-slot': 'sheet-provider',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSheetProvider {\n  private readonly overlay = inject(Overlay);\n  private readonly viewContainerRef = inject(ViewContainerRef);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly side = input<ScSheetSide>('right');\n\n  private readonly overlayTemplate =\n    viewChild.required<TemplateRef<unknown>>('overlayTemplate');\n\n  protected readonly sheetPortal = contentChild.required(ScSheetPortal);\n\n  readonly open = model<boolean>(false);\n  readonly overlayOpen = signal<boolean>(false);\n  private readonly animationsCompleted = signal<number>(0);\n  private overlayRef: OverlayRef | null = null;\n\n  protected readonly class = computed(() => cn('contents', this.classInput()));\n\n  constructor() {\n    effect(() => {\n      if (this.open()) {\n        this.overlayOpen.set(true);\n        this.animationsCompleted.set(0);\n      }\n    });\n\n    effect(() => {\n      const completed = this.animationsCompleted();\n      if (completed === 2 && !this.open()) {\n        this.overlayOpen.set(false);\n        this.animationsCompleted.set(0);\n      }\n    });\n\n    effect(() => {\n      if (this.overlayOpen()) {\n        this.attachSheet();\n      } else {\n        this.detachSheet();\n      }\n    });\n  }\n\n  onSheetAnimationComplete(): void {\n    if (!this.open()) {\n      this.animationsCompleted.update((n) => n + 1);\n    }\n  }\n\n  onBackdropAnimationComplete(): void {\n    if (!this.open()) {\n      this.animationsCompleted.update((n) => n + 1);\n    }\n  }\n\n  private getOverlayRef() {\n    if (!this.overlayRef) {\n      this.overlayRef = this.overlay.create({\n        positionStrategy: this.overlay.position().global(),\n        hasBackdrop: true,\n        backdropClass: 'cdk-overlay-transparent-backdrop',\n        scrollStrategy: this.overlay.scrollStrategies.block(),\n      });\n\n      this.overlayRef.backdropClick().subscribe(() => this.closeSheet());\n      this.overlayRef.keydownEvents().subscribe((event) => {\n        if (event.key === 'Escape') this.closeSheet();\n      });\n    }\n    return this.overlayRef;\n  }\n\n  private attachSheet(): void {\n    const ref = this.getOverlayRef();\n    if (!ref.hasAttached()) {\n      const portal = new TemplatePortal(\n        this.overlayTemplate(),\n        this.viewContainerRef,\n      );\n      ref.attach(portal);\n    }\n  }\n\n  private detachSheet(): void {\n    if (this.overlayRef?.hasAttached()) {\n      this.overlayRef.detach();\n    }\n  }\n\n  private closeSheet(): void {\n    this.open.set(false);\n  }\n}\n"]}

package/esm2022/lib/components/sheet/sheet-title.js

@@ -0,0 +1,23 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { ScSheet } from './sheet';
+import * as i0 from "@angular/core";
+export class ScSheetTitle {
+    sheet = inject(ScSheet);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('text-lg font-semibold text-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScSheetTitle, isStandalone: true, selector: "h2[scSheetTitle]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sheet-title" }, properties: { "id": "sheet.titleId", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'h2[scSheetTitle]',
+                    host: {
+                        'data-slot': 'sheet-title',
+                        '[id]': 'sheet.titleId',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=sheet-title.js.map

package/esm2022/lib/components/sheet/sheet-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-title.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sheet/sheet-title.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;;AAUlC,MAAM,OAAO,YAAY;IACd,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,uCAAuC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAC/D,CAAC;uGANS,YAAY;2FAAZ,YAAY;;2FAAZ,YAAY;kBARxB,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE;wBACJ,WAAW,EAAE,aAAa;wBAC1B,MAAM,EAAE,eAAe;wBACvB,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScSheet } from './sheet';\n\n@Directive({\n  selector: 'h2[scSheetTitle]',\n  host: {\n    'data-slot': 'sheet-title',\n    '[id]': 'sheet.titleId',\n    '[class]': 'class()',\n  },\n})\nexport class ScSheetTitle {\n  readonly sheet = inject(ScSheet);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('text-lg font-semibold text-foreground', this.classInput()),\n  );\n}\n"]}

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

@@ -0,0 +1,28 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { ScSheetProvider } from './sheet-provider';
+import * as i0 from "@angular/core";
+export class ScSheetTrigger {
+    sheetProvider = inject(ScSheetProvider);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    openSheet() {
+        this.sheetProvider.open.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScSheetTrigger, isStandalone: true, selector: "button[scSheetTrigger]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sheet-trigger" }, listeners: { "click": "openSheet()" }, properties: { "class": "class()", "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "sheetProvider.open()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheetTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[scSheetTrigger]',
+                    host: {
+                        'data-slot': 'sheet-trigger',
+                        '[class]': 'class()',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.aria-expanded]': 'sheetProvider.open()',
+                        '(click)': 'openSheet()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=sheet-trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-trigger.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sheet/sheet-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;;AAYnD,MAAM,OAAO,cAAc;IAChB,aAAa,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IACxC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAAC,CAAC;IAErE,SAAS;QACP,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;uGARU,cAAc;2FAAd,cAAc;;2FAAd,cAAc;kBAV1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,IAAI,EAAE;wBACJ,WAAW,EAAE,eAAe;wBAC5B,SAAS,EAAE,SAAS;wBACpB,sBAAsB,EAAE,UAAU;wBAClC,sBAAsB,EAAE,sBAAsB;wBAC9C,SAAS,EAAE,aAAa;qBACzB;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScSheetProvider } from './sheet-provider';\n\n@Directive({\n  selector: 'button[scSheetTrigger]',\n  host: {\n    'data-slot': 'sheet-trigger',\n    '[class]': 'class()',\n    '[attr.aria-haspopup]': '\"dialog\"',\n    '[attr.aria-expanded]': 'sheetProvider.open()',\n    '(click)': 'openSheet()',\n  },\n})\nexport class ScSheetTrigger {\n  readonly sheetProvider = inject(ScSheetProvider);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() => cn('', this.classInput()));\n\n  openSheet(): void {\n    this.sheetProvider.open.set(true);\n  }\n}\n"]}

package/esm2022/lib/components/sheet/sheet.js

@@ -0,0 +1,64 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, signal, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import { ScSheetProvider } from './sheet-provider';
+import * as i0 from "@angular/core";
+export class ScSheet {
+    elementRef = inject((ElementRef));
+    sheetProvider = inject(ScSheetProvider);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    state = signal('idle', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    sheetId = inject(_IdGenerator).getId('sc-sheet-');
+    titleId = `${this.sheetId}-title`;
+    descriptionId = `${this.sheetId}-description`;
+    class = computed(() => cn('bg-background fixed z-50 flex flex-col gap-4 p-6 shadow-lg duration-200 ease-in-out transition', 
+    // Position based on side
+    'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t', 'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:sm:max-w-sm', 'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:sm:max-w-sm', 'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b', 
+    // Animations
+    'data-idle:opacity-0', 'data-open:animate-in data-open:fade-in-0', 'data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10', 'data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10', 'data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10', 'data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10', 'data-closed:animate-out data-closed:fade-out-0', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    constructor() {
+        // Sync state with provider's open signal
+        effect(() => {
+            const isOpen = this.sheetProvider.open();
+            this.state.set(isOpen ? 'open' : 'closed');
+        });
+    }
+    onAnimationEnd(event) {
+        // Only trigger cleanup when close animation completes
+        if (this.state() === 'closed' &&
+            event.target === this.elementRef.nativeElement) {
+            this.state.set('idle');
+            this.sheetProvider.onSheetAnimationComplete();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSheet, isStandalone: true, selector: "div[scSheet]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "sheet", "role": "dialog", "aria-modal": "true" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.aria-labelledby": "titleId", "attr.aria-describedby": "descriptionId", "attr.data-side": "sheetProvider.side()", "attr.data-idle": "state() === \"idle\" ? \"\" : null", "attr.data-open": "state() === \"open\" ? \"\" : null", "attr.data-closed": "state() === \"closed\" ? \"\" : null", "class": "class()", "tabindex": "-1" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSheet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scSheet]',
+                    template: `
+    <ng-content />
+  `,
+                    host: {
+                        'data-slot': 'sheet',
+                        role: 'dialog',
+                        'aria-modal': 'true',
+                        '[attr.aria-labelledby]': 'titleId',
+                        '[attr.aria-describedby]': 'descriptionId',
+                        '[attr.data-side]': 'sheetProvider.side()',
+                        '[attr.data-idle]': 'state() === "idle" ? "" : null',
+                        '[attr.data-open]': 'state() === "open" ? "" : null',
+                        '[attr.data-closed]': 'state() === "closed" ? "" : null',
+                        '[class]': 'class()',
+                        '[tabindex]': '-1',
+                        '(animationend)': 'onAnimationEnd($event)',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=sheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/sheet/sheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;;AA0BnD,MAAM,OAAO,OAAO;IACD,UAAU,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAErD,aAAa,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IACxC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACzC,KAAK,GAAG,MAAM,CAAe,MAAM,iDAAC,CAAC;IAE/C,OAAO,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAClD,OAAO,GAAG,GAAG,IAAI,CAAC,OAAO,QAAQ,CAAC;IAClC,aAAa,GAAG,GAAG,IAAI,CAAC,OAAO,cAAc,CAAC;IAEpC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,gGAAgG;IAChG,yBAAyB;IACzB,gHAAgH,EAChH,0JAA0J,EAC1J,iKAAiK,EACjK,iGAAiG;IACjG,aAAa;IACb,qBAAqB,EACrB,0CAA0C,EAC1C,wGAAwG,EACxG,oGAAoG,EACpG,gGAAgG,EAChG,4GAA4G,EAC5G,gDAAgD,EAChD,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF;QACE,yCAAyC;QACzC,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YACzC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;IACL,CAAC;IAES,cAAc,CAAC,KAAqB;QAC5C,sDAAsD;QACtD,IACE,IAAI,CAAC,KAAK,EAAE,KAAK,QAAQ;YACzB,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,aAAa,EAC9C,CAAC;YACD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,wBAAwB,EAAE,CAAC;QAChD,CAAC;IACH,CAAC;uGAhDU,OAAO;2FAAP,OAAO,gsBApBR;;GAET;;2FAkBU,OAAO;kBAtBnB,SAAS;mBAAC;oBACT,QAAQ,EAAE,cAAc;oBACxB,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,OAAO;wBACpB,IAAI,EAAE,QAAQ;wBACd,YAAY,EAAE,MAAM;wBACpB,wBAAwB,EAAE,SAAS;wBACnC,yBAAyB,EAAE,eAAe;wBAC1C,kBAAkB,EAAE,sBAAsB;wBAC1C,kBAAkB,EAAE,gCAAgC;wBACpD,kBAAkB,EAAE,gCAAgC;wBACpD,oBAAoB,EAAE,kCAAkC;wBACxD,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,IAAI;wBAClB,gBAAgB,EAAE,wBAAwB;qBAC3C;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScSheetProvider } from './sheet-provider';\n\ntype ScSheetState = 'idle' | 'open' | 'closed';\n\n@Component({\n  selector: 'div[scSheet]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'sheet',\n    role: 'dialog',\n    'aria-modal': 'true',\n    '[attr.aria-labelledby]': 'titleId',\n    '[attr.aria-describedby]': 'descriptionId',\n    '[attr.data-side]': 'sheetProvider.side()',\n    '[attr.data-idle]': 'state() === \"idle\" ? \"\" : null',\n    '[attr.data-open]': 'state() === \"open\" ? \"\" : null',\n    '[attr.data-closed]': 'state() === \"closed\" ? \"\" : null',\n    '[class]': 'class()',\n    '[tabindex]': '-1',\n    '(animationend)': 'onAnimationEnd($event)',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSheet {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n  readonly sheetProvider = inject(ScSheetProvider);\n  readonly classInput = input<string>('', { alias: 'class' });\n  protected readonly state = signal<ScSheetState>('idle');\n\n  readonly sheetId = inject(_IdGenerator).getId('sc-sheet-');\n  readonly titleId = `${this.sheetId}-title`;\n  readonly descriptionId = `${this.sheetId}-description`;\n\n  protected readonly class = computed(() =>\n    cn(\n      'bg-background fixed z-50 flex flex-col gap-4 p-6 shadow-lg duration-200 ease-in-out transition',\n      // Position based on side\n      'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t',\n      'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:sm:max-w-sm',\n      'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:sm:max-w-sm',\n      'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b',\n      // Animations\n      'data-idle:opacity-0',\n      'data-open:animate-in data-open:fade-in-0',\n      'data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10',\n      'data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10',\n      'data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10',\n      'data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10',\n      'data-closed:animate-out data-closed:fade-out-0',\n      this.classInput(),\n    ),\n  );\n\n  constructor() {\n    // Sync state with provider's open signal\n    effect(() => {\n      const isOpen = this.sheetProvider.open();\n      this.state.set(isOpen ? 'open' : 'closed');\n    });\n  }\n\n  protected onAnimationEnd(event: AnimationEvent): void {\n    // Only trigger cleanup when close animation completes\n    if (\n      this.state() === 'closed' &&\n      event.target === this.elementRef.nativeElement\n    ) {\n      this.state.set('idle');\n      this.sheetProvider.onSheetAnimationComplete();\n    }\n  }\n}\n"]}

package/esm2022/lib/components/skeleton/index.js

@@ -0,0 +1,2 @@
+export * from './skeleton';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC","sourcesContent":["export * from './skeleton';\n"]}

package/esm2022/lib/components/skeleton/skeleton.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AASjC,MAAM,OAAO,UAAU;IACZ,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,mCAAmC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAC3D,CAAC;uGALS,UAAU;2FAAV,UAAU;;2FAAV,UAAU;kBAPtB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,IAAI,EAAE;wBACJ,WAAW,EAAE,UAAU;wBACvB,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'div[scSkeleton]',\n  host: {\n    'data-slot': 'skeleton',\n    '[class]': 'class()',\n  },\n})\nexport class ScSkeleton {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('animate-pulse rounded-md bg-muted', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/spinner/index.js

@@ -0,0 +1,2 @@
+export { ScSpinner } from './spinner';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { ScSpinner } from './spinner';\n"]}

package/esm2022/lib/components/spinner/spinner.js

@@ -0,0 +1,23 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScSpinner {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    ariaLabel = input('Loading', { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    class = computed(() => cn('size-4 animate-spin', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSpinner, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScSpinner, isStandalone: true, selector: "svg[scSpinner]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "spinner", "role": "status" }, properties: { "attr.aria-label": "ariaLabel()", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSpinner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'svg[scSpinner]',
+                    host: {
+                        'data-slot': 'spinner',
+                        role: 'status',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/spinner/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAWjC,MAAM,OAAO,SAAS;IACX,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,SAAS,GAAG,KAAK,CAAS,SAAS,sDAAI,KAAK,EAAE,YAAY,GAAG,CAAC;IAEpD,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,qBAAqB,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAC7C,CAAC;uGANS,SAAS;2FAAT,SAAS;;2FAAT,SAAS;kBATrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,IAAI,EAAE;wBACJ,WAAW,EAAE,SAAS;wBACtB,IAAI,EAAE,QAAQ;wBACd,mBAAmB,EAAE,aAAa;wBAClC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'svg[scSpinner]',\n  host: {\n    'data-slot': 'spinner',\n    role: 'status',\n    '[attr.aria-label]': 'ariaLabel()',\n    '[class]': 'class()',\n  },\n})\nexport class ScSpinner {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });\n\n  protected readonly class = computed(() =>\n    cn('size-4 animate-spin', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/switch/index.js

@@ -0,0 +1,5 @@
+export * from './switch-field';
+export * from './switch-visual';
+export * from './switch-types';
+export * from './switch';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC","sourcesContent":["export * from './switch-field';\nexport * from './switch-visual';\nexport * from './switch-types';\nexport * from './switch';\n"]}

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

@@ -0,0 +1,57 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { ChangeDetectionStrategy, Component, computed, contentChild, ElementRef, inject, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import { SC_FIELD } from '../field';
+import { SC_SWITCH_FIELD } from './switch-types';
+import { ScSwitch } from './switch';
+import { ScSwitchVisual } from './switch-visual';
+import * as i0 from "@angular/core";
+export class ScSwitchField {
+    elementRef = inject((ElementRef));
+    switchInput = contentChild(ScSwitch, ...(ngDevMode ? [{ debugName: "switchInput" }] : []));
+    role = computed(() => {
+        const tagName = this.elementRef.nativeElement.tagName;
+        return tagName === 'LABEL' ? null : 'group';
+    }, ...(ngDevMode ? [{ debugName: "role" }] : []));
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    id = input(inject(_IdGenerator).getId('sc-switch-field-'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    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" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSwitchField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", 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 },
+            { provide: SC_FIELD, useExisting: ScSwitchField },
+        ], queries: [{ propertyName: "switchInput", first: true, predicate: ScSwitch, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-content select="[scSwitch]" />
+    <span scSwitchVisual></span>
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "component", type: ScSwitchVisual, selector: "span[scSwitchVisual]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSwitchField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scSwitchField], label[scSwitchField]',
+                    imports: [ScSwitchVisual],
+                    providers: [
+                        { provide: SC_SWITCH_FIELD, useExisting: ScSwitchField },
+                        { provide: SC_FIELD, useExisting: ScSwitchField },
+                    ],
+                    host: {
+                        'data-slot': 'switch-field',
+                        '[attr.role]': 'role()',
+                        '[class]': 'class()',
+                        '[attr.data-state]': 'dataState()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                    },
+                    template: `
+    <ng-content select="[scSwitch]" />
+    <span scSwitchVisual></span>
+    <ng-content />
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { switchInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ScSwitch), { isSignal: true }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+//# sourceMappingURL=switch-field.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+export const SC_SWITCH_FIELD = new InjectionToken('SC_SWITCH_FIELD');
+//# sourceMappingURL=switch-types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-types.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/switch/switch-types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAS/C,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,cAAc,CAC/C,iBAAiB,CAClB,CAAC","sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport interface ScSwitchContext {\n  id: () => string;\n  checked: () => boolean;\n  disabled: () => boolean;\n  dataState: () => 'checked' | 'unchecked';\n}\n\nexport const SC_SWITCH_FIELD = new InjectionToken<ScSwitchContext>(\n  'SC_SWITCH_FIELD',\n);\n"]}

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

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import { SC_SWITCH_FIELD } from './switch-types';
+import * as i0 from "@angular/core";
+export class ScSwitchVisual {
+    switchField = inject(SC_SWITCH_FIELD);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('pointer-events-none inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors', 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', 'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-50', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    thumbClass = computed(() => cn('pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform', this.switchField.dataState() === 'checked'
+        ? 'translate-x-5'
+        : 'translate-x-0'), ...(ngDevMode ? [{ debugName: "thumbClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSwitchVisual, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSwitchVisual, isStandalone: true, selector: "span[scSwitchVisual]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "switch-visual" }, properties: { "class": "class()", "attr.data-state": "switchField.dataState()", "attr.aria-hidden": "true" } }, ngImport: i0, template: `
+    <span data-slot="switch-thumb" [class]="thumbClass()"></span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSwitchVisual, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[scSwitchVisual]',
+                    host: {
+                        'data-slot': 'switch-visual',
+                        '[class]': 'class()',
+                        '[attr.data-state]': 'switchField.dataState()',
+                        '[attr.aria-hidden]': 'true',
+                    },
+                    template: `
+    <span data-slot="switch-thumb" [class]="thumbClass()"></span>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=switch-visual.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-visual.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/switch/switch-visual.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;;AAgBjD,MAAM,OAAO,cAAc;IAChB,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IACtC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,2HAA2H,EAC3H,iEAAiE,EACjE,mKAAmK,EACnK,2DAA2D,EAC3D,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEiB,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC5C,EAAE,CACA,mGAAmG,EACnG,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,KAAK,SAAS;QACxC,CAAC,CAAC,eAAe;QACjB,CAAC,CAAC,eAAe,CACpB,sDACF,CAAC;uGArBS,cAAc;2FAAd,cAAc,oYANf;;GAET;;2FAIU,cAAc;kBAd1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;oBAChC,IAAI,EAAE;wBACJ,WAAW,EAAE,eAAe;wBAC5B,SAAS,EAAE,SAAS;wBACpB,mBAAmB,EAAE,yBAAyB;wBAC9C,oBAAoB,EAAE,MAAM;qBAC7B;oBACD,QAAQ,EAAE;;GAET;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { SC_SWITCH_FIELD } from './switch-types';\n\n@Component({\n  selector: 'span[scSwitchVisual]',\n  host: {\n    'data-slot': 'switch-visual',\n    '[class]': 'class()',\n    '[attr.data-state]': 'switchField.dataState()',\n    '[attr.aria-hidden]': 'true',\n  },\n  template: `\n    <span data-slot=\"switch-thumb\" [class]=\"thumbClass()\"></span>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSwitchVisual {\n  readonly switchField = inject(SC_SWITCH_FIELD);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'pointer-events-none inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors',\n      'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n      'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background',\n      'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n      this.classInput(),\n    ),\n  );\n\n  protected readonly thumbClass = computed(() =>\n    cn(\n      'pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform',\n      this.switchField.dataState() === 'checked'\n        ? 'translate-x-5'\n        : 'translate-x-0',\n    ),\n  );\n}\n"]}