@semantic-components/ui 0.65.0 → 0.67.0

package/esm2022/lib/components/alert-dialog/alert-dialog-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 ScAlertDialogHeader {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center', 'has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4', 'sm:group-data-[size=default]/alert-dialog-content:place-items-start', 'sm:group-data-[size=default]/alert-dialog-content:text-left', 'sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAlertDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScAlertDialogHeader, isStandalone: true, selector: "div[scAlertDialogHeader]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-header" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAlertDialogHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[scAlertDialogHeader]',
+                    host: {
+                        'data-slot': 'alert-dialog-header',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=alert-dialog-header.js.map

package/esm2022/lib/components/alert-dialog/alert-dialog-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-header.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/alert-dialog/alert-dialog-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,mBAAmB;IACrB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kEAAkE,EAClE,yGAAyG,EACzG,qEAAqE,EACrE,6DAA6D,EAC7D,2GAA2G,EAC3G,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAZS,mBAAmB;2FAAnB,mBAAmB;;2FAAnB,mBAAmB;kBAP/B,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;oBACpC,IAAI,EAAE;wBACJ,WAAW,EAAE,qBAAqB;wBAClC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'div[scAlertDialogHeader]',\n  host: {\n    'data-slot': 'alert-dialog-header',\n    '[class]': 'class()',\n  },\n})\nexport class ScAlertDialogHeader {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center',\n      'has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4',\n      'sm:group-data-[size=default]/alert-dialog-content:place-items-start',\n      'sm:group-data-[size=default]/alert-dialog-content:text-left',\n      'sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/alert-dialog/alert-dialog-media.js

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScAlertDialogMedia {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md', 'sm:group-data-[size=default]/alert-dialog-content:row-span-2', '*:[svg:not([class*="size-"])]:size-6', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAlertDialogMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScAlertDialogMedia, isStandalone: true, selector: "div[scAlertDialogMedia]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-media" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAlertDialogMedia, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[scAlertDialogMedia]',
+                    host: {
+                        'data-slot': 'alert-dialog-media',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=alert-dialog-media.js.map

package/esm2022/lib/components/alert-dialog/alert-dialog-media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-media.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/alert-dialog/alert-dialog-media.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,kBAAkB;IACpB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,0EAA0E,EAC1E,8DAA8D,EAC9D,sCAAsC,EACtC,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAVS,kBAAkB;2FAAlB,kBAAkB;;2FAAlB,kBAAkB;kBAP9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,IAAI,EAAE;wBACJ,WAAW,EAAE,oBAAoB;wBACjC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'div[scAlertDialogMedia]',\n  host: {\n    'data-slot': 'alert-dialog-media',\n    '[class]': 'class()',\n  },\n})\nexport class ScAlertDialogMedia {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md',\n      'sm:group-data-[size=default]/alert-dialog-content:row-span-2',\n      '*:[svg:not([class*=\"size-\"])]:size-6',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/alert-dialog/alert-dialog-portal.js

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

package/esm2022/lib/components/alert-dialog/alert-dialog-portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-portal.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/alert-dialog/alert-dialog-portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAK/D,MAAM,OAAO,mBAAmB;IACrB,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;uGADhC,mBAAmB;2FAAnB,mBAAmB;;2FAAnB,mBAAmB;kBAH/B,SAAS;mBAAC;oBACT,QAAQ,EAAE,kCAAkC;iBAC7C","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: 'ng-template[scAlertDialogPortal]',\n})\nexport class ScAlertDialogPortal {\n  readonly templateRef = inject(TemplateRef);\n}\n"]}

package/esm2022/lib/components/alert-dialog/alert-dialog-provider.js

@@ -0,0 +1,122 @@
+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 { ScAlertDialogPortal } from './alert-dialog-portal';
+import * as i0 from "@angular/core";
+export class ScAlertDialogProvider {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    overlayTemplate = viewChild.required('overlayTemplate');
+    alertDialogPortal = contentChild.required(ScAlertDialogPortal);
+    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.attachDialog();
+            }
+            else {
+                this.detachDialog();
+            }
+        });
+    }
+    onDialogAnimationComplete() {
+        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()
+                    .centerHorizontally()
+                    .centerVertically(),
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+                scrollStrategy: this.overlay.scrollStrategies.block(),
+            });
+        }
+        return this.overlayRef;
+    }
+    attachDialog() {
+        const ref = this.getOverlayRef();
+        if (!ref.hasAttached()) {
+            const portal = new TemplatePortal(this.overlayTemplate(), this.viewContainerRef);
+            ref.attach(portal);
+        }
+    }
+    detachDialog() {
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef.detach();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAlertDialogProvider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: ScAlertDialogProvider, isStandalone: true, selector: "div[scAlertDialogProvider]", 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": "alert-dialog-provider" }, properties: { "class": "class()" } }, queries: [{ propertyName: "alertDialogPortal", first: true, predicate: ScAlertDialogPortal, 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]="alertDialogPortal().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: ScAlertDialogProvider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scAlertDialogProvider]',
+                    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]="alertDialogPortal().templateRef" />
+      </div>
+    </ng-template>
+  `,
+                    host: {
+                        'data-slot': 'alert-dialog-provider',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], overlayTemplate: [{ type: i0.ViewChild, args: ['overlayTemplate', { isSignal: true }] }], alertDialogPortal: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ScAlertDialogPortal), { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
+//# sourceMappingURL=alert-dialog-provider.js.map

package/esm2022/lib/components/alert-dialog/alert-dialog-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-provider.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/alert-dialog/alert-dialog-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 { ScAlertDialogPortal } from './alert-dialog-portal';\n\n@Component({\n  selector: 'div[scAlertDialogProvider]',\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]=\"alertDialogPortal().templateRef\" />\n      </div>\n    </ng-template>\n  `,\n  host: {\n    'data-slot': 'alert-dialog-provider',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScAlertDialogProvider {\n  private readonly overlay = inject(Overlay);\n  private readonly viewContainerRef = inject(ViewContainerRef);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  private readonly overlayTemplate =\n    viewChild.required<TemplateRef<unknown>>('overlayTemplate');\n\n  protected readonly alertDialogPortal =\n    contentChild.required(ScAlertDialogPortal);\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.attachDialog();\n      } else {\n        this.detachDialog();\n      }\n    });\n  }\n\n  onDialogAnimationComplete(): 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\n          .position()\n          .global()\n          .centerHorizontally()\n          .centerVertically(),\n        hasBackdrop: true,\n        backdropClass: 'cdk-overlay-transparent-backdrop',\n        scrollStrategy: this.overlay.scrollStrategies.block(),\n      });\n    }\n    return this.overlayRef;\n  }\n\n  private attachDialog(): 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 detachDialog(): void {\n    if (this.overlayRef?.hasAttached()) {\n      this.overlayRef.detach();\n    }\n  }\n}\n"]}

package/esm2022/lib/components/alert-dialog/alert-dialog-title.js

@@ -0,0 +1,23 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { ScAlertDialog } from './alert-dialog';
+import * as i0 from "@angular/core";
+export class ScAlertDialogTitle {
+    dialog = inject(ScAlertDialog);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('text-base font-medium', 'sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAlertDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScAlertDialogTitle, isStandalone: true, selector: "h2[scAlertDialogTitle]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-title" }, properties: { "id": "dialog.titleId", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAlertDialogTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'h2[scAlertDialogTitle]',
+                    host: {
+                        'data-slot': 'alert-dialog-title',
+                        '[id]': 'dialog.titleId',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=alert-dialog-title.js.map

package/esm2022/lib/components/alert-dialog/alert-dialog-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-title.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/alert-dialog/alert-dialog-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,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAU/C,MAAM,OAAO,kBAAkB;IACpB,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAC/B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,uBAAuB,EACvB,6HAA6H,EAC7H,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAVS,kBAAkB;2FAAlB,kBAAkB;;2FAAlB,kBAAkB;kBAR9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,IAAI,EAAE;wBACJ,WAAW,EAAE,oBAAoB;wBACjC,MAAM,EAAE,gBAAgB;wBACxB,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScAlertDialog } from './alert-dialog';\n\n@Directive({\n  selector: 'h2[scAlertDialogTitle]',\n  host: {\n    'data-slot': 'alert-dialog-title',\n    '[id]': 'dialog.titleId',\n    '[class]': 'class()',\n  },\n})\nexport class ScAlertDialogTitle {\n  readonly dialog = inject(ScAlertDialog);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'text-base font-medium',\n      'sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/alert-dialog/alert-dialog-trigger.js

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

package/esm2022/lib/components/alert-dialog/alert-dialog-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-trigger.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/alert-dialog/alert-dialog-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,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAahE,MAAM,OAAO,oBAAoB;IACtB,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC;IACpD,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,UAAU;QACR,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;uGARU,oBAAoB;2FAApB,oBAAoB;;2FAApB,oBAAoB;kBAXhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,8BAA8B;oBACxC,IAAI,EAAE;wBACJ,WAAW,EAAE,sBAAsB;wBACnC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,sBAAsB,EAAE,eAAe;wBACvC,sBAAsB,EAAE,4BAA4B;wBACpD,SAAS,EAAE,cAAc;qBAC1B;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScAlertDialogProvider } from './alert-dialog-provider';\n\n@Directive({\n  selector: 'button[scAlertDialogTrigger]',\n  host: {\n    'data-slot': 'alert-dialog-trigger',\n    type: 'button',\n    '[class]': 'class()',\n    '[attr.aria-haspopup]': '\"alertdialog\"',\n    '[attr.aria-expanded]': 'alertDialogProvider.open()',\n    '(click)': 'openDialog()',\n  },\n})\nexport class ScAlertDialogTrigger {\n  readonly alertDialogProvider = inject(ScAlertDialogProvider);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() => cn('', this.classInput()));\n\n  openDialog(): void {\n    this.alertDialogProvider.open.set(true);\n  }\n}\n"]}

package/esm2022/lib/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,61 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, signal, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import { ScAlertDialogProvider } from './alert-dialog-provider';
+import * as i0 from "@angular/core";
+export class ScAlertDialog {
+    elementRef = inject((ElementRef));
+    alertDialogProvider = inject(ScAlertDialogProvider);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    state = signal('idle', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    dialogId = inject(_IdGenerator).getId('sc-alert-dialog-');
+    titleId = `${this.dialogId}-title`;
+    descriptionId = `${this.dialogId}-description`;
+    class = computed(() => cn('relative bg-background ring-foreground/10 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none', 'data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm', 'group/alert-dialog-content', 'data-idle:opacity-0', 'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95', 'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    constructor() {
+        // Sync state with provider's open signal
+        effect(() => {
+            const isOpen = this.alertDialogProvider.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.alertDialogProvider.onDialogAnimationComplete();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScAlertDialog, isStandalone: true, selector: "div[scAlertDialog]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog", "role": "alertdialog", "aria-modal": "true" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.aria-labelledby": "titleId", "attr.aria-describedby": "descriptionId", "attr.data-size": "size()", "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: ScAlertDialog, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scAlertDialog]',
+                    template: `
+    <ng-content />
+  `,
+                    host: {
+                        'data-slot': 'alert-dialog',
+                        role: 'alertdialog',
+                        'aria-modal': 'true',
+                        '[attr.aria-labelledby]': 'titleId',
+                        '[attr.aria-describedby]': 'descriptionId',
+                        '[attr.data-size]': 'size()',
+                        '[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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+//# sourceMappingURL=alert-dialog.js.map

package/esm2022/lib/components/alert-dialog/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/alert-dialog/alert-dialog.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,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AA0BhE,MAAM,OAAO,aAAa;IACP,UAAU,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAErD,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC;IACpD,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,IAAI,GAAG,KAAK,CAAmB,SAAS,gDAAC,CAAC;IAChC,KAAK,GAAG,MAAM,CAAqB,MAAM,iDAAC,CAAC;IAErD,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAE1D,OAAO,GAAG,GAAG,IAAI,CAAC,QAAQ,QAAQ,CAAC;IACnC,aAAa,GAAG,GAAG,IAAI,CAAC,QAAQ,cAAc,CAAC;IAErC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,6IAA6I,EAC7I,sFAAsF,EACtF,4BAA4B,EAC5B,qBAAqB,EACrB,+DAA+D,EAC/D,wEAAwE,EACxE,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF;QACE,yCAAyC;QACzC,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;YAC/C,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,mBAAmB,CAAC,yBAAyB,EAAE,CAAC;QACvD,CAAC;IACH,CAAC;uGA1CU,aAAa;2FAAb,aAAa,yzBApBd;;GAET;;2FAkBU,aAAa;kBAtBzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,IAAI,EAAE,aAAa;wBACnB,YAAY,EAAE,MAAM;wBACpB,wBAAwB,EAAE,SAAS;wBACnC,yBAAyB,EAAE,eAAe;wBAC1C,kBAAkB,EAAE,QAAQ;wBAC5B,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 { ScAlertDialogProvider } from './alert-dialog-provider';\n\ntype ScAlertDialogState = 'idle' | 'open' | 'closed';\n\n@Component({\n  selector: 'div[scAlertDialog]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'alert-dialog',\n    role: 'alertdialog',\n    'aria-modal': 'true',\n    '[attr.aria-labelledby]': 'titleId',\n    '[attr.aria-describedby]': 'descriptionId',\n    '[attr.data-size]': 'size()',\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 ScAlertDialog {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n  readonly alertDialogProvider = inject(ScAlertDialogProvider);\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly size = input<'default' | 'sm'>('default');\n  protected readonly state = signal<ScAlertDialogState>('idle');\n\n  readonly dialogId = inject(_IdGenerator).getId('sc-alert-dialog-');\n\n  readonly titleId = `${this.dialogId}-title`;\n  readonly descriptionId = `${this.dialogId}-description`;\n\n  protected readonly class = computed(() =>\n    cn(\n      'relative bg-background ring-foreground/10 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none',\n      'data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm',\n      'group/alert-dialog-content',\n      'data-idle:opacity-0',\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      this.classInput(),\n    ),\n  );\n\n  constructor() {\n    // Sync state with provider's open signal\n    effect(() => {\n      const isOpen = this.alertDialogProvider.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.alertDialogProvider.onDialogAnimationComplete();\n    }\n  }\n}\n"]}

package/esm2022/lib/components/alert-dialog/index.js

@@ -0,0 +1,12 @@
+export { ScAlertDialogProvider } from './alert-dialog-provider';
+export { ScAlertDialogTrigger } from './alert-dialog-trigger';
+export { ScAlertDialogPortal } from './alert-dialog-portal';
+export { ScAlertDialog } from './alert-dialog';
+export { ScAlertDialogHeader } from './alert-dialog-header';
+export { ScAlertDialogTitle } from './alert-dialog-title';
+export { ScAlertDialogDescription } from './alert-dialog-description';
+export { ScAlertDialogFooter } from './alert-dialog-footer';
+export { ScAlertDialogMedia } from './alert-dialog-media';
+export { ScAlertDialogCancel } from './alert-dialog-cancel';
+export { ScAlertDialogAction } from './alert-dialog-action';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/alert-dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/alert-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { ScAlertDialogProvider } from './alert-dialog-provider';\nexport { ScAlertDialogTrigger } from './alert-dialog-trigger';\nexport { ScAlertDialogPortal } from './alert-dialog-portal';\nexport { ScAlertDialog } from './alert-dialog';\nexport { ScAlertDialogHeader } from './alert-dialog-header';\nexport { ScAlertDialogTitle } from './alert-dialog-title';\nexport { ScAlertDialogDescription } from './alert-dialog-description';\nexport { ScAlertDialogFooter } from './alert-dialog-footer';\nexport { ScAlertDialogMedia } from './alert-dialog-media';\nexport { ScAlertDialogCancel } from './alert-dialog-cancel';\nexport { ScAlertDialogAction } from './alert-dialog-action';\n"]}

package/esm2022/lib/components/aspect-ratio/aspect-ratio.js

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

package/esm2022/lib/components/aspect-ratio/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/aspect-ratio/aspect-ratio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAUjC,MAAM,OAAO,aAAa;IACf,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,KAAK,GAAG,KAAK,CAAS,CAAC,iDAAC,CAAC;IAEf,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACzC,CAAC;uGANS,aAAa;2FAAb,aAAa;;2FAAb,aAAa;kBARzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,SAAS,EAAE,SAAS;wBACpB,sBAAsB,EAAE,SAAS;qBAClC;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: '[scAspectRatio]',\n  host: {\n    'data-slot': 'aspect-ratio',\n    '[class]': 'class()',\n    '[style.aspect-ratio]': 'ratio()',\n  },\n})\nexport class ScAspectRatio {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly ratio = input<number>(1);\n\n  protected readonly class = computed(() =>\n    cn('relative w-full', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/aspect-ratio/index.js

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

package/esm2022/lib/components/aspect-ratio/index.js.map

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

package/esm2022/lib/components/avatar/avatar-badge.js

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScAvatarBadge {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 size-2.5 inline-flex items-center justify-center rounded-full ring-2 select-none [&>svg]:size-2', 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden', 'group-data-[size=lg]/avatar:size-3', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAvatarBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScAvatarBadge, isStandalone: true, selector: "span[scAvatarBadge]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "avatar-badge" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAvatarBadge, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[scAvatarBadge]',
+                    host: {
+                        'data-slot': 'avatar-badge',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=avatar-badge.js.map

package/esm2022/lib/components/avatar/avatar-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-badge.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/avatar/avatar-badge.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,mLAAmL,EACnL,+EAA+E,EAC/E,oCAAoC,EACpC,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAVS,aAAa;2FAAb,aAAa;;2FAAb,aAAa;kBAPzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,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: 'span[scAvatarBadge]',\n  host: {\n    'data-slot': 'avatar-badge',\n    '[class]': 'class()',\n  },\n})\nexport class ScAvatarBadge {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 size-2.5 inline-flex items-center justify-center rounded-full ring-2 select-none [&>svg]:size-2',\n      'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n      'group-data-[size=lg]/avatar:size-3',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/avatar/avatar-fallback.js

@@ -0,0 +1,25 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { ScAvatar } from './avatar';
+import * as i0 from "@angular/core";
+export class ScAvatarFallback {
+    avatar = inject(ScAvatar);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => {
+        const status = this.avatar.imageStatus();
+        return cn('bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm', 'group-data-[size=sm]/avatar:text-xs', status === 'loaded' && 'hidden', this.classInput());
+    }, ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAvatarFallback, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScAvatarFallback, isStandalone: true, selector: "span[scAvatarFallback]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "avatar-fallback" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAvatarFallback, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[scAvatarFallback]',
+                    host: {
+                        'data-slot': 'avatar-fallback',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=avatar-fallback.js.map

package/esm2022/lib/components/avatar/avatar-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-fallback.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/avatar/avatar-fallback.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,QAAQ,EAAE,MAAM,UAAU,CAAC;;AASpC,MAAM,OAAO,gBAAgB;IACV,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAElC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;QACzC,OAAO,EAAE,CACP,gGAAgG,EAChG,qCAAqC,EACrC,MAAM,KAAK,QAAQ,IAAI,QAAQ,EAC/B,IAAI,CAAC,UAAU,EAAE,CAClB,CAAC;IACJ,CAAC,iDAAC,CAAC;uGAbQ,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAP5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,IAAI,EAAE;wBACJ,WAAW,EAAE,iBAAiB;wBAC9B,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScAvatar } from './avatar';\n\n@Directive({\n  selector: 'span[scAvatarFallback]',\n  host: {\n    'data-slot': 'avatar-fallback',\n    '[class]': 'class()',\n  },\n})\nexport class ScAvatarFallback {\n  private readonly avatar = inject(ScAvatar);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() => {\n    const status = this.avatar.imageStatus();\n    return cn(\n      'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm',\n      'group-data-[size=sm]/avatar:text-xs',\n      status === 'loaded' && 'hidden',\n      this.classInput(),\n    );\n  });\n}\n"]}

package/esm2022/lib/components/avatar/avatar-group-count.js

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScAvatarGroupCount {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2', 'group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6', '[&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAvatarGroupCount, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScAvatarGroupCount, isStandalone: true, selector: "div[scAvatarGroupCount]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "avatar-group-count" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAvatarGroupCount, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[scAvatarGroupCount]',
+                    host: {
+                        'data-slot': 'avatar-group-count',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=avatar-group-count.js.map

package/esm2022/lib/components/avatar/avatar-group-count.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group-count.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/avatar/avatar-group-count.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,kBAAkB;IACpB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,sIAAsI,EACtI,4FAA4F,EAC5F,0HAA0H,EAC1H,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAVS,kBAAkB;2FAAlB,kBAAkB;;2FAAlB,kBAAkB;kBAP9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,IAAI,EAAE;wBACJ,WAAW,EAAE,oBAAoB;wBACjC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'div[scAvatarGroupCount]',\n  host: {\n    'data-slot': 'avatar-group-count',\n    '[class]': 'class()',\n  },\n})\nexport class ScAvatarGroupCount {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2',\n      'group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6',\n      '[&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/avatar/avatar-group.js

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

package/esm2022/lib/components/avatar/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/avatar/avatar-group.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,qGAAqG,EACrG,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[scAvatarGroup]',\n  host: {\n    'data-slot': 'avatar-group',\n    '[class]': 'class()',\n  },\n})\nexport class ScAvatarGroup {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      '*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/avatar/avatar-image.js

@@ -0,0 +1,36 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { ScAvatar } from './avatar';
+import * as i0 from "@angular/core";
+export class ScAvatarImage {
+    avatar = inject(ScAvatar);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => {
+        const status = this.avatar.imageStatus();
+        return cn('aspect-square size-full rounded-full object-cover', status !== 'loaded' && 'hidden', this.classInput());
+    }, ...(ngDevMode ? [{ debugName: "class" }] : []));
+    ngOnInit() {
+        this.avatar.imageStatus.set('loading');
+    }
+    onLoad() {
+        this.avatar.imageStatus.set('loaded');
+    }
+    onError() {
+        this.avatar.imageStatus.set('error');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAvatarImage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScAvatarImage, isStandalone: true, selector: "img[scAvatarImage]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "avatar-image" }, listeners: { "load": "onLoad()", "error": "onError()" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScAvatarImage, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[scAvatarImage]',
+                    host: {
+                        'data-slot': 'avatar-image',
+                        '[class]': 'class()',
+                        '(load)': 'onLoad()',
+                        '(error)': 'onError()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=avatar-image.js.map

package/esm2022/lib/components/avatar/avatar-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-image.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/avatar/avatar-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;;AAWpC,MAAM,OAAO,aAAa;IACP,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAElC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;QACzC,OAAO,EAAE,CACP,mDAAmD,EACnD,MAAM,KAAK,QAAQ,IAAI,QAAQ,EAC/B,IAAI,CAAC,UAAU,EAAE,CAClB,CAAC;IACJ,CAAC,iDAAC,CAAC;IAEH,QAAQ;QACN,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC;IAES,MAAM;QACd,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAES,OAAO;QACf,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC;uGAxBU,aAAa;2FAAb,aAAa;;2FAAb,aAAa;kBATzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,SAAS,EAAE,SAAS;wBACpB,QAAQ,EAAE,UAAU;wBACpB,SAAS,EAAE,WAAW;qBACvB;iBACF","sourcesContent":["import { computed, Directive, inject, input, OnInit } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScAvatar } from './avatar';\n\n@Directive({\n  selector: 'img[scAvatarImage]',\n  host: {\n    'data-slot': 'avatar-image',\n    '[class]': 'class()',\n    '(load)': 'onLoad()',\n    '(error)': 'onError()',\n  },\n})\nexport class ScAvatarImage implements OnInit {\n  private readonly avatar = inject(ScAvatar);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() => {\n    const status = this.avatar.imageStatus();\n    return cn(\n      'aspect-square size-full rounded-full object-cover',\n      status !== 'loaded' && 'hidden',\n      this.classInput(),\n    );\n  });\n\n  ngOnInit(): void {\n    this.avatar.imageStatus.set('loading');\n  }\n\n  protected onLoad(): void {\n    this.avatar.imageStatus.set('loaded');\n  }\n\n  protected onError(): void {\n    this.avatar.imageStatus.set('error');\n  }\n}\n"]}