@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-checkbox.mjs

@@ -0,0 +1,729 @@
+export * from '@wawjs/ngx-prime/types/checkbox';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, inject, contentChild, forwardRef, Directive, ElementRef, input, booleanAttribute, numberAttribute, computed, output, effect, InjectionToken, viewChild, signal, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { equals, contains } from '@wawjs/css-prime-utils';
+import { PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
+import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import { BaseEditableHolder } from '@wawjs/ngx-prime/baseeditableholder';
+import * as i1 from '@wawjs/ngx-prime/bind';
+import { Bind, BindModule } from '@wawjs/ngx-prime/bind';
+import { CheckIcon } from '@wawjs/ngx-prime/icons/check';
+import { MinusIcon } from '@wawjs/ngx-prime/icons/minus';
+import { style as style$1 } from '@wawjs/css-prime-styles/checkbox';
+import { BaseStyle } from '@wawjs/ngx-prime/base';
+
+const style = /*css*/ `
+    ${style$1}
+
+    /* Native checkbox directive: retain browser interaction and accessibility while using the active theme color. */
+    input.p-checkbox.p-component {
+        accent-color: dt('checkbox.checked.background');
+        cursor: pointer;
+    }
+
+    input.p-checkbox.p-component.p-disabled,
+    input.p-checkbox.p-component[readonly] {
+        cursor: default;
+    }
+
+    .p-checkbox > .p-checkbox-native-icon:empty::before {
+        content: '✓';
+        color: dt('checkbox.icon.color');
+        font-size: dt('checkbox.icon.size');
+        line-height: 1;
+    }
+
+    .p-checkbox-checked > .p-checkbox-native-icon:empty::before {
+        color: dt('checkbox.icon.checked.color');
+    }
+
+    .p-checkbox.p-disabled > .p-checkbox-native-icon:empty::before {
+        color: dt('checkbox.icon.disabled.color');
+    }
+
+    .p-checkbox > .p-checkbox-native-icon > * {
+        color: dt('checkbox.icon.color');
+    }
+
+    .p-checkbox-checked > .p-checkbox-native-icon > * {
+        color: dt('checkbox.icon.checked.color');
+    }
+
+    .p-checkbox.p-disabled > .p-checkbox-native-icon > * {
+        color: dt('checkbox.icon.disabled.color');
+    }
+
+    /* For ngx-prime */
+    p-checkBox.ng-invalid.ng-dirty .p-checkbox-box,
+    p-check-box.ng-invalid.ng-dirty .p-checkbox-box,
+    p-checkbox.ng-invalid.ng-dirty .p-checkbox-box {
+        border-color: dt('checkbox.invalid.border.color');
+    }
+`;
+const classes = {
+    root: ({ instance }) => [
+        'p-checkbox p-component',
+        {
+            'p-checkbox-checked p-highlight': instance.checked,
+            'p-disabled': instance.$disabled(),
+            'p-invalid': instance.invalid(),
+            'p-variant-filled': instance.$variant() === 'filled',
+            'p-checkbox-sm p-inputfield-sm': instance.size() === 'small',
+            'p-checkbox-lg p-inputfield-lg': instance.size() === 'large'
+        }
+    ],
+    box: 'p-checkbox-box',
+    input: 'p-checkbox-input',
+    icon: 'p-checkbox-icon'
+};
+class CheckboxStyle extends BaseStyle {
+    name = 'checkbox';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Checkbox is an extension to standard checkbox element with theming.
+ *
+ * [Live Demo](https://www.ngx-prime.org/checkbox/)
+ *
+ * @module checkboxstyle
+ *
+ */
+var CheckboxClasses;
+(function (CheckboxClasses) {
+    /**
+     * Class name of the root element
+     */
+    CheckboxClasses["root"] = "p-checkbox";
+    /**
+     * Class name of the box element
+     */
+    CheckboxClasses["box"] = "p-checkbox-box";
+    /**
+     * Class name of the input element
+     */
+    CheckboxClasses["input"] = "p-checkbox-input";
+    /**
+     * Class name of the icon element
+     */
+    CheckboxClasses["icon"] = "p-checkbox-icon";
+})(CheckboxClasses || (CheckboxClasses = {}));
+
+/**
+ * Provides the themed visual container for a native checkbox.
+ *
+ * Use it only when a custom checkbox icon is required. For the usual case,
+ * use `<input type="checkbox" pCheckbox>` directly.
+ *
+ * @group Components
+ */
+class CheckboxContainerDirective extends BaseComponent {
+    componentName = 'Checkbox';
+    _componentStyle = inject(CheckboxStyle);
+    bindDirectiveInstance = inject(Bind, { self: true });
+    checkbox = contentChild(forwardRef(() => CheckboxDirective), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkbox" }] : /* istanbul ignore next */ []));
+    get checked() {
+        return this.checkbox()?.checked ?? false;
+    }
+    $disabled() {
+        return this.checkbox()?.$disabled() ?? false;
+    }
+    invalid() {
+        return this.checkbox()?.invalid() ?? false;
+    }
+    $variant() {
+        return this.checkbox()?.$variant();
+    }
+    size() {
+        return this.checkbox()?.size();
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('root'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxContainerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: CheckboxContainerDirective, isStandalone: true, selector: "label[pCheckboxContainer]", host: { properties: { "class": "cx('root')", "attr.data-pc-name": "'checkbox'", "attr.data-pc-section": "'root'" } }, providers: [CheckboxStyle], queries: [{ propertyName: "checkbox", first: true, predicate: i0.forwardRef(() => CheckboxDirective), descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'label[pCheckboxContainer]',
+                    standalone: true,
+                    host: {
+                        '[class]': "cx('root')",
+                        '[attr.data-pc-name]': "'checkbox'",
+                        '[attr.data-pc-section]': "'root'"
+                    },
+                    providers: [CheckboxStyle],
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [forwardRef(() => CheckboxDirective), { isSignal: true }] }] } });
+/**
+ * Marks an element as the visual box of a `pCheckboxContainer`.
+ * Its content is the custom checked icon; an empty element receives the
+ * default checkmark from the checkbox theme.
+ *
+ * @group Components
+ */
+class CheckboxIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: CheckboxIconDirective, isStandalone: true, selector: "[pCheckboxIcon]", host: { properties: { "attr.aria-hidden": "true" }, classAttribute: "p-checkbox-box p-checkbox-native-icon" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pCheckboxIcon]',
+                    standalone: true,
+                    host: {
+                        class: 'p-checkbox-box p-checkbox-native-icon',
+                        '[attr.aria-hidden]': 'true'
+                    }
+                }]
+        }] });
+/**
+ * Adds Prime styling and accessibility attributes to a native checkbox.
+ * Native form controls retain Angular's built-in checkbox value accessor.
+ *
+ * @group Components
+ */
+class CheckboxDirective extends BaseEditableHolder {
+    componentName = 'Checkbox';
+    element = inject(ElementRef);
+    container = inject(CheckboxContainerDirective, { optional: true, skipSelf: true });
+    _componentStyle = inject(CheckboxStyle);
+    bindDirectiveInstance = inject(Bind, { self: true });
+    /** @deprecated Use the native `class` attribute instead. */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    /** Compatibility input for the directive pass-through configuration. */
+    ptCheckbox = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ptCheckbox" }] : /* istanbul ignore next */ []));
+    /** Pass-through configuration for the native checkbox. */
+    pCheckboxPT = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pCheckboxPT" }] : /* istanbul ignore next */ []));
+    /** Enables unstyled mode for this native checkbox. */
+    pCheckboxUnstyled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pCheckboxUnstyled" }] : /* istanbul ignore next */ []));
+    /** Allows a boolean value instead of an array of selected values. */
+    binary = input(false, { ...(ngDevMode ? { debugName: "binary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Value represented by this checkbox in an array model. */
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the native checkbox. */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** IDs of elements that label the native checkbox. */
+    ariaLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    /** Index of the native input in tabbing order. */
+    tabindex = input(undefined, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Compatibility alias for the native input id. Prefer the native `id` attribute in new templates. */
+    inputId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
+    /** Reflects the native checkbox indeterminate state. */
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Prevents user changes while retaining the checkbox in the tab order. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Requests focus when the browser initializes the control. */
+    autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    trueValue = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trueValue" }] : /* istanbul ignore next */ []));
+    falseValue = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "falseValue" }] : /* istanbul ignore next */ []));
+    variant = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$variant" }] : /* istanbul ignore next */ []));
+    /** Emits the browser change with the native checked value. */
+    onChange = output();
+    /** Emits when the native checkbox receives focus. */
+    onFocus = output();
+    /** Emits when the native checkbox loses focus. */
+    onBlur = output();
+    touch = output();
+    onInputClick(event) {
+        if (this.readonly()) {
+            event.preventDefault();
+        }
+    }
+    onInputChange(event) {
+        const input = event.target;
+        if (this.readonly()) {
+            input.checked = this.checked;
+            return;
+        }
+        let checked;
+        if (this.binary()) {
+            checked = input.checked ? this.trueValue() : this.falseValue();
+        }
+        else {
+            const currentValue = this.modelValue();
+            checked = input.checked ? [...(currentValue ?? []), this.value()] : (currentValue ?? []).filter((value) => !equals(value, this.value()));
+        }
+        this.writeModelValue(checked);
+        this.onModelChange(checked);
+        input.indeterminate = false;
+        this.onChange.emit({ checked, originalEvent: event });
+    }
+    onInputFocus(event) {
+        this.onFocus.emit(event);
+    }
+    onInputBlur(event) {
+        this.onModelTouched();
+        this.touch.emit();
+        this.onBlur.emit(event);
+    }
+    get checked() {
+        const modelValue = this.modelValue();
+        return this.indeterminate() ? false : this.binary() ? equals(modelValue, this.trueValue()) : contains(this.value(), modelValue);
+    }
+    get dataP() {
+        return this.cn({
+            invalid: this.invalid(),
+            checked: this.checked,
+            disabled: this.$disabled(),
+            filled: this.$variant() === 'filled',
+            [this.size()]: this.size()
+        });
+    }
+    constructor() {
+        super();
+        effect(() => {
+            const pt = this.ptCheckbox() || this.pCheckboxPT();
+            if (pt) {
+                this.directivePT.set(pt);
+            }
+        });
+        effect(() => {
+            if (this.pCheckboxUnstyled()) {
+                this.directiveUnstyled.set(true);
+            }
+        });
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('root'));
+    }
+    focus(options) {
+        this.element.nativeElement.focus(options);
+    }
+    get rootClass() {
+        return this.container ? this.cx('input') : this.cn(this.cx('root'), this.styleClass());
+    }
+    writeControlValue(value, setModelValue) {
+        setModelValue(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: CheckboxDirective, isStandalone: true, selector: "input[type='checkbox'][pCheckbox]", inputs: { styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, ptCheckbox: { classPropertyName: "ptCheckbox", publicName: "ptCheckbox", isSignal: true, isRequired: false, transformFunction: null }, pCheckboxPT: { classPropertyName: "pCheckboxPT", publicName: "pCheckboxPT", isSignal: true, isRequired: false, transformFunction: null }, pCheckboxUnstyled: { classPropertyName: "pCheckboxUnstyled", publicName: "pCheckboxUnstyled", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, trueValue: { classPropertyName: "trueValue", publicName: "trueValue", isSignal: true, isRequired: false, transformFunction: null }, falseValue: { classPropertyName: "falseValue", publicName: "falseValue", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur", touch: "touch" }, host: { listeners: { "click": "onInputClick($event)", "change": "onInputChange($event)", "focus": "onInputFocus($event)", "blur": "onInputBlur($event)" }, properties: { "class": "rootClass", "attr.data-pc-name": "'checkbox'", "attr.data-pc-section": "'input'", "attr.data-p": "dataP", "attr.data-p-invalid": "invalid() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy() || null", "attr.aria-required": "required() || null", "attr.tabindex": "tabindex() ?? null", "attr.id": "inputId() || null", "indeterminate": "indeterminate()", "readOnly": "readonly()", "autofocus": "autofocus()", "disabled": "$disabled()", "required": "required()", "attr.name": "name() || null", "value": "value() ?? \"\"", "checked": "checked" } }, providers: [CheckboxStyle, { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxDirective), multi: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "input[type='checkbox'][pCheckbox]",
+                    standalone: true,
+                    host: {
+                        '[class]': 'rootClass',
+                        '[attr.data-pc-name]': "'checkbox'",
+                        '[attr.data-pc-section]': "'input'",
+                        '[attr.data-p]': 'dataP',
+                        '[attr.data-p-invalid]': 'invalid() || null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy() || null',
+                        '[attr.aria-required]': 'required() || null',
+                        '[attr.tabindex]': 'tabindex() ?? null',
+                        '[attr.id]': 'inputId() || null',
+                        '[indeterminate]': 'indeterminate()',
+                        '[readOnly]': 'readonly()',
+                        '[autofocus]': 'autofocus()',
+                        '[disabled]': '$disabled()',
+                        '[required]': 'required()',
+                        '[attr.name]': 'name() || null',
+                        '[value]': 'value() ?? ""',
+                        '[checked]': 'checked',
+                        '(click)': 'onInputClick($event)',
+                        '(change)': 'onInputChange($event)',
+                        '(focus)': 'onInputFocus($event)',
+                        '(blur)': 'onInputBlur($event)'
+                    },
+                    providers: [CheckboxStyle, { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxDirective), multi: true }],
+                    hostDirectives: [Bind]
+                }]
+        }], ctorParameters: () => [], propDecorators: { styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], ptCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "ptCheckbox", required: false }] }], pCheckboxPT: [{ type: i0.Input, args: [{ isSignal: true, alias: "pCheckboxPT", required: false }] }], pCheckboxUnstyled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pCheckboxUnstyled", required: false }] }], binary: [{ type: i0.Input, args: [{ isSignal: true, alias: "binary", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], trueValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "trueValue", required: false }] }], falseValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "falseValue", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
+
+const CHECKBOX_INSTANCE = new InjectionToken('CHECKBOX_INSTANCE');
+const CHECKBOX_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => Checkbox),
+    multi: true
+};
+/**
+ * Checkbox is an extension to standard checkbox element with theming.
+ *
+ * @deprecated Use a native `<input type="checkbox" pCheckbox>` instead. For
+ * custom visual icons, use `pCheckboxContainer` and `pCheckboxIcon`. This
+ * component remains available for compatibility and is planned for removal in v23.
+ * @group Components
+ */
+class Checkbox extends BaseEditableHolder {
+    componentName = 'Checkbox';
+    hostName = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostName" }] : /* istanbul ignore next */ []));
+    /**
+     * Value of the checkbox.
+     * @group Props
+     */
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Allows to select a boolean value instead of multiple values.
+     * @group Props
+     */
+    binary = input(undefined, { ...(ngDevMode ? { debugName: "binary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     * @group Props
+     */
+    ariaLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to define a string that labels the input element.
+     * @group Props
+     */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex = input(undefined, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Identifier of the focus input to match a label defined for the component.
+     * @group Props
+     */
+    inputId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style of the input element.
+     * @group Props
+     */
+    inputStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
+     * @group Props
+     */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the input element.
+     * @group Props
+     */
+    inputClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    /**
+     * When present, it specifies input state as indeterminate.
+     * @group Props
+     */
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Form control value.
+     * @group Props
+     */
+    formControl = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "formControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Icon class of the checkbox icon.
+     * @group Props
+     */
+    checkboxIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "checkboxIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * When present, it specifies that the component cannot be edited.
+     * @group Props
+     */
+    readonly = input(undefined, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
+    autofocus = input(undefined, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Value in checked state.
+     * @group Props
+     */
+    trueValue = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trueValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Value in unchecked state.
+     * @group Props
+     */
+    falseValue = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "falseValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue undefined
+     * @group Props
+     */
+    variant = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the size of the component.
+     * @defaultValue undefined
+     * @group Props
+     */
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Callback to invoke on value change.
+     * @param {CheckboxChangeEvent} event - Custom value change event.
+     * @group Emits
+     */
+    onChange = output();
+    /**
+     * Callback to invoke when the receives focus.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    onFocus = output();
+    /**
+     * Callback to invoke when the loses focus.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    onBlur = output();
+    inputViewChild = viewChild('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputViewChild" }] : /* istanbul ignore next */ []));
+    get checked() {
+        return this._indeterminate() ? false : this.binary() ? this.modelValue() === this.trueValue() : contains(this.value(), this.modelValue());
+    }
+    _indeterminate = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_indeterminate" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom checkbox icon template.
+     * @group Templates
+     */
+    checkboxIconTemplate = contentChild('icon', { ...(ngDevMode ? { debugName: "checkboxIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    templates = contentChildren(PrimeTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    _checkboxIconTemplate;
+    focused = false;
+    _componentStyle = inject(CheckboxStyle);
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcCheckbox = inject(CHECKBOX_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$variant" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            this._indeterminate.set(this.indeterminate());
+        });
+    }
+    onAfterContentInit() {
+        this.templates()?.forEach((item) => {
+            switch (item.getType()) {
+                case 'icon':
+                    this._checkboxIconTemplate = item.template;
+                    break;
+                case 'checkboxicon':
+                    this._checkboxIconTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    updateModel(event) {
+        let newModelValue;
+        /*
+         * When `formControlName` or `formControl` is used - `writeValue` is not called after control changes.
+         * Otherwise it is causing multiple references to the actual value: there is one array reference inside the component and another one in the control value.
+         * `selfControl` is the source of truth of references, it is made to avoid reference loss.
+         * */
+        const selfControl = this.injector.get(NgControl, null, { optional: true, self: true });
+        const formControl = this.formControl();
+        const currentModelValue = selfControl && !formControl ? selfControl.value : this.modelValue();
+        if (!this.binary()) {
+            if (this.checked || this._indeterminate())
+                newModelValue = currentModelValue.filter((val) => !equals(val, this.value()));
+            else
+                newModelValue = currentModelValue ? [...currentModelValue, this.value()] : [this.value()];
+            this.onModelChange(newModelValue);
+            this.writeModelValue(newModelValue);
+            if (formControl) {
+                formControl.setValue(newModelValue);
+            }
+        }
+        else {
+            newModelValue = this._indeterminate() ? this.trueValue() : this.checked ? this.falseValue() : this.trueValue();
+            this.writeModelValue(newModelValue);
+            this.onModelChange(newModelValue);
+        }
+        if (this._indeterminate()) {
+            this._indeterminate.set(false);
+        }
+        this.onChange.emit({ checked: newModelValue, originalEvent: event });
+    }
+    handleChange(event) {
+        if (!this.readonly()) {
+            this.updateModel(event);
+        }
+    }
+    onInputFocus(event) {
+        this.focused = true;
+        this.onFocus.emit(event);
+    }
+    onInputBlur(event) {
+        this.focused = false;
+        this.onBlur.emit(event);
+        this.onModelTouched();
+    }
+    focus() {
+        this.inputViewChild()?.nativeElement.focus();
+    }
+    /**
+     * @override
+     *
+     * @see {@link BaseEditableHolder.writeControlValue}
+     * Writes the value to the control.
+     */
+    writeControlValue(value, setModelValue) {
+        setModelValue(value);
+        this.cd.markForCheck();
+    }
+    get dataP() {
+        return this.cn({
+            invalid: this.invalid(),
+            checked: this.checked,
+            disabled: this.$disabled(),
+            filled: this.$variant() === 'filled',
+            [this.size()]: this.size()
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Checkbox, isStandalone: true, selector: "p-checkbox, p-checkBox, p-check-box", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, checkboxIcon: { classPropertyName: "checkboxIcon", publicName: "checkboxIcon", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, trueValue: { classPropertyName: "trueValue", publicName: "trueValue", isSignal: true, isRequired: false, transformFunction: null }, falseValue: { classPropertyName: "falseValue", publicName: "falseValue", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class": "cn(cx('root'), styleClass())", "attr.data-p-highlight": "checked", "attr.data-p-checked": "checked", "attr.data-p-disabled": "$disabled()", "attr.data-p": "dataP" } }, providers: [CHECKBOX_VALUE_ACCESSOR, CheckboxStyle, { provide: CHECKBOX_INSTANCE, useExisting: Checkbox }, { provide: PARENT_INSTANCE, useExisting: Checkbox }], queries: [{ propertyName: "checkboxIconTemplate", first: true, predicate: ["icon"], isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <input
+            #input
+            [attr.id]="inputId()"
+            type="checkbox"
+            [attr.value]="value()"
+            [attr.name]="name()"
+            [checked]="checked"
+            [attr.tabindex]="tabindex()"
+            [attr.required]="required() ? '' : undefined"
+            [attr.readonly]="readonly() ? '' : undefined"
+            [attr.disabled]="$disabled() ? '' : undefined"
+            [attr.aria-labelledby]="ariaLabelledBy()"
+            [attr.aria-label]="ariaLabel()"
+            [style]="inputStyle()"
+            [class]="cn(cx('input'), inputClass())"
+            [pBind]="ptm('input')"
+            (focus)="onInputFocus($event)"
+            (blur)="onInputBlur($event)"
+            (change)="handleChange($event)"
+        />
+        <div [class]="cx('box')" [pBind]="ptm('box')" [attr.data-p]="dataP">
+            @if (!checkboxIconTemplate() && !_checkboxIconTemplate) {
+                @if (checked) {
+                    @if (checkboxIcon()) {
+                        <span [class]="cx('icon')" [ngClass]="checkboxIcon()" [pBind]="ptm('icon')" [attr.data-p]="dataP"></span>
+                    }
+                    @if (!checkboxIcon()) {
+                        <svg data-p-icon="check" [class]="cx('icon')" [pBind]="ptm('icon')" [attr.data-p]="dataP" />
+                    }
+                }
+                @if (_indeterminate()) {
+                    <svg data-p-icon="minus" [class]="cx('icon')" [pBind]="ptm('icon')" [attr.data-p]="dataP" />
+                }
+            }
+            <ng-template *ngTemplateOutlet="checkboxIconTemplate() || _checkboxIconTemplate; context: { checked: checked, class: cx('icon'), dataP: dataP }"></ng-template>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: CheckIcon, selector: "[data-p-icon=\"check\"]" }, { kind: "component", type: MinusIcon, selector: "[data-p-icon=\"minus\"]" }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Checkbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-checkbox, p-checkBox, p-check-box',
+                    standalone: true,
+                    imports: [CommonModule, SharedModule, CheckIcon, MinusIcon, BindModule],
+                    template: `
+        <input
+            #input
+            [attr.id]="inputId()"
+            type="checkbox"
+            [attr.value]="value()"
+            [attr.name]="name()"
+            [checked]="checked"
+            [attr.tabindex]="tabindex()"
+            [attr.required]="required() ? '' : undefined"
+            [attr.readonly]="readonly() ? '' : undefined"
+            [attr.disabled]="$disabled() ? '' : undefined"
+            [attr.aria-labelledby]="ariaLabelledBy()"
+            [attr.aria-label]="ariaLabel()"
+            [style]="inputStyle()"
+            [class]="cn(cx('input'), inputClass())"
+            [pBind]="ptm('input')"
+            (focus)="onInputFocus($event)"
+            (blur)="onInputBlur($event)"
+            (change)="handleChange($event)"
+        />
+        <div [class]="cx('box')" [pBind]="ptm('box')" [attr.data-p]="dataP">
+            @if (!checkboxIconTemplate() && !_checkboxIconTemplate) {
+                @if (checked) {
+                    @if (checkboxIcon()) {
+                        <span [class]="cx('icon')" [ngClass]="checkboxIcon()" [pBind]="ptm('icon')" [attr.data-p]="dataP"></span>
+                    }
+                    @if (!checkboxIcon()) {
+                        <svg data-p-icon="check" [class]="cx('icon')" [pBind]="ptm('icon')" [attr.data-p]="dataP" />
+                    }
+                }
+                @if (_indeterminate()) {
+                    <svg data-p-icon="minus" [class]="cx('icon')" [pBind]="ptm('icon')" [attr.data-p]="dataP" />
+                }
+            }
+            <ng-template *ngTemplateOutlet="checkboxIconTemplate() || _checkboxIconTemplate; context: { checked: checked, class: cx('icon'), dataP: dataP }"></ng-template>
+        </div>
+    `,
+                    providers: [CHECKBOX_VALUE_ACCESSOR, CheckboxStyle, { provide: CHECKBOX_INSTANCE, useExisting: Checkbox }, { provide: PARENT_INSTANCE, useExisting: Checkbox }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass())",
+                        '[attr.data-p-highlight]': 'checked',
+                        '[attr.data-p-checked]': 'checked',
+                        '[attr.data-p-disabled]': '$disabled()',
+                        '[attr.data-p]': 'dataP'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], ctorParameters: () => [], propDecorators: { hostName: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostName", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], binary: [{ type: i0.Input, args: [{ isSignal: true, alias: "binary", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], checkboxIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxIcon", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], trueValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "trueValue", required: false }] }], falseValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "falseValue", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], inputViewChild: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], checkboxIconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }] } });
+class CheckboxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: CheckboxModule, imports: [Checkbox, CheckboxContainerDirective, CheckboxDirective, CheckboxIconDirective, SharedModule], exports: [Checkbox, CheckboxContainerDirective, CheckboxDirective, CheckboxIconDirective, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxModule, imports: [Checkbox, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: CheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Checkbox, CheckboxContainerDirective, CheckboxDirective, CheckboxIconDirective, SharedModule],
+                    exports: [Checkbox, CheckboxContainerDirective, CheckboxDirective, CheckboxIconDirective, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CHECKBOX_VALUE_ACCESSOR, Checkbox, CheckboxClasses, CheckboxContainerDirective, CheckboxDirective, CheckboxIconDirective, CheckboxModule, CheckboxStyle };
+//# sourceMappingURL=wawjs-ngx-prime-checkbox.mjs.map