@weeehaoooz/talos-ui 0.1.0

package/fesm2022/weeehaoooz-talos-ui-form-checkbox.mjs

@@ -0,0 +1,548 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, signal, computed, forwardRef, Directive, effect, Component, viewChild, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+let groupCounter = 0;
+class TalosCheckboxGroupDirective {
+    elementRef = inject((ElementRef));
+    /** Name attribute for the checkbox group */
+    name = input(`talos-checkbox-group-${++groupCounter}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Size applied to all child checkboxes unless overridden */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Visual color variant applied to all child checkboxes */
+    variant = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Layout direction of checkboxes within group */
+    direction = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Whether the entire checkbox group is disabled */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Whether the group is in an invalid error state */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Emits when group selection array changes */
+    valueChange = output();
+    // Internal state
+    value = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isTouched = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
+    /** Effective disabled state taking into account CVA and input */
+    effectiveDisabled = computed(() => this.disabled() || this.isDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    // --- ControlValueAccessor Interface ---
+    writeValue(val) {
+        if (Array.isArray(val)) {
+            this.value.set([...val]);
+        }
+        else if (val === null || val === undefined) {
+            this.value.set([]);
+        }
+        else {
+            this.value.set([val]);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    /** Helper to check if a specific item value is currently selected in group */
+    isValueSelected(val) {
+        return this.value().includes(val);
+    }
+    /** Toggles the selection status of a value in the group array */
+    toggleValue(val) {
+        if (this.effectiveDisabled() || val === undefined)
+            return;
+        const current = this.value();
+        let updated;
+        if (current.includes(val)) {
+            updated = current.filter((v) => v !== val);
+        }
+        else {
+            updated = [...current, val];
+        }
+        this.value.set(updated);
+        this.onChange(updated);
+        this.valueChange.emit(updated);
+        this.markAsTouched();
+    }
+    /** Selects all passed values */
+    selectAll(values) {
+        if (this.effectiveDisabled())
+            return;
+        const uniqueValues = Array.from(new Set(values));
+        this.value.set(uniqueValues);
+        this.onChange(uniqueValues);
+        this.valueChange.emit(uniqueValues);
+        this.markAsTouched();
+    }
+    /** Deselects all values */
+    deselectAll() {
+        if (this.effectiveDisabled())
+            return;
+        this.value.set([]);
+        this.onChange([]);
+        this.valueChange.emit([]);
+        this.markAsTouched();
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: TalosCheckboxGroupDirective, isStandalone: true, selector: "[talosCheckboxGroup], [talos-checkbox-group]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "class.direction-vertical": "direction() === \"vertical\"", "class.direction-horizontal": "direction() === \"horizontal\"", "class.is-disabled": "effectiveDisabled()", "class.is-invalid": "invalid()" }, classAttribute: "talos-checkbox-group" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TalosCheckboxGroupDirective),
+                multi: true
+            }
+        ], exportAs: ["talosCheckboxGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[talosCheckboxGroup], [talos-checkbox-group]',
+                    exportAs: 'talosCheckboxGroup',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TalosCheckboxGroupDirective),
+                            multi: true
+                        }
+                    ],
+                    host: {
+                        'class': 'talos-checkbox-group',
+                        'role': 'group',
+                        '[class.direction-vertical]': 'direction() === "vertical"',
+                        '[class.direction-horizontal]': 'direction() === "horizontal"',
+                        '[class.is-disabled]': 'effectiveDisabled()',
+                        '[class.is-invalid]': 'invalid()'
+                    }
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class TalosCheckboxDirective {
+    elementRef = inject((ElementRef));
+    groupDir = inject(TalosCheckboxGroupDirective, { optional: true });
+    /** Value associated with this checkbox when part of a group */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Standalone checked state */
+    checked = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Sizing variation for the checkbox */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Visual color variant for the checkbox */
+    variant = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Whether the checkbox is disabled */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Whether the checkbox is in an invalid error state */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Whether the checkbox is in an indeterminate visual & property state */
+    indeterminate = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /** Output event emitted when checked state changes */
+    checkedChange = output();
+    // Computed state
+    effectiveSize = computed(() => {
+        return this.groupDir ? this.groupDir.size() : this.size();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    effectiveVariant = computed(() => {
+        return this.groupDir ? this.groupDir.variant() : this.variant();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveVariant" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => {
+        return this.disabled() || (this.groupDir ? this.groupDir.effectiveDisabled() : false);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    effectiveInvalid = computed(() => {
+        return this.invalid() || (this.groupDir ? this.groupDir.invalid() : false);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveInvalid" }] : /* istanbul ignore next */ []));
+    isChecked = computed(() => {
+        if (this.groupDir && this.value() !== undefined) {
+            return this.groupDir.isValueSelected(this.value());
+        }
+        return this.checked();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep native input element indeterminate property synced
+        effect(() => {
+            const isIndeterminate = this.indeterminate();
+            if (this.elementRef.nativeElement) {
+                this.elementRef.nativeElement.indeterminate = isIndeterminate;
+            }
+        });
+    }
+    onNativeChange(event) {
+        if (this.effectiveDisabled())
+            return;
+        const target = event.target;
+        const isChecked = target.checked;
+        if (this.groupDir && this.value() !== undefined) {
+            this.groupDir.toggleValue(this.value());
+        }
+        this.checkedChange.emit(isChecked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: TalosCheckboxDirective, isStandalone: true, selector: "input[type=\"checkbox\"][talosCheckbox], input[type=\"checkbox\"][talos-checkbox]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { listeners: { "change": "onNativeChange($event)" }, properties: { "class.checkbox-sm": "effectiveSize() === \"sm\"", "class.checkbox-md": "effectiveSize() === \"md\"", "class.checkbox-lg": "effectiveSize() === \"lg\"", "class.talos-checkbox-primary": "effectiveVariant() === \"primary\"", "class.talos-checkbox-secondary": "effectiveVariant() === \"secondary\"", "class.talos-checkbox-success": "effectiveVariant() === \"success\"", "class.talos-checkbox-danger": "effectiveVariant() === \"danger\"", "class.is-invalid": "effectiveInvalid()", "class.is-indeterminate": "indeterminate()", "checked": "isChecked()", "disabled": "effectiveDisabled()", "indeterminate": "indeterminate()" }, classAttribute: "talos-checkbox" }, exportAs: ["talosCheckbox"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type="checkbox"][talosCheckbox], input[type="checkbox"][talos-checkbox]',
+                    exportAs: 'talosCheckbox',
+                    host: {
+                        'class': 'talos-checkbox',
+                        '[class.checkbox-sm]': 'effectiveSize() === "sm"',
+                        '[class.checkbox-md]': 'effectiveSize() === "md"',
+                        '[class.checkbox-lg]': 'effectiveSize() === "lg"',
+                        '[class.talos-checkbox-primary]': 'effectiveVariant() === "primary"',
+                        '[class.talos-checkbox-secondary]': 'effectiveVariant() === "secondary"',
+                        '[class.talos-checkbox-success]': 'effectiveVariant() === "success"',
+                        '[class.talos-checkbox-danger]': 'effectiveVariant() === "danger"',
+                        '[class.is-invalid]': 'effectiveInvalid()',
+                        '[class.is-indeterminate]': 'indeterminate()',
+                        '[checked]': 'isChecked()',
+                        '[disabled]': 'effectiveDisabled()',
+                        '[indeterminate]': 'indeterminate()',
+                        '(change)': 'onNativeChange($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+
+class TalosCheckboxGroupComponent {
+    groupDir = inject(TalosCheckboxGroupDirective, { self: true });
+    // Inputs forwarded via hostDirectives or component bindings
+    name = input(this.groupDir.name(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    direction = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosCheckboxGroupComponent, isStandalone: true, selector: "talos-checkbox-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, hostDirectives: [{ directive: TalosCheckboxGroupDirective, inputs: ["name", "name", "size", "size", "variant", "variant", "direction", "direction", "disabled", "disabled", "invalid", "invalid"], outputs: ["valueChange", "valueChange"] }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'talos-checkbox-group',
+                    template: '<ng-content></ng-content>',
+                    hostDirectives: [
+                        {
+                            directive: TalosCheckboxGroupDirective,
+                            inputs: ['name', 'size', 'variant', 'direction', 'disabled', 'invalid'],
+                            outputs: ['valueChange']
+                        }
+                    ]
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class TalosCheckboxParentDirective {
+    elementRef = inject((ElementRef));
+    checkboxDir = inject(TalosCheckboxDirective, { optional: true, self: true });
+    ancestorGroup = inject(TalosCheckboxGroupDirective, { optional: true });
+    /** Optional explicit reference to a TalosCheckboxGroupDirective instance */
+    group = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+    /** List of all selectable values for the parent checkbox to manage */
+    values = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    /** Effective active checkbox group */
+    targetGroup = computed(() => this.group() || this.ancestorGroup, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "targetGroup" }] : /* istanbul ignore next */ []));
+    /** Whether all target values are selected */
+    isAllSelected = computed(() => {
+        const grp = this.targetGroup();
+        const allVals = this.values();
+        if (!grp || allVals.length === 0)
+            return false;
+        const selectedVals = grp.value();
+        return allVals.every((val) => selectedVals.includes(val));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAllSelected" }] : /* istanbul ignore next */ []));
+    /** Whether some (but not all) target values are selected */
+    isIndeterminate = computed(() => {
+        const grp = this.targetGroup();
+        const allVals = this.values();
+        if (!grp || allVals.length === 0)
+            return false;
+        const selectedVals = grp.value();
+        const count = allVals.filter((val) => selectedVals.includes(val)).length;
+        return count > 0 && count < allVals.length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep element's indeterminate property synced dynamically
+        effect(() => {
+            const indeterminate = this.isIndeterminate();
+            if (this.elementRef.nativeElement) {
+                this.elementRef.nativeElement.indeterminate = indeterminate;
+            }
+        });
+    }
+    onParentToggle(event) {
+        const grp = this.targetGroup();
+        const allVals = this.values();
+        if (!grp || allVals.length === 0)
+            return;
+        if (this.isAllSelected()) {
+            // If currently all selected, deselect all values managed by this parent
+            const currentSelected = grp.value();
+            const remaining = currentSelected.filter((v) => !allVals.includes(v));
+            grp.selectAll(remaining);
+        }
+        else {
+            // If none or indeterminate, select all values managed by this parent
+            const currentSelected = grp.value();
+            const updated = Array.from(new Set([...currentSelected, ...allVals]));
+            grp.selectAll(updated);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxParentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: TalosCheckboxParentDirective, isStandalone: true, selector: "input[type=\"checkbox\"][talosCheckboxParent], input[type=\"checkbox\"][talos-checkbox-parent], input[type=\"checkbox\"][talosSelectAll], input[type=\"checkbox\"][talos-select-all]", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "change": "onParentToggle($event)" }, properties: { "checked": "isAllSelected()", "indeterminate": "isIndeterminate()", "class.is-indeterminate": "isIndeterminate()" } }, exportAs: ["talosCheckboxParent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxParentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type="checkbox"][talosCheckboxParent], input[type="checkbox"][talos-checkbox-parent], input[type="checkbox"][talosSelectAll], input[type="checkbox"][talos-select-all]',
+                    exportAs: 'talosCheckboxParent',
+                    host: {
+                        '[checked]': 'isAllSelected()',
+                        '[indeterminate]': 'isIndeterminate()',
+                        '[class.is-indeterminate]': 'isIndeterminate()',
+                        '(change)': 'onParentToggle($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }] } });
+
+let checkboxCounter = 0;
+class TalosCheckboxComponent {
+    inputRef = viewChild('inputEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    groupDir = inject(TalosCheckboxGroupDirective, { optional: true });
+    /** Value associated with this checkbox when part of a group */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Standalone checked state */
+    checked = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Sizing variation for the checkbox */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Visual color variant for the checkbox */
+    variant = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Whether the checkbox is disabled */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Whether the checkbox is in an invalid error state */
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** Whether the checkbox is in an indeterminate visual & property state */
+    indeterminate = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /** Emitted when checked state changes */
+    checkedChange = output();
+    // Internal reactive state for CVA
+    internalValue = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isTouched = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
+    // Effective state computations
+    effectiveSize = computed(() => {
+        return this.groupDir ? this.groupDir.size() : this.size();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    effectiveVariant = computed(() => {
+        return this.groupDir ? this.groupDir.variant() : this.variant();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveVariant" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => {
+        return this.disabled() || this.isDisabled() || (this.groupDir ? this.groupDir.effectiveDisabled() : false);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    effectiveInvalid = computed(() => {
+        return this.invalid() || (this.groupDir ? this.groupDir.invalid() : false);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveInvalid" }] : /* istanbul ignore next */ []));
+    isChecked = computed(() => {
+        if (this.groupDir && this.value() !== undefined) {
+            return this.groupDir.isValueSelected(this.value());
+        }
+        return this.internalValue() || this.checked();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    // --- ControlValueAccessor Implementation ---
+    writeValue(val) {
+        this.internalValue.set(!!val);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    onDirectiveCheckedChange(isChecked) {
+        if (this.effectiveDisabled())
+            return;
+        this.internalValue.set(isChecked);
+        this.onChange(isChecked);
+        this.checkedChange.emit(isChecked);
+        this.markAsTouched();
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    /** Focuses the native HTML input element */
+    focusInput() {
+        this.inputRef()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: TalosCheckboxComponent, isStandalone: true, selector: "talos-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { classAttribute: "talos-checkbox-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TalosCheckboxComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <label class="talos-checkbox-wrapper" [class.is-disabled]="effectiveDisabled()">
+      <input
+        #inputEl
+        type="checkbox"
+        talosCheckbox
+        [value]="value()"
+        [checked]="isChecked()"
+        [size]="effectiveSize()"
+        [variant]="effectiveVariant()"
+        [disabled]="effectiveDisabled()"
+        [invalid]="effectiveInvalid()"
+        [indeterminate]="indeterminate()"
+        (checkedChange)="onDirectiveCheckedChange($event)"
+      />
+      <span class="talos-checkbox-label">
+        <ng-content></ng-content>
+      </span>
+    </label>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TalosCheckboxDirective, selector: "input[type=\"checkbox\"][talosCheckbox], input[type=\"checkbox\"][talos-checkbox]", inputs: ["value", "checked", "size", "variant", "disabled", "invalid", "indeterminate"], outputs: ["checkedChange"], exportAs: ["talosCheckbox"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'talos-checkbox',
+                    imports: [TalosCheckboxDirective],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TalosCheckboxComponent),
+                            multi: true
+                        }
+                    ],
+                    host: {
+                        'class': 'talos-checkbox-host'
+                    },
+                    template: `
+    <label class="talos-checkbox-wrapper" [class.is-disabled]="effectiveDisabled()">
+      <input
+        #inputEl
+        type="checkbox"
+        talosCheckbox
+        [value]="value()"
+        [checked]="isChecked()"
+        [size]="effectiveSize()"
+        [variant]="effectiveVariant()"
+        [disabled]="effectiveDisabled()"
+        [invalid]="effectiveInvalid()"
+        [indeterminate]="indeterminate()"
+        (checkedChange)="onDirectiveCheckedChange($event)"
+      />
+      <span class="talos-checkbox-label">
+        <ng-content></ng-content>
+      </span>
+    </label>
+  `
+                }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+
+/**
+ * Convenience NgModule wrapping standalone checkbox directives and components.
+ *
+ * Allows developers who prefer `TalosCheckboxModule` to import all checkbox utilities in one go.
+ */
+class TalosCheckboxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxModule, imports: [TalosCheckboxDirective,
+            TalosCheckboxGroupDirective,
+            TalosCheckboxGroupComponent,
+            TalosCheckboxParentDirective,
+            TalosCheckboxComponent], exports: [TalosCheckboxDirective,
+            TalosCheckboxGroupDirective,
+            TalosCheckboxGroupComponent,
+            TalosCheckboxParentDirective,
+            TalosCheckboxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TalosCheckboxDirective,
+                        TalosCheckboxGroupDirective,
+                        TalosCheckboxGroupComponent,
+                        TalosCheckboxParentDirective,
+                        TalosCheckboxComponent
+                    ],
+                    exports: [
+                        TalosCheckboxDirective,
+                        TalosCheckboxGroupDirective,
+                        TalosCheckboxGroupComponent,
+                        TalosCheckboxParentDirective,
+                        TalosCheckboxComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TalosCheckboxComponent, TalosCheckboxDirective, TalosCheckboxGroupComponent, TalosCheckboxGroupDirective, TalosCheckboxModule, TalosCheckboxParentDirective };
+//# sourceMappingURL=weeehaoooz-talos-ui-form-checkbox.mjs.map