@semantic-components/ui 0.65.0 → 0.67.0

package/esm2022/lib/components/field/field-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 ScFieldGroup {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScFieldGroup, isStandalone: true, selector: "[scFieldGroup]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-group" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFieldGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scFieldGroup]',
+                    host: {
+                        'data-slot': 'field-group',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=field-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-group.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/field/field-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,YAAY;IACd,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,wIAAwI,EACxI,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGARS,YAAY;2FAAZ,YAAY;;2FAAZ,YAAY;kBAPxB,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,IAAI,EAAE;wBACJ,WAAW,EAAE,aAAa;wBAC1B,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: '[scFieldGroup]',\n  host: {\n    'data-slot': 'field-group',\n    '[class]': 'class()',\n  },\n})\nexport class ScFieldGroup {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col',\n      this.classInput(),\n    ),\n  );\n}\n"]}

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

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScFieldSeparator {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFieldSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScFieldSeparator, isStandalone: true, selector: "[scFieldSeparator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-separator" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFieldSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scFieldSeparator]',
+                    host: {
+                        'data-slot': 'field-separator',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=field-separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-separator.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/field/field-separator.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,gBAAgB;IAClB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,2EAA2E,EAC3E,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGARS,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAP5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACJ,WAAW,EAAE,iBAAiB;wBAC9B,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: '[scFieldSeparator]',\n  host: {\n    'data-slot': 'field-separator',\n    '[class]': 'class()',\n  },\n})\nexport class ScFieldSeparator {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative',\n      this.classInput(),\n    ),\n  );\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-title.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/field/field-title.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,YAAY;IACd,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,4GAA4G,EAC5G,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGARS,YAAY;2FAAZ,YAAY;;2FAAZ,YAAY;kBAPxB,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,IAAI,EAAE;wBACJ,WAAW,EAAE,aAAa;wBAC1B,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: '[scFieldTitle]',\n  host: {\n    'data-slot': 'field-title',\n    '[class]': 'class()',\n  },\n})\nexport class ScFieldTitle {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',\n      this.classInput(),\n    ),\n  );\n}\n"]}

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

@@ -0,0 +1,75 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { computed, contentChild, Directive, ElementRef, inject, InjectionToken, input, } from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+const fieldVariants = cva('gap-2 group/field flex w-full data-[invalid=true]:text-destructive', {
+    variants: {
+        orientation: {
+            vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+            horizontal: 'flex-row items-center [&>[data-slot=label]]:flex-auto has-[>[data-slot=field-body]]:items-start has-[>[data-slot=field-body]]:[&>[role=checkbox],[role=radio]]:mt-px',
+            responsive: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=label]]:flex-auto @md/field-group:has-[>[data-slot=field-body]]:items-start @md/field-group:has-[>[data-slot=field-body]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        },
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+    },
+});
+export const SC_FIELD = new InjectionToken('SC_FIELD');
+export class ScField {
+    elementRef = inject((ElementRef));
+    id = input(inject(_IdGenerator).getId('sc-field-'), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : {}), alias: 'invalid' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
+    formField = contentChild(FormField, ...(ngDevMode ? [{ debugName: "formField" }] : []));
+    role = computed(() => {
+        // Only LABEL preserves native semantics, DIV gets role="group"
+        const tagName = this.elementRef.nativeElement.tagName;
+        return tagName === 'LABEL' ? null : 'group';
+    }, ...(ngDevMode ? [{ debugName: "role" }] : []));
+    invalid = computed(() => {
+        if (this.invalidInput())
+            return true;
+        return ((this.formField()?.state().touched() &&
+            this.formField()?.state().invalid()) ??
+            false);
+    }, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    disabled = computed(() => {
+        if (this.disabledInput())
+            return true;
+        return this.formField()?.state().disabled() ?? false;
+    }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    class = computed(() => cn(fieldVariants({ orientation: this.orientation() }), this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.5", type: ScField, isStandalone: true, selector: "div[scField], label[scField]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field" }, properties: { "attr.role": "role()", "attr.id": "id()", "attr.data-orientation": "orientation()", "attr.data-invalid": "invalid()", "attr.data-disabled": "disabled()", "class": "class()" } }, providers: [
+            {
+                provide: SC_FIELD,
+                useExisting: ScField,
+            },
+        ], queries: [{ propertyName: "formField", first: true, predicate: FormField, descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[scField], label[scField]',
+                    host: {
+                        '[attr.role]': 'role()',
+                        'data-slot': 'field',
+                        '[attr.id]': 'id()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-invalid]': 'invalid()',
+                        '[attr.data-disabled]': 'disabled()',
+                        '[class]': 'class()',
+                    },
+                    providers: [
+                        {
+                            provide: SC_FIELD,
+                            useExisting: ScField,
+                        },
+                    ],
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], formField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormField), { isSignal: true }] }] } });
+//# sourceMappingURL=field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/field/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,UAAU,EACV,MAAM,EACN,cAAc,EACd,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAEjC,MAAM,aAAa,GAAG,GAAG,CACvB,oEAAoE,EACpE;IACE,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,QAAQ,EAAE,2CAA2C;YACrD,UAAU,EACR,sKAAsK;YACxK,UAAU,EACR,6TAA6T;SAChU;KACF;IACD,eAAe,EAAE;QACf,WAAW,EAAE,UAAU;KACxB;CACF,CACF,CAAC;AAQF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAiB,UAAU,CAAC,CAAC;AAoBvE,MAAM,OAAO,OAAO;IACD,UAAU,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAErD,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,8CAAC,CAAC;IACpD,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,WAAW,GAAG,KAAK,CAAiC,UAAU,uDAAC,CAAC;IAChE,YAAY,GAAG,KAAK,CAAU,KAAK,yDAAI,KAAK,EAAE,SAAS,GAAG,CAAC;IAC3D,aAAa,GAAG,KAAK,CAAU,KAAK,0DAAI,KAAK,EAAE,UAAU,GAAG,CAAC;IAErD,SAAS,GAAG,YAAY,CAAC,SAAS,qDAAC,CAAC;IAElC,IAAI,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,+DAA+D;QAC/D,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,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC/B,IAAI,IAAI,CAAC,YAAY,EAAE;YAAE,OAAO,IAAI,CAAC;QACrC,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE;YAClC,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE,CAAC;YACtC,KAAK,CACN,CAAC;IACJ,CAAC,mDAAC,CAAC;IAEM,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE;QAChC,IAAI,IAAI,CAAC,aAAa,EAAE;YAAE,OAAO,IAAI,CAAC;QACtC,OAAO,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,IAAI,KAAK,CAAC;IACvD,CAAC,oDAAC,CAAC;IAEgB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,aAAa,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAC1E,CAAC;uGAjCS,OAAO;2FAAP,OAAO,m9BAPP;YACT;gBACE,OAAO,EAAE,QAAQ;gBACjB,WAAW,EAAE,OAAO;aACrB;SACF,iEAWyC,SAAS;;2FATxC,OAAO;kBAlBnB,SAAS;mBAAC;oBACT,QAAQ,EAAE,8BAA8B;oBACxC,IAAI,EAAE;wBACJ,aAAa,EAAE,QAAQ;wBACvB,WAAW,EAAE,OAAO;wBACpB,WAAW,EAAE,MAAM;wBACnB,yBAAyB,EAAE,eAAe;wBAC1C,qBAAqB,EAAE,WAAW;wBAClC,sBAAsB,EAAE,YAAY;wBACpC,SAAS,EAAE,SAAS;qBACrB;oBACD,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,QAAQ;4BACjB,WAAW,SAAS;yBACrB;qBACF;iBACF;+jBAU2C,SAAS","sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  computed,\n  contentChild,\n  Directive,\n  ElementRef,\n  inject,\n  InjectionToken,\n  input,\n} from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils';\n\nconst fieldVariants = cva(\n  'gap-2 group/field flex w-full data-[invalid=true]:text-destructive',\n  {\n    variants: {\n      orientation: {\n        vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',\n        horizontal:\n          'flex-row items-center [&>[data-slot=label]]:flex-auto has-[>[data-slot=field-body]]:items-start has-[>[data-slot=field-body]]:[&>[role=checkbox],[role=radio]]:mt-px',\n        responsive:\n          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=label]]:flex-auto @md/field-group:has-[>[data-slot=field-body]]:items-start @md/field-group:has-[>[data-slot=field-body]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      },\n    },\n    defaultVariants: {\n      orientation: 'vertical',\n    },\n  },\n);\n\nexport type ScFieldVariants = VariantProps<typeof fieldVariants>;\n\nexport interface ScFieldContext {\n  id: () => string;\n}\n\nexport const SC_FIELD = new InjectionToken<ScFieldContext>('SC_FIELD');\n\n@Directive({\n  selector: 'div[scField], label[scField]',\n  host: {\n    '[attr.role]': 'role()',\n    'data-slot': 'field',\n    '[attr.id]': 'id()',\n    '[attr.data-orientation]': 'orientation()',\n    '[attr.data-invalid]': 'invalid()',\n    '[attr.data-disabled]': 'disabled()',\n    '[class]': 'class()',\n  },\n  providers: [\n    {\n      provide: SC_FIELD,\n      useExisting: ScField,\n    },\n  ],\n})\nexport class ScField implements ScFieldContext {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n  readonly id = input(inject(_IdGenerator).getId('sc-field-'));\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly orientation = input<ScFieldVariants['orientation']>('vertical');\n  readonly invalidInput = input<boolean>(false, { alias: 'invalid' });\n  readonly disabledInput = input<boolean>(false, { alias: 'disabled' });\n\n  private readonly formField = contentChild(FormField);\n\n  protected readonly role = computed(() => {\n    // Only LABEL preserves native semantics, DIV gets role=\"group\"\n    const tagName = this.elementRef.nativeElement.tagName;\n    return tagName === 'LABEL' ? null : 'group';\n  });\n\n  readonly invalid = computed(() => {\n    if (this.invalidInput()) return true;\n    return (\n      (this.formField()?.state().touched() &&\n        this.formField()?.state().invalid()) ??\n      false\n    );\n  });\n\n  readonly disabled = computed(() => {\n    if (this.disabledInput()) return true;\n    return this.formField()?.state().disabled() ?? false;\n  });\n\n  protected readonly class = computed(() =>\n    cn(fieldVariants({ orientation: this.orientation() }), this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/field/fieldset.js

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

package/esm2022/lib/components/field/fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/field/fieldset.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,CACA,kGAAkG,EAClG,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGARS,UAAU;2FAAV,UAAU;;2FAAV,UAAU;kBAPtB,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;oBAChC,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: 'fieldset[scFieldset]',\n  host: {\n    'data-slot': 'fieldset',\n    '[class]': 'class()',\n  },\n})\nexport class ScFieldset {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',\n      this.classInput(),\n    ),\n  );\n}\n"]}

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

@@ -0,0 +1,10 @@
+export * from './field';
+export * from './fieldset';
+export { ScLegend } from './legend';
+export * from './field-group';
+export * from './field-body';
+export * from './field-title';
+export * from './field-description';
+export * from './field-separator';
+export * from './field-error';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC","sourcesContent":["export * from './field';\nexport * from './fieldset';\nexport { ScLegend } from './legend';\nexport type { ScLegendVariant } from './legend';\nexport * from './field-group';\nexport * from './field-body';\nexport * from './field-title';\nexport * from './field-description';\nexport * from './field-separator';\nexport * from './field-error';\n"]}

package/esm2022/lib/components/field/legend.js

@@ -0,0 +1,22 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScLegend {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    variant = input('legend', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    class = computed(() => cn('mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScLegend, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScLegend, isStandalone: true, selector: "legend[scLegend]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "legend" }, properties: { "attr.data-variant": "variant()", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScLegend, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'legend[scLegend]',
+                    host: {
+                        'data-slot': 'legend',
+                        '[attr.data-variant]': 'variant()',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+//# sourceMappingURL=legend.js.map

package/esm2022/lib/components/field/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/field/legend.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAYjC,MAAM,OAAO,QAAQ;IACV,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,OAAO,GAAG,KAAK,CAAkB,QAAQ,mDAAC,CAAC;IAEjC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,iFAAiF,EACjF,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGATS,QAAQ;2FAAR,QAAQ;;2FAAR,QAAQ;kBARpB,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE;wBACJ,WAAW,EAAE,QAAQ;wBACrB,qBAAqB,EAAE,WAAW;wBAClC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\nexport type ScLegendVariant = 'legend' | 'label';\n\n@Directive({\n  selector: 'legend[scLegend]',\n  host: {\n    'data-slot': 'legend',\n    '[attr.data-variant]': 'variant()',\n    '[class]': 'class()',\n  },\n})\nexport class ScLegend {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly variant = input<ScLegendVariant>('legend');\n\n  protected readonly class = computed(() =>\n    cn(\n      'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/file-upload/file-upload-dropzone.js

@@ -0,0 +1,91 @@
+import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input, signal, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import { SC_FILE_UPLOAD } from './file-upload';
+import * as i0 from "@angular/core";
+export class ScFileUploadDropzone {
+    fileUpload = inject(SC_FILE_UPLOAD);
+    elementRef = inject(ElementRef);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    class = computed(() => cn('relative flex min-h-[150px] cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed', 'transition-colors hover:border-primary/50 hover:bg-accent/50', 'data-[dragging=true]:border-primary data-[dragging=true]:bg-accent', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    openFilePicker() {
+        if (this.fileUpload.disabled())
+            return;
+        const input = this.elementRef.nativeElement.querySelector('input[type="file"]');
+        input?.click();
+    }
+    onFileSelect(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.fileUpload.addFiles(input.files);
+            input.value = '';
+        }
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.fileUpload.disabled()) {
+            this.isDragging.set(true);
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging.set(false);
+        if (this.fileUpload.disabled())
+            return;
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.fileUpload.addFiles(files);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadDropzone, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadDropzone, isStandalone: true, selector: "[scFileUploadDropzone]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-dropzone" }, listeners: { "click": "openFilePicker()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class": "class()", "attr.data-dragging": "isDragging()", "attr.data-disabled": "fileUpload.disabled() || null" } }, ngImport: i0, template: `
+    <input
+      #fileInput
+      type="file"
+      class="sr-only"
+      [multiple]="fileUpload.multiple()"
+      [accept]="fileUpload.accept()"
+      [disabled]="fileUpload.disabled()"
+      (change)="onFileSelect($event)"
+    />
+    <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: ScFileUploadDropzone, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[scFileUploadDropzone]',
+                    template: `
+    <input
+      #fileInput
+      type="file"
+      class="sr-only"
+      [multiple]="fileUpload.multiple()"
+      [accept]="fileUpload.accept()"
+      [disabled]="fileUpload.disabled()"
+      (change)="onFileSelect($event)"
+    />
+    <ng-content />
+  `,
+                    host: {
+                        'data-slot': 'file-upload-dropzone',
+                        '[class]': 'class()',
+                        '[attr.data-dragging]': 'isDragging()',
+                        '[attr.data-disabled]': 'fileUpload.disabled() || null',
+                        '(click)': 'openFilePicker()',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragleave)': 'onDragLeave($event)',
+                        '(drop)': 'onDrop($event)',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=file-upload-dropzone.js.map

package/esm2022/lib/components/file-upload/file-upload-dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-dropzone.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/file-upload/file-upload-dropzone.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { SC_FILE_UPLOAD } from './file-upload';\n\n@Component({\n  selector: '[scFileUploadDropzone]',\n  template: `\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"sr-only\"\n      [multiple]=\"fileUpload.multiple()\"\n      [accept]=\"fileUpload.accept()\"\n      [disabled]=\"fileUpload.disabled()\"\n      (change)=\"onFileSelect($event)\"\n    />\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'file-upload-dropzone',\n    '[class]': 'class()',\n    '[attr.data-dragging]': 'isDragging()',\n    '[attr.data-disabled]': 'fileUpload.disabled() || null',\n    '(click)': 'openFilePicker()',\n    '(dragover)': 'onDragOver($event)',\n    '(dragleave)': 'onDragLeave($event)',\n    '(drop)': 'onDrop($event)',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScFileUploadDropzone {\n  readonly fileUpload = inject(SC_FILE_UPLOAD);\n  private readonly elementRef = inject(ElementRef);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly isDragging = signal(false);\n\n  protected readonly class = computed(() =>\n    cn(\n      'relative flex min-h-[150px] cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed',\n      'transition-colors hover:border-primary/50 hover:bg-accent/50',\n      'data-[dragging=true]:border-primary data-[dragging=true]:bg-accent',\n      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      this.classInput(),\n    ),\n  );\n\n  openFilePicker(): void {\n    if (this.fileUpload.disabled()) return;\n    const input = this.elementRef.nativeElement.querySelector(\n      'input[type=\"file\"]',\n    ) as HTMLInputElement;\n    input?.click();\n  }\n\n  onFileSelect(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    if (input.files && input.files.length > 0) {\n      this.fileUpload.addFiles(input.files);\n      input.value = '';\n    }\n  }\n\n  onDragOver(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.fileUpload.disabled()) {\n      this.isDragging.set(true);\n    }\n  }\n\n  onDragLeave(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragging.set(false);\n  }\n\n  onDrop(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragging.set(false);\n\n    if (this.fileUpload.disabled()) return;\n\n    const files = event.dataTransfer?.files;\n    if (files && files.length > 0) {\n      this.fileUpload.addFiles(files);\n    }\n  }\n}\n"]}

package/esm2022/lib/components/file-upload/file-upload-item-delete.js

@@ -0,0 +1,29 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { buttonVariants } from '../button';
+import { cn } from '../../utils';
+import { SC_FILE_UPLOAD } from './file-upload';
+import * as i0 from "@angular/core";
+export class ScFileUploadItemDelete {
+    fileUpload = inject(SC_FILE_UPLOAD);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    fileId = input.required(...(ngDevMode ? [{ debugName: "fileId" }] : []));
+    class = computed(() => cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'text-muted-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        this.fileUpload.removeFile(this.fileId());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemDelete, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadItemDelete, isStandalone: true, selector: "button[scFileUploadItemDelete]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, fileId: { classPropertyName: "fileId", publicName: "fileId", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-item-delete", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemDelete, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[scFileUploadItemDelete]',
+                    host: {
+                        'data-slot': 'file-upload-item-delete',
+                        type: 'button',
+                        '[class]': 'class()',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], fileId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileId", required: true }] }] } });
+//# sourceMappingURL=file-upload-item-delete.js.map

package/esm2022/lib/components/file-upload/file-upload-item-delete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-item-delete.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/file-upload/file-upload-item-delete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAW/C,MAAM,OAAO,sBAAsB;IAChB,UAAU,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAE5C,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,MAAM,GAAG,KAAK,CAAC,QAAQ,iDAAU,CAAC;IAExB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,cAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAClD,uBAAuB,EACvB,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO;QACL,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAC5C,CAAC;uGAhBU,sBAAsB;2FAAtB,sBAAsB;;2FAAtB,sBAAsB;kBATlC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gCAAgC;oBAC1C,IAAI,EAAE;wBACJ,WAAW,EAAE,yBAAyB;wBACtC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,WAAW;qBACvB;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { buttonVariants } from '../button';\nimport { cn } from '../../utils';\nimport { SC_FILE_UPLOAD } from './file-upload';\n\n@Directive({\n  selector: 'button[scFileUploadItemDelete]',\n  host: {\n    'data-slot': 'file-upload-item-delete',\n    type: 'button',\n    '[class]': 'class()',\n    '(click)': 'onClick()',\n  },\n})\nexport class ScFileUploadItemDelete {\n  private readonly fileUpload = inject(SC_FILE_UPLOAD);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly fileId = input.required<string>();\n\n  protected readonly class = computed(() =>\n    cn(\n      buttonVariants({ variant: 'ghost', size: 'icon' }),\n      'text-muted-foreground',\n      this.classInput(),\n    ),\n  );\n\n  onClick(): void {\n    this.fileUpload.removeFile(this.fileId());\n  }\n}\n"]}

package/esm2022/lib/components/file-upload/file-upload-item-name.js

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

package/esm2022/lib/components/file-upload/file-upload-item-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-item-name.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/file-upload/file-upload-item-name.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,oBAAoB;IACtB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,qCAAqC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAC7D,CAAC;uGALS,oBAAoB;2FAApB,oBAAoB;;2FAApB,oBAAoB;kBAPhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,IAAI,EAAE;wBACJ,WAAW,EAAE,uBAAuB;wBACpC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: '[scFileUploadItemName]',\n  host: {\n    'data-slot': 'file-upload-item-name',\n    '[class]': 'class()',\n  },\n})\nexport class ScFileUploadItemName {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('flex-1 truncate text-sm font-medium', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/file-upload/file-upload-item-preview.js

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScFileUploadItemPreview {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
+    isImage = computed(() => this.file().file.type.startsWith('image/'), ...(ngDevMode ? [{ debugName: "isImage" }] : []));
+    previewUrl = computed(() => {
+        if (this.isImage()) {
+            return URL.createObjectURL(this.file().file);
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "previewUrl" }] : []));
+    class = computed(() => cn('flex size-10 items-center justify-center overflow-hidden rounded bg-muted', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ScFileUploadItemPreview, isStandalone: true, selector: "[scFileUploadItemPreview]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-item-preview" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    @if (isImage()) {
+      <img
+        [src]="previewUrl()"
+        [alt]="file().file.name"
+        class="size-full object-cover"
+      />
+    } @else {
+      <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: ScFileUploadItemPreview, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[scFileUploadItemPreview]',
+                    template: `
+    @if (isImage()) {
+      <img
+        [src]="previewUrl()"
+        [alt]="file().file.name"
+        class="size-full object-cover"
+      />
+    } @else {
+      <ng-content />
+    }
+  `,
+                    host: {
+                        'data-slot': 'file-upload-item-preview',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }] } });
+//# sourceMappingURL=file-upload-item-preview.js.map

package/esm2022/lib/components/file-upload/file-upload-item-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-item-preview.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/file-upload/file-upload-item-preview.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAuBjC,MAAM,OAAO,uBAAuB;IACzB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAoB,CAAC;IAEhC,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CACzC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,mDAC3C,CAAC;IAEiB,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC5C,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACnB,OAAO,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC;QAC/C,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,sDAAC,CAAC;IAEgB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,2EAA2E,EAC3E,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGApBS,uBAAuB;2FAAvB,uBAAuB,8bAlBxB;;;;;;;;;;GAUT;;2FAQU,uBAAuB;kBApBnC,SAAS;mBAAC;oBACT,QAAQ,EAAE,2BAA2B;oBACrC,QAAQ,EAAE;;;;;;;;;;GAUT;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,0BAA0B;wBACvC,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScFileUploadFile } from './file-upload';\n\n@Component({\n  selector: '[scFileUploadItemPreview]',\n  template: `\n    @if (isImage()) {\n      <img\n        [src]=\"previewUrl()\"\n        [alt]=\"file().file.name\"\n        class=\"size-full object-cover\"\n      />\n    } @else {\n      <ng-content />\n    }\n  `,\n  host: {\n    'data-slot': 'file-upload-item-preview',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScFileUploadItemPreview {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly file = input.required<ScFileUploadFile>();\n\n  protected readonly isImage = computed(() =>\n    this.file().file.type.startsWith('image/'),\n  );\n\n  protected readonly previewUrl = computed(() => {\n    if (this.isImage()) {\n      return URL.createObjectURL(this.file().file);\n    }\n    return '';\n  });\n\n  protected readonly class = computed(() =>\n    cn(\n      'flex size-10 items-center justify-center overflow-hidden rounded bg-muted',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/file-upload/file-upload-item-progress.js

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScFileUploadItemProgress {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
+    class = computed(() => cn('h-1 w-full overflow-hidden rounded-full bg-muted', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadItemProgress, isStandalone: true, selector: "[scFileUploadItemProgress]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-item-progress" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    <div
+      class="h-full rounded-full bg-primary transition-all"
+      [style.width.%]="file().progress || 0"
+    ></div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemProgress, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[scFileUploadItemProgress]',
+                    template: `
+    <div
+      class="h-full rounded-full bg-primary transition-all"
+      [style.width.%]="file().progress || 0"
+    ></div>
+  `,
+                    host: {
+                        'data-slot': 'file-upload-item-progress',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }] } });
+//# sourceMappingURL=file-upload-item-progress.js.map

package/esm2022/lib/components/file-upload/file-upload-item-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-item-progress.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/file-upload/file-upload-item-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAkBjC,MAAM,OAAO,wBAAwB;IAC1B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAoB,CAAC;IAEhC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,kDAAkD,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAC1E,CAAC;uGANS,wBAAwB;2FAAxB,wBAAwB,gcAbzB;;;;;GAKT;;2FAQU,wBAAwB;kBAfpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,4BAA4B;oBACtC,QAAQ,EAAE;;;;;GAKT;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,2BAA2B;wBACxC,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScFileUploadFile } from './file-upload';\n\n@Component({\n  selector: '[scFileUploadItemProgress]',\n  template: `\n    <div\n      class=\"h-full rounded-full bg-primary transition-all\"\n      [style.width.%]=\"file().progress || 0\"\n    ></div>\n  `,\n  host: {\n    'data-slot': 'file-upload-item-progress',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScFileUploadItemProgress {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly file = input.required<ScFileUploadFile>();\n\n  protected readonly class = computed(() =>\n    cn('h-1 w-full overflow-hidden rounded-full bg-muted', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/file-upload/file-upload-item-size.js

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScFileUploadItemSize {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
+    formattedSize = computed(() => {
+        const bytes = this.file().file.size;
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    }, ...(ngDevMode ? [{ debugName: "formattedSize" }] : []));
+    class = computed(() => cn('text-xs text-muted-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemSize, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScFileUploadItemSize, isStandalone: true, selector: "[scFileUploadItemSize]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "file-upload-item-size" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    {{ formattedSize() }}
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScFileUploadItemSize, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[scFileUploadItemSize]',
+                    template: `
+    {{ formattedSize() }}
+  `,
+                    host: {
+                        'data-slot': 'file-upload-item-size',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }] } });
+//# sourceMappingURL=file-upload-item-size.js.map

package/esm2022/lib/components/file-upload/file-upload-item-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-item-size.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/file-upload/file-upload-item-size.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAejC,MAAM,OAAO,oBAAoB;IACtB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAoB,CAAC;IAEhC,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC;QACpC,IAAI,KAAK,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAC9B,MAAM,CAAC,GAAG,IAAI,CAAC;QACf,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QACtC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACpD,OAAO,UAAU,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAC1E,CAAC,yDAAC,CAAC;IAEgB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,+BAA+B,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACvD,CAAC;uGAfS,oBAAoB;2FAApB,oBAAoB,wbAVrB;;GAET;;2FAQU,oBAAoB;kBAZhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,uBAAuB;wBACpC,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScFileUploadFile } from './file-upload';\n\n@Component({\n  selector: '[scFileUploadItemSize]',\n  template: `\n    {{ formattedSize() }}\n  `,\n  host: {\n    'data-slot': 'file-upload-item-size',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScFileUploadItemSize {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly file = input.required<ScFileUploadFile>();\n\n  protected readonly formattedSize = computed(() => {\n    const bytes = this.file().file.size;\n    if (bytes === 0) return '0 B';\n    const k = 1024;\n    const sizes = ['B', 'KB', 'MB', 'GB'];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];\n  });\n\n  protected readonly class = computed(() =>\n    cn('text-xs text-muted-foreground', this.classInput()),\n  );\n}\n"]}