@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-checkbox.mjs

@@ -0,0 +1,593 @@
+import * as i0 from '@angular/core';
+import { input, model, output, inject, ElementRef, DestroyRef, signal, computed, afterNextRender, isDevMode, linkedSignal, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgControl, NgForm, FormGroupDirective, Validators } from '@angular/forms';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isObservable, merge } from 'rxjs';
+import { tv } from 'tailwind-variants';
+import { TW_ERROR_STATE_MATCHER } from '@cdevhub/ngx-tw/core';
+import { FormFieldControl, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
+
+// ── tv() config ──────────────────────────────────────────────────
+const checkboxVariants = tv({
+    slots: {
+        // `items-start` aligns the boxWrap with the top of the label container; combined with
+        // a `min-h-N` matching the label's first-line line-height on boxWrap, the box stays
+        // centered on the first line of the label whether it spans one line or many.
+        root: 'relative inline-flex items-start gap-3 cursor-pointer select-none rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+        boxWrap: 'relative inline-flex items-center justify-center shrink-0',
+        box: 'inline-flex items-center justify-center rounded-md border transition-colors duration-normal motion-reduce:transition-none',
+        icon: 'absolute inset-0 flex items-center justify-center pointer-events-none empty:hidden',
+        labelWrap: 'flex flex-col min-w-0 empty:hidden',
+        label: 'font-medium text-fg empty:hidden',
+        description: 'text-fg-muted empty:hidden',
+    },
+    variants: {
+        size: {
+            xs: {
+                // `size-3.5` half-step: aligns with text-xs/leading-4. Codified per CLAUDE.md.
+                box: 'size-3.5',
+                icon: '[&_svg]:size-3',
+                boxWrap: 'min-h-4',
+                label: 'text-xs leading-4',
+                description: 'text-2xs leading-4',
+            },
+            sm: {
+                box: 'size-4',
+                icon: '[&_svg]:size-3',
+                boxWrap: 'min-h-5',
+                label: 'text-sm leading-5',
+                description: 'text-xs leading-4',
+            },
+            md: {
+                box: 'size-5',
+                // md icon uses `size-3.5` (14px) — proportional inset (70%) of the
+                // size-5 (20px) box; the half-step is the only size that fills the
+                // checkmark without crowding the box edges.
+                icon: '[&_svg]:size-3.5',
+                boxWrap: 'min-h-5',
+                label: 'text-sm leading-5',
+                description: 'text-xs leading-4',
+            },
+            lg: {
+                box: 'size-6',
+                icon: '[&_svg]:size-4',
+                boxWrap: 'min-h-6',
+                label: 'text-base leading-6',
+                description: 'text-sm leading-5',
+            },
+            xl: {
+                box: 'size-7',
+                icon: '[&_svg]:size-5',
+                // xl box (28px) > default text-base line-height (24px); bump leading to leading-7
+                // so the first line height matches the box and they align cleanly.
+                boxWrap: 'min-h-7',
+                label: 'text-base leading-7',
+                description: 'text-sm leading-5',
+            },
+        },
+        labelPosition: {
+            before: { root: 'flex-row-reverse' },
+            after: { root: 'flex-row' },
+        },
+        active: {
+            true: { box: '' },
+            false: { box: 'bg-surface border-border hover:border-border-strong' },
+        },
+        disabled: {
+            true: { root: 'opacity-50 pointer-events-none cursor-not-allowed' },
+            false: { root: '' },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        labelPosition: 'after',
+        active: false,
+        disabled: false,
+    },
+}, { twMerge: true });
+// ── Static active-state color lookups (statically written for Tailwind v4 scanning) ──
+const SOLID_BOX = {
+    primary: 'bg-primary-600 border-primary-600',
+    secondary: 'bg-secondary-600 border-secondary-600',
+    accent: 'bg-accent-600 border-accent-600',
+    neutral: 'bg-fg border-fg',
+    info: 'bg-info-600 border-info-600',
+    success: 'bg-success-600 border-success-600',
+    warning: 'bg-warning-500 border-warning-500',
+    error: 'bg-error-600 border-error-600',
+};
+const SOLID_ICON = {
+    primary: 'text-on-primary',
+    secondary: 'text-on-secondary',
+    accent: 'text-on-accent',
+    neutral: 'text-on-neutral',
+    info: 'text-on-info',
+    success: 'text-on-success',
+    warning: 'text-on-warning',
+    error: 'text-on-error',
+};
+const OUTLINE_BOX = {
+    primary: 'bg-surface border-primary-600',
+    secondary: 'bg-surface border-secondary-600',
+    accent: 'bg-surface border-accent-600',
+    neutral: 'bg-surface border-fg',
+    info: 'bg-surface border-info-600',
+    success: 'bg-surface border-success-600',
+    warning: 'bg-surface border-warning-500',
+    error: 'bg-surface border-error-600',
+};
+const OUTLINE_ICON = {
+    primary: 'text-primary-600',
+    secondary: 'text-secondary-600',
+    accent: 'text-accent-600',
+    neutral: 'text-fg',
+    info: 'text-info-600',
+    success: 'text-success-600',
+    warning: 'text-warning-600',
+    error: 'text-error-600',
+};
+let nextId = 0;
+// ── CheckboxComponent ────────────────────────────────────────────
+class CheckboxComponent extends FormFieldControl {
+    /** Sets the semantic color for the checked and indeterminate box fill/border. Defaults to `'primary'`. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Controls the overall scale of the box, check icon, and label typography. Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Visual style when checked or indeterminate. `'solid'` fills the box with the color; `'outline'` keeps a transparent fill with a colored border and check. Defaults to `'solid'`. */
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** When true, prevents interaction and applies muted styling. Defaults to `false`. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** When true, sets `aria-required="true"` so assistive tech announces the control as required. Defaults to `false`. */
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
+    /** Optional inline label rendered next to the checkbox. Use default content projection for rich label content instead. Projection takes precedence. */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Optional secondary description rendered under the label. Use `[slot="description"]` content projection for rich content instead. Projection takes precedence. */
+    description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Position of the label/description relative to the checkbox. Defaults to `'after'`. */
+    labelPosition = input('after', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /** Optional name attribute, applied to the hidden native `<input type="checkbox">` so native form submission includes the control. */
+    name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Id on the host element. Auto-generated as `tw-checkbox-N` when not provided. Used by the form-field's `<label for>` attribute. */
+    idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+    /** Accessible name when no visible label is provided. Mirrored to `aria-label`. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** ID of an external element that labels the checkbox. Mirrored to `aria-labelledby`. */
+    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** ID of an external element that describes the checkbox. Mirrored to `aria-describedby`. Form-field merges its hint/error ids alongside. */
+    ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the directive uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    errorStateMatcher = input(undefined, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    /** Two-way bound checked state. Updates when the user toggles via click or Space. */
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Two-way bound indeterminate state. When true, the box shows a dash and the host exposes `aria-checked="mixed"`. Any user toggle clears indeterminate and sets `checked` to `true`. */
+    indeterminate = model(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /** Fires after the checked state changes from a user interaction. Does not fire when the value is updated programmatically via `writeValue`. */
+    change = output();
+    focusMonitor = inject(FocusMonitor);
+    elementRef = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    ngControl = inject(NgControl, { optional: true, self: true });
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
+    onChange = () => { };
+    onTouched = () => { };
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    _ngControlRev = signal(0, ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    uid = nextId++;
+    /** @internal Fallback id used when the consumer does not set `[id]`. */
+    hostId = `tw-checkbox-${this.uid}`;
+    /** @internal Resolved id on the host element. */
+    id = computed(() => this.idInput() ?? this.hostId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** @internal Id of the internal label `<span>`, derived from the resolved host id. */
+    labelElementId = computed(() => `${this.id()}-label`, ...(ngDevMode ? [{ debugName: "labelElementId" }] : /* istanbul ignore next */ []));
+    /** @internal Id of the internal description `<span>`, derived from the resolved host id. */
+    descriptionElementId = computed(() => `${this.id()}-description`, ...(ngDevMode ? [{ debugName: "descriptionElementId" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // Material-style CVA wiring: declare ourselves as the value accessor on any
+        // host-level `NgControl` (FormControlDirective, NgModel, etc.). This avoids
+        // the circular-DI that a static `NG_VALUE_ACCESSOR` provider would create
+        // because `NgControl` is injected with `self: true` on the same element.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        afterNextRender(() => {
+            if (isDevMode() && !this.hasAccessibleNameHint()) {
+                console.warn('[tw-checkbox] The checkbox has no accessible name. Provide a `label` input, project label content, or set `aria-label` / `aria-labelledby`.');
+            }
+        });
+    }
+    /** @internal */
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Visible-state mirror of the `checked` model. `linkedSignal` keeps it
+     * synced with parent updates (including `writeValue` from reactive forms), while
+     * also accepting explicit `set()` calls from `toggle()` / `writeValue()` so the
+     * DOM reflects the new state synchronously — before `checkedChange` propagates
+     * through the host binding round-trip. Reading this signal in host bindings
+     * (`aria-checked`, `data-checked`, box classes) decouples render from the
+     * model's notification cadence.
+     */
+    internalChecked = linkedSignal(() => this.checked(), ...(ngDevMode ? [{ debugName: "internalChecked" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Visible-state mirror of the `indeterminate` model. Same rationale as
+     * `internalChecked` — `toggle()` and `writeValue()` clear it synchronously so
+     * `aria-checked="mixed"` flips off in the same microtask as `aria-checked="true"`.
+     */
+    internalIndeterminate = linkedSignal(() => this.indeterminate(), ...(ngDevMode ? [{ debugName: "internalIndeterminate" }] : /* istanbul ignore next */ []));
+    ariaCheckedValue = computed(() => {
+        if (this.internalIndeterminate())
+            return 'mixed';
+        return this.internalChecked() ? 'true' : 'false';
+    }, ...(ngDevMode ? [{ debugName: "ariaCheckedValue" }] : /* istanbul ignore next */ []));
+    effectiveAriaLabelledby = computed(() => {
+        const external = this.ariaLabelledby();
+        if (external)
+            return external;
+        if (this.ariaLabel())
+            return undefined;
+        return this.labelElementId();
+    }, ...(ngDevMode ? [{ debugName: "effectiveAriaLabelledby" }] : /* istanbul ignore next */ []));
+    effectiveAriaDescribedby = computed(() => {
+        const merged = [];
+        const extra = this.describedByIdsSignal();
+        for (const id of extra)
+            merged.push(id);
+        const external = this.ariaDescribedby();
+        if (external) {
+            for (const id of external.split(/\s+/).filter(Boolean))
+                merged.push(id);
+        }
+        else if (extra.length === 0) {
+            // Only fall back to the internal description id when no external sources are wired.
+            merged.push(this.descriptionElementId());
+        }
+        return merged.length ? merged.join(' ') : undefined;
+    }, ...(ngDevMode ? [{ debugName: "effectiveAriaDescribedby" }] : /* istanbul ignore next */ []));
+    isActive = computed(() => this.internalChecked() || this.internalIndeterminate(), ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    // ── FormFieldControl signals ──
+    /** @internal */
+    value = computed(() => this.internalChecked(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focused = this._focused.asReadonly();
+    /** @internal Checkboxes are never empty in the form-field sense — they always have a boolean value. */
+    empty = computed(() => false, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    required = computed(() => {
+        this._ngControlRev();
+        if (this.requiredInput())
+            return true;
+        const ctrl = this.ngControl?.control;
+        if (!ctrl)
+            return false;
+        return ctrl.hasValidator(Validators.required) || ctrl.hasValidator(Validators.requiredTrue);
+    }, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    errorState = computed(() => {
+        this._ngControlRev();
+        this._formSubmitRev();
+        this._focused();
+        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
+        const form = this.parentFormGroup ??
+            this.parentForm;
+        return matcher.isErrorState(this.ngControl?.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    controlType = 'checkbox';
+    /** @internal */
+    userAriaDescribedBy = computed(() => this.ariaDescribedby(), ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => checkboxVariants({
+        size: this.size(),
+        labelPosition: this.labelPosition(),
+        active: this.isActive(),
+        disabled: this.isDisabled(),
+    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    boxWrapClasses = computed(() => this.variantResult().boxWrap(), ...(ngDevMode ? [{ debugName: "boxWrapClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => this.variantResult().icon(), ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    labelWrapClasses = computed(() => this.variantResult().labelWrap(), ...(ngDevMode ? [{ debugName: "labelWrapClasses" }] : /* istanbul ignore next */ []));
+    labelClasses = computed(() => this.variantResult().label(), ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    descriptionClasses = computed(() => this.variantResult().description(), ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : /* istanbul ignore next */ []));
+    boxClasses = computed(() => {
+        const base = this.variantResult().box();
+        const active = this.isActive();
+        const error = this.errorState();
+        const variant = this.variant();
+        const effectiveColor = error ? 'error' : this.color();
+        if (!active) {
+            if (error)
+                return `${base} border-error-500`;
+            return base;
+        }
+        const lookup = variant === 'solid' ? SOLID_BOX : OUTLINE_BOX;
+        return `${base} ${lookup[effectiveColor]}`;
+    }, ...(ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []));
+    iconColorClasses = computed(() => {
+        const lookup = this.variant() === 'solid' ? SOLID_ICON : OUTLINE_ICON;
+        const effectiveColor = this.errorState() ? 'error' : this.color();
+        return `inline-flex items-center justify-center ${lookup[effectiveColor]}`;
+    }, ...(ngDevMode ? [{ debugName: "iconColorClasses" }] : /* istanbul ignore next */ []));
+    // ── Interactions ──────────────────────────────────────────
+    /** Toggles the checked state. Clears indeterminate if set. No-op when disabled. */
+    toggle() {
+        if (this.isDisabled())
+            return;
+        const wasIndeterminate = this.internalIndeterminate();
+        const next = wasIndeterminate ? true : !this.internalChecked();
+        this.internalChecked.set(next);
+        this.checked.set(next);
+        if (wasIndeterminate) {
+            this.internalIndeterminate.set(false);
+            this.indeterminate.set(false);
+        }
+        this.onChange(next);
+        this.onTouched();
+        this.change.emit(next);
+    }
+    /** Handles keyboard activation. Only Space toggles — matches native checkbox semantics. */
+    onKeydown(event) {
+        if (this.isDisabled())
+            return;
+        if (event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
+    /** @internal Called on host blur to notify forms the control has been touched and recompute errorState. */
+    onBlur() {
+        this.onTouched();
+        this._ngControlRev.update((n) => n + 1);
+    }
+    // ── ControlValueAccessor ──────────────────────────────────
+    writeValue(value) {
+        const next = !!value;
+        this.internalChecked.set(next);
+        this.checked.set(next);
+        this.internalIndeterminate.set(false);
+        this.indeterminate.set(false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // ── FormFieldControl methods ──
+    /** @internal Called by the form-field once it has computed the merged describedby ids. */
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set([...ids]);
+    }
+    /** @internal Called when the form-field container is clicked — focus the host without toggling. */
+    onContainerClick(event) {
+        if (this.isDisabled())
+            return;
+        if (event.defaultPrevented)
+            return;
+        const host = this.elementRef.nativeElement;
+        if (event.target === host || host.contains(event.target))
+            return;
+        host.focus();
+    }
+    // ── Lifecycle ─────────────────────────────────────────────
+    ngOnInit() {
+        const monitor$ = this.focusMonitor.monitor(this.elementRef);
+        if (isObservable(monitor$)) {
+            monitor$
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((origin) => {
+                const wasFocused = this._focused();
+                this._focused.set(!!origin);
+                if (wasFocused && !origin) {
+                    // Blur often flips `touched` on the bound `NgControl`; notify forms
+                    // and bump the revision so `errorState` recomputes.
+                    this.onTouched();
+                    this._ngControlRev.update((n) => n + 1);
+                }
+            });
+        }
+        this.destroyRef.onDestroy(() => {
+            this.focusMonitor.stopMonitoring(this.elementRef);
+        });
+        // NgControl's `control` is set by the parent FormControl* directive before
+        // children's `ngOnInit`. Subscribe here so errorState reacts to status/value
+        // changes on the bound control.
+        const ctrl = this.ngControl?.control;
+        if (ctrl) {
+            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
+            if (streams.length) {
+                merge(...streams)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
+            }
+        }
+        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
+        if (submit) {
+            submit
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
+        }
+    }
+    hasAccessibleNameHint() {
+        if (this.label() || this.ariaLabel() || this.ariaLabelledby())
+            return true;
+        const host = this.elementRef.nativeElement;
+        return host.textContent !== null && host.textContent.trim().length > 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CheckboxComponent, isStandalone: true, selector: "tw-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", 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 }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange", change: "change" }, host: { attributes: { "role": "checkbox" }, listeners: { "click": "toggle()", "keydown": "onKeydown($event)", "blur": "onBlur()" }, properties: { "id": "id()", "class": "rootClasses()", "attr.data-checked": "internalChecked()", "attr.data-indeterminate": "internalIndeterminate()", "attr.aria-checked": "ariaCheckedValue()", "attr.aria-disabled": "isDisabled() || null", "attr.aria-required": "required() || null", "attr.aria-invalid": "errorState() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "effectiveAriaLabelledby() || null", "attr.aria-describedby": "effectiveAriaDescribedby() || null", "attr.tabindex": "isDisabled() ? -1 : 0", "attr.name": "name() || null" } }, providers: [
+            {
+                provide: TW_FORM_FIELD_CONTROL,
+                useExisting: forwardRef(() => CheckboxComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <input
+      type="checkbox"
+      class="sr-only"
+      tabindex="-1"
+      aria-hidden="true"
+      [name]="name() || null"
+      [checked]="internalChecked()"
+      [disabled]="isDisabled()"
+    />
+
+    <span [class]="boxWrapClasses()">
+      <span [class]="boxClasses()">
+        <span [class]="iconClasses()">
+          @if (internalIndeterminate()) {
+            <span [class]="iconColorClasses()" animate.enter="check-in">
+              <ng-content select="[slot='indeterminate-icon']">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                  <path
+                    d="M5 12 h14"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </ng-content>
+            </span>
+          } @else if (internalChecked()) {
+            <span [class]="iconColorClasses()" animate.enter="check-in">
+              <ng-content select="[slot='check-icon']">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                  <path
+                    d="M5 12 l5 5 l9 -11"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </ng-content>
+            </span>
+          }
+        </span>
+      </span>
+    </span>
+
+    <span [class]="labelWrapClasses()">
+      <span [id]="labelElementId()" [class]="labelClasses()">
+        <ng-content>
+          @if (label()) {
+            {{ label() }}
+          }
+        </ng-content>
+      </span>
+      <span [id]="descriptionElementId()" [class]="descriptionClasses()">
+        <ng-content select="[slot='description']">
+          @if (description()) {
+            {{ description() }}
+          }
+        </ng-content>
+      </span>
+    </span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-checkbox',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: TW_FORM_FIELD_CONTROL,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                        },
+                    ],
+                    template: `
+    <input
+      type="checkbox"
+      class="sr-only"
+      tabindex="-1"
+      aria-hidden="true"
+      [name]="name() || null"
+      [checked]="internalChecked()"
+      [disabled]="isDisabled()"
+    />
+
+    <span [class]="boxWrapClasses()">
+      <span [class]="boxClasses()">
+        <span [class]="iconClasses()">
+          @if (internalIndeterminate()) {
+            <span [class]="iconColorClasses()" animate.enter="check-in">
+              <ng-content select="[slot='indeterminate-icon']">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                  <path
+                    d="M5 12 h14"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </ng-content>
+            </span>
+          } @else if (internalChecked()) {
+            <span [class]="iconColorClasses()" animate.enter="check-in">
+              <ng-content select="[slot='check-icon']">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                  <path
+                    d="M5 12 l5 5 l9 -11"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </ng-content>
+            </span>
+          }
+        </span>
+      </span>
+    </span>
+
+    <span [class]="labelWrapClasses()">
+      <span [id]="labelElementId()" [class]="labelClasses()">
+        <ng-content>
+          @if (label()) {
+            {{ label() }}
+          }
+        </ng-content>
+      </span>
+      <span [id]="descriptionElementId()" [class]="descriptionClasses()">
+        <ng-content select="[slot='description']">
+          @if (description()) {
+            {{ description() }}
+          }
+        </ng-content>
+      </span>
+    </span>
+  `,
+                    host: {
+                        'role': 'checkbox',
+                        '[id]': 'id()',
+                        '[class]': 'rootClasses()',
+                        '[attr.data-checked]': 'internalChecked()',
+                        '[attr.data-indeterminate]': 'internalIndeterminate()',
+                        '[attr.aria-checked]': 'ariaCheckedValue()',
+                        '[attr.aria-disabled]': 'isDisabled() || null',
+                        '[attr.aria-required]': 'required() || null',
+                        '[attr.aria-invalid]': 'errorState() || null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'effectiveAriaLabelledby() || null',
+                        '[attr.aria-describedby]': 'effectiveAriaDescribedby() || null',
+                        '[attr.tabindex]': 'isDisabled() ? -1 : 0',
+                        '[attr.name]': 'name() || null',
+                        '(click)': 'toggle()',
+                        '(keydown)': 'onKeydown($event)',
+                        '(blur)': 'onBlur()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", 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 }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckboxComponent };
+//# sourceMappingURL=cdevhub-ngx-tw-checkbox.mjs.map