@semantic-components/ui 0.64.0 → 0.66.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":"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","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/hover-card/hover-card-portal.js

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

package/esm2022/lib/components/hover-card/hover-card-portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card-portal.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/hover-card/hover-card-portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAK/D,MAAM,OAAO,iBAAiB;IACnB,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;uGADhC,iBAAiB;2FAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAH7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,gCAAgC;iBAC3C","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: 'ng-template[scHoverCardPortal]',\n})\nexport class ScHoverCardPortal {\n  readonly templateRef = inject(TemplateRef);\n}\n"]}

package/esm2022/lib/components/hover-card/hover-card-provider.js

@@ -0,0 +1,185 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, contentChild, effect, input, signal, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import { ScHoverCardPortal } from './hover-card-portal';
+import { ScHoverCardTrigger } from './hover-card-trigger';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/overlay";
+const positionMap = {
+    'top-start': {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetY: -4,
+    },
+    'top-center': {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetY: -4,
+    },
+    'top-end': {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4,
+    },
+    'bottom-start': {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetY: 4,
+    },
+    'bottom-center': {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetY: 4,
+    },
+    'bottom-end': {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 4,
+    },
+    'left-start': {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetX: -4,
+    },
+    'left-center': {
+        originX: 'start',
+        originY: 'center',
+        overlayX: 'end',
+        overlayY: 'center',
+        offsetX: -4,
+    },
+    'left-end': {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetX: -4,
+    },
+    'right-start': {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetX: 4,
+    },
+    'right-center': {
+        originX: 'end',
+        originY: 'center',
+        overlayX: 'start',
+        overlayY: 'center',
+        offsetX: 4,
+    },
+    'right-end': {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetX: 4,
+    },
+};
+export class ScHoverCardProvider {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    /** Which side the hover card appears on */
+    side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : []));
+    /** Alignment along the side */
+    align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** Delay before showing hover card (ms) */
+    openDelay = input(700, ...(ngDevMode ? [{ debugName: "openDelay" }] : []));
+    /** Delay before hiding hover card (ms) */
+    closeDelay = input(300, ...(ngDevMode ? [{ debugName: "closeDelay" }] : []));
+    /** Whether the hover card is logically open (controls animation state) */
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /** Whether the overlay should be physically open (stays true during close animation) */
+    overlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
+    triggerChild = contentChild(ScHoverCardTrigger, ...(ngDevMode ? [{ debugName: "triggerChild" }] : []));
+    hoverCardPortal = contentChild.required(ScHoverCardPortal);
+    origin = computed(() => this.triggerChild()?.overlayOrigin, ...(ngDevMode ? [{ debugName: "origin" }] : []));
+    position = computed(() => {
+        const side = this.side();
+        const align = this.align();
+        const key = `${side}-${align}`;
+        return positionMap[key];
+    }, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    class = computed(() => cn('contents', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    constructor() {
+        // When opening, open overlay immediately
+        effect(() => {
+            if (this.open()) {
+                this.overlayOpen.set(true);
+            }
+        });
+    }
+    show() {
+        this.open.set(true);
+    }
+    hide() {
+        this.open.set(false);
+        // overlayOpen will be set to false by onAnimationComplete
+    }
+    /** Called by hover-card when close animation completes */
+    onAnimationComplete() {
+        this.overlayOpen.set(false);
+    }
+    /** Cancel pending hide timeout on the trigger */
+    cancelTriggerHide() {
+        this.triggerChild()?.cancelHide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScHoverCardProvider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ScHoverCardProvider, isStandalone: true, selector: "div[scHoverCardProvider]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "hover-card-provider" }, properties: { "class": "class()" } }, queries: [{ propertyName: "triggerChild", first: true, predicate: ScHoverCardTrigger, descendants: true, isSignal: true }, { propertyName: "hoverCardPortal", first: true, predicate: ScHoverCardPortal, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-content />
+
+    @if (origin(); as origin) {
+      <ng-template
+        cdkConnectedOverlay
+        [cdkConnectedOverlayOrigin]="origin"
+        [cdkConnectedOverlayOpen]="overlayOpen()"
+        [cdkConnectedOverlayPositions]="[position()]"
+      >
+        <ng-container [ngTemplateOutlet]="hoverCardPortal().templateRef" />
+      </ng-template>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { 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: ScHoverCardProvider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scHoverCardProvider]',
+                    imports: [OverlayModule, NgTemplateOutlet],
+                    template: `
+    <ng-content />
+
+    @if (origin(); as origin) {
+      <ng-template
+        cdkConnectedOverlay
+        [cdkConnectedOverlayOrigin]="origin"
+        [cdkConnectedOverlayOpen]="overlayOpen()"
+        [cdkConnectedOverlayPositions]="[position()]"
+      >
+        <ng-container [ngTemplateOutlet]="hoverCardPortal().templateRef" />
+      </ng-template>
+    }
+  `,
+                    host: {
+                        'data-slot': 'hover-card-provider',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], triggerChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ScHoverCardTrigger), { isSignal: true }] }], hoverCardPortal: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ScHoverCardPortal), { isSignal: true }] }] } });
+//# sourceMappingURL=hover-card-provider.js.map

package/esm2022/lib/components/hover-card/hover-card-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card-provider.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/hover-card/hover-card-provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;;AAO1D,MAAM,WAAW,GAA2C;IAC1D,WAAW,EAAE;QACX,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,CAAC,CAAC;KACZ;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,QAAQ;QACjB,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,CAAC,CAAC;KACZ;IACD,SAAS,EAAE;QACT,OAAO,EAAE,KAAK;QACd,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,CAAC,CAAC;KACZ;IACD,cAAc,EAAE;QACd,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,CAAC;KACX;IACD,eAAe,EAAE;QACf,OAAO,EAAE,QAAQ;QACjB,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,CAAC;KACX;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,KAAK;QACd,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,CAAC;KACX;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,CAAC,CAAC;KACZ;IACD,aAAa,EAAE;QACb,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,CAAC,CAAC;KACZ;IACD,UAAU,EAAE;QACV,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,CAAC,CAAC;KACZ;IACD,aAAa,EAAE;QACb,OAAO,EAAE,KAAK;QACd,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,CAAC;KACX;IACD,cAAc,EAAE;QACd,OAAO,EAAE,KAAK;QACd,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,CAAC;KACX;IACD,WAAW,EAAE;QACX,OAAO,EAAE,KAAK;QACd,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,CAAC;KACX;CACF,CAAC;AA0BF,MAAM,OAAO,mBAAmB;IACrB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAE5D,2CAA2C;IAClC,IAAI,GAAG,KAAK,CAAkB,QAAQ,gDAAC,CAAC;IAEjD,+BAA+B;IACtB,KAAK,GAAG,KAAK,CAAmB,QAAQ,iDAAC,CAAC;IAEnD,2CAA2C;IAClC,SAAS,GAAG,KAAK,CAAS,GAAG,qDAAC,CAAC;IAExC,0CAA0C;IACjC,UAAU,GAAG,KAAK,CAAS,GAAG,sDAAC,CAAC;IAEzC,0EAA0E;IACjE,IAAI,GAAG,MAAM,CAAU,KAAK,gDAAC,CAAC;IAEvC,wFAAwF;IAC/E,WAAW,GAAG,MAAM,CAAU,KAAK,uDAAC,CAAC;IAE7B,YAAY,GAAG,YAAY,CAAC,kBAAkB,wDAAC,CAAC;IAC9C,eAAe,GAAG,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAErE,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,aAAa,kDAAC,CAAC;IAElD,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC3B,MAAM,GAAG,GAAgB,GAAG,IAAI,IAAI,KAAK,EAAE,CAAC;QAC5C,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC,oDAAC,CAAC;IAEgB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAAC,CAAC;IAE7E;QACE,yCAAyC;QACzC,MAAM,CAAC,GAAG,EAAE;YACV,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;gBAChB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI;QACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC;IAED,IAAI;QACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACrB,0DAA0D;IAC5D,CAAC;IAED,0DAA0D;IAC1D,mBAAmB;QACjB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,iDAAiD;IACjD,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,CAAC;IACpC,CAAC;uGA7DU,mBAAmB;2FAAnB,mBAAmB,s2BAqBe,kBAAkB,kGACJ,iBAAiB,gEA3ClE;;;;;;;;;;;;;GAaT,2DAdS,aAAa,0nCAAE,gBAAgB;;2FAsB9B,mBAAmB;kBAxB/B,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;oBACpC,OAAO,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC;oBAC1C,QAAQ,EAAE;;;;;;;;;;;;;GAaT;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,qBAAqB;wBAClC,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;klBAsB8C,kBAAkB,iGACJ,iBAAiB","sourcesContent":["import { ConnectedPosition, OverlayModule } from '@angular/cdk/overlay';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  effect,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScHoverCardPortal } from './hover-card-portal';\nimport { ScHoverCardTrigger } from './hover-card-trigger';\n\nexport type ScHoverCardSide = 'top' | 'right' | 'bottom' | 'left';\nexport type ScHoverCardAlign = 'start' | 'center' | 'end';\n\ntype PositionKey = `${ScHoverCardSide}-${ScHoverCardAlign}`;\n\nconst positionMap: Record<PositionKey, ConnectedPosition> = {\n  'top-start': {\n    originX: 'start',\n    originY: 'top',\n    overlayX: 'start',\n    overlayY: 'bottom',\n    offsetY: -4,\n  },\n  'top-center': {\n    originX: 'center',\n    originY: 'top',\n    overlayX: 'center',\n    overlayY: 'bottom',\n    offsetY: -4,\n  },\n  'top-end': {\n    originX: 'end',\n    originY: 'top',\n    overlayX: 'end',\n    overlayY: 'bottom',\n    offsetY: -4,\n  },\n  'bottom-start': {\n    originX: 'start',\n    originY: 'bottom',\n    overlayX: 'start',\n    overlayY: 'top',\n    offsetY: 4,\n  },\n  'bottom-center': {\n    originX: 'center',\n    originY: 'bottom',\n    overlayX: 'center',\n    overlayY: 'top',\n    offsetY: 4,\n  },\n  'bottom-end': {\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetY: 4,\n  },\n  'left-start': {\n    originX: 'start',\n    originY: 'top',\n    overlayX: 'end',\n    overlayY: 'top',\n    offsetX: -4,\n  },\n  'left-center': {\n    originX: 'start',\n    originY: 'center',\n    overlayX: 'end',\n    overlayY: 'center',\n    offsetX: -4,\n  },\n  'left-end': {\n    originX: 'start',\n    originY: 'bottom',\n    overlayX: 'end',\n    overlayY: 'bottom',\n    offsetX: -4,\n  },\n  'right-start': {\n    originX: 'end',\n    originY: 'top',\n    overlayX: 'start',\n    overlayY: 'top',\n    offsetX: 4,\n  },\n  'right-center': {\n    originX: 'end',\n    originY: 'center',\n    overlayX: 'start',\n    overlayY: 'center',\n    offsetX: 4,\n  },\n  'right-end': {\n    originX: 'end',\n    originY: 'bottom',\n    overlayX: 'start',\n    overlayY: 'bottom',\n    offsetX: 4,\n  },\n};\n\n@Component({\n  selector: 'div[scHoverCardProvider]',\n  imports: [OverlayModule, NgTemplateOutlet],\n  template: `\n    <ng-content />\n\n    @if (origin(); as origin) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"origin\"\n        [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n        [cdkConnectedOverlayPositions]=\"[position()]\"\n      >\n        <ng-container [ngTemplateOutlet]=\"hoverCardPortal().templateRef\" />\n      </ng-template>\n    }\n  `,\n  host: {\n    'data-slot': 'hover-card-provider',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScHoverCardProvider {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  /** Which side the hover card appears on */\n  readonly side = input<ScHoverCardSide>('bottom');\n\n  /** Alignment along the side */\n  readonly align = input<ScHoverCardAlign>('center');\n\n  /** Delay before showing hover card (ms) */\n  readonly openDelay = input<number>(700);\n\n  /** Delay before hiding hover card (ms) */\n  readonly closeDelay = input<number>(300);\n\n  /** Whether the hover card is logically open (controls animation state) */\n  readonly open = signal<boolean>(false);\n\n  /** Whether the overlay should be physically open (stays true during close animation) */\n  readonly overlayOpen = signal<boolean>(false);\n\n  private readonly triggerChild = contentChild(ScHoverCardTrigger);\n  protected readonly hoverCardPortal = contentChild.required(ScHoverCardPortal);\n\n  readonly origin = computed(() => this.triggerChild()?.overlayOrigin);\n\n  protected readonly position = computed(() => {\n    const side = this.side();\n    const align = this.align();\n    const key: PositionKey = `${side}-${align}`;\n    return positionMap[key];\n  });\n\n  protected readonly class = computed(() => cn('contents', this.classInput()));\n\n  constructor() {\n    // When opening, open overlay immediately\n    effect(() => {\n      if (this.open()) {\n        this.overlayOpen.set(true);\n      }\n    });\n  }\n\n  show(): void {\n    this.open.set(true);\n  }\n\n  hide(): void {\n    this.open.set(false);\n    // overlayOpen will be set to false by onAnimationComplete\n  }\n\n  /** Called by hover-card when close animation completes */\n  onAnimationComplete(): void {\n    this.overlayOpen.set(false);\n  }\n\n  /** Cancel pending hide timeout on the trigger */\n  cancelTriggerHide(): void {\n    this.triggerChild()?.cancelHide();\n  }\n}\n"]}

package/esm2022/lib/components/hover-card/hover-card-trigger.js

@@ -0,0 +1,72 @@
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { ScHoverCardProvider } from './hover-card-provider';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/overlay";
+export class ScHoverCardTrigger {
+    hoverCardProvider = inject(ScHoverCardProvider);
+    overlayOrigin = inject(CdkOverlayOrigin);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    showTimeout = null;
+    hideTimeout = null;
+    class = computed(() => cn('', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onMouseEnter() {
+        this.cancelHide();
+        this.scheduleShow();
+    }
+    onMouseLeave() {
+        this.cancelShow();
+        this.scheduleHide();
+    }
+    onFocus() {
+        this.cancelHide();
+        this.scheduleShow();
+    }
+    onBlur() {
+        this.cancelShow();
+        this.scheduleHide();
+    }
+    scheduleShow() {
+        this.cancelShow();
+        this.showTimeout = setTimeout(() => {
+            this.hoverCardProvider.show();
+        }, this.hoverCardProvider.openDelay());
+    }
+    cancelShow() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+    }
+    scheduleHide() {
+        this.cancelHide();
+        this.hideTimeout = setTimeout(() => {
+            this.hoverCardProvider.hide();
+        }, this.hoverCardProvider.closeDelay());
+    }
+    cancelHide() {
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScHoverCardTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScHoverCardTrigger, isStandalone: true, selector: "[scHoverCardTrigger]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "hover-card-trigger" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScHoverCardTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scHoverCardTrigger]',
+                    hostDirectives: [CdkOverlayOrigin],
+                    host: {
+                        'data-slot': 'hover-card-trigger',
+                        '[class]': 'class()',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=hover-card-trigger.js.map

package/esm2022/lib/components/hover-card/hover-card-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card-trigger.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/hover-card/hover-card-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;;AAc5D,MAAM,OAAO,kBAAkB;IACpB,iBAAiB,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;IAChD,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACzC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEpD,WAAW,GAAyC,IAAI,CAAC;IACzD,WAAW,GAAyC,IAAI,CAAC;IAE9C,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAAC,CAAC;IAErE,YAAY;QACV,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC;IACzC,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC/B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,UAAU;QACR,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC/B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC;uGAxDU,kBAAkB;2FAAlB,kBAAkB;;2FAAlB,kBAAkB;kBAZ9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;oBAChC,cAAc,EAAE,CAAC,gBAAgB,CAAC;oBAClC,IAAI,EAAE;wBACJ,WAAW,EAAE,oBAAoB;wBACjC,SAAS,EAAE,SAAS;wBACpB,cAAc,EAAE,gBAAgB;wBAChC,cAAc,EAAE,gBAAgB;wBAChC,SAAS,EAAE,WAAW;wBACtB,QAAQ,EAAE,UAAU;qBACrB;iBACF","sourcesContent":["import { CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScHoverCardProvider } from './hover-card-provider';\n\n@Directive({\n  selector: '[scHoverCardTrigger]',\n  hostDirectives: [CdkOverlayOrigin],\n  host: {\n    'data-slot': 'hover-card-trigger',\n    '[class]': 'class()',\n    '(mouseenter)': 'onMouseEnter()',\n    '(mouseleave)': 'onMouseLeave()',\n    '(focus)': 'onFocus()',\n    '(blur)': 'onBlur()',\n  },\n})\nexport class ScHoverCardTrigger {\n  readonly hoverCardProvider = inject(ScHoverCardProvider);\n  readonly overlayOrigin = inject(CdkOverlayOrigin);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  private showTimeout: ReturnType<typeof setTimeout> | null = null;\n  private hideTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  protected readonly class = computed(() => cn('', this.classInput()));\n\n  onMouseEnter(): void {\n    this.cancelHide();\n    this.scheduleShow();\n  }\n\n  onMouseLeave(): void {\n    this.cancelShow();\n    this.scheduleHide();\n  }\n\n  onFocus(): void {\n    this.cancelHide();\n    this.scheduleShow();\n  }\n\n  onBlur(): void {\n    this.cancelShow();\n    this.scheduleHide();\n  }\n\n  private scheduleShow(): void {\n    this.cancelShow();\n    this.showTimeout = setTimeout(() => {\n      this.hoverCardProvider.show();\n    }, this.hoverCardProvider.openDelay());\n  }\n\n  private cancelShow(): void {\n    if (this.showTimeout) {\n      clearTimeout(this.showTimeout);\n      this.showTimeout = null;\n    }\n  }\n\n  private scheduleHide(): void {\n    this.cancelHide();\n    this.hideTimeout = setTimeout(() => {\n      this.hoverCardProvider.hide();\n    }, this.hoverCardProvider.closeDelay());\n  }\n\n  cancelHide(): void {\n    if (this.hideTimeout) {\n      clearTimeout(this.hideTimeout);\n      this.hideTimeout = null;\n    }\n  }\n}\n"]}