@kirbydesign/designsystem 11.11.3 → 12.0.0-dev-67d5287

package/fesm2022/kirbydesign-designsystem-checkbox.mjs

@@ -1,177 +1,216 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, forwardRef, Output, HostBinding, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i1 from '@kirbydesign/designsystem/helpers';
-import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
-import { IonCheckbox } from '@ionic/angular';
-import { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';
-
-class CheckboxComponent {
-    get _isDisabled() {
-        return this.disabled ? 'disabled' : null;
-    }
-    get isAttentionLevel1() {
-        return this.attentionLevel === '1';
-    }
-    get isAttentionLevel2() {
-        return this.attentionLevel === '2';
-    }
-    constructor(element, ionicElementPartHelper, cdr) {
-        this.element = element;
-        this.ionicElementPartHelper = ionicElementPartHelper;
-        this.cdr = cdr;
-        this.checked = false;
-        this.indeterminate = false;
-        this.attentionLevel = '2';
-        this.size = 'md';
-        this.hasError = false;
-        this.disabled = false;
-        this.checkedChange = new EventEmitter();
-        this._justify = 'start';
-        this._labelPlacement = 'end';
-        // Initialize default ControlValueAccessor callback functions (noop)
-        // eslint-disable-next-line no-empty-function
-        this._onChange = () => { };
-        // eslint-disable-next-line no-empty-function
-        this._onTouched = () => { };
-    }
-    ngOnInit() {
-        /**
-         * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.
-         * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.
-         * So it has to be done by querying an additional wrapper around the default content slot like this.
-         */
-        this._hasSlottedContent = this.element.nativeElement
-            .querySelector('.default-content')
-            .hasChildNodes();
-        const slot = this.element.nativeElement.getAttribute('slot');
-        if (slot === 'end' && this._hasSlottedContent) {
-            this._justify = 'space-between';
-            this._labelPlacement = 'start';
-        }
-    }
-    ngAfterViewInit() {
-        this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');
-        this.ionicElementPartHelper.setPart('label-text-wrapper', this.ionCheckboxElement, '.label-text-wrapper');
-        this.ionicElementPartHelper.setPart('native-wrapper', this.ionCheckboxElement, '.native-wrapper');
-    }
-    ngAfterContentInit() {
-        this._labelText = inheritAriaLabelText(this.element.nativeElement);
-        if (!this.text && !this._labelText && !this._hasSlottedContent) {
-            // if no label has been set try to find a label in an item and use its text content
-            this._labelText = setAccessibleLabel(this.element.nativeElement);
-        }
-    }
-    onChecked(checked) {
-        this.checked = checked;
-        this._onChange(this.checked);
-        this.checkedChange.emit(this.checked);
-    }
-    onBlur() {
-        this._onTouched();
-    }
-    /**
-     * Sets the checkbox's value. Part of the ControlValueAccessor interface
-     * required to integrate with Angular's core forms API.
-     *
-     * @param value New value to be written to the model.
-     */
-    writeValue(value) {
-        this.checked = value;
-        this.cdr.markForCheck();
-    }
-    /**
-     * Saves a callback function to be invoked when the checkbox's value
-     * changes from user input. Part of the ControlValueAccessor interface
-     * required to integrate with Angular's core forms API.
-     *
-     * @param fn Callback to be triggered when the value changes.
-     */
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    /**
-     * Saves a callback function to be invoked when the checkbox is blurred
-     * by the user. Part of the ControlValueAccessor interface required
-     * to integrate with Angular's core forms API.
-     *
-     * @param fn Callback to be triggered when the component has been touched.
-     */
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    /**
-     * Disables the checkbox. Part of the ControlValueAccessor interface required
-     * to integrate with Angular's core forms API.
-     *
-     * @param isDisabled Sets whether the component is disabled.
-     */
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i1.IonicElementPartHelper }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: CheckboxComponent, isStandalone: true, selector: "kirby-checkbox", inputs: { checked: "checked", indeterminate: "indeterminate", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.has-hidden-label": "this._labelText" } }, providers: [
-            IonicElementPartHelper,
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef((() => CheckboxComponent)),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "ionCheckboxElement", first: true, predicate: IonCheckbox, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media(hover:hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(17.6590826639%, 75.5644467479%, 44.7637211713%);--border-color-checked: rgb(17.6590826639%, 75.5644467479%, 44.7637211713%)}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: rgb(15.9772652673%, 68.3678327719%, 40.5005096312%);--border-color-checked: rgb(15.9772652673%, 68.3678327719%, 40.5005096312%)}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media(hover:hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(35.9058823529%, 35.9058823529%, 35.9058823529%);--border-color-checked: rgb(35.9058823529%, 35.9058823529%, 35.9058823529%)}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: rgb(92%, 92%, 92%);--checkbox-background-checked: rgb(43.0274509804%, 43.0274509804%, 43.0274509804%);--border-color-checked: rgb(43.0274509804%, 43.0274509804%, 43.0274509804%)}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-medium)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:var(--kirby-relative-size-s);font-size:var(--kirby-font-size-s)}:host.xs ion-checkbox{--size: 16px;--border-radius: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxxs)}:host.xs ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host.xs ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-s)}:host ion-checkbox:focus-visible{outline:none;--border-width: 0;--border-color: transparent;--border-color-checked: transparent}:host ion-checkbox:focus-visible::part(container){padding:calc(var(--kirby-checkbox-container-padding) + 1px);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}@media(hover:hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: rgb(92%, 92%, 92%)}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: rgb(88%, 88%, 88%)}:host ion-checkbox{--transition: border-color 80ms linear, background-color 80ms linear;--size: 24px;--checkmark-width: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxs);--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}:host ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host ion-checkbox::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-m)}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host.has-hidden-label:has(ion-checkbox.in-item){position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox{position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host :host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"], dependencies: [{ kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [IonCheckbox], selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        IonicElementPartHelper,
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef((() => CheckboxComponent)),
-                            multi: true,
-                        },
-                    ], template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--checkbox-background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media(hover:hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(17.6590826639%, 75.5644467479%, 44.7637211713%);--border-color-checked: rgb(17.6590826639%, 75.5644467479%, 44.7637211713%)}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background-checked: rgb(15.9772652673%, 68.3678327719%, 40.5005096312%);--border-color-checked: rgb(15.9772652673%, 68.3678327719%, 40.5005096312%)}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--checkbox-background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media(hover:hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background-checked: rgb(35.9058823529%, 35.9058823529%, 35.9058823529%);--border-color-checked: rgb(35.9058823529%, 35.9058823529%, 35.9058823529%)}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: rgb(92%, 92%, 92%);--checkbox-background-checked: rgb(43.0274509804%, 43.0274509804%, 43.0274509804%);--border-color-checked: rgb(43.0274509804%, 43.0274509804%, 43.0274509804%)}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{--checkmark-color: var(--kirby-semi-dark);--checkbox-background: var(--kirby-semi-light);--checkbox-background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-medium)}:host[disabled] ion-checkbox::part(label-text-wrapper){opacity:1}:host[disabled] ion-checkbox::part(native-wrapper){opacity:1}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:var(--kirby-relative-size-s);font-size:var(--kirby-font-size-s)}:host.xs ion-checkbox{--size: 16px;--border-radius: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxxs)}:host.xs ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host.xs ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-s)}:host ion-checkbox:focus-visible{outline:none;--border-width: 0;--border-color: transparent;--border-color-checked: transparent}:host ion-checkbox:focus-visible::part(container){padding:calc(var(--kirby-checkbox-container-padding) + 1px);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}@media(hover:hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--checkbox-background: rgb(92%, 92%, 92%)}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkbox-background: rgb(88%, 88%, 88%)}:host ion-checkbox{--transition: border-color 80ms linear, background-color 80ms linear;--size: 24px;--checkmark-width: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxs);--checkbox-background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px}:host ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host ion-checkbox::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-m)}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host.has-hidden-label:has(ion-checkbox.in-item){position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox{position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host :host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IonicElementPartHelper }, { type: i0.ChangeDetectorRef }], propDecorators: { ionCheckboxElement: [{
-                type: ViewChild,
-                args: [IonCheckbox, { read: ElementRef, static: true }]
-            }], checked: [{
-                type: Input
-            }], indeterminate: [{
-                type: Input
-            }], attentionLevel: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], size: [{
-                type: HostBinding,
-                args: ['class']
-            }, {
-                type: Input
-            }], hasError: [{
-                type: HostBinding,
-                args: ['class.error']
-            }, {
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], _isDisabled: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], isAttentionLevel1: [{
-                type: HostBinding,
-                args: ['class.attention-level1']
-            }], isAttentionLevel2: [{
-                type: HostBinding,
-                args: ['class.attention-level2']
-            }], _labelText: [{
-                type: HostBinding,
-                args: ['class.has-hidden-label']
-            }], checkedChange: [{
-                type: Output
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, forwardRef } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import * as i1 from "@kirbydesign/designsystem/helpers";
+import { IonicElementPartHelper } from "@kirbydesign/designsystem/helpers";
+import { IonCheckbox } from "@ionic/angular";
+import { inheritAriaLabelText, setAccessibleLabel } from "@kirbydesign/designsystem/shared";
+var CheckboxComponent = class CheckboxComponent {
+	get _isDisabled() {
+		return this.disabled ? "disabled" : null;
+	}
+	get isAttentionLevel1() {
+		return this.attentionLevel === "1";
+	}
+	get isAttentionLevel2() {
+		return this.attentionLevel === "2";
+	}
+	constructor(element, ionicElementPartHelper, cdr) {
+		this.element = element;
+		this.ionicElementPartHelper = ionicElementPartHelper;
+		this.cdr = cdr;
+		this.checked = false;
+		this.indeterminate = false;
+		this.attentionLevel = "2";
+		this.size = "md";
+		this.hasError = false;
+		this.disabled = false;
+		this.checkedChange = new EventEmitter();
+		this._justify = "start";
+		this._labelPlacement = "end";
+		this._onChange = () => {};
+		this._onTouched = () => {};
+	}
+	ngOnInit() {
+		this._hasSlottedContent = this.element.nativeElement.querySelector(".default-content").hasChildNodes();
+		if (this.element.nativeElement.getAttribute("slot") === "end" && this._hasSlottedContent) {
+			this._justify = "space-between";
+			this._labelPlacement = "start";
+		}
+	}
+	ngAfterViewInit() {
+		this.ionicElementPartHelper.setPart("label", this.ionCheckboxElement, ".checkbox-wrapper");
+		this.ionicElementPartHelper.setPart("label-text-wrapper", this.ionCheckboxElement, ".label-text-wrapper");
+		this.ionicElementPartHelper.setPart("native-wrapper", this.ionCheckboxElement, ".native-wrapper");
+	}
+	ngAfterContentInit() {
+		this._labelText = inheritAriaLabelText(this.element.nativeElement);
+		if (!this.text && !this._labelText && !this._hasSlottedContent) this._labelText = setAccessibleLabel(this.element.nativeElement);
+	}
+	onChecked(checked) {
+		this.checked = checked;
+		this._onChange(this.checked);
+		this.checkedChange.emit(this.checked);
+	}
+	onBlur() {
+		this._onTouched();
+	}
+	writeValue(value) {
+		this.checked = value;
+		this.cdr.markForCheck();
+	}
+	registerOnChange(fn) {
+		this._onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this._onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.disabled = isDisabled;
+		this.cdr.markForCheck();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CheckboxComponent,
+			deps: [
+				{ token: i0.ElementRef },
+				{ token: i1.IonicElementPartHelper },
+				{ token: i0.ChangeDetectorRef }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: CheckboxComponent,
+			isStandalone: true,
+			selector: "kirby-checkbox",
+			inputs: {
+				checked: "checked",
+				indeterminate: "indeterminate",
+				attentionLevel: "attentionLevel",
+				text: "text",
+				size: "size",
+				hasError: "hasError",
+				disabled: "disabled"
+			},
+			outputs: { checkedChange: "checkedChange" },
+			host: { properties: {
+				"class": "this.size",
+				"class.error": "this.hasError",
+				"attr.disabled": "this._isDisabled",
+				"class.attention-level1": "this.isAttentionLevel1",
+				"class.attention-level2": "this.isAttentionLevel2",
+				"class.has-hidden-label": "this._labelText"
+			} },
+			providers: [IonicElementPartHelper, {
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef((() => CheckboxComponent)),
+				multi: true
+			}],
+			viewQueries: [{
+				propertyName: "ionCheckboxElement",
+				first: true,
+				predicate: IonCheckbox,
+				descendants: true,
+				read: ElementRef,
+				static: true
+			}],
+			ngImport: i0,
+			template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host[disabled] ion-checkbox::part(label-text-wrapper),:host[disabled] ion-checkbox::part(native-wrapper){opacity:.4}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:var(--kirby-relative-size-s);font-size:var(--kirby-font-size-s)}:host.xs ion-checkbox{--size: 16px;--border-radius: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxxs)}:host.xs ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host.xs ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-s)}@media(hover:hover){:host ion-checkbox:hover{--checkbox-background: var(--kirby-color-fill-raised-hover);--checkbox-background-checked: var(--kirby-color-fill-engaged-hover);--checkmark-color: var(--kirby-color-content-engaged-hover);--border-color: var(--kirby-color-border-raised-hover);--border-color-checked: var(--kirby-color-border-engaged-hover)}}:host ion-checkbox:active{--checkbox-background: var(--kirby-color-fill-raised-active);--checkbox-background-checked: var(--kirby-color-fill-engaged-active);--checkmark-color: var(--kirby-color-content-engaged-active);--border-color: var(--kirby-color-border-raised-active);--border-color-checked: var(--kirby-color-border-engaged-active)}:host ion-checkbox:focus-visible{outline:none;--border-color: var(--kirby-color-border-focus);--border-color-checked: var(--kirby-color-border-focus)}:host ion-checkbox:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-combined-inset)}:host ion-checkbox{--transition: border-color 80ms linear, background-color 80ms linear;--size: 24px;--checkmark-width: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxs);--checkbox-background: var(--kirby-color-fill-raised);--checkbox-background-checked: var(--kirby-color-fill-engaged);--checkmark-color: var(--kirby-color-content-engaged);--border-width: 1px;--border-color: var(--kirby-color-border-raised);--border-color-checked: var(--kirby-color-border-engaged);--border-radius: 6px}:host ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host ion-checkbox::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-m)}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host.has-hidden-label:has(ion-checkbox.in-item){position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox{position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.error ion-checkbox{--border-color: var(--kirby-color-border-raised-danger);--border-color-checked: var(--kirby-color-border-raised-danger)}:host.error ion-checkbox::part(container){box-shadow:var(--kirby-error-ring-combined-inset)}:host.error ion-checkbox:focus-visible{--border-color: var(--kirby-color-border-focus);--border-color-checked: var(--kirby-color-border-focus)}:host.error ion-checkbox:focus-visible::part(container){box-shadow:var(--kirby-focus-ring-sm-combined-inset)}:host :host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"],
+			dependencies: [{
+				kind: "component",
+				type: IonCheckbox,
+				selector: "ion-checkbox",
+				inputs: [
+					"checked",
+					"color",
+					"disabled",
+					"errorText",
+					"helperText",
+					"indeterminate",
+					"justify",
+					"labelPlacement",
+					"mode",
+					"name",
+					"value"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CheckboxComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [IonCheckbox],
+			selector: "kirby-checkbox",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [IonicElementPartHelper, {
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef((() => CheckboxComponent)),
+				multi: true
+			}],
+			template: "<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex}:host[disabled] ion-checkbox::part(label-text-wrapper),:host[disabled] ion-checkbox::part(native-wrapper){opacity:.4}:host:has(ion-checkbox.in-item.checkbox-justify-space-between){width:100%}:host.xs ion-checkbox:not(.in-item)::part(label){padding-block:4px}:host.sm ion-checkbox:not(.in-item)::part(label){padding-block:10px}:host.md ion-checkbox:not(.in-item)::part(label){padding-block:16px}:host.xs ion-checkbox::part(label){line-height:var(--kirby-relative-size-s);font-size:var(--kirby-font-size-s)}:host.xs ion-checkbox{--size: 16px;--border-radius: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxxs)}:host.xs ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host.xs ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-s)}@media(hover:hover){:host ion-checkbox:hover{--checkbox-background: var(--kirby-color-fill-raised-hover);--checkbox-background-checked: var(--kirby-color-fill-engaged-hover);--checkmark-color: var(--kirby-color-content-engaged-hover);--border-color: var(--kirby-color-border-raised-hover);--border-color-checked: var(--kirby-color-border-engaged-hover)}}:host ion-checkbox:active{--checkbox-background: var(--kirby-color-fill-raised-active);--checkbox-background-checked: var(--kirby-color-fill-engaged-active);--checkmark-color: var(--kirby-color-content-engaged-active);--border-color: var(--kirby-color-border-raised-active);--border-color-checked: var(--kirby-color-border-engaged-active)}:host ion-checkbox:focus-visible{outline:none;--border-color: var(--kirby-color-border-focus);--border-color-checked: var(--kirby-color-border-focus)}:host ion-checkbox:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-combined-inset)}:host ion-checkbox{--transition: border-color 80ms linear, background-color 80ms linear;--size: 24px;--checkmark-width: var(--kirby-spacing-xxxs);--kirby-checkbox-container-padding: var(--kirby-spacing-xxxs);--checkbox-background: var(--kirby-color-fill-raised);--checkbox-background-checked: var(--kirby-color-fill-engaged);--checkmark-color: var(--kirby-color-content-engaged);--border-width: 1px;--border-color: var(--kirby-color-border-raised);--border-color-checked: var(--kirby-color-border-engaged);--border-radius: 6px}:host ion-checkbox::part(container){padding:var(--kirby-checkbox-container-padding)}:host ion-checkbox::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}:host ion-checkbox::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}:host ion-checkbox::part(native-wrapper){height:var(--kirby-relative-size-m)}:host ion-checkbox.in-item::part(label){align-items:center;padding-inline:0}:host ion-checkbox.in-item::part(label-text-wrapper){margin-block:0}:host ion-checkbox.in-item.checkbox-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}:host ion-checkbox.in-item.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}:host.has-hidden-label:has(ion-checkbox.in-item){position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox{position:initial}:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-checkbox.in-item) ion-checkbox.checkbox-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-checkbox{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.error ion-checkbox{--border-color: var(--kirby-color-border-raised-danger);--border-color-checked: var(--kirby-color-border-raised-danger)}:host.error ion-checkbox::part(container){box-shadow:var(--kirby-error-ring-combined-inset)}:host.error ion-checkbox:focus-visible{--border-color: var(--kirby-color-border-focus);--border-color-checked: var(--kirby-color-border-focus)}:host.error ion-checkbox:focus-visible::part(container){box-shadow:var(--kirby-focus-ring-sm-combined-inset)}:host :host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host :host-context(kirby-item) ion-checkbox{margin:0}:host :host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ElementRef },
+		{ type: i1.IonicElementPartHelper },
+		{ type: i0.ChangeDetectorRef }
+	],
+	propDecorators: {
+		ionCheckboxElement: [{
+			type: ViewChild,
+			args: [IonCheckbox, {
+				read: ElementRef,
+				static: true
+			}]
+		}],
+		checked: [{ type: Input }],
+		indeterminate: [{ type: Input }],
+		attentionLevel: [{ type: Input }],
+		text: [{ type: Input }],
+		size: [{
+			type: HostBinding,
+			args: ["class"]
+		}, { type: Input }],
+		hasError: [{
+			type: HostBinding,
+			args: ["class.error"]
+		}, { type: Input }],
+		disabled: [{ type: Input }],
+		_isDisabled: [{
+			type: HostBinding,
+			args: ["attr.disabled"]
+		}],
+		isAttentionLevel1: [{
+			type: HostBinding,
+			args: ["class.attention-level1"]
+		}],
+		isAttentionLevel2: [{
+			type: HostBinding,
+			args: ["class.attention-level2"]
+		}],
+		_labelText: [{
+			type: HostBinding,
+			args: ["class.has-hidden-label"]
+		}],
+		checkedChange: [{ type: Output }]
+	}
+});
 export { CheckboxComponent };
-//# sourceMappingURL=kirbydesign-designsystem-checkbox.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-checkbox.mjs.map

package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html","../../checkbox/src/kirbydesign-designsystem-checkbox.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  Input,\n  OnInit,\n  Output,\n  ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  imports: [IonCheckbox],\n  selector: 'kirby-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    IonicElementPartHelper,\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CheckboxComponent),\n      multi: true,\n    },\n  ],\n})\nexport class CheckboxComponent\n  implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit\n{\n  @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n  private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n  @Input() checked: boolean = false;\n  @Input() indeterminate: boolean = false;\n  @Input() attentionLevel: '1' | '2' = '2';\n\n  @Input()\n  text: string;\n\n  @HostBinding('class')\n  @Input()\n  size: 'xs' | 'sm' | 'md' = 'md';\n\n  @HostBinding('class.error')\n  @Input()\n  hasError: boolean = false;\n\n  @Input() disabled = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @HostBinding('class.attention-level1') get isAttentionLevel1() {\n    return this.attentionLevel === '1';\n  }\n  @HostBinding('class.attention-level2') get isAttentionLevel2() {\n    return this.attentionLevel === '2';\n  }\n\n  @HostBinding('class.has-hidden-label') _labelText: string;\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  _justify: 'start' | 'end' | 'space-between' = 'start';\n  _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n  _hasSlottedContent: boolean;\n\n  constructor(\n    private element: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n     * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n     * So it has to be done by querying an additional wrapper around the default content slot like this.\n     */\n    this._hasSlottedContent = this.element.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.element.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n      this._labelPlacement = 'start';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionCheckboxElement,\n      '.label-text-wrapper'\n    );\n    this.ionicElementPartHelper.setPart(\n      'native-wrapper',\n      this.ionCheckboxElement,\n      '.native-wrapper'\n    );\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n    if (!this.text && !this._labelText && !this._hasSlottedContent) {\n      // if no label has been set try to find a label in an item and use its text content\n      this._labelText = setAccessibleLabel(this.element.nativeElement);\n    }\n  }\n\n  onChecked(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  onBlur() {\n    this._onTouched();\n  }\n\n  // Initialize default ControlValueAccessor callback functions (noop)\n  // eslint-disable-next-line no-empty-function\n  private _onChange: (value: boolean) => void = () => {};\n  // eslint-disable-next-line no-empty-function\n  private _onTouched = () => {};\n\n  /**\n   * Sets the checkbox's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: boolean): void {\n    this.checked = value;\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Disables the checkbox. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n}\n","<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","names":[],"sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  Input,\n  OnInit,\n  Output,\n  ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  imports: [IonCheckbox],\n  selector: 'kirby-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    IonicElementPartHelper,\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CheckboxComponent),\n      multi: true,\n    },\n  ],\n})\nexport class CheckboxComponent\n  implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit\n{\n  @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n  private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n  @Input() checked: boolean = false;\n  @Input() indeterminate: boolean = false;\n  @Input() attentionLevel: '1' | '2' = '2';\n\n  @Input()\n  text: string;\n\n  @HostBinding('class')\n  @Input()\n  size: 'xs' | 'sm' | 'md' = 'md';\n\n  @HostBinding('class.error')\n  @Input()\n  hasError: boolean = false;\n\n  @Input() disabled = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @HostBinding('class.attention-level1') get isAttentionLevel1() {\n    return this.attentionLevel === '1';\n  }\n  @HostBinding('class.attention-level2') get isAttentionLevel2() {\n    return this.attentionLevel === '2';\n  }\n\n  @HostBinding('class.has-hidden-label') _labelText: string;\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  _justify: 'start' | 'end' | 'space-between' = 'start';\n  _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n  _hasSlottedContent: boolean;\n\n  constructor(\n    private element: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n     * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n     * So it has to be done by querying an additional wrapper around the default content slot like this.\n     */\n    this._hasSlottedContent = this.element.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.element.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n      this._labelPlacement = 'start';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionCheckboxElement,\n      '.label-text-wrapper'\n    );\n    this.ionicElementPartHelper.setPart(\n      'native-wrapper',\n      this.ionCheckboxElement,\n      '.native-wrapper'\n    );\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n    if (!this.text && !this._labelText && !this._hasSlottedContent) {\n      // if no label has been set try to find a label in an item and use its text content\n      this._labelText = setAccessibleLabel(this.element.nativeElement);\n    }\n  }\n\n  onChecked(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  onBlur() {\n    this._onTouched();\n  }\n\n  // Initialize default ControlValueAccessor callback functions (noop)\n  // eslint-disable-next-line no-empty-function\n  private _onChange: (value: boolean) => void = () => {};\n  // eslint-disable-next-line no-empty-function\n  private _onTouched = () => {};\n\n  /**\n   * Sets the checkbox's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: boolean): void {\n    this.checked = value;\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the checkbox is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Disables the checkbox. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n}\n","<ion-checkbox\n  mode=\"md\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [indeterminate]=\"indeterminate\"\n  (ionChange)=\"onChecked($event.detail.checked)\"\n  (ionBlur)=\"onBlur()\"\n  [labelPlacement]=\"_labelPlacement\"\n  [justify]=\"_justify\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  @if (text) {\n    <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-checkbox>\n"],"mappings":"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"}