@egose/shadcn-theme-ng 0.0.27 → 0.1.0

package/field/fesm2022/field.mjs

@@ -0,0 +1,351 @@
+import * as i0 from '@angular/core';
+import { input, Directive, inject, effect, booleanAttribute, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1 from '@spartan-ng/brain/field';
+import { BrnField, BrnFieldA11yService } from '@spartan-ng/brain/field';
+import { classes } from '@egose/shadcn-theme-ng/utils';
+import { cva } from 'class-variance-authority';
+import * as i1$1 from '@egose/shadcn-theme-ng/label';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+import { HlmSeparator } from '@egose/shadcn-theme-ng/separator';
+
+const fieldVariants = cva("data-[matches-spartan-invalid=true]:text-destructive gap-3 group/field flex w-full", {
+    variants: {
+        orientation: {
+            vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+            horizontal: [
+                "flex-row items-center",
+                "*:data-[slot=field-label]:flex-auto",
+                "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            ],
+            responsive: [
+                "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto [&>.sr-only]:w-auto",
+                "@md/field-group:*:data-[slot=field-label]:flex-auto",
+                "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            ],
+        },
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+    },
+});
+class HlmField {
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => fieldVariants({ orientation: this.orientation() }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmField, isStandalone: true, selector: "[hlmField],hlm-field", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group", "data-slot": "field" }, properties: { "attr.data-orientation": "orientation()" } }, hostDirectives: [{ directive: i1.BrnField, inputs: ["data-invalid", "data-invalid", "forceInvalid", "forceInvalid"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmField],hlm-field',
+                    hostDirectives: [{ directive: BrnField, inputs: ['data-invalid', 'forceInvalid'] }],
+                    host: {
+                        role: 'group',
+                        'data-slot': 'field',
+                        '[attr.data-orientation]': 'orientation()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+
+class HlmFieldContent {
+    constructor() {
+        classes(() => "gap-1 group/field-content flex flex-1 flex-col leading-snug");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldContent, isStandalone: true, selector: "[hlmFieldContent],hlm-field-content", host: { attributes: { "data-slot": "field-content" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmFieldContent],hlm-field-content',
+                    host: { 'data-slot': 'field-content' },
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmFieldDescription {
+    static _id = 0;
+    _a11y = inject(BrnFieldA11yService, { optional: true, host: true });
+    id = input(`hlm-field-description-${HlmFieldDescription._id++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    _registeredId;
+    _cleanup = this._a11y
+        ? effect(() => {
+            const a11y = this._a11y;
+            if (!a11y)
+                return;
+            const id = this.id();
+            if (this._registeredId && this._registeredId !== id) {
+                a11y.unregisterDescription(this._registeredId);
+            }
+            if (this._registeredId !== id) {
+                a11y.registerDescription(id);
+                this._registeredId = id;
+            }
+        })
+        : null;
+    constructor() {
+        classes(() => [
+            "text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance",
+            "last:mt-0 nth-last-2:-mt-1",
+            "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        ]);
+    }
+    ngOnDestroy() {
+        this._cleanup?.destroy();
+        if (this._registeredId) {
+            this._a11y?.unregisterDescription(this._registeredId);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmFieldDescription, isStandalone: true, selector: "[hlmFieldDescription],hlm-field-description", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-description" }, properties: { "attr.id": "id()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmFieldDescription],hlm-field-description',
+                    host: {
+                        'data-slot': 'field-description',
+                        '[attr.id]': 'id()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+class HlmFieldError {
+    static _id = 0;
+    _field = inject(BrnField, { optional: true });
+    _a11y = inject(BrnFieldA11yService, { optional: true, host: true });
+    _registeredId;
+    _hasParentField = !!this._field;
+    /** The unique ID for the field error. If none is supplied, it will be auto-generated. */
+    id = input(`hlm-field-error-${HlmFieldError._id++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /**
+     * The name of the specific validator error key to match (e.g. 'required').
+     * When omitted, the error is shown if any validation error is present.
+     */
+    validator = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validator" }] : /* istanbul ignore next */ []));
+    /** Forces the error message to be visible regardless of the control's validation state. */
+    forceShow = input(false, { ...(ngDevMode ? { debugName: "forceShow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _display = computed(() => !this._hasParentField || this.forceShow() || this._hasError(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_display" }] : /* istanbul ignore next */ []));
+    _hasError = computed(() => {
+        const errors = this._field?.errors();
+        if (!errors)
+            return false;
+        const validator = this.validator();
+        const spartanInvalid = this._field?.controlState()?.spartanInvalid;
+        if (!spartanInvalid)
+            return false;
+        return validator ? validator in errors : Object.keys(errors).length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasError" }] : /* istanbul ignore next */ []));
+    _cleanup = this._a11y
+        ? effect(() => {
+            const a11y = this._a11y;
+            if (!a11y)
+                return;
+            const id = this.id();
+            const hasError = this._hasError();
+            if (this._registeredId && (this._registeredId !== id || !hasError)) {
+                a11y.unregisterError(this._registeredId);
+                this._registeredId = undefined;
+            }
+            if (hasError && this._registeredId !== id) {
+                a11y.registerError(id);
+                this._registeredId = id;
+            }
+        })
+        : null;
+    constructor() {
+        classes(() => "text-destructive text-sm font-normal");
+    }
+    ngOnDestroy() {
+        this._cleanup?.destroy();
+        if (this._registeredId) {
+            this._a11y?.unregisterError(this._registeredId);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldError, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmFieldError, isStandalone: true, selector: "hlm-field-error", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, forceShow: { classPropertyName: "forceShow", publicName: "forceShow", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert", "data-slot": "field-error" }, properties: { "attr.id": "id()", "hidden": "!_display()" } }, ngImport: i0, template: `
+    @if (_display()) {
+      <ng-content />
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldError, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-field-error',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        role: 'alert',
+                        'data-slot': 'field-error',
+                        '[attr.id]': 'id()',
+                        '[hidden]': '!_display()',
+                    },
+                    template: `
+    @if (_display()) {
+      <ng-content />
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], validator: [{ type: i0.Input, args: [{ isSignal: true, alias: "validator", required: false }] }], forceShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceShow", required: false }] }] } });
+
+class HlmFieldGroup {
+    constructor() {
+        classes(() => "gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldGroup, isStandalone: true, selector: "[hlmFieldGroup],hlm-field-group", host: { attributes: { "data-slot": "field-group" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmFieldGroup],hlm-field-group',
+                    host: { 'data-slot': 'field-group' },
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmFieldLabel {
+    constructor() {
+        classes(() => [
+            "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit",
+            "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        ]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldLabel, isStandalone: true, selector: "[hlmFieldLabel],hlm-field-label", host: { attributes: { "data-slot": "field-label" } }, hostDirectives: [{ directive: i1$1.HlmLabel }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmFieldLabel],hlm-field-label',
+                    hostDirectives: [HlmLabel],
+                    host: { 'data-slot': 'field-label' },
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmFieldLegend {
+    variant = input('legend', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => "mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldLegend, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmFieldLegend, isStandalone: true, selector: "legend[hlmFieldLegend]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-legend" }, properties: { "attr.data-variant": "variant()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldLegend, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'legend[hlmFieldLegend]',
+                    host: {
+                        'data-slot': 'field-legend',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class HlmFieldSeparator {
+    constructor() {
+        classes(() => "-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldSeparator, isStandalone: true, selector: "hlm-field-separator", host: { attributes: { "data-slot": "field-separator" } }, ngImport: i0, template: "\n    <hlm-separator class=\"absolute inset-0 top-1/2\" />\n    <span\n      data-slot=\"field-separator-content\"\n      class=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\n    >\n      <ng-content />\n    </span>\n  ", isInline: true, dependencies: [{ kind: "directive", type: HlmSeparator, selector: "[hlmSeparator],hlm-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldSeparator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-field-separator',
+                    imports: [HlmSeparator],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { 'data-slot': 'field-separator' },
+                    template: "\n    <hlm-separator class=\"absolute inset-0 top-1/2\" />\n    <span\n      data-slot=\"field-separator-content\"\n      class=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\n    >\n      <ng-content />\n    </span>\n  ",
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmFieldSet {
+    constructor() {
+        classes(() => "gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldSet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldSet, isStandalone: true, selector: "fieldset[hlmFieldSet]", host: { attributes: { "data-slot": "field-set" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldSet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'fieldset[hlmFieldSet]',
+                    host: { 'data-slot': 'field-set' },
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmFieldTitle {
+    constructor() {
+        classes(() => "gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldTitle, isStandalone: true, selector: "[hlmFieldTitle],hlm-field-title", host: { attributes: { "data-slot": "field-label" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmFieldTitle],hlm-field-title',
+                    host: { 'data-slot': 'field-label' },
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of field
+ */
+const HlmFieldImports = [
+    HlmField,
+    HlmFieldContent,
+    HlmFieldDescription,
+    HlmFieldError,
+    HlmFieldGroup,
+    HlmFieldLabel,
+    HlmFieldLegend,
+    HlmFieldSeparator,
+    HlmFieldSet,
+    HlmFieldTitle,
+];
+class HlmFieldModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldModule, imports: [HlmField,
+            HlmFieldContent,
+            HlmFieldDescription,
+            HlmFieldError,
+            HlmFieldGroup,
+            HlmFieldLabel,
+            HlmFieldLegend,
+            HlmFieldSeparator,
+            HlmFieldSet,
+            HlmFieldTitle], exports: [HlmField,
+            HlmFieldContent,
+            HlmFieldDescription,
+            HlmFieldError,
+            HlmFieldGroup,
+            HlmFieldLabel,
+            HlmFieldLegend,
+            HlmFieldSeparator,
+            HlmFieldSet,
+            HlmFieldTitle] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmFieldImports],
+                    exports: [...HlmFieldImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HlmField, HlmFieldContent, HlmFieldDescription, HlmFieldError, HlmFieldGroup, HlmFieldImports, HlmFieldLabel, HlmFieldLegend, HlmFieldModule, HlmFieldSeparator, HlmFieldSet, HlmFieldTitle };
+

package/field/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "field",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@spartan-ng/brain": "^1.1.1"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/field.mjs",
+  "typings": "types/field.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/field.d.ts",
+      "default": "./fesm2022/field.mjs"
+    }
+  },
+  "type": "module"
+}

package/field/types/field.d.ts

@@ -0,0 +1,107 @@
+import * as i0 from '@angular/core';
+import { OnDestroy } from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as i1 from '@spartan-ng/brain/field';
+import { BooleanInput } from '@angular/cdk/coercion';
+import * as i1$1 from '@egose/shadcn-theme-ng/label';
+
+declare const fieldVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type FieldVariants = VariantProps<typeof fieldVariants>;
+declare class HlmField {
+    readonly orientation: i0.InputSignal<"vertical" | "horizontal" | "responsive" | null | undefined>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmField, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmField, "[hlmField],hlm-field", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnField; inputs: { "data-invalid": "data-invalid"; "forceInvalid": "forceInvalid"; }; outputs: {}; }]>;
+}
+
+declare class HlmFieldContent {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmFieldContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmFieldContent, "[hlmFieldContent],hlm-field-content", never, {}, {}, never, never, true, never>;
+}
+
+declare class HlmFieldDescription implements OnDestroy {
+    private static _id;
+    private readonly _a11y;
+    readonly id: i0.InputSignal<string>;
+    private _registeredId?;
+    private readonly _cleanup;
+    constructor();
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmFieldDescription, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmFieldDescription, "[hlmFieldDescription],hlm-field-description", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class HlmFieldError implements OnDestroy {
+    private static _id;
+    private readonly _field;
+    private readonly _a11y;
+    private _registeredId?;
+    private readonly _hasParentField;
+    /** The unique ID for the field error. If none is supplied, it will be auto-generated. */
+    readonly id: i0.InputSignal<string>;
+    /**
+     * The name of the specific validator error key to match (e.g. 'required').
+     * When omitted, the error is shown if any validation error is present.
+     */
+    readonly validator: i0.InputSignal<string | undefined>;
+    /** Forces the error message to be visible regardless of the control's validation state. */
+    readonly forceShow: i0.InputSignalWithTransform<boolean, BooleanInput>;
+    protected readonly _display: i0.Signal<boolean>;
+    protected readonly _hasError: i0.Signal<boolean>;
+    private readonly _cleanup;
+    constructor();
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmFieldError, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmFieldError, "hlm-field-error", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "forceShow": { "alias": "forceShow"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class HlmFieldGroup {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmFieldGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmFieldGroup, "[hlmFieldGroup],hlm-field-group", never, {}, {}, never, never, true, never>;
+}
+
+declare class HlmFieldLabel {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmFieldLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmFieldLabel, "[hlmFieldLabel],hlm-field-label", never, {}, {}, never, never, true, [{ directive: typeof i1$1.HlmLabel; inputs: {}; outputs: {}; }]>;
+}
+
+declare class HlmFieldLegend {
+    readonly variant: i0.InputSignal<"label" | "legend">;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmFieldLegend, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmFieldLegend, "legend[hlmFieldLegend]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class HlmFieldSeparator {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmFieldSeparator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmFieldSeparator, "hlm-field-separator", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class HlmFieldSet {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmFieldSet, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmFieldSet, "fieldset[hlmFieldSet]", never, {}, {}, never, never, true, never>;
+}
+
+declare class HlmFieldTitle {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmFieldTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmFieldTitle, "[hlmFieldTitle],hlm-field-title", never, {}, {}, never, never, true, never>;
+}
+
+declare const HlmFieldImports: readonly [typeof HlmField, typeof HlmFieldContent, typeof HlmFieldDescription, typeof HlmFieldError, typeof HlmFieldGroup, typeof HlmFieldLabel, typeof HlmFieldLegend, typeof HlmFieldSeparator, typeof HlmFieldSet, typeof HlmFieldTitle];
+declare class HlmFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmFieldModule, never, [typeof HlmField, typeof HlmFieldContent, typeof HlmFieldDescription, typeof HlmFieldError, typeof HlmFieldGroup, typeof HlmFieldLabel, typeof HlmFieldLegend, typeof HlmFieldSeparator, typeof HlmFieldSet, typeof HlmFieldTitle], [typeof HlmField, typeof HlmFieldContent, typeof HlmFieldDescription, typeof HlmFieldError, typeof HlmFieldGroup, typeof HlmFieldLabel, typeof HlmFieldLegend, typeof HlmFieldSeparator, typeof HlmFieldSet, typeof HlmFieldTitle]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<HlmFieldModule>;
+}
+
+export { HlmField, HlmFieldContent, HlmFieldDescription, HlmFieldError, HlmFieldGroup, HlmFieldImports, HlmFieldLabel, HlmFieldLegend, HlmFieldModule, HlmFieldSeparator, HlmFieldSet, HlmFieldTitle };
+export type { FieldVariants };

package/form-checkbox/README.md

@@ -0,0 +1,3 @@
+# Form Checkbox Subpath
+
+This project ships only as `@egose/shadcn-theme-ng/form-checkbox` or `@egose/shadcn-theme-ng-tw/form-checkbox`. See the [package README](../../README.md) for installation, compatibility, Tailwind variant, test, and release guidance. Do not publish this project directory independently.

package/form-checkbox/fesm2022/form-checkbox.mjs

@@ -0,0 +1,94 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+import { HlmCheckbox } from '@egose/shadcn-theme-ng/checkbox';
+import { HlmFormIdGenerator, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
+import { EgFormField } from '@egose/shadcn-theme-ng/form-field-simple';
+import { hlm } from '@egose/shadcn-theme-ng/utils';
+
+class EgFormCheckbox {
+    formGroupDirective = inject(FormGroupDirective);
+    generatedId = inject(HlmFormIdGenerator).generate('eg-form-checkbox');
+    // Classes
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    // Inputs
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    controlId = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    controlName = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlName" }] : /* istanbul ignore next */ []));
+    error = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    checked = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    effectiveId = computed(() => this.controlId() || this.id() || this.generatedId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => `${this.effectiveId()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    describedBy() {
+        const control = this.formGroupDirective.form.get(this.controlName());
+        return this.error() && control?.invalid && (control.dirty || control.touched)
+            ? this.errorId()
+            : this.hint()
+                ? this.hintId()
+                : null;
+    }
+    // Styling
+    checkboxClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkboxClass" }] : /* istanbul ignore next */ []));
+    labelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    // Computed styling
+    $checkboxClass = computed(() => hlm(this.checkboxClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$checkboxClass" }] : /* istanbul ignore next */ []));
+    $labelClass = computed(() => hlm(this.labelClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
+    $errorClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
+    $hintClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormCheckbox, isStandalone: true, selector: "eg-form-checkbox", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checkboxClass: { classPropertyName: "checkboxClass", publicName: "checkboxClass", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, $errorClass: { classPropertyName: "$errorClass", publicName: "$errorClass", isSignal: true, isRequired: false, transformFunction: null }, $hintClass: { classPropertyName: "$hintClass", publicName: "$hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let err = error();\n    @let hnt = hint();\n    @let rqrd = required();\n\n    <eg-form-field>\n      <div class=\"flex items-center gap-1\">\n        <hlm-checkbox\n          [id]=\"effectiveId()\"\n          [name]=\"cnm || name() || null\"\n          [formControlName]=\"cnm\"\n          [class]=\"$checkboxClass()\"\n          [checked]=\"checked()\"\n          [required]=\"rqrd\"\n          [wrapperDisabled]=\"disabled()\"\n          [aria-describedby]=\"describedBy()\"\n        />\n        <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\">\n          {{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      </div>\n\n      @if (err) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ err }}\n        </hlm-error>\n      }\n\n      @if (hnt) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hnt }}\n        </hlm-hint>\n      }\n    </eg-form-field>\n  ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "id", "aria-label", "aria-labelledby", "aria-describedby", "checked", "name", "required", "disabled", "wrapperDisabled"], outputs: ["checkedChange", "changed"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "component", type: EgFormField, selector: "eg-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormCheckbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-form-checkbox',
+                    standalone: true,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [ReactiveFormsModule, HlmCheckbox, HlmLabel, EgFormField, HlmError, HlmHint],
+                    providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
+                    template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let err = error();\n    @let hnt = hint();\n    @let rqrd = required();\n\n    <eg-form-field>\n      <div class=\"flex items-center gap-1\">\n        <hlm-checkbox\n          [id]=\"effectiveId()\"\n          [name]=\"cnm || name() || null\"\n          [formControlName]=\"cnm\"\n          [class]=\"$checkboxClass()\"\n          [checked]=\"checked()\"\n          [required]=\"rqrd\"\n          [wrapperDisabled]=\"disabled()\"\n          [aria-describedby]=\"describedBy()\"\n        />\n        <label hlmLabel [for]=\"effectiveId()\" [class]=\"$labelClass()\">\n          {{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      </div>\n\n      @if (err) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ err }}\n        </hlm-error>\n      }\n\n      @if (hnt) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hnt }}\n        </hlm-hint>\n      }\n    </eg-form-field>\n  ",
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkboxClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxClass", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], $errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "$errorClass", required: false }] }], $hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "$hintClass", required: false }] }] } });
+
+/*
+ * Public API Surface of form-checkbox
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EgFormCheckbox };
+

package/form-checkbox/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "form-checkbox",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0 || ^22.0.0",
+    "@angular/core": "^20.3.0 || ^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/form-checkbox.mjs",
+  "typings": "types/form-checkbox.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/form-checkbox.d.ts",
+      "default": "./fesm2022/form-checkbox.mjs"
+    }
+  },
+  "type": "module"
+}