@kirbydesign/designsystem 11.11.2 → 12.0.0

package/fesm2022/kirbydesign-designsystem-toggle.mjs

@@ -1,151 +1,181 @@
-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 { IonToggle } from '@ionic/angular/standalone';
-import { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';
-import * as i1 from '@kirbydesign/designsystem/helpers';
-import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
-
-class ToggleComponent {
-    get _isDisabled() {
-        return this.disabled ? 'disabled' : null;
-    }
-    constructor(cdr, elementRef, ionicElementPartHelper) {
-        this.cdr = cdr;
-        this.elementRef = elementRef;
-        this.ionicElementPartHelper = ionicElementPartHelper;
-        this.checked = false;
-        this.disabled = false;
-        this.checkedChange = new EventEmitter();
-        this._justify = 'start';
-        this._labelPlacement = 'start';
-        this._pressed = false;
-        // 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-toggle 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-toggle is rendered.
-         * So it has to be done by querying an additional wrapper around the default content slot like this.
-         */
-        this._hasSlottedContent = this.elementRef.nativeElement
-            .querySelector('.default-content')
-            .hasChildNodes();
-        const slot = this.elementRef.nativeElement.getAttribute('slot');
-        if (slot === 'end' && this._hasSlottedContent) {
-            this._justify = 'space-between';
-        }
-        if (slot === 'start' && this._hasSlottedContent) {
-            this._labelPlacement = 'end';
-        }
-    }
-    ngAfterViewInit() {
-        this.ionicElementPartHelper.setPart('label', this.ionToggleElement, '.toggle-wrapper');
-        this.ionicElementPartHelper.setPart('label-text-wrapper', this.ionToggleElement, '.label-text-wrapper');
-    }
-    ngAfterContentInit() {
-        this._labelText = inheritAriaLabelText(this.elementRef.nativeElement);
-        if (!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.elementRef.nativeElement);
-        }
-    }
-    onCheckedChange(checked) {
-        this.checked = checked;
-        this._onChange(this.checked);
-        this.checkedChange.emit(this.checked);
-    }
-    _onActive() {
-        this._pressed = true;
-    }
-    _onInactive() {
-        this._pressed = false;
-        this._onTouched();
-    }
-    /**
-     * Sets the toggle'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 toggle'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 toggle 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 toggle. 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.18", ngImport: i0, type: ToggleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.IonicElementPartHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ToggleComponent, isStandalone: true, selector: "kirby-toggle", inputs: { checked: "checked", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "attr.disabled": "this._isDisabled", "class.has-hidden-label": "this._labelText" } }, providers: [
-            IonicElementPartHelper,
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef((() => ToggleComponent)),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "ionToggleElement", first: true, predicate: IonToggle, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [justify]=\"_justify\"\n  [labelPlacement]=\"_labelPlacement\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-toggle>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:inline-flex}:host:has(ion-toggle.in-item.toggle-justify-space-between){width:100%}:host.has-hidden-label:has(ion-toggle.in-item){position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle{position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle::part(label){position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-toggle{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-toggle{--color: var(--kirby-medium);--color-checked: var(--kirby-medium);opacity:1}:host[disabled] ion-toggle::part(track){opacity:.3}ion-toggle:focus-visible::part(track){transition:box-shadow 80ms linear,background-color 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}ion-toggle{overflow:visible;contain:none}ion-toggle:focus-visible{outline:none}@media(hover:hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: rgb(119.28, 119.28, 119.28);--handle-background: rgb(244.8, 244.8, 244.8);--track-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--handle-background-checked: rgb(244.8, 244.8, 244.8)}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: rgb(107.92, 107.92, 107.92);--handle-background: rgb(234.6, 234.6, 234.6);--track-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--handle-background-checked: rgb(234.6, 234.6, 234.6)}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04);--handle-height: 28px;--handle-width: 28px;--border-radius: 16px}ion-toggle::part(track){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;height:32px}ion-toggle ::part(label-text-wrapper){line-height:1.5;white-space:pre-line}ion-toggle.in-item::part(label){align-items:center;padding-inline:0}ion-toggle.in-item::part(label),ion-toggle.in-item::part(label-text-wrapper){margin-block:0}ion-toggle.in-item.toggle-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}ion-toggle.in-item.toggle-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}ion-toggle.in-item.legacy-toggle{padding:0}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-toggle{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], dependencies: [{ kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToggleComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [IonToggle], selector: 'kirby-toggle', providers: [
-                        IonicElementPartHelper,
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef((() => ToggleComponent)),
-                            multi: true,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [justify]=\"_justify\"\n  [labelPlacement]=\"_labelPlacement\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-toggle>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:inline-flex}:host:has(ion-toggle.in-item.toggle-justify-space-between){width:100%}:host.has-hidden-label:has(ion-toggle.in-item){position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle{position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle::part(label){position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-toggle{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-toggle{--color: var(--kirby-medium);--color-checked: var(--kirby-medium);opacity:1}:host[disabled] ion-toggle::part(track){opacity:.3}ion-toggle:focus-visible::part(track){transition:box-shadow 80ms linear,background-color 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}ion-toggle{overflow:visible;contain:none}ion-toggle:focus-visible{outline:none}@media(hover:hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: rgb(119.28, 119.28, 119.28);--handle-background: rgb(244.8, 244.8, 244.8);--track-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--handle-background-checked: rgb(244.8, 244.8, 244.8)}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: rgb(107.92, 107.92, 107.92);--handle-background: rgb(234.6, 234.6, 234.6);--track-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--handle-background-checked: rgb(234.6, 234.6, 234.6)}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04);--handle-height: 28px;--handle-width: 28px;--border-radius: 16px}ion-toggle::part(track){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;height:32px}ion-toggle ::part(label-text-wrapper){line-height:1.5;white-space:pre-line}ion-toggle.in-item::part(label){align-items:center;padding-inline:0}ion-toggle.in-item::part(label),ion-toggle.in-item::part(label-text-wrapper){margin-block:0}ion-toggle.in-item.toggle-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}ion-toggle.in-item.toggle-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}ion-toggle.in-item.legacy-toggle{padding:0}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-toggle{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.IonicElementPartHelper }], propDecorators: { ionToggleElement: [{
-                type: ViewChild,
-                args: [IonToggle, { read: ElementRef, static: true }]
-            }], checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], _isDisabled: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], _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 { IonToggle } from "@ionic/angular";
+import { inheritAriaLabelText, setAccessibleLabel } from "@kirbydesign/designsystem/shared";
+import * as i1 from "@kirbydesign/designsystem/helpers";
+import { IonicElementPartHelper } from "@kirbydesign/designsystem/helpers";
+var ToggleComponent = class ToggleComponent {
+	get _isDisabled() {
+		return this.disabled ? "disabled" : null;
+	}
+	constructor(cdr, elementRef, ionicElementPartHelper) {
+		this.cdr = cdr;
+		this.elementRef = elementRef;
+		this.ionicElementPartHelper = ionicElementPartHelper;
+		this.checked = false;
+		this.disabled = false;
+		this.checkedChange = new EventEmitter();
+		this._justify = "start";
+		this._labelPlacement = "start";
+		this._pressed = false;
+		this._onChange = () => {};
+		this._onTouched = () => {};
+	}
+	ngOnInit() {
+		this._hasSlottedContent = this.elementRef.nativeElement.querySelector(".default-content").hasChildNodes();
+		const slot = this.elementRef.nativeElement.getAttribute("slot");
+		if (slot === "end" && this._hasSlottedContent) this._justify = "space-between";
+		if (slot === "start" && this._hasSlottedContent) this._labelPlacement = "end";
+	}
+	ngAfterViewInit() {
+		this.ionicElementPartHelper.setPart("label", this.ionToggleElement, ".toggle-wrapper");
+		this.ionicElementPartHelper.setPart("label-text-wrapper", this.ionToggleElement, ".label-text-wrapper");
+	}
+	ngAfterContentInit() {
+		this._labelText = inheritAriaLabelText(this.elementRef.nativeElement);
+		if (!this._labelText && !this._hasSlottedContent) this._labelText = setAccessibleLabel(this.elementRef.nativeElement);
+	}
+	onCheckedChange(checked) {
+		this.checked = checked;
+		this._onChange(this.checked);
+		this.checkedChange.emit(this.checked);
+	}
+	_onActive() {
+		this._pressed = true;
+	}
+	_onInactive() {
+		this._pressed = false;
+		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: ToggleComponent,
+			deps: [
+				{ token: i0.ChangeDetectorRef },
+				{ token: i0.ElementRef },
+				{ token: i1.IonicElementPartHelper }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: ToggleComponent,
+			isStandalone: true,
+			selector: "kirby-toggle",
+			inputs: {
+				checked: "checked",
+				disabled: "disabled"
+			},
+			outputs: { checkedChange: "checkedChange" },
+			host: { properties: {
+				"attr.disabled": "this._isDisabled",
+				"class.has-hidden-label": "this._labelText"
+			} },
+			providers: [IonicElementPartHelper, {
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef((() => ToggleComponent)),
+				multi: true
+			}],
+			viewQueries: [{
+				propertyName: "ionToggleElement",
+				first: true,
+				predicate: IonToggle,
+				descendants: true,
+				read: ElementRef,
+				static: true
+			}],
+			ngImport: i0,
+			template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [justify]=\"_justify\"\n  [labelPlacement]=\"_labelPlacement\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-toggle>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:inline-flex}:host:has(ion-toggle.in-item.toggle-justify-space-between){width:100%}:host.has-hidden-label:has(ion-toggle.in-item){position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle{position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle::part(label){position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-toggle{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-toggle{--color: var(--kirby-medium);--color-checked: var(--kirby-medium);opacity:1}:host[disabled] ion-toggle::part(track){opacity:.3}ion-toggle:focus-visible::part(track){transition:box-shadow 80ms linear,background-color 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}ion-toggle{overflow:visible;contain:none}ion-toggle:focus-visible{outline:none}@media(hover:hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: rgb(46.7764705882%, 46.7764705882%, 46.7764705882%);--handle-background: rgb(96%, 96%, 96%);--track-background-checked: rgb(17.6590826639%, 75.5644467479%, 44.7637211713%);--handle-background-checked: rgb(96%, 96%, 96%)}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: rgb(42.3215686275%, 42.3215686275%, 42.3215686275%);--handle-background: rgb(92%, 92%, 92%);--track-background-checked: rgb(15.9772652673%, 68.3678327719%, 40.5005096312%);--handle-background-checked: rgb(92%, 92%, 92%)}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: var(--kirby-transition-duration-quick);--handle-box-shadow: var(--kirby-elevation-2);--handle-height: calc(var(--kirby-spacing-l) - var(--kirby-spacing-xxxxs) * 2);--handle-width: calc(var(--kirby-spacing-l) - var(--kirby-spacing-xxxxs) * 2);--border-radius: calc(var(--kirby-spacing-l) / 2)}ion-toggle::part(track){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;height:var(--kirby-spacing-l)}ion-toggle ::part(label-text-wrapper){line-height:var(--kirby-line-height-n);white-space:pre-line}ion-toggle.in-item::part(label){align-items:center;padding-inline:0}ion-toggle.in-item::part(label),ion-toggle.in-item::part(label-text-wrapper){margin-block:0}ion-toggle.in-item.toggle-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}ion-toggle.in-item.toggle-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}ion-toggle.in-item.legacy-toggle{padding:0}:host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host-context(kirby-item) ion-toggle{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"],
+			dependencies: [{
+				kind: "component",
+				type: IonToggle,
+				selector: "ion-toggle",
+				inputs: [
+					"checked",
+					"color",
+					"disabled",
+					"enableOnOffLabels",
+					"errorText",
+					"helperText",
+					"justify",
+					"labelPlacement",
+					"mode",
+					"name",
+					"value"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ToggleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [IonToggle],
+			selector: "kirby-toggle",
+			providers: [IonicElementPartHelper, {
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef((() => ToggleComponent)),
+				multi: true
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [justify]=\"_justify\"\n  [labelPlacement]=\"_labelPlacement\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-toggle>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:inline-flex}:host:has(ion-toggle.in-item.toggle-justify-space-between){width:100%}:host.has-hidden-label:has(ion-toggle.in-item){position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle{position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle::part(label){position:initial}:host.has-hidden-label:has(ion-toggle.in-item) ion-toggle::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-toggle{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-toggle{--color: var(--kirby-medium);--color-checked: var(--kirby-medium);opacity:1}:host[disabled] ion-toggle::part(track){opacity:.3}ion-toggle:focus-visible::part(track){transition:box-shadow 80ms linear,background-color 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}ion-toggle{overflow:visible;contain:none}ion-toggle:focus-visible{outline:none}@media(hover:hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: rgb(46.7764705882%, 46.7764705882%, 46.7764705882%);--handle-background: rgb(96%, 96%, 96%);--track-background-checked: rgb(17.6590826639%, 75.5644467479%, 44.7637211713%);--handle-background-checked: rgb(96%, 96%, 96%)}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: rgb(42.3215686275%, 42.3215686275%, 42.3215686275%);--handle-background: rgb(92%, 92%, 92%);--track-background-checked: rgb(15.9772652673%, 68.3678327719%, 40.5005096312%);--handle-background-checked: rgb(92%, 92%, 92%)}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: var(--kirby-transition-duration-quick);--handle-box-shadow: var(--kirby-elevation-2);--handle-height: calc(var(--kirby-spacing-l) - var(--kirby-spacing-xxxxs) * 2);--handle-width: calc(var(--kirby-spacing-l) - var(--kirby-spacing-xxxxs) * 2);--border-radius: calc(var(--kirby-spacing-l) / 2)}ion-toggle::part(track){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;height:var(--kirby-spacing-l)}ion-toggle ::part(label-text-wrapper){line-height:var(--kirby-line-height-n);white-space:pre-line}ion-toggle.in-item::part(label){align-items:center;padding-inline:0}ion-toggle.in-item::part(label),ion-toggle.in-item::part(label-text-wrapper){margin-block:0}ion-toggle.in-item.toggle-label-placement-start::part(label-text-wrapper){margin-inline:0 12px}ion-toggle.in-item.toggle-label-placement-end::part(label-text-wrapper){margin-inline:12px 0}ion-toggle.in-item.legacy-toggle{padding:0}:host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host-context(kirby-item) ion-toggle{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ChangeDetectorRef },
+		{ type: i0.ElementRef },
+		{ type: i1.IonicElementPartHelper }
+	],
+	propDecorators: {
+		ionToggleElement: [{
+			type: ViewChild,
+			args: [IonToggle, {
+				read: ElementRef,
+				static: true
+			}]
+		}],
+		checked: [{ type: Input }],
+		disabled: [{ type: Input }],
+		_isDisabled: [{
+			type: HostBinding,
+			args: ["attr.disabled"]
+		}],
+		_labelText: [{
+			type: HostBinding,
+			args: ["class.has-hidden-label"]
+		}],
+		checkedChange: [{ type: Output }]
+	}
+});
 export { ToggleComponent };
-//# sourceMappingURL=kirbydesign-designsystem-toggle.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-toggle.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-toggle.mjs","sources":["../../toggle/src/toggle.component.ts","../../toggle/src/toggle.component.html","../../toggle/src/kirbydesign-designsystem-toggle.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';\nimport { IonToggle } from '@ionic/angular/standalone';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\n\n@Component({\n  imports: [IonToggle],\n  selector: 'kirby-toggle',\n  templateUrl: './toggle.component.html',\n  styleUrls: ['./toggle.component.scss'],\n  providers: [\n    IonicElementPartHelper,\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ToggleComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleComponent\n  implements ControlValueAccessor, OnInit, AfterViewInit, AfterContentInit\n{\n  @ViewChild(IonToggle, { read: ElementRef, static: true })\n  private ionToggleElement?: ElementRef<HTMLIonToggleElement>;\n\n  @Input() checked: boolean = false;\n\n  @Input() disabled: boolean = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\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' = 'start';\n  _hasSlottedContent: boolean;\n  _pressed = false;\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private elementRef: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-toggle 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-toggle 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.elementRef.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.elementRef.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n    }\n\n    if (slot === 'start' && this._hasSlottedContent) {\n      this._labelPlacement = 'end';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionToggleElement, '.toggle-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionToggleElement,\n      '.label-text-wrapper'\n    );\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.elementRef.nativeElement);\n\n    if (!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.elementRef.nativeElement);\n    }\n  }\n\n  onCheckedChange(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  _onActive() {\n    this._pressed = true;\n  }\n\n  _onInactive() {\n    this._pressed = false;\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 toggle'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   * Saves a callback function to be invoked when the toggle'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   * Saves a callback function to be invoked when the toggle 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   * Disables the toggle. 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-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [justify]=\"_justify\"\n  [labelPlacement]=\"_labelPlacement\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-toggle>\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-toggle.mjs","names":[],"sources":["../../toggle/src/toggle.component.ts","../../toggle/src/toggle.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';\nimport { IonToggle } from '@ionic/angular';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\n\n@Component({\n  imports: [IonToggle],\n  selector: 'kirby-toggle',\n  templateUrl: './toggle.component.html',\n  styleUrls: ['./toggle.component.scss'],\n  providers: [\n    IonicElementPartHelper,\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ToggleComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleComponent\n  implements ControlValueAccessor, OnInit, AfterViewInit, AfterContentInit\n{\n  @ViewChild(IonToggle, { read: ElementRef, static: true })\n  private ionToggleElement?: ElementRef<HTMLIonToggleElement>;\n\n  @Input() checked: boolean = false;\n\n  @Input() disabled: boolean = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\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' = 'start';\n  _hasSlottedContent: boolean;\n  _pressed = false;\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private elementRef: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-toggle 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-toggle 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.elementRef.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.elementRef.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n    }\n\n    if (slot === 'start' && this._hasSlottedContent) {\n      this._labelPlacement = 'end';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionToggleElement, '.toggle-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionToggleElement,\n      '.label-text-wrapper'\n    );\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.elementRef.nativeElement);\n\n    if (!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.elementRef.nativeElement);\n    }\n  }\n\n  onCheckedChange(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  _onActive() {\n    this._pressed = true;\n  }\n\n  _onInactive() {\n    this._pressed = false;\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 toggle'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   * Saves a callback function to be invoked when the toggle'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   * Saves a callback function to be invoked when the toggle 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   * Disables the toggle. 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-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [justify]=\"_justify\"\n  [labelPlacement]=\"_labelPlacement\"\n>\n  @if (_labelText) {\n    <span class=\"hidden-label\">{{ _labelText }}</span>\n  }\n  <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n    <ng-content></ng-content>\n  </span>\n</ion-toggle>\n"],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-types.mjs

@@ -1,25 +1,40 @@
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken } from '@angular/core';
-
-class WindowRef {
-    get nativeWindow() {
-        return window;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WindowRef, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WindowRef, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FORM_FIELD_CONTROL = new InjectionToken('FormFieldControl');
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { Injectable, InjectionToken } from "@angular/core";
+var WindowRef = class WindowRef {
+	get nativeWindow() {
+		return window;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: WindowRef,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: WindowRef,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: WindowRef,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+const FORM_FIELD_CONTROL = new InjectionToken("FormFieldControl");
 export { FORM_FIELD_CONTROL, WindowRef };
-//# sourceMappingURL=kirbydesign-designsystem-types.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-types.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-types.mjs","sources":["../../types/src/window-ref.ts","../../types/src/form-field-control.ts","../../types/src/kirbydesign-designsystem-types.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class WindowRef {\n  get nativeWindow(): any {\n    return window;\n  }\n}\n","import { EventEmitter, InjectionToken } from '@angular/core';\n\nexport interface FormFieldControl {\n  hasError: boolean;\n  hasErrorChange: EventEmitter<boolean>;\n  /** The focusable/interactive element within the control, used for accessibility attributes and focus management. */\n  interactiveElement: HTMLElement;\n}\n\nexport const FORM_FIELD_CONTROL = new InjectionToken<FormFieldControl>('FormFieldControl');\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAKa,SAAS,CAAA;AACpB,IAAA,IAAI,YAAY,GAAA;AACd,QAAA,OAAO,MAAM;IACf;kIAHW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAT,uBAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,SAAS,cAFR,MAAM,EAAA,CAAA,CAAA;;4FAEP,SAAS,EAAA,UAAA,EAAA,CAAA;kBAHrB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;MCKY,kBAAkB,GAAG,IAAI,cAAc,CAAmB,kBAAkB;;ACTzF;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-types.mjs","names":[],"sources":["../../types/src/window-ref.ts","../../types/src/form-field-control.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class WindowRef {\n  get nativeWindow(): any {\n    return window;\n  }\n}\n","import { EventEmitter, InjectionToken } from '@angular/core';\n\nexport interface FormFieldControl {\n  hasError: boolean;\n  hasErrorChange: EventEmitter<boolean>;\n  /** The focusable/interactive element within the control, used for accessibility attributes and focus management. */\n  interactiveElement: HTMLElement;\n}\n\nexport const FORM_FIELD_CONTROL = new InjectionToken<FormFieldControl>('FormFieldControl');\n"],"mappings":";;AAKA,IAAa,YAAb,MAAa,UAAS;CACpB,IAAI,eAAY;EACd,OAAO;CACT;CAHW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAS,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAT;EAAA,KAAA,QAAA,GAAA,sBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAS,YAFR;EAAM,CAAA;CAAA;;AAEP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EAHrB,MAAA;EAAW,MAAA,CAAA,EACV,YAAY,OACb,CAAA;;;ACKD,MAAa,qBAAqB,IAAI,eAAiC,kBAAkB"}