@gravionlabs/helix-core 22.0.0

package/fesm2022/gravionlabs-helix-core-checkbox.mjs

@@ -0,0 +1,500 @@
+export * from '@gravionlabs/helix-core/types/checkbox';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, forwardRef, input, booleanAttribute, numberAttribute, output, viewChild, signal, contentChild, contentChildren, inject, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { contains, equals } from '@gravionlabs/helix-core/uix/utils';
+import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
+import { PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
+import { BaseEditableHolder } from '@gravionlabs/helix-core/baseeditableholder';
+import * as i1 from '@gravionlabs/helix-core/bind';
+import { Bind, BindModule } from '@gravionlabs/helix-core/bind';
+import { CheckIcon } from '@gravionlabs/helix-core/icons/check';
+import { MinusIcon } from '@gravionlabs/helix-core/icons/minus';
+import { BaseStyle } from '@gravionlabs/helix-core/base';
+
+const style$1 = /*css*/ `
+    .h-checkbox {
+        position: relative;
+        display: inline-flex;
+        user-select: none;
+        vertical-align: bottom;
+        width: dt('checkbox.width');
+        height: dt('checkbox.height');
+    }
+
+    .h-checkbox-input {
+        cursor: pointer;
+        appearance: none;
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 1;
+        outline: 0 none;
+        border: 1px solid transparent;
+        border-radius: dt('checkbox.border.radius');
+    }
+
+    .h-checkbox-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: dt('checkbox.border.radius');
+        border: 1px solid dt('checkbox.border.color');
+        background: dt('checkbox.background');
+        width: dt('checkbox.width');
+        height: dt('checkbox.height');
+        transition:
+            background dt('checkbox.transition.duration'),
+            color dt('checkbox.transition.duration'),
+            border-color dt('checkbox.transition.duration'),
+            box-shadow dt('checkbox.transition.duration'),
+            outline-color dt('checkbox.transition.duration');
+        outline-color: transparent;
+        box-shadow: dt('checkbox.shadow');
+    }
+
+    .h-checkbox-icon {
+        transition-duration: dt('checkbox.transition.duration');
+        color: dt('checkbox.icon.color');
+        font-size: dt('checkbox.icon.size');
+        width: dt('checkbox.icon.size');
+        height: dt('checkbox.icon.size');
+    }
+
+    .h-checkbox:not(.h-disabled):has(.h-checkbox-input:hover) .h-checkbox-box {
+        border-color: dt('checkbox.hover.border.color');
+    }
+
+    .h-checkbox-checked .h-checkbox-box {
+        border-color: dt('checkbox.checked.border.color');
+        background: dt('checkbox.checked.background');
+    }
+
+    .h-checkbox-checked .h-checkbox-icon {
+        color: dt('checkbox.icon.checked.color');
+    }
+
+    .h-checkbox-checked:not(.h-disabled):has(.h-checkbox-input:hover) .h-checkbox-box {
+        background: dt('checkbox.checked.hover.background');
+        border-color: dt('checkbox.checked.hover.border.color');
+    }
+
+    .h-checkbox-checked:not(.h-disabled):has(.h-checkbox-input:hover) .h-checkbox-icon {
+        color: dt('checkbox.icon.checked.hover.color');
+    }
+
+    .h-checkbox:not(.h-disabled):has(.h-checkbox-input:focus-visible) .h-checkbox-box {
+        border-color: dt('checkbox.focus.border.color');
+        box-shadow: dt('checkbox.focus.ring.shadow');
+        outline: dt('checkbox.focus.ring.width') dt('checkbox.focus.ring.style') dt('checkbox.focus.ring.color');
+        outline-offset: dt('checkbox.focus.ring.offset');
+    }
+
+    .h-checkbox-checked:not(.h-disabled):has(.h-checkbox-input:focus-visible) .h-checkbox-box {
+        border-color: dt('checkbox.checked.focus.border.color');
+    }
+
+    .h-checkbox.h-invalid > .h-checkbox-box {
+        border-color: dt('checkbox.invalid.border.color');
+    }
+
+    .h-checkbox.h-variant-filled .h-checkbox-box {
+        background: dt('checkbox.filled.background');
+    }
+
+    .h-checkbox-checked.h-variant-filled .h-checkbox-box {
+        background: dt('checkbox.checked.background');
+    }
+
+    .h-checkbox-checked.h-variant-filled:not(.h-disabled):has(.h-checkbox-input:hover) .h-checkbox-box {
+        background: dt('checkbox.checked.hover.background');
+    }
+
+    .h-checkbox.h-disabled {
+        opacity: 1;
+    }
+
+    .h-checkbox.h-disabled .h-checkbox-box {
+        background: dt('checkbox.disabled.background');
+        border-color: dt('checkbox.checked.disabled.border.color');
+    }
+
+    .h-checkbox.h-disabled .h-checkbox-box .h-checkbox-icon {
+        color: dt('checkbox.icon.disabled.color');
+    }
+
+    .h-checkbox-sm,
+    .h-checkbox-sm .h-checkbox-box {
+        width: dt('checkbox.sm.width');
+        height: dt('checkbox.sm.height');
+    }
+
+    .h-checkbox-sm .h-checkbox-icon {
+        font-size: dt('checkbox.icon.sm.size');
+        width: dt('checkbox.icon.sm.size');
+        height: dt('checkbox.icon.sm.size');
+    }
+
+    .h-checkbox-lg,
+    .h-checkbox-lg .h-checkbox-box {
+        width: dt('checkbox.lg.width');
+        height: dt('checkbox.lg.height');
+    }
+
+    .h-checkbox-lg .h-checkbox-icon {
+        font-size: dt('checkbox.icon.lg.size');
+        width: dt('checkbox.icon.lg.size');
+        height: dt('checkbox.icon.lg.size');
+    }
+`;
+
+const style = /*css*/ `
+    ${style$1}
+
+    /* For Helix */
+    h-checkBox.ng-invalid.ng-dirty .h-checkbox-box,
+    h-check-box.ng-invalid.ng-dirty .h-checkbox-box,
+    h-checkbox.ng-invalid.ng-dirty .h-checkbox-box {
+        border-color: dt('checkbox.invalid.border.color');
+    }
+`;
+const classes = {
+    root: ({ instance }) => [
+        'h-checkbox h-component',
+        {
+            'h-checkbox-checked h-highlight': instance.checked,
+            'h-disabled': instance.$disabled(),
+            'h-invalid': instance.invalid(),
+            'h-variant-filled': instance.$variant() === 'filled',
+            'h-checkbox-sm h-inputfield-sm': instance.size() === 'small',
+            'h-checkbox-lg h-inputfield-lg': instance.size() === 'large'
+        }
+    ],
+    box: 'h-checkbox-box',
+    input: 'h-checkbox-input',
+    icon: 'h-checkbox-icon'
+};
+class CheckboxStyle extends BaseStyle {
+    name = 'checkbox';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CheckboxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CheckboxStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CheckboxStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Checkbox is an extension to standard checkbox element with theming.
+ *
+ * [Live Demo](https://www.primeng.org/checkbox/)
+ *
+ * @module checkboxstyle
+ *
+ */
+var CheckboxClasses;
+(function (CheckboxClasses) {
+    /**
+     * Class name of the root element
+     */
+    CheckboxClasses["root"] = "h-checkbox";
+    /**
+     * Class name of the box element
+     */
+    CheckboxClasses["box"] = "h-checkbox-box";
+    /**
+     * Class name of the input element
+     */
+    CheckboxClasses["input"] = "h-checkbox-input";
+    /**
+     * Class name of the icon element
+     */
+    CheckboxClasses["icon"] = "h-checkbox-icon";
+})(CheckboxClasses || (CheckboxClasses = {}));
+
+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.
+ * @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(HelixTemplate, /* @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 */ []));
+    onAfterContentInit() {
+        this.templates()?.forEach((item) => {
+            switch (item.getType()) {
+                case 'icon':
+                    this._checkboxIconTemplate = item.template;
+                    break;
+                case 'checkboxicon':
+                    this._checkboxIconTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    onChanges(changes) {
+        if (changes.indeterminate) {
+            this._indeterminate.set(changes.indeterminate.currentValue);
+        }
+    }
+    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 currentModelValue = selfControl && !this.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);
+            const formControl = this.formControl();
+            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.6", ngImport: i0, type: Checkbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Checkbox, isStandalone: true, selector: "h-checkbox, h-checkBox, h-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-h-highlight": "checked", "attr.data-h-checked": "checked", "attr.data-h-disabled": "$disabled()", "attr.data-h": "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: HelixTemplate, isSignal: true }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<input\n  #input\n  [attr.id]=\"inputId()\"\n  type=\"checkbox\"\n  [attr.value]=\"value()\"\n  [attr.name]=\"name()\"\n  [checked]=\"checked\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.required]=\"required() ? '' : undefined\"\n  [attr.readonly]=\"readonly() ? '' : undefined\"\n  [attr.disabled]=\"$disabled() ? '' : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [style]=\"inputStyle()\"\n  [class]=\"cn(cx('input'), inputClass())\"\n  [hBind]=\"ptm('input')\"\n  (focus)=\"onInputFocus($event)\"\n  (blur)=\"onInputBlur($event)\"\n  (change)=\"handleChange($event)\"\n  />\n<div [class]=\"cx('box')\" [hBind]=\"ptm('box')\" [attr.data-h]=\"dataP\">\n  @if (!checkboxIconTemplate() && !_checkboxIconTemplate) {\n    @if (checked) {\n      @if (checkboxIcon()) {\n        <span [class]=\"cx('icon')\" [ngClass]=\"checkboxIcon()\" [hBind]=\"ptm('icon')\" [attr.data-h]=\"dataP\"></span>\n      }\n      @if (!checkboxIcon()) {\n        <svg data-h-icon=\"check\" [class]=\"cx('icon')\" [hBind]=\"ptm('icon')\" [attr.data-h]=\"dataP\" />\n      }\n    }\n    @if (_indeterminate()) {\n      <svg data-h-icon=\"minus\" [class]=\"cx('icon')\" [hBind]=\"ptm('icon')\" [attr.data-h]=\"dataP\" />\n    }\n  }\n  <ng-template *ngTemplateOutlet=\"checkboxIconTemplate() || _checkboxIconTemplate; context: { checked: checked, class: cx('icon'), dataP: dataP }\"></ng-template>\n</div>\n", 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-h-icon=\"check\"]" }, { kind: "component", type: MinusIcon, selector: "[data-h-icon=\"minus\"]" }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Checkbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-checkbox, h-checkBox, h-check-box', standalone: true, imports: [CommonModule, SharedModule, CheckIcon, MinusIcon, BindModule], 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-h-highlight]': 'checked',
+                        '[attr.data-h-checked]': 'checked',
+                        '[attr.data-h-disabled]': '$disabled()',
+                        '[attr.data-h]': 'dataP'
+                    }, hostDirectives: [Bind], template: "<input\n  #input\n  [attr.id]=\"inputId()\"\n  type=\"checkbox\"\n  [attr.value]=\"value()\"\n  [attr.name]=\"name()\"\n  [checked]=\"checked\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.required]=\"required() ? '' : undefined\"\n  [attr.readonly]=\"readonly() ? '' : undefined\"\n  [attr.disabled]=\"$disabled() ? '' : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [style]=\"inputStyle()\"\n  [class]=\"cn(cx('input'), inputClass())\"\n  [hBind]=\"ptm('input')\"\n  (focus)=\"onInputFocus($event)\"\n  (blur)=\"onInputBlur($event)\"\n  (change)=\"handleChange($event)\"\n  />\n<div [class]=\"cx('box')\" [hBind]=\"ptm('box')\" [attr.data-h]=\"dataP\">\n  @if (!checkboxIconTemplate() && !_checkboxIconTemplate) {\n    @if (checked) {\n      @if (checkboxIcon()) {\n        <span [class]=\"cx('icon')\" [ngClass]=\"checkboxIcon()\" [hBind]=\"ptm('icon')\" [attr.data-h]=\"dataP\"></span>\n      }\n      @if (!checkboxIcon()) {\n        <svg data-h-icon=\"check\" [class]=\"cx('icon')\" [hBind]=\"ptm('icon')\" [attr.data-h]=\"dataP\" />\n      }\n    }\n    @if (_indeterminate()) {\n      <svg data-h-icon=\"minus\" [class]=\"cx('icon')\" [hBind]=\"ptm('icon')\" [attr.data-h]=\"dataP\" />\n    }\n  }\n  <ng-template *ngTemplateOutlet=\"checkboxIconTemplate() || _checkboxIconTemplate; context: { checked: checked, class: cx('icon'), dataP: dataP }\"></ng-template>\n</div>\n" }]
+        }], 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(() => HelixTemplate), { isSignal: true }] }] } });
+class CheckboxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: CheckboxModule, imports: [Checkbox, SharedModule], exports: [Checkbox, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CheckboxModule, imports: [Checkbox, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Checkbox, SharedModule],
+                    exports: [Checkbox, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CHECKBOX_VALUE_ACCESSOR, Checkbox, CheckboxClasses, CheckboxModule, CheckboxStyle };
+//# sourceMappingURL=gravionlabs-helix-core-checkbox.mjs.map

package/fesm2022/gravionlabs-helix-core-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gravionlabs-helix-core-checkbox.mjs","sources":["../../../projects/core/checkbox/style/checkbox.css.ts","../../../projects/core/checkbox/style/checkboxstyle.ts","../../../projects/core/checkbox/checkbox.ts","../../../projects/core/checkbox/checkbox.html","../../../projects/core/checkbox/gravionlabs-helix-core-checkbox.ts"],"sourcesContent":["export const style = /*css*/ `\n    .h-checkbox {\n        position: relative;\n        display: inline-flex;\n        user-select: none;\n        vertical-align: bottom;\n        width: dt('checkbox.width');\n        height: dt('checkbox.height');\n    }\n\n    .h-checkbox-input {\n        cursor: pointer;\n        appearance: none;\n        position: absolute;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n        width: 100%;\n        height: 100%;\n        padding: 0;\n        margin: 0;\n        opacity: 0;\n        z-index: 1;\n        outline: 0 none;\n        border: 1px solid transparent;\n        border-radius: dt('checkbox.border.radius');\n    }\n\n    .h-checkbox-box {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border-radius: dt('checkbox.border.radius');\n        border: 1px solid dt('checkbox.border.color');\n        background: dt('checkbox.background');\n        width: dt('checkbox.width');\n        height: dt('checkbox.height');\n        transition:\n            background dt('checkbox.transition.duration'),\n            color dt('checkbox.transition.duration'),\n            border-color dt('checkbox.transition.duration'),\n            box-shadow dt('checkbox.transition.duration'),\n            outline-color dt('checkbox.transition.duration');\n        outline-color: transparent;\n        box-shadow: dt('checkbox.shadow');\n    }\n\n    .h-checkbox-icon {\n        transition-duration: dt('checkbox.transition.duration');\n        color: dt('checkbox.icon.color');\n        font-size: dt('checkbox.icon.size');\n        width: dt('checkbox.icon.size');\n        height: dt('checkbox.icon.size');\n    }\n\n    .h-checkbox:not(.h-disabled):has(.h-checkbox-input:hover) .h-checkbox-box {\n        border-color: dt('checkbox.hover.border.color');\n    }\n\n    .h-checkbox-checked .h-checkbox-box {\n        border-color: dt('checkbox.checked.border.color');\n        background: dt('checkbox.checked.background');\n    }\n\n    .h-checkbox-checked .h-checkbox-icon {\n        color: dt('checkbox.icon.checked.color');\n    }\n\n    .h-checkbox-checked:not(.h-disabled):has(.h-checkbox-input:hover) .h-checkbox-box {\n        background: dt('checkbox.checked.hover.background');\n        border-color: dt('checkbox.checked.hover.border.color');\n    }\n\n    .h-checkbox-checked:not(.h-disabled):has(.h-checkbox-input:hover) .h-checkbox-icon {\n        color: dt('checkbox.icon.checked.hover.color');\n    }\n\n    .h-checkbox:not(.h-disabled):has(.h-checkbox-input:focus-visible) .h-checkbox-box {\n        border-color: dt('checkbox.focus.border.color');\n        box-shadow: dt('checkbox.focus.ring.shadow');\n        outline: dt('checkbox.focus.ring.width') dt('checkbox.focus.ring.style') dt('checkbox.focus.ring.color');\n        outline-offset: dt('checkbox.focus.ring.offset');\n    }\n\n    .h-checkbox-checked:not(.h-disabled):has(.h-checkbox-input:focus-visible) .h-checkbox-box {\n        border-color: dt('checkbox.checked.focus.border.color');\n    }\n\n    .h-checkbox.h-invalid > .h-checkbox-box {\n        border-color: dt('checkbox.invalid.border.color');\n    }\n\n    .h-checkbox.h-variant-filled .h-checkbox-box {\n        background: dt('checkbox.filled.background');\n    }\n\n    .h-checkbox-checked.h-variant-filled .h-checkbox-box {\n        background: dt('checkbox.checked.background');\n    }\n\n    .h-checkbox-checked.h-variant-filled:not(.h-disabled):has(.h-checkbox-input:hover) .h-checkbox-box {\n        background: dt('checkbox.checked.hover.background');\n    }\n\n    .h-checkbox.h-disabled {\n        opacity: 1;\n    }\n\n    .h-checkbox.h-disabled .h-checkbox-box {\n        background: dt('checkbox.disabled.background');\n        border-color: dt('checkbox.checked.disabled.border.color');\n    }\n\n    .h-checkbox.h-disabled .h-checkbox-box .h-checkbox-icon {\n        color: dt('checkbox.icon.disabled.color');\n    }\n\n    .h-checkbox-sm,\n    .h-checkbox-sm .h-checkbox-box {\n        width: dt('checkbox.sm.width');\n        height: dt('checkbox.sm.height');\n    }\n\n    .h-checkbox-sm .h-checkbox-icon {\n        font-size: dt('checkbox.icon.sm.size');\n        width: dt('checkbox.icon.sm.size');\n        height: dt('checkbox.icon.sm.size');\n    }\n\n    .h-checkbox-lg,\n    .h-checkbox-lg .h-checkbox-box {\n        width: dt('checkbox.lg.width');\n        height: dt('checkbox.lg.height');\n    }\n\n    .h-checkbox-lg .h-checkbox-icon {\n        font-size: dt('checkbox.icon.lg.size');\n        width: dt('checkbox.icon.lg.size');\n        height: dt('checkbox.icon.lg.size');\n    }\n`;\n","import { Injectable } from '@angular/core';\nimport { style as checkbox_style } from './checkbox.css';\nimport { BaseStyle } from '@gravionlabs/helix-core/base';\n\nconst style = /*css*/ `\n    ${checkbox_style}\n\n    /* For Helix */\n    h-checkBox.ng-invalid.ng-dirty .h-checkbox-box,\n    h-check-box.ng-invalid.ng-dirty .h-checkbox-box,\n    h-checkbox.ng-invalid.ng-dirty .h-checkbox-box {\n        border-color: dt('checkbox.invalid.border.color');\n    }\n`;\n\nconst classes = {\n    root: ({ instance }) => [\n        'h-checkbox h-component',\n        {\n            'h-checkbox-checked h-highlight': instance.checked,\n            'h-disabled': instance.$disabled(),\n            'h-invalid': instance.invalid(),\n            'h-variant-filled': instance.$variant() === 'filled',\n            'h-checkbox-sm h-inputfield-sm': instance.size() === 'small',\n            'h-checkbox-lg h-inputfield-lg': instance.size() === 'large'\n        }\n    ],\n    box: 'h-checkbox-box',\n    input: 'h-checkbox-input',\n    icon: 'h-checkbox-icon'\n};\n\n@Injectable()\nexport class CheckboxStyle extends BaseStyle {\n    name = 'checkbox';\n\n    style = style;\n\n    classes = classes;\n}\n\n/**\n *\n * Checkbox is an extension to standard checkbox element with theming.\n *\n * [Live Demo](https://www.primeng.org/checkbox/)\n *\n * @module checkboxstyle\n *\n */\nexport enum CheckboxClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'h-checkbox',\n    /**\n     * Class name of the box element\n     */\n    box = 'h-checkbox-box',\n    /**\n     * Class name of the input element\n     */\n    input = 'h-checkbox-input',\n    /**\n     * Class name of the icon element\n     */\n    icon = 'h-checkbox-icon'\n}\n\nexport interface CheckboxStyle extends BaseStyle {}\n","import { CommonModule } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  forwardRef,\n  inject,\n  InjectionToken,\n  input,\n  Input,\n  NgModule,\n  numberAttribute,\n  signal,\n  SimpleChanges,\n  TemplateRef,\n  ViewEncapsulation,\n  output,\n  viewChild,\n  contentChild,\n  contentChildren\n} from '@angular/core';\nimport { FormControl, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { contains, equals } from '@gravionlabs/helix-core/uix/utils';\nimport { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';\nimport { PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';\nimport { BaseEditableHolder } from '@gravionlabs/helix-core/baseeditableholder';\nimport { Bind, BindModule } from '@gravionlabs/helix-core/bind';\nimport { CheckIcon } from '@gravionlabs/helix-core/icons/check';\nimport { MinusIcon } from '@gravionlabs/helix-core/icons/minus';\nimport { Nullable } from '@gravionlabs/helix-core/ts-helpers';\nimport { CheckboxChangeEvent, CheckboxIconTemplateContext, CheckboxPassThrough } from '@gravionlabs/helix-core/types/checkbox';\nimport { CheckboxStyle } from './style/checkboxstyle';\n\nconst CHECKBOX_INSTANCE = new InjectionToken<Checkbox>('CHECKBOX_INSTANCE');\n\nexport const CHECKBOX_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => Checkbox),\n    multi: true\n};\n/**\n * Checkbox is an extension to standard checkbox element with theming.\n * @group Components\n */\n@Component({\n    selector: 'h-checkbox, h-checkBox, h-check-box',\n    standalone: true,\n    imports: [CommonModule, SharedModule, CheckIcon, MinusIcon, BindModule],\n    templateUrl: './checkbox.html',\n    providers: [CHECKBOX_VALUE_ACCESSOR, CheckboxStyle, { provide: CHECKBOX_INSTANCE, useExisting: Checkbox }, { provide: PARENT_INSTANCE, useExisting: Checkbox }],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"cn(cx('root'), styleClass())\",\n        '[attr.data-h-highlight]': 'checked',\n        '[attr.data-h-checked]': 'checked',\n        '[attr.data-h-disabled]': '$disabled()',\n        '[attr.data-h]': 'dataP'\n    },\n    hostDirectives: [Bind]\n})\nexport class Checkbox extends BaseEditableHolder<CheckboxPassThrough> {\n    componentName = 'Checkbox';\n\n    readonly hostName = input<any>('');\n    /**\n     * Value of the checkbox.\n     * @group Props\n     */\n    readonly value = input<any>();\n    /**\n     * Allows to select a boolean value instead of multiple values.\n     * @group Props\n     */\n    readonly binary = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n    /**\n     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.\n     * @group Props\n     */\n    readonly ariaLabelledBy = input<string>();\n    /**\n     * Used to define a string that labels the input element.\n     * @group Props\n     */\n    readonly ariaLabel = input<string>();\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    readonly tabindex = input<number, unknown>(undefined, { transform: numberAttribute });\n    /**\n     * Identifier of the focus input to match a label defined for the component.\n     * @group Props\n     */\n    readonly inputId = input<string>();\n    /**\n     * Inline style of the input element.\n     * @group Props\n     */\n    readonly inputStyle = input<{\n    [klass: string]: any;\n} | null>();\n    /**\n     * Style class of the component.\n     * @deprecated since v20.0.0, use `class` instead.\n     * @group Props\n     */\n    readonly styleClass = input<string>();\n    /**\n     * Style class of the input element.\n     * @group Props\n     */\n    readonly inputClass = input<string>();\n    /**\n     * When present, it specifies input state as indeterminate.\n     * @group Props\n     */\n    readonly indeterminate = input<boolean, unknown>(false, { transform: booleanAttribute });\n    /**\n     * Form control value.\n     * @group Props\n     */\n    readonly formControl = input<FormControl>();\n    /**\n     * Icon class of the checkbox icon.\n     * @group Props\n     */\n    readonly checkboxIcon = input<string>();\n    /**\n     * When present, it specifies that the component cannot be edited.\n     * @group Props\n     */\n    readonly readonly = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n    /**\n     * When present, it specifies that the component should automatically get focus on load.\n     * @group Props\n     */\n    readonly autofocus = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n    /**\n     * Value in checked state.\n     * @group Props\n     */\n    readonly trueValue = input<any>(true);\n    /**\n     * Value in unchecked state.\n     * @group Props\n     */\n    readonly falseValue = input<any>(false);\n    /**\n     * Specifies the input variant of the component.\n     * @defaultValue undefined\n     * @group Props\n     */\n    variant = input<'filled' | 'outlined' | undefined>();\n    /**\n     * Specifies the size of the component.\n     * @defaultValue undefined\n     * @group Props\n     */\n    size = input<'large' | 'small' | undefined>();\n    /**\n     * Callback to invoke on value change.\n     * @param {CheckboxChangeEvent} event - Custom value change event.\n     * @group Emits\n     */\n    readonly onChange = output<CheckboxChangeEvent>();\n    /**\n     * Callback to invoke when the receives focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    readonly onFocus = output<Event>();\n    /**\n     * Callback to invoke when the loses focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    readonly onBlur = output<Event>();\n\n    readonly inputViewChild = viewChild<Nullable<ElementRef>>('input');\n\n    get checked() {\n        return this._indeterminate() ? false : this.binary() ? this.modelValue() === this.trueValue() : contains(this.value(), this.modelValue());\n    }\n\n    _indeterminate = signal<any>(undefined);\n    /**\n     * Custom checkbox icon template.\n     * @group Templates\n     */\n    readonly checkboxIconTemplate = contentChild<TemplateRef<CheckboxIconTemplateContext>>('icon', { descendants: false });\n\n    readonly templates = contentChildren(HelixTemplate);\n\n    _checkboxIconTemplate: TemplateRef<CheckboxIconTemplateContext> | undefined;\n\n    focused: boolean = false;\n\n    _componentStyle = inject(CheckboxStyle);\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    $pcCheckbox: Checkbox | undefined = inject(CHECKBOX_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;\n\n    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant());\n\n    onAfterContentInit() {\n        this.templates()?.forEach((item) => {\n            switch (item.getType()) {\n                case 'icon':\n                    this._checkboxIconTemplate = item.template;\n                    break;\n                case 'checkboxicon':\n                    this._checkboxIconTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    onChanges(changes: SimpleChanges) {\n        if (changes.indeterminate) {\n            this._indeterminate.set(changes.indeterminate.currentValue);\n        }\n    }\n\n    onAfterViewChecked(): void {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n\n    updateModel(event) {\n        let newModelValue;\n\n        /*\n         * When `formControlName` or `formControl` is used - `writeValue` is not called after control changes.\n         * 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.\n         * `selfControl` is the source of truth of references, it is made to avoid reference loss.\n         * */\n        const selfControl = this.injector.get<NgControl | null>(NgControl, null, { optional: true, self: true });\n\n        const currentModelValue = selfControl && !this.formControl() ? selfControl.value : this.modelValue();\n\n        if (!this.binary()) {\n            if (this.checked || this._indeterminate()) newModelValue = currentModelValue.filter((val) => !equals(val, this.value()));\n            else newModelValue = currentModelValue ? [...currentModelValue, this.value()] : [this.value()];\n\n            this.onModelChange(newModelValue);\n            this.writeModelValue(newModelValue);\n\n            const formControl = this.formControl();\n            if (formControl) {\n                formControl.setValue(newModelValue);\n            }\n        } else {\n            newModelValue = this._indeterminate() ? this.trueValue() : this.checked ? this.falseValue() : this.trueValue();\n            this.writeModelValue(newModelValue);\n            this.onModelChange(newModelValue);\n        }\n\n        if (this._indeterminate()) {\n            this._indeterminate.set(false);\n        }\n\n        this.onChange.emit({ checked: newModelValue, originalEvent: event });\n    }\n\n    handleChange(event) {\n        if (!this.readonly()) {\n            this.updateModel(event);\n        }\n    }\n\n    onInputFocus(event) {\n        this.focused = true;\n        this.onFocus.emit(event);\n    }\n\n    onInputBlur(event) {\n        this.focused = false;\n        this.onBlur.emit(event);\n        this.onModelTouched();\n    }\n\n    focus() {\n        this.inputViewChild()?.nativeElement.focus();\n    }\n\n    /**\n     * @override\n     *\n     * @see {@link BaseEditableHolder.writeControlValue}\n     * Writes the value to the control.\n     */\n    writeControlValue(value: any, setModelValue: (value: any) => void): void {\n        setModelValue(value);\n        this.cd.markForCheck();\n    }\n\n    get dataP() {\n        return this.cn({\n            invalid: this.invalid(),\n            checked: this.checked,\n            disabled: this.$disabled(),\n            filled: this.$variant() === 'filled',\n            [this.size() as string]: this.size()\n        });\n    }\n}\n\n@NgModule({\n    imports: [Checkbox, SharedModule],\n    exports: [Checkbox, SharedModule]\n})\nexport class CheckboxModule {}\n","<input\n  #input\n  [attr.id]=\"inputId()\"\n  type=\"checkbox\"\n  [attr.value]=\"value()\"\n  [attr.name]=\"name()\"\n  [checked]=\"checked\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.required]=\"required() ? '' : undefined\"\n  [attr.readonly]=\"readonly() ? '' : undefined\"\n  [attr.disabled]=\"$disabled() ? '' : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [style]=\"inputStyle()\"\n  [class]=\"cn(cx('input'), inputClass())\"\n  [hBind]=\"ptm('input')\"\n  (focus)=\"onInputFocus($event)\"\n  (blur)=\"onInputBlur($event)\"\n  (change)=\"handleChange($event)\"\n  />\n<div [class]=\"cx('box')\" [hBind]=\"ptm('box')\" [attr.data-h]=\"dataP\">\n  @if (!checkboxIconTemplate() && !_checkboxIconTemplate) {\n    @if (checked) {\n      @if (checkboxIcon()) {\n        <span [class]=\"cx('icon')\" [ngClass]=\"checkboxIcon()\" [hBind]=\"ptm('icon')\" [attr.data-h]=\"dataP\"></span>\n      }\n      @if (!checkboxIcon()) {\n        <svg data-h-icon=\"check\" [class]=\"cx('icon')\" [hBind]=\"ptm('icon')\" [attr.data-h]=\"dataP\" />\n      }\n    }\n    @if (_indeterminate()) {\n      <svg data-h-icon=\"minus\" [class]=\"cx('icon')\" [hBind]=\"ptm('icon')\" [attr.data-h]=\"dataP\" />\n    }\n  }\n  <ng-template *ngTemplateOutlet=\"checkboxIconTemplate() || _checkboxIconTemplate; context: { checked: checked, class: cx('icon'), dataP: dataP }\"></ng-template>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["style","checkbox_style"],"mappings":"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"}