import * as i0 from '@angular/core';
import { inject, NgZone, input, booleanAttribute, numberAttribute, model, output, viewChild, effect, untracked, forwardRef, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
import { _IdGenerator } from '@angular/cdk/a11y';
import { Ripple } from '@ngstarter-ui/components/core';

/**
 * Represents the different states that require custom transitions between them.
 * @docs-private
 */
var TransitionCheckState;
(function (TransitionCheckState) {
    /** The initial state of the component before any user interaction. */
    TransitionCheckState[TransitionCheckState["Init"] = 0] = "Init";
    /** The state representing the component when it's becoming checked. */
    TransitionCheckState[TransitionCheckState["Checked"] = 1] = "Checked";
    /** The state representing the component when it's becoming unchecked. */
    TransitionCheckState[TransitionCheckState["Unchecked"] = 2] = "Unchecked";
    /** The state representing the component when it's becoming indeterminate. */
    TransitionCheckState[TransitionCheckState["Indeterminate"] = 3] = "Indeterminate";
})(TransitionCheckState || (TransitionCheckState = {}));
/** Change event object emitted by checkbox. */
class CheckboxChange {
    /** The source checkbox of the event. */
    source;
    /** The new `checked` value of the checkbox. */
    checked;
}
class Checkbox {
    _ngZone = inject(NgZone);
    _idGenerator = inject(_IdGenerator);
    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
    ariaDescribedby = input('', { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
    ariaExpanded = input(undefined, { ...(ngDevMode ? { debugName: "ariaExpanded" } : /* istanbul ignore next */ {}), alias: 'aria-expanded', transform: booleanAttribute });
    ariaControls = input('', { ...(ngDevMode ? { debugName: "ariaControls" } : /* istanbul ignore next */ {}), alias: 'aria-controls' });
    ariaOwns = input('', { ...(ngDevMode ? { debugName: "ariaOwns" } : /* istanbul ignore next */ {}), alias: 'aria-owns' });
    id = input(this._idGenerator.getId('ngs-checkbox-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    labelPosition = input('after', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
    disableRipple = input(false, { ...(ngDevMode ? { debugName: "disableRipple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    tabIndex = input(0, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: (value) => (value == null ? 0 : numberAttribute(value)) });
    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
    disabledInteractive = input(false, { ...(ngDevMode ? { debugName: "disabledInteractive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
    indeterminate = model(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
    change = output();
    indeterminateChange = output();
    _inputElement = viewChild('input', ...(ngDevMode ? [{ debugName: "_inputElement" }] : /* istanbul ignore next */ []));
    _labelElement = viewChild('label', ...(ngDevMode ? [{ debugName: "_labelElement" }] : /* istanbul ignore next */ []));
    _currentAnimationClass = '';
    _currentCheckState = TransitionCheckState.Init;
    _controlValueAccessorChangeFn = (value) => { };
    _validatorChangeFn = () => { };
    _onTouched = () => { };
    _animationClasses = {
        uncheckedToChecked: 'ngs-checkbox--anim-unchecked-checked',
        uncheckedToIndeterminate: 'ngs-checkbox--anim-unchecked-indeterminate',
        checkedToUnchecked: 'ngs-checkbox--anim-checked-unchecked',
        checkedToIndeterminate: 'ngs-checkbox--anim-checked-indeterminate',
        indeterminateToChecked: 'ngs-checkbox--anim-indeterminate-checked',
        indeterminateToUnchecked: 'ngs-checkbox--anim-indeterminate-unchecked',
    };
    constructor() {
        effect(() => {
            this.required();
            untracked(() => this._validatorChangeFn());
        });
        effect(() => {
            const indeterminate = this.indeterminate();
            untracked(() => {
                if (this._currentCheckState === TransitionCheckState.Init) {
                    return;
                }
                if (indeterminate) {
                    this._transitionCheckState(TransitionCheckState.Indeterminate);
                }
                else {
                    this._transitionCheckState(this.checked() ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
                }
                this._syncIndeterminate(indeterminate);
            });
        });
        effect(() => {
            const checked = this.checked();
            untracked(() => {
                if (this._currentCheckState === TransitionCheckState.Init) {
                    return;
                }
                if (!this.indeterminate()) {
                    this._transitionCheckState(checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
                }
            });
        });
    }
    get inputId() {
        return `${this.id()}-input`;
    }
    ngAfterViewInit() {
        this._syncIndeterminate(this.indeterminate());
    }
    focus() {
        this._inputElement()?.nativeElement.focus();
    }
    writeValue(value) {
        this.checked.set(!!value);
    }
    registerOnChange(fn) {
        this._controlValueAccessorChangeFn = fn;
    }
    registerOnTouched(fn) {
        this._onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(isDisabled);
    }
    validate(control) {
        return this.required() && control.value !== true ? { 'required': true } : null;
    }
    registerOnValidatorChange(fn) {
        this._validatorChangeFn = fn;
    }
    toggle() {
        this.checked.set(!this.checked());
        this._controlValueAccessorChangeFn(this.checked());
    }
    _handleInputClick() {
        if (!this.disabled()) {
            if (this.indeterminate()) {
                this.indeterminate.set(false);
            }
            this.checked.set(!this.checked());
            this._emitChangeEvent();
        }
    }
    _emitChangeEvent() {
        this._controlValueAccessorChangeFn(this.checked());
        this.change.emit(this._createChangeEvent(this.checked()));
        const inputElement = this._inputElement();
        if (inputElement) {
            inputElement.nativeElement.checked = this.checked();
        }
    }
    _createChangeEvent(isChecked) {
        const event = new CheckboxChange();
        event.source = this;
        event.checked = isChecked;
        return event;
    }
    _onInteractionEvent(event) {
        event.stopPropagation();
    }
    _onBlur() {
        this._onTouched();
    }
    _transitionCheckState(newState) {
        let oldState = this._currentCheckState;
        let element = this._inputElement()?.nativeElement;
        if (oldState === newState || !element) {
            return;
        }
        if (this._currentAnimationClass) {
            element.classList.remove(this._currentAnimationClass);
        }
        this._currentAnimationClass = this._getAnimationClassForCheckStateTransition(oldState, newState);
        this._currentCheckState = newState;
        if (this._currentAnimationClass.length > 0) {
            element.classList.add(this._currentAnimationClass);
            const animationClass = this._currentAnimationClass;
            this._ngZone.runOutsideAngular(() => {
                setTimeout(() => {
                    element.classList.remove(animationClass);
                }, 1000);
            });
        }
    }
    _getAnimationClassForCheckStateTransition(oldState, newState) {
        switch (oldState) {
            case TransitionCheckState.Init:
                if (newState === TransitionCheckState.Checked) {
                    return this._animationClasses.uncheckedToChecked;
                }
                else if (newState == TransitionCheckState.Indeterminate) {
                    return this.checked()
                        ? this._animationClasses.checkedToIndeterminate
                        : this._animationClasses.uncheckedToIndeterminate;
                }
                break;
            case TransitionCheckState.Unchecked:
                return newState === TransitionCheckState.Checked
                    ? this._animationClasses.uncheckedToChecked
                    : this._animationClasses.uncheckedToIndeterminate;
            case TransitionCheckState.Checked:
                return newState === TransitionCheckState.Unchecked
                    ? this._animationClasses.checkedToUnchecked
                    : this._animationClasses.checkedToIndeterminate;
            case TransitionCheckState.Indeterminate:
                return newState === TransitionCheckState.Checked
                    ? this._animationClasses.indeterminateToChecked
                    : this._animationClasses.indeterminateToUnchecked;
        }
        return '';
    }
    _syncIndeterminate(value) {
        const inputElement = this._inputElement();
        if (inputElement) {
            inputElement.nativeElement.indeterminate = value;
        }
    }
    _onInputClick() {
        this._handleInputClick();
    }
    _onTouchTargetClick() {
        this._handleInputClick();
        const inputElement = this._inputElement();
        if (!this.disabled() && inputElement) {
            inputElement.nativeElement.focus();
        }
    }
    _preventBubblingFromLabel(event) {
        const labelElement = this._labelElement();
        if (!!event.target && labelElement && labelElement.nativeElement.contains(event.target)) {
            event.stopPropagation();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Checkbox, isStandalone: true, selector: "ngs-checkbox", inputs: { 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 }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "aria-expanded", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "aria-controls", isSignal: true, isRequired: false, transformFunction: null }, ariaOwns: { classPropertyName: "ariaOwns", publicName: "aria-owns", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", indeterminate: "indeterminateChange", change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "class.ngs-checkbox-disabled": "disabled()", "class.ngs-checkbox-checked": "checked()", "class.ngs-checkbox-indeterminate": "indeterminate()", "class.ngs-checkbox-disabled-interactive": "disabledInteractive()", "class": "color() ? \"ngs-\" + color() : \"ngs-primary\"" }, classAttribute: "ngs-checkbox" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => Checkbox),
                multi: true,
            },
            {
                provide: NG_VALIDATORS,
                useExisting: Checkbox,
                multi: true,
            },
        ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_labelElement", first: true, predicate: ["label"], descendants: true, isSignal: true }], exportAs: ["ngsCheckbox"], ngImport: i0, template: "<div class=\"ngs-checkbox-layout\" [class.ngs-checkbox-label-before]=\"labelPosition() === 'before'\"\n     (click)=\"_preventBubblingFromLabel($event)\">\n  <div #checkbox class=\"ngs-checkbox-frame\">\n    <div class=\"ngs-checkbox-touch-target\" (click)=\"_onTouchTargetClick()\"></div>\n    <input #input\n           type=\"checkbox\"\n           class=\"ngs-checkbox-native-control\"\n           [class.ngs-checkbox--selected]=\"checked()\"\n           [attr.aria-label]=\"ariaLabel() || null\"\n           [attr.aria-labelledby]=\"ariaLabelledby()\"\n           [attr.aria-describedby]=\"ariaDescribedby()\"\n           [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n           [attr.aria-controls]=\"ariaControls()\"\n           [attr.aria-disabled]=\"disabled() && disabledInteractive() ? true : null\"\n           [attr.aria-expanded]=\"ariaExpanded()\"\n           [attr.aria-owns]=\"ariaOwns()\"\n           [attr.name]=\"name()\"\n           [attr.value]=\"value()\"\n           [checked]=\"checked()\"\n           [indeterminate]=\"indeterminate()\"\n           [disabled]=\"disabled() && !disabledInteractive()\"\n           [id]=\"inputId\"\n           [required]=\"required()\"\n           [tabIndex]=\"disabled() && !disabledInteractive() ? -1 : tabIndex()\"\n           (blur)=\"_onBlur()\"\n           (click)=\"_onInputClick()\"\n           (change)=\"_onInteractionEvent($event)\"/>\n    <div class=\"ngs-checkbox-ripple-container\"></div>\n    <div class=\"ngs-checkbox-background\">\n      @if (indeterminate()) {\n        <div class=\"ngs-checkbox-mixedmark\"></div>\n      } @else if (checked()) {\n        <svg class=\"ngs-checkbox-checkmark\"\n             focusable=\"false\"\n             viewBox=\"0 0 24 24\"\n             aria-hidden=\"true\">\n          <path class=\"ngs-checkbox-checkmark-path\"\n                fill=\"none\"\n                d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n        </svg>\n      }\n    </div>\n    <div class=\"ngs-checkbox-ripple\" ngsRipple\n         [ngsRippleTrigger]=\"checkbox\"\n         [ngsRippleDisabled]=\"disableRipple() || disabled()\"\n         [ngsRippleCentered]=\"true\"></div>\n  </div>\n  <label class=\"ngs-checkbox-label\" #label [for]=\"inputId\">\n    <span class=\"content\"><ng-content /></span>\n    <span class=\"description\">\n      <ng-content select=\"[ngsCheckboxDecription]\" />\n    </span>\n  </label>\n</div>\n", styles: [":host{--ngs-checkbox-size: 19px;--ngs-checkbox-checked-color: var(--ngs-color-primary);--ngs-checkbox-unchecked-color: var(--ngs-field-border-color);--ngs-checkbox-disabled-color: var(--ngs-color-on-surface-variant);--ngs-checkbox-checkmark-color: var(--ngs-color-on-primary);--ngs-checkbox-description-font-size: var(--ngs-font-size-sm);--ngs-checkbox-description-color: var(--ngs-color-neutral-500);--ngs-checkbox-gap: calc(var(--spacing, .25rem) * 2.5);--ngs-checkbox-label-font-size: var(--ngs-font-size-md);display:inline-block;position:relative}:host .description{font-size:var(--ngs-checkbox-description-font-size);color:var(--ngs-checkbox-description-color)}:host .description:empty{display:none}:host .content{font-size:var(--ngs-checkbox-label-font-size)}:host .ngs-checkbox-layout{display:flex;align-items:center;gap:var(--ngs-checkbox-gap);cursor:pointer}:host .ngs-checkbox-layout.ngs-checkbox-label-before{flex-direction:row-reverse}:host:has(.description:not(:empty)) .ngs-checkbox-layout{align-items:start}:host:has(.description:not(:empty)) .ngs-checkbox-frame{position:relative;top:calc(var(--spacing, .25rem) * 1.1)}:host .ngs-checkbox-frame{width:var(--ngs-checkbox-size);height:var(--ngs-checkbox-size);position:relative;display:flex;align-items:center;justify-content:center;flex:none}:host .ngs-checkbox-native-control{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1}:host .ngs-checkbox-background{width:100%;height:100%;border:1px solid var(--ngs-checkbox-unchecked-color);border-radius:3px;background:transparent;transition:background-color 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1);box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:2px}:host .ngs-checkbox-checkmark{width:100%;height:100%}:host .ngs-checkbox-checkmark-path{stroke:var(--ngs-checkbox-checkmark-color);stroke-width:3.12px;stroke-dasharray:29.7833385;stroke-dashoffset:0}:host .ngs-checkbox-mixedmark{width:12px;height:2px;background:var(--ngs-checkbox-checkmark-color)}:host.ngs-checkbox-checked .ngs-checkbox-background,:host.ngs-checkbox-indeterminate .ngs-checkbox-background{background:var(--ngs-checkbox-checked-color);border-color:var(--ngs-checkbox-checked-color)}:host.ngs-checkbox-disabled{cursor:default;color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-checkbox-disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host.ngs-checkbox-disabled .ngs-checkbox-layout{cursor:default}:host.ngs-checkbox-disabled .ngs-checkbox-background{border-color:var(--ngs-color-on-surface);background:transparent}@supports (color: color-mix(in lab,red,red)){:host.ngs-checkbox-disabled .ngs-checkbox-background{border-color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host.ngs-checkbox-disabled.ngs-checkbox-checked .ngs-checkbox-background,:host.ngs-checkbox-disabled.ngs-checkbox-indeterminate .ngs-checkbox-background{background:var(--ngs-color-on-surface);border-color:transparent}@supports (color: color-mix(in lab,red,red)){:host.ngs-checkbox-disabled.ngs-checkbox-checked .ngs-checkbox-background,:host.ngs-checkbox-disabled.ngs-checkbox-indeterminate .ngs-checkbox-background{background:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-checkbox-ripple{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;pointer-events:none;overflow:hidden}:host .ngs-checkbox-label{cursor:inherit}:host .ngs-checkbox-label:has(.description:empty):has(.content:empty){display:none}:host.ngs-accent{--ngs-checkbox-checked-color: var(--ngs-color-secondary);--ngs-checkbox-checkmark-color: var(--ngs-color-on-secondary)}:host.ngs-warn{--ngs-checkbox-checked-color: var(--ngs-color-danger);--ngs-checkbox-checkmark-color: var(--ngs-color-on-danger)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Checkbox, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-checkbox', imports: [
                        Ripple
                    ], host: {
                        'class': 'ngs-checkbox',
                        '[attr.tabindex]': 'null',
                        '[attr.aria-label]': 'null',
                        '[attr.aria-labelledby]': 'null',
                        '[class.ngs-checkbox-disabled]': 'disabled()',
                        '[class.ngs-checkbox-checked]': 'checked()',
                        '[class.ngs-checkbox-indeterminate]': 'indeterminate()',
                        '[class.ngs-checkbox-disabled-interactive]': 'disabledInteractive()',
                        '[class]': 'color() ? "ngs-" + color() : "ngs-primary"',
                    }, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => Checkbox),
                            multi: true,
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: Checkbox,
                            multi: true,
                        },
                    ], exportAs: 'ngsCheckbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngs-checkbox-layout\" [class.ngs-checkbox-label-before]=\"labelPosition() === 'before'\"\n     (click)=\"_preventBubblingFromLabel($event)\">\n  <div #checkbox class=\"ngs-checkbox-frame\">\n    <div class=\"ngs-checkbox-touch-target\" (click)=\"_onTouchTargetClick()\"></div>\n    <input #input\n           type=\"checkbox\"\n           class=\"ngs-checkbox-native-control\"\n           [class.ngs-checkbox--selected]=\"checked()\"\n           [attr.aria-label]=\"ariaLabel() || null\"\n           [attr.aria-labelledby]=\"ariaLabelledby()\"\n           [attr.aria-describedby]=\"ariaDescribedby()\"\n           [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n           [attr.aria-controls]=\"ariaControls()\"\n           [attr.aria-disabled]=\"disabled() && disabledInteractive() ? true : null\"\n           [attr.aria-expanded]=\"ariaExpanded()\"\n           [attr.aria-owns]=\"ariaOwns()\"\n           [attr.name]=\"name()\"\n           [attr.value]=\"value()\"\n           [checked]=\"checked()\"\n           [indeterminate]=\"indeterminate()\"\n           [disabled]=\"disabled() && !disabledInteractive()\"\n           [id]=\"inputId\"\n           [required]=\"required()\"\n           [tabIndex]=\"disabled() && !disabledInteractive() ? -1 : tabIndex()\"\n           (blur)=\"_onBlur()\"\n           (click)=\"_onInputClick()\"\n           (change)=\"_onInteractionEvent($event)\"/>\n    <div class=\"ngs-checkbox-ripple-container\"></div>\n    <div class=\"ngs-checkbox-background\">\n      @if (indeterminate()) {\n        <div class=\"ngs-checkbox-mixedmark\"></div>\n      } @else if (checked()) {\n        <svg class=\"ngs-checkbox-checkmark\"\n             focusable=\"false\"\n             viewBox=\"0 0 24 24\"\n             aria-hidden=\"true\">\n          <path class=\"ngs-checkbox-checkmark-path\"\n                fill=\"none\"\n                d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n        </svg>\n      }\n    </div>\n    <div class=\"ngs-checkbox-ripple\" ngsRipple\n         [ngsRippleTrigger]=\"checkbox\"\n         [ngsRippleDisabled]=\"disableRipple() || disabled()\"\n         [ngsRippleCentered]=\"true\"></div>\n  </div>\n  <label class=\"ngs-checkbox-label\" #label [for]=\"inputId\">\n    <span class=\"content\"><ng-content /></span>\n    <span class=\"description\">\n      <ng-content select=\"[ngsCheckboxDecription]\" />\n    </span>\n  </label>\n</div>\n", styles: [":host{--ngs-checkbox-size: 19px;--ngs-checkbox-checked-color: var(--ngs-color-primary);--ngs-checkbox-unchecked-color: var(--ngs-field-border-color);--ngs-checkbox-disabled-color: var(--ngs-color-on-surface-variant);--ngs-checkbox-checkmark-color: var(--ngs-color-on-primary);--ngs-checkbox-description-font-size: var(--ngs-font-size-sm);--ngs-checkbox-description-color: var(--ngs-color-neutral-500);--ngs-checkbox-gap: calc(var(--spacing, .25rem) * 2.5);--ngs-checkbox-label-font-size: var(--ngs-font-size-md);display:inline-block;position:relative}:host .description{font-size:var(--ngs-checkbox-description-font-size);color:var(--ngs-checkbox-description-color)}:host .description:empty{display:none}:host .content{font-size:var(--ngs-checkbox-label-font-size)}:host .ngs-checkbox-layout{display:flex;align-items:center;gap:var(--ngs-checkbox-gap);cursor:pointer}:host .ngs-checkbox-layout.ngs-checkbox-label-before{flex-direction:row-reverse}:host:has(.description:not(:empty)) .ngs-checkbox-layout{align-items:start}:host:has(.description:not(:empty)) .ngs-checkbox-frame{position:relative;top:calc(var(--spacing, .25rem) * 1.1)}:host .ngs-checkbox-frame{width:var(--ngs-checkbox-size);height:var(--ngs-checkbox-size);position:relative;display:flex;align-items:center;justify-content:center;flex:none}:host .ngs-checkbox-native-control{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1}:host .ngs-checkbox-background{width:100%;height:100%;border:1px solid var(--ngs-checkbox-unchecked-color);border-radius:3px;background:transparent;transition:background-color 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1);box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:2px}:host .ngs-checkbox-checkmark{width:100%;height:100%}:host .ngs-checkbox-checkmark-path{stroke:var(--ngs-checkbox-checkmark-color);stroke-width:3.12px;stroke-dasharray:29.7833385;stroke-dashoffset:0}:host .ngs-checkbox-mixedmark{width:12px;height:2px;background:var(--ngs-checkbox-checkmark-color)}:host.ngs-checkbox-checked .ngs-checkbox-background,:host.ngs-checkbox-indeterminate .ngs-checkbox-background{background:var(--ngs-checkbox-checked-color);border-color:var(--ngs-checkbox-checked-color)}:host.ngs-checkbox-disabled{cursor:default;color:var(--ngs-color-on-surface)}@supports (color: color-mix(in lab,red,red)){:host.ngs-checkbox-disabled{color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host.ngs-checkbox-disabled .ngs-checkbox-layout{cursor:default}:host.ngs-checkbox-disabled .ngs-checkbox-background{border-color:var(--ngs-color-on-surface);background:transparent}@supports (color: color-mix(in lab,red,red)){:host.ngs-checkbox-disabled .ngs-checkbox-background{border-color:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host.ngs-checkbox-disabled.ngs-checkbox-checked .ngs-checkbox-background,:host.ngs-checkbox-disabled.ngs-checkbox-indeterminate .ngs-checkbox-background{background:var(--ngs-color-on-surface);border-color:transparent}@supports (color: color-mix(in lab,red,red)){:host.ngs-checkbox-disabled.ngs-checkbox-checked .ngs-checkbox-background,:host.ngs-checkbox-disabled.ngs-checkbox-indeterminate .ngs-checkbox-background{background:color-mix(in srgb,var(--ngs-color-on-surface),transparent 62%)}}:host .ngs-checkbox-ripple{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;pointer-events:none;overflow:hidden}:host .ngs-checkbox-label{cursor:inherit}:host .ngs-checkbox-label:has(.description:empty):has(.content:empty){display:none}:host.ngs-accent{--ngs-checkbox-checked-color: var(--ngs-color-secondary);--ngs-checkbox-checkmark-color: var(--ngs-color-on-secondary)}:host.ngs-warn{--ngs-checkbox-checked-color: var(--ngs-color-danger);--ngs-checkbox-checkmark-color: var(--ngs-color-on-danger)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { 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 }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-expanded", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-controls", required: false }] }], ariaOwns: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-owns", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabledInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledInteractive", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], change: [{ type: i0.Output, args: ["change"] }], indeterminateChange: [{ type: i0.Output, args: ["indeterminateChange"] }], _inputElement: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], _labelElement: [{ type: i0.ViewChild, args: ['label', { isSignal: true }] }] } });

class CheckboxDescription {
    constructor() { }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CheckboxDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CheckboxDescription, isStandalone: true, selector: "[ngsCheckboxDescription]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CheckboxDescription, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsCheckboxDescription]',
                }]
        }], ctorParameters: () => [] });

class CheckboxGroup {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CheckboxGroup, isStandalone: true, selector: "ngs-checkbox-group", host: { attributes: { "role": "group" }, classAttribute: "ngs-checkbox-group" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-checkbox-group-gap: calc(var(--spacing, .25rem) * 4);display:flex;flex-direction:column;gap:var(--ngs-checkbox-group-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CheckboxGroup, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-checkbox-group', imports: [], host: {
                        'class': 'ngs-checkbox-group',
                        'role': 'group',
                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{--ngs-checkbox-group-gap: calc(var(--spacing, .25rem) * 4);display:flex;flex-direction:column;gap:var(--ngs-checkbox-group-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { Checkbox, CheckboxChange, CheckboxDescription, CheckboxGroup, TransitionCheckState };
//# sourceMappingURL=ngstarter-ui-components-checkbox.mjs.map
