@kirbydesign/designsystem 11.11.4 → 12.0.0-dev-286cdc0

package/fesm2022/kirbydesign-designsystem-radio.mjs

@@ -1,367 +1,539 @@
-import * as i0 from '@angular/core';
-import { ElementRef, HostBinding, Input, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, TemplateRef, HostListener, ContentChildren, ViewChildren, ContentChild, Output, NgModule } from '@angular/core';
-import { IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
-import * as i1 from '@kirbydesign/designsystem/helpers';
-import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
-import { inheritAriaLabelText, setAccessibleLabel, forwardAttributes } from '@kirbydesign/designsystem/shared';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';
-import { FORM_FIELD_CONTROL } from '@kirbydesign/designsystem/types';
-import { NgTemplateOutlet, CommonModule } from '@angular/common';
-
-class RadioComponent {
-    get _isDisabled() {
-        return this.disabled ? 'disabled' : null;
-    }
-    get buttonTabIndex() {
-        return this.ionRadioElement ? this.ionRadioElement.nativeElement.tabIndex : -1;
-    }
-    constructor(element, ionicElementPartHelper) {
-        this.element = element;
-        this.ionicElementPartHelper = ionicElementPartHelper;
-        this.size = 'md';
-        this._justify = 'start';
-        this._labelPlacement = 'end';
-    }
-    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.ionRadioElement, '.radio-wrapper');
-        this.ionicElementPartHelper.setPart('label-text-wrapper', this.ionRadioElement, '.label-text-wrapper');
-        this.ionicElementPartHelper.setPart('native-wrapper', this.ionRadioElement, '.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);
-        }
-    }
-    focus() {
-        this.ionRadioElement?.nativeElement.focus();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RadioComponent, deps: [{ 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: RadioComponent, isStandalone: true, selector: "kirby-radio", inputs: { value: "value", text: "text", size: "size", disabled: "disabled" }, host: { properties: { "class": "this.size", "attr.disabled": "this._isDisabled", "class.has-hidden-label": "this._labelText" } }, providers: [IonicElementPartHelper], viewQueries: [{ propertyName: "ionRadioElement", first: true, predicate: IonRadio, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-radio\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  mode=\"md\"\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-radio>\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]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{--color: var(--kirby-medium);--color-checked: var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}:host[disabled] ion-radio::part(mark){--color-checked: var(--kirby-semi-dark)}:host[disabled] ion-radio::part(label-text-wrapper){opacity:1}:host[disabled] ion-radio::part(native-wrapper){opacity:1}:host:has(ion-radio.in-item.radio-justify-space-between){width:100%}:host.has-hidden-label:has(ion-radio.in-item){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio{position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio::part(label){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-radio{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.xs ion-radio:not(.in-item)::part(label){padding-block:4px}:host.sm ion-radio:not(.in-item)::part(label){padding-block:10px}:host.md ion-radio:not(.in-item)::part(label){padding-block:16px}ion-radio:focus-within{--border-width: 0;--color: transparent}ion-radio:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}ion-radio{box-sizing:border-box;--border-width: 1px;--color: var(--kirby-semi-dark);--color-checked: var(--kirby-success)}@media(hover:hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color-checked: rgb(52.6486343612, 207.7113656388, 125.2311894273)}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;background-color:var(--kirby-white);margin:2px;width:20px;height:20px}ion-radio::part(mark){width:12px;height:12px}ion-radio::part(label){align-items:start;padding-inline:16px;line-height:1.5}ion-radio::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}ion-radio::part(native-wrapper){height:1.5rem}ion-radio.in-item::part(label){align-items:center;padding-inline:0}ion-radio.in-item::part(label-text-wrapper){margin-block:0}ion-radio.in-item.radio-label-placement-start::part(label-text-wrapper){margin-inline:0 8px}ion-radio.in-item.radio-label-placement-end::part(label-text-wrapper){margin-inline:8px 0}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color: var(--kirby-danger)}ion-radio.radio-checked:not(:focus,.radio-disabled)::part(container){box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}ion-radio.radio-checked:not(:focus,:focus-within,.radio-disabled)::part(container){border-color:var(--kirby-semi-dark)}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"], dependencies: [{ kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RadioComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-radio', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IonicElementPartHelper], imports: [IonRadio], template: "<ion-radio\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  mode=\"md\"\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-radio>\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]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{--color: var(--kirby-medium);--color-checked: var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}:host[disabled] ion-radio::part(mark){--color-checked: var(--kirby-semi-dark)}:host[disabled] ion-radio::part(label-text-wrapper){opacity:1}:host[disabled] ion-radio::part(native-wrapper){opacity:1}:host:has(ion-radio.in-item.radio-justify-space-between){width:100%}:host.has-hidden-label:has(ion-radio.in-item){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio{position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio::part(label){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-radio{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.xs ion-radio:not(.in-item)::part(label){padding-block:4px}:host.sm ion-radio:not(.in-item)::part(label){padding-block:10px}:host.md ion-radio:not(.in-item)::part(label){padding-block:16px}ion-radio:focus-within{--border-width: 0;--color: transparent}ion-radio:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}ion-radio{box-sizing:border-box;--border-width: 1px;--color: var(--kirby-semi-dark);--color-checked: var(--kirby-success)}@media(hover:hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color-checked: rgb(52.6486343612, 207.7113656388, 125.2311894273)}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;background-color:var(--kirby-white);margin:2px;width:20px;height:20px}ion-radio::part(mark){width:12px;height:12px}ion-radio::part(label){align-items:start;padding-inline:16px;line-height:1.5}ion-radio::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}ion-radio::part(native-wrapper){height:1.5rem}ion-radio.in-item::part(label){align-items:center;padding-inline:0}ion-radio.in-item::part(label-text-wrapper){margin-block:0}ion-radio.in-item.radio-label-placement-start::part(label-text-wrapper){margin-inline:0 8px}ion-radio.in-item.radio-label-placement-end::part(label-text-wrapper){margin-inline:8px 0}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color: var(--kirby-danger)}ion-radio.radio-checked:not(:focus,.radio-disabled)::part(container){box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}ion-radio.radio-checked:not(:focus,:focus-within,.radio-disabled)::part(container){border-color:var(--kirby-semi-dark)}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IonicElementPartHelper }], propDecorators: { ionRadioElement: [{
-                type: ViewChild,
-                args: [IonRadio, { read: ElementRef, static: true }]
-            }], value: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], size: [{
-                type: HostBinding,
-                args: ['class']
-            }, {
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], _isDisabled: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], _labelText: [{
-                type: HostBinding,
-                args: ['class.has-hidden-label']
-            }] } });
-
-class RadioGroupComponent {
-    constructor(cdr, element, renderer) {
-        this.cdr = cdr;
-        this.element = element;
-        this.renderer = renderer;
-        this._hasError = false;
-        this.hasErrorChange = new EventEmitter();
-        this.itemTextProperty = 'text';
-        this.itemDisabledProperty = 'disabled';
-        /**
-         * Emitted when an option is selected
-         */
-        this.valueChange = new EventEmitter();
-        // #endregion "protected" properties used by template
-        // #region private fields
-        this._disabled = false;
-        this._items = [];
-        this._onChangeCallback = () => { };
-        this._onTouched = () => { };
-        this._selectedIndex = -1;
-        this._value = null;
-        this._attributesToForward = ['aria-label', 'aria-labelledby'];
-    }
-    // #region public properties
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-        this.setProjectedRadiosDisabledState(value);
-    }
-    get hasError() {
-        return this._hasError;
-    }
-    set hasError(value) {
-        if (this._hasError !== value) {
-            this._hasError = value;
-            this.hasErrorChange.emit(this._hasError);
-        }
-    }
-    get interactiveElement() {
-        return this.element?.nativeElement?.querySelector('ion-radio-group');
-    }
-    get items() {
-        return this._items || []; // Ensure items return empty array even if set to null/undefined
-    }
-    set items(value) {
-        if ((!value || !value.length) && !this.items.length)
-            return; // Nothing changed, no items before or after
-        this._items = value;
-        this.refreshSelectionState();
-    }
-    get selectedIndex() {
-        return this._selectedIndex;
-    }
-    set selectedIndex(value) {
-        if (typeof value === 'string')
-            value = parseInt(value); // Ensure data type number, e.g. when used with template syntax without binding: <... selectedIndex="1"
-        if (value === undefined || value === null || Number.isNaN(value))
-            value = -1;
-        if (value === this.selectedIndex)
-            return;
-        this._selectedIndex = value;
-        this._value = this.getValueFromSelectedIndex() || null;
-    }
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        this.setSelectedItem(value);
-    }
-    get hasValue() {
-        return this.value !== undefined && this.value !== null;
-    }
-    get hasItemsFromContentProjection() {
-        return (!this.items.length &&
-            !this._customItemTemplate &&
-            this.projectedRadioButtons &&
-            this.projectedRadioButtons.length > 0);
-    }
-    // #endregion private fields
-    // #region public methods
-    focus() {
-        const findFocusable = (radios) => radios && radios.find((radio) => !isNaN(radio.buttonTabIndex) && radio.buttonTabIndex !== -1);
-        const focusable = findFocusable(this.radioButtons) || findFocusable(this.projectedRadioButtons);
-        focusable?.focus();
-    }
-    ngAfterContentInit() {
-        this.initSelectionStateFromProjectedContent();
-        this.listenForProjectedRadiosChange();
-    }
-    ngAfterViewInit() {
-        forwardAttributes(this.element.nativeElement, this._attributesToForward, this.renderer, this.element.nativeElement.querySelector('ion-radio-group'));
-    }
-    registerOnChange(fn) {
-        this._onChangeCallback = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    writeValue(value) {
-        this.value = value;
-        this.cdr.markForCheck();
-    }
-    // #endregion public methods
-    // #region "protected" methods used by template
-    _getTextFromItem(item) {
-        if (!item)
-            return null;
-        return typeof item === 'string' ? item : item[this.itemTextProperty];
-    }
-    _getDisabledStateFromItem(item) {
-        if (!item)
-            return undefined;
-        return typeof item === 'string' ? undefined : item[this.itemDisabledProperty];
-    }
-    get _hasItems() {
-        return this.items.length > 0 || this.hasItemsFromContentProjection;
-    }
-    _onChange(value) {
-        if (value === this._value)
-            return;
-        this.setSelectedItem(value);
-        this.valueChange.emit(value);
-        this._onChangeCallback(value);
-    }
-    _onRadioBlur() {
-        this._onTouched();
-    }
-    // #endregion "protected" methods used by template
-    // #region private methods
-    getIndexOfSelectedValue() {
-        if (!this.hasValue)
-            return -1;
-        return this.hasItemsFromContentProjection
-            ? this.getIndexOfProjectedRadio(this.value)
-            : this.items.indexOf(this.value);
-    }
-    getIndexOfProjectedRadio(value) {
-        let selectedIndex = -1;
-        this.projectedRadioButtons?.find((radio, i) => {
-            const found = radio.value === value;
-            if (found) {
-                selectedIndex = i;
-            }
-            return found;
-        });
-        return selectedIndex;
-    }
-    getValueFromSelectedIndex() {
-        if (this.selectedIndex === -1)
-            return;
-        return this.hasItemsFromContentProjection
-            ? this.getValueFromProjectedRadios(this.selectedIndex)
-            : this.items[this.selectedIndex];
-    }
-    getValueFromProjectedRadios(index) {
-        const radio = this.projectedRadioButtons &&
-            this.projectedRadioButtons.find((_, i) => {
-                return i === index;
-            });
-        return radio && radio.value;
-    }
-    initSelectionStateFromProjectedContent() {
-        if (this.hasItemsFromContentProjection) {
-            this.refreshSelectionState(); // Initialize selected index and value from projected radios
-        }
-    }
-    listenForProjectedRadiosChange() {
-        this.projectedRadioButtons.changes.subscribe(() => {
-            this.refreshStateFromProjectedContent();
-            if (this.disabled) {
-                // Ensure disabled state propagates when re-rendering projected radios.
-                // setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when updating the DOM in QueryList.changes:
-                setTimeout(() => this.setProjectedRadiosDisabledState(this.disabled));
-            }
-        });
-    }
-    refreshSelectionState() {
-        if (this.hasValue) {
-            this._selectedIndex = this.getIndexOfSelectedValue(); // Ensure selectedIndex reflects value within items
-        }
-        const valueFromSelectedIndex = this.getValueFromSelectedIndex();
-        this._value = valueFromSelectedIndex !== undefined ? valueFromSelectedIndex : null;
-    }
-    refreshStateFromProjectedContent() {
-        if (this._customItemTemplate)
-            return; // Only refresh on changes to projected content, not when re-rendering custom template
-        this.cdr.markForCheck(); // Ensure changes to projected content gets checked in next change detection cycle
-        this.refreshSelectionState(); // Sync selected index and value from projected radios
-    }
-    setSelectedItem(value) {
-        if (value === this._value)
-            return; // Nothing changed
-        this._value = value;
-        this._selectedIndex = this.getIndexOfSelectedValue();
-    }
-    setProjectedRadiosDisabledState(isDisabled) {
-        if (!this.projectedRadioButtons || !this.projectedRadioButtons.length)
-            return;
-        this.projectedRadioButtons.forEach((radio, index) => {
-            // Disable all radios when group is disabled, otherwise fall back to each item's disabled state, if defined:
-            radio.disabled = isDisabled || this._getDisabledStateFromItem(this.items[index]);
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: RadioGroupComponent, isStandalone: true, selector: "kirby-radio-group", inputs: { disabled: "disabled", hasError: "hasError", items: "items", itemTextProperty: "itemTextProperty", itemDisabledProperty: "itemDisabledProperty", selectedIndex: "selectedIndex", value: "value" }, outputs: { hasErrorChange: "hasErrorChange", valueChange: "valueChange" }, host: { listeners: { "ionBlur": "_onRadioBlur()" }, properties: { "class.error": "this.hasError" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: RadioGroupComponent,
-                multi: true,
-            },
-            { provide: FORM_FIELD_CONTROL, useExisting: RadioGroupComponent },
-        ], queries: [{ propertyName: "_customItemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "projectedRadioButtons", predicate: RadioComponent, descendants: true }], viewQueries: [{ propertyName: "radioButtons", predicate: RadioComponent, descendants: true }], ngImport: i0, template: "@if (_hasItems) {\n  <ion-radio-group\n    [value]=\"value\"\n    (ionChange)=\"_onChange($event.detail.value)\"\n    [attr.aria-invalid]=\"hasError\"\n  >\n    @if (!items || !items.length) {\n      <ng-content></ng-content>\n    } @else {\n      @for (item of items; track _getTextFromItem(item)) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            _customItemTemplate || defaultItemTemplate;\n            context: { $implicit: item, selected: $index === selectedIndex, index: $index }\n          \"\n        ></ng-container>\n      }\n    }\n  </ion-radio-group>\n}\n\n<ng-template #defaultItemTemplate let-item>\n  <kirby-radio\n    [value]=\"item\"\n    [disabled]=\"disabled || _getDisabledStateFromItem(item)\"\n    [text]=\"_getTextFromItem(item)\"\n  ></kirby-radio>\n</ng-template>\n", styles: ["ion-radio-group{display:inherit;flex-wrap:inherit}\n"], dependencies: [{ kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: RadioComponent, selector: "kirby-radio", inputs: ["value", "text", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RadioGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-radio-group', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: RadioGroupComponent,
-                            multi: true,
-                        },
-                        { provide: FORM_FIELD_CONTROL, useExisting: RadioGroupComponent },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [IonRadioGroup, NgTemplateOutlet, RadioComponent], template: "@if (_hasItems) {\n  <ion-radio-group\n    [value]=\"value\"\n    (ionChange)=\"_onChange($event.detail.value)\"\n    [attr.aria-invalid]=\"hasError\"\n  >\n    @if (!items || !items.length) {\n      <ng-content></ng-content>\n    } @else {\n      @for (item of items; track _getTextFromItem(item)) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            _customItemTemplate || defaultItemTemplate;\n            context: { $implicit: item, selected: $index === selectedIndex, index: $index }\n          \"\n        ></ng-container>\n      }\n    }\n  </ion-radio-group>\n}\n\n<ng-template #defaultItemTemplate let-item>\n  <kirby-radio\n    [value]=\"item\"\n    [disabled]=\"disabled || _getDisabledStateFromItem(item)\"\n    [text]=\"_getTextFromItem(item)\"\n  ></kirby-radio>\n</ng-template>\n", styles: ["ion-radio-group{display:inherit;flex-wrap:inherit}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { disabled: [{
-                type: Input
-            }], hasError: [{
-                type: HostBinding,
-                args: ['class.error']
-            }, {
-                type: Input
-            }], hasErrorChange: [{
-                type: Output
-            }], items: [{
-                type: Input
-            }], itemTextProperty: [{
-                type: Input
-            }], itemDisabledProperty: [{
-                type: Input
-            }], selectedIndex: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], _customItemTemplate: [{
-                type: ContentChild,
-                args: [ListItemTemplateDirective, { read: TemplateRef }]
-            }], radioButtons: [{
-                type: ViewChildren,
-                args: [RadioComponent]
-            }], projectedRadioButtons: [{
-                type: ContentChildren,
-                args: [RadioComponent, { descendants: true }]
-            }], _onRadioBlur: [{
-                type: HostListener,
-                args: ['ionBlur']
-            }] } });
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, Output, TemplateRef, ViewChild, ViewChildren } from "@angular/core";
+import { IonRadio, IonRadioGroup } from "@ionic/angular";
+import * as i1 from "@kirbydesign/designsystem/helpers";
+import { IonicElementPartHelper } from "@kirbydesign/designsystem/helpers";
+import { forwardAttributes, inheritAriaLabelText, setAccessibleLabel } from "@kirbydesign/designsystem/shared";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { ListItemTemplateDirective } from "@kirbydesign/designsystem/list";
+import { FORM_FIELD_CONTROL } from "@kirbydesign/designsystem/types";
+import { CommonModule, NgTemplateOutlet } from "@angular/common";
+var RadioComponent = class RadioComponent {
+	get _isDisabled() {
+		return this.disabled ? "disabled" : null;
+	}
+	get buttonTabIndex() {
+		return this.ionRadioElement ? this.ionRadioElement.nativeElement.tabIndex : -1;
+	}
+	constructor(element, ionicElementPartHelper) {
+		this.element = element;
+		this.ionicElementPartHelper = ionicElementPartHelper;
+		this.size = "md";
+		this._justify = "start";
+		this._labelPlacement = "end";
+	}
+	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.ionRadioElement, ".radio-wrapper");
+		this.ionicElementPartHelper.setPart("label-text-wrapper", this.ionRadioElement, ".label-text-wrapper");
+		this.ionicElementPartHelper.setPart("native-wrapper", this.ionRadioElement, ".native-wrapper");
+	}
+	ngAfterContentInit() {
+		this._labelText = inheritAriaLabelText(this.element.nativeElement);
+		if (!this.text && !this._labelText && !this._hasSlottedContent) this._labelText = setAccessibleLabel(this.element.nativeElement);
+	}
+	focus() {
+		this.ionRadioElement?.nativeElement.focus();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: RadioComponent,
+			deps: [{ token: i0.ElementRef }, { token: i1.IonicElementPartHelper }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.3",
+			type: RadioComponent,
+			isStandalone: true,
+			selector: "kirby-radio",
+			inputs: {
+				value: "value",
+				text: "text",
+				size: "size",
+				disabled: "disabled"
+			},
+			host: { properties: {
+				"class": "this.size",
+				"attr.disabled": "this._isDisabled",
+				"class.has-hidden-label": "this._labelText"
+			} },
+			providers: [IonicElementPartHelper],
+			viewQueries: [{
+				propertyName: "ionRadioElement",
+				first: true,
+				predicate: IonRadio,
+				descendants: true,
+				read: ElementRef,
+				static: true
+			}],
+			ngImport: i0,
+			template: "<ion-radio\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  mode=\"md\"\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-radio>\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-radio::part(label-text-wrapper),:host[disabled] ion-radio::part(native-wrapper){opacity:var(--kirby-opacity-40)}:host:has(ion-radio.in-item.radio-justify-space-between){width:100%}:host.has-hidden-label:has(ion-radio.in-item){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio{position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio::part(label){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-radio{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.xs ion-radio:not(.in-item)::part(label){padding-block:calc((32px - var(--kirby-spacing-m)) * .5)}:host.sm ion-radio:not(.in-item)::part(label){padding-block:calc((44px - var(--kirby-spacing-m)) * .5)}:host.md ion-radio:not(.in-item)::part(label){padding-block:calc((56px - var(--kirby-spacing-m)) * .5)}ion-radio{box-sizing:border-box;--border-width: var(--kirby-stroke-xs);--color: var(--kirby-color-border-raised);--color-checked: var(--kirby-color-border-raised)}@media(hover:hover){ion-radio:hover{--color: var(--kirby-color-border-raised-hover);--color-checked: var(--kirby-color-border-raised-hover)}ion-radio:hover::part(container){background-color:var(--kirby-color-fill-raised-hover)}ion-radio:hover::part(mark){--color-checked: var(--kirby-color-fill-engaged-hover)}}ion-radio:active{--color: var(--kirby-color-border-raised-active);--color-checked: var(--kirby-color-border-raised-active)}ion-radio:active::part(container){background-color:var(--kirby-color-fill-raised-active)}ion-radio:active::part(mark){--color-checked: var(--kirby-color-fill-engaged-active)}ion-radio:focus-visible{--color: var(--kirby-color-border-focus);--color-checked: var(--kirby-color-border-focus)}ion-radio:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-combined-inset)}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;background-color:var(--kirby-color-fill-raised);margin:var(--kirby-spacing-xxxxs);width:20px;height:20px}ion-radio::part(mark){--color-checked: var(--kirby-color-fill-engaged);width:var(--kirby-spacing-xs);height:var(--kirby-spacing-xs)}ion-radio::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}ion-radio::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}ion-radio::part(native-wrapper){height:var(--kirby-relative-size-m)}ion-radio.in-item::part(label){align-items:center;padding-inline:0}ion-radio.in-item::part(label-text-wrapper){margin-block:0}ion-radio.in-item.radio-label-placement-start::part(label-text-wrapper){margin-inline:0 var(--kirby-spacing-xxs)}ion-radio.in-item.radio-label-placement-end::part(label-text-wrapper){margin-inline:var(--kirby-spacing-xxs) 0}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio{--color: var(--kirby-color-border-raised-danger);--color-checked: var(--kirby-color-border-raised-danger)}ion-radio :host-context(kirby-radio-group.error) ion-radio::part(container),ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio::part(container){box-shadow:var(--kirby-error-ring-combined-inset)}ion-radio :host-context(kirby-radio-group.error) ion-radio:focus-visible,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:focus-visible{--color: var(--kirby-color-border-focus);--color-checked: var(--kirby-color-border-focus)}ion-radio :host-context(kirby-radio-group.error) ion-radio:focus-visible::part(container),ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:focus-visible::part(container){box-shadow:var(--kirby-focus-ring-sm-combined-inset)}:host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"],
+			dependencies: [{
+				kind: "component",
+				type: IonRadio,
+				selector: "ion-radio",
+				inputs: [
+					"alignment",
+					"color",
+					"disabled",
+					"justify",
+					"labelPlacement",
+					"mode",
+					"name",
+					"value"
+				],
+				outputs: ["ionFocus", "ionBlur"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: RadioComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-radio",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [IonicElementPartHelper],
+			imports: [IonRadio],
+			template: "<ion-radio\n  [value]=\"value\"\n  [disabled]=\"disabled\"\n  mode=\"md\"\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-radio>\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-radio::part(label-text-wrapper),:host[disabled] ion-radio::part(native-wrapper){opacity:var(--kirby-opacity-40)}:host:has(ion-radio.in-item.radio-justify-space-between){width:100%}:host.has-hidden-label:has(ion-radio.in-item){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio{position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio::part(label){position:initial}:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-start::part(label-text-wrapper),:host.has-hidden-label:has(ion-radio.in-item) ion-radio.radio-label-placement-end::part(label-text-wrapper){margin-inline:0}:host.has-hidden-label[slot=end] ion-radio{margin-inline-start:12px}:host.has-hidden-label .hidden-label{position:absolute;inset:0;opacity:0}:host.xs ion-radio:not(.in-item)::part(label){padding-block:calc((32px - var(--kirby-spacing-m)) * .5)}:host.sm ion-radio:not(.in-item)::part(label){padding-block:calc((44px - var(--kirby-spacing-m)) * .5)}:host.md ion-radio:not(.in-item)::part(label){padding-block:calc((56px - var(--kirby-spacing-m)) * .5)}ion-radio{box-sizing:border-box;--border-width: var(--kirby-stroke-xs);--color: var(--kirby-color-border-raised);--color-checked: var(--kirby-color-border-raised)}@media(hover:hover){ion-radio:hover{--color: var(--kirby-color-border-raised-hover);--color-checked: var(--kirby-color-border-raised-hover)}ion-radio:hover::part(container){background-color:var(--kirby-color-fill-raised-hover)}ion-radio:hover::part(mark){--color-checked: var(--kirby-color-fill-engaged-hover)}}ion-radio:active{--color: var(--kirby-color-border-raised-active);--color-checked: var(--kirby-color-border-raised-active)}ion-radio:active::part(container){background-color:var(--kirby-color-fill-raised-active)}ion-radio:active::part(mark){--color-checked: var(--kirby-color-fill-engaged-active)}ion-radio:focus-visible{--color: var(--kirby-color-border-focus);--color-checked: var(--kirby-color-border-focus)}ion-radio:focus-visible::part(container){transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-combined-inset)}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color,box-shadow;background-color:var(--kirby-color-fill-raised);margin:var(--kirby-spacing-xxxxs);width:20px;height:20px}ion-radio::part(mark){--color-checked: var(--kirby-color-fill-engaged);width:var(--kirby-spacing-xs);height:var(--kirby-spacing-xs)}ion-radio::part(label){align-items:start;padding-inline:16px;line-height:var(--kirby-line-height-n)}ion-radio::part(label-text-wrapper){margin-inline:12px 0;white-space:pre-line}ion-radio::part(native-wrapper){height:var(--kirby-relative-size-m)}ion-radio.in-item::part(label){align-items:center;padding-inline:0}ion-radio.in-item::part(label-text-wrapper){margin-block:0}ion-radio.in-item.radio-label-placement-start::part(label-text-wrapper){margin-inline:0 var(--kirby-spacing-xxs)}ion-radio.in-item.radio-label-placement-end::part(label-text-wrapper){margin-inline:var(--kirby-spacing-xxs) 0}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio{--color: var(--kirby-color-border-raised-danger);--color-checked: var(--kirby-color-border-raised-danger)}ion-radio :host-context(kirby-radio-group.error) ion-radio::part(container),ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio::part(container){box-shadow:var(--kirby-error-ring-combined-inset)}ion-radio :host-context(kirby-radio-group.error) ion-radio:focus-visible,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:focus-visible{--color: var(--kirby-color-border-focus);--color-checked: var(--kirby-color-border-focus)}ion-radio :host-context(kirby-radio-group.error) ion-radio:focus-visible::part(container),ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:focus-visible::part(container){box-shadow:var(--kirby-focus-ring-sm-combined-inset)}:host-context(kirby-item){z-index:var(--kirby-z-index-default)}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-block:0;margin-inline-end:12px}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IonicElementPartHelper }],
+	propDecorators: {
+		ionRadioElement: [{
+			type: ViewChild,
+			args: [IonRadio, {
+				read: ElementRef,
+				static: true
+			}]
+		}],
+		value: [{ type: Input }],
+		text: [{ type: Input }],
+		size: [{
+			type: HostBinding,
+			args: ["class"]
+		}, { type: Input }],
+		disabled: [{ type: Input }],
+		_isDisabled: [{
+			type: HostBinding,
+			args: ["attr.disabled"]
+		}],
+		_labelText: [{
+			type: HostBinding,
+			args: ["class.has-hidden-label"]
+		}]
+	}
+});
+var RadioGroupComponent = class RadioGroupComponent {
+	constructor(cdr, element, renderer) {
+		this.cdr = cdr;
+		this.element = element;
+		this.renderer = renderer;
+		this._hasError = false;
+		this.hasErrorChange = new EventEmitter();
+		this.itemTextProperty = "text";
+		this.itemDisabledProperty = "disabled";
+		this.valueChange = new EventEmitter();
+		this._disabled = false;
+		this._items = [];
+		this._onChangeCallback = () => {};
+		this._onTouched = () => {};
+		this._selectedIndex = -1;
+		this._value = null;
+		this._attributesToForward = ["aria-label", "aria-labelledby"];
+	}
+	get disabled() {
+		return this._disabled;
+	}
+	set disabled(value) {
+		this._disabled = value;
+		this.setProjectedRadiosDisabledState(value);
+	}
+	get hasError() {
+		return this._hasError;
+	}
+	set hasError(value) {
+		if (this._hasError !== value) {
+			this._hasError = value;
+			this.hasErrorChange.emit(this._hasError);
+		}
+	}
+	get interactiveElement() {
+		return this.element?.nativeElement?.querySelector("ion-radio-group");
+	}
+	get items() {
+		return this._items || [];
+	}
+	set items(value) {
+		if ((!value || !value.length) && !this.items.length) return;
+		this._items = value;
+		this.refreshSelectionState();
+	}
+	get selectedIndex() {
+		return this._selectedIndex;
+	}
+	set selectedIndex(value) {
+		if (typeof value === "string") value = parseInt(value);
+		if (value === void 0 || value === null || Number.isNaN(value)) value = -1;
+		if (value === this.selectedIndex) return;
+		this._selectedIndex = value;
+		this._value = this.getValueFromSelectedIndex() || null;
+	}
+	get value() {
+		return this._value;
+	}
+	set value(value) {
+		this.setSelectedItem(value);
+	}
+	get hasValue() {
+		return this.value !== void 0 && this.value !== null;
+	}
+	get hasItemsFromContentProjection() {
+		return !this.items.length && !this._customItemTemplate && this.projectedRadioButtons && this.projectedRadioButtons.length > 0;
+	}
+	focus() {
+		const findFocusable = (radios) => radios && radios.find((radio) => !isNaN(radio.buttonTabIndex) && radio.buttonTabIndex !== -1);
+		(findFocusable(this.radioButtons) || findFocusable(this.projectedRadioButtons))?.focus();
+	}
+	ngAfterContentInit() {
+		this.initSelectionStateFromProjectedContent();
+		this.listenForProjectedRadiosChange();
+	}
+	ngAfterViewInit() {
+		forwardAttributes(this.element.nativeElement, this._attributesToForward, this.renderer, this.element.nativeElement.querySelector("ion-radio-group"));
+	}
+	registerOnChange(fn) {
+		this._onChangeCallback = fn;
+	}
+	registerOnTouched(fn) {
+		this._onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.disabled = isDisabled;
+		this.cdr.markForCheck();
+	}
+	writeValue(value) {
+		this.value = value;
+		this.cdr.markForCheck();
+	}
+	_getTextFromItem(item) {
+		if (!item) return null;
+		return typeof item === "string" ? item : item[this.itemTextProperty];
+	}
+	_getDisabledStateFromItem(item) {
+		if (!item) return void 0;
+		return typeof item === "string" ? void 0 : item[this.itemDisabledProperty];
+	}
+	_onChange(value) {
+		if (value === this._value) return;
+		this.setSelectedItem(value);
+		this.valueChange.emit(value);
+		this._onChangeCallback(value);
+	}
+	_onRadioBlur() {
+		this._onTouched();
+	}
+	getIndexOfSelectedValue() {
+		if (!this.hasValue) return -1;
+		return this.hasItemsFromContentProjection ? this.getIndexOfProjectedRadio(this.value) : this.items.indexOf(this.value);
+	}
+	getIndexOfProjectedRadio(value) {
+		let selectedIndex = -1;
+		this.projectedRadioButtons?.find((radio, i) => {
+			const found = radio.value === value;
+			if (found) selectedIndex = i;
+			return found;
+		});
+		return selectedIndex;
+	}
+	getValueFromSelectedIndex() {
+		if (this.selectedIndex === -1) return;
+		return this.hasItemsFromContentProjection ? this.getValueFromProjectedRadios(this.selectedIndex) : this.items[this.selectedIndex];
+	}
+	getValueFromProjectedRadios(index) {
+		const radio = this.projectedRadioButtons && this.projectedRadioButtons.find((_, i) => {
+			return i === index;
+		});
+		return radio && radio.value;
+	}
+	initSelectionStateFromProjectedContent() {
+		if (this.hasItemsFromContentProjection) this.refreshSelectionState();
+	}
+	listenForProjectedRadiosChange() {
+		this.projectedRadioButtons.changes.subscribe(() => {
+			this.refreshStateFromProjectedContent();
+			if (this.disabled) setTimeout(() => this.setProjectedRadiosDisabledState(this.disabled));
+		});
+	}
+	refreshSelectionState() {
+		if (this.hasValue) this._selectedIndex = this.getIndexOfSelectedValue();
+		const valueFromSelectedIndex = this.getValueFromSelectedIndex();
+		this._value = valueFromSelectedIndex !== void 0 ? valueFromSelectedIndex : null;
+	}
+	refreshStateFromProjectedContent() {
+		if (this._customItemTemplate) return;
+		this.cdr.markForCheck();
+		this.refreshSelectionState();
+	}
+	setSelectedItem(value) {
+		if (value === this._value) return;
+		this._value = value;
+		this._selectedIndex = this.getIndexOfSelectedValue();
+	}
+	setProjectedRadiosDisabledState(isDisabled) {
+		if (!this.projectedRadioButtons || !this.projectedRadioButtons.length) return;
+		this.projectedRadioButtons.forEach((radio, index) => {
+			radio.disabled = isDisabled || this._getDisabledStateFromItem(this.items[index]);
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: RadioGroupComponent,
+			deps: [
+				{ token: i0.ChangeDetectorRef },
+				{ token: i0.ElementRef },
+				{ token: i0.Renderer2 }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.3",
+			type: RadioGroupComponent,
+			isStandalone: true,
+			selector: "kirby-radio-group",
+			inputs: {
+				disabled: "disabled",
+				hasError: "hasError",
+				items: "items",
+				itemTextProperty: "itemTextProperty",
+				itemDisabledProperty: "itemDisabledProperty",
+				selectedIndex: "selectedIndex",
+				value: "value"
+			},
+			outputs: {
+				hasErrorChange: "hasErrorChange",
+				valueChange: "valueChange"
+			},
+			host: {
+				listeners: { "ionBlur": "_onRadioBlur()" },
+				properties: { "class.error": "this.hasError" }
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: RadioGroupComponent,
+				multi: true
+			}, {
+				provide: FORM_FIELD_CONTROL,
+				useExisting: RadioGroupComponent
+			}],
+			queries: [{
+				propertyName: "_customItemTemplate",
+				first: true,
+				predicate: ListItemTemplateDirective,
+				descendants: true,
+				read: TemplateRef
+			}, {
+				propertyName: "projectedRadioButtons",
+				predicate: RadioComponent,
+				descendants: true
+			}],
+			viewQueries: [{
+				propertyName: "radioButtons",
+				predicate: RadioComponent,
+				descendants: true
+			}],
+			ngImport: i0,
+			template: "<ion-radio-group\n  [value]=\"value\"\n  (ionChange)=\"_onChange($event.detail.value)\"\n  [attr.aria-invalid]=\"hasError\"\n>\n  @if (!items || !items.length) {\n    <ng-content></ng-content>\n  } @else {\n    @for (item of items; track _getTextFromItem(item)) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          _customItemTemplate || defaultItemTemplate;\n          context: { $implicit: item, selected: $index === selectedIndex, index: $index }\n        \"\n      ></ng-container>\n    }\n  }\n</ion-radio-group>\n\n<ng-template #defaultItemTemplate let-item>\n  <kirby-radio\n    [value]=\"item\"\n    [disabled]=\"disabled || _getDisabledStateFromItem(item)\"\n    [text]=\"_getTextFromItem(item)\"\n  ></kirby-radio>\n</ng-template>\n",
+			styles: ["ion-radio-group{display:inherit;flex-wrap:inherit}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: IonRadioGroup,
+					selector: "ion-radio-group",
+					inputs: [
+						"allowEmptySelection",
+						"compareWith",
+						"errorText",
+						"helperText",
+						"name",
+						"value"
+					]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: RadioComponent,
+					selector: "kirby-radio",
+					inputs: [
+						"value",
+						"text",
+						"size",
+						"disabled"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: RadioGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-radio-group",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: RadioGroupComponent,
+				multi: true
+			}, {
+				provide: FORM_FIELD_CONTROL,
+				useExisting: RadioGroupComponent
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				IonRadioGroup,
+				NgTemplateOutlet,
+				RadioComponent
+			],
+			template: "<ion-radio-group\n  [value]=\"value\"\n  (ionChange)=\"_onChange($event.detail.value)\"\n  [attr.aria-invalid]=\"hasError\"\n>\n  @if (!items || !items.length) {\n    <ng-content></ng-content>\n  } @else {\n    @for (item of items; track _getTextFromItem(item)) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          _customItemTemplate || defaultItemTemplate;\n          context: { $implicit: item, selected: $index === selectedIndex, index: $index }\n        \"\n      ></ng-container>\n    }\n  }\n</ion-radio-group>\n\n<ng-template #defaultItemTemplate let-item>\n  <kirby-radio\n    [value]=\"item\"\n    [disabled]=\"disabled || _getDisabledStateFromItem(item)\"\n    [text]=\"_getTextFromItem(item)\"\n  ></kirby-radio>\n</ng-template>\n",
+			styles: ["ion-radio-group{display:inherit;flex-wrap:inherit}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ChangeDetectorRef },
+		{ type: i0.ElementRef },
+		{ type: i0.Renderer2 }
+	],
+	propDecorators: {
+		disabled: [{ type: Input }],
+		hasError: [{
+			type: HostBinding,
+			args: ["class.error"]
+		}, { type: Input }],
+		hasErrorChange: [{ type: Output }],
+		items: [{ type: Input }],
+		itemTextProperty: [{ type: Input }],
+		itemDisabledProperty: [{ type: Input }],
+		selectedIndex: [{ type: Input }],
+		value: [{ type: Input }],
+		valueChange: [{ type: Output }],
+		_customItemTemplate: [{
+			type: ContentChild,
+			args: [ListItemTemplateDirective, { read: TemplateRef }]
+		}],
+		radioButtons: [{
+			type: ViewChildren,
+			args: [RadioComponent]
+		}],
+		projectedRadioButtons: [{
+			type: ContentChildren,
+			args: [RadioComponent, { descendants: true }]
+		}],
+		_onRadioBlur: [{
+			type: HostListener,
+			args: ["ionBlur"]
+		}]
+	}
+});
 const declarations = [RadioComponent, RadioGroupComponent];
-class RadioModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: RadioModule, imports: [CommonModule, IonRadio, IonRadioGroup, RadioComponent, RadioGroupComponent], exports: [RadioComponent, RadioGroupComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RadioModule, imports: [CommonModule, IonRadio, IonRadioGroup, declarations] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RadioModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, IonRadio, IonRadioGroup, ...declarations],
-                    exports: [...declarations],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RadioModule = class RadioModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: RadioModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: RadioModule,
+			imports: [
+				CommonModule,
+				IonRadio,
+				IonRadioGroup,
+				RadioComponent,
+				RadioGroupComponent
+			],
+			exports: [RadioComponent, RadioGroupComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: RadioModule,
+			imports: [
+				CommonModule,
+				IonRadio,
+				IonRadioGroup,
+				declarations
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: RadioModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				IonRadio,
+				IonRadioGroup,
+				...declarations
+			],
+			exports: [...declarations]
+		}]
+	}]
+});
 export { RadioComponent, RadioGroupComponent, RadioModule };
-//# sourceMappingURL=kirbydesign-designsystem-radio.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-radio.mjs.map