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

package/fesm2022/kirbydesign-designsystem-segmented-control.mjs

@@ -1,235 +1,279 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, forwardRef, HostListener, Output, Input, HostBinding, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
-import { IconComponent } from '@kirbydesign/designsystem/icon';
-import { BadgeComponent } from '@kirbydesign/designsystem/badge';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { IonSegment, IonSegmentButton } from '@ionic/angular';
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, ViewChild, forwardRef } from "@angular/core";
+import { IconComponent } from "@kirbydesign/designsystem/icon";
+import { BadgeComponent } from "@kirbydesign/designsystem/badge";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { IonSegment, IonSegmentButton } from "@ionic/angular";
 var SegmentedControlMode;
-(function (SegmentedControlMode) {
-    SegmentedControlMode["chip"] = "chip";
-    SegmentedControlMode["compactChip"] = "compactChip";
-    SegmentedControlMode["default"] = "default";
+(function(SegmentedControlMode) {
+	SegmentedControlMode["chip"] = "chip";
+	SegmentedControlMode["compactChip"] = "compactChip";
+	SegmentedControlMode["default"] = "default";
 })(SegmentedControlMode || (SegmentedControlMode = {}));
-class SegmentedControlComponent {
-    /**
-     * Ensure that the click actually did originate from within the segment-button.
-     * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.
-     */
-    preventOutsideClick(event) {
-        if (event.target instanceof HTMLElement) {
-            const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');
-            if (!targetIsInSegmentBtn) {
-                event.stopImmediatePropagation();
-            }
-        }
-    }
-    get _modeCssClass() {
-        return {
-            [SegmentedControlMode.chip]: 'chip-mode',
-            [SegmentedControlMode.default]: 'default-mode',
-            [SegmentedControlMode.compactChip]: 'compact chip-mode',
-        }[this.mode];
-    }
-    get items() {
-        return this._items;
-    }
-    set items(value) {
-        this._items = value || [];
-        this._value = this.items[this.selectedIndex];
-        this.ensureIonSegmentSelected();
-    }
-    /**
-     * After upgrading to Ionic standalone components (Ionic v.7.6.6)
-     * there is a lifecycle bug between Angular/Ionic/Stencil that prevents
-     * the value of the segment component to be reflected in the checked state
-     * of it's slotted segment buttons.
-     * This has been patched here: https://github.com/ionic-team/ionic-framework/pull/28837
-     * However the patch doesn't fix the problem if `items` are updated after first initialization
-     * and the ion-segment-button(s) are re-rerendered.
-     */
-    ensureIonSegmentSelected() {
-        const ionSegment = this.ionSegmentElement.nativeElement;
-        const ionSelectEvent = ionSegment['ionSelect'];
-        if (this._value && typeof ionSelectEvent?.emit === 'function') {
-            // Ensure changes has been reflected to the DOM:
-            setTimeout(() => {
-                const selectedSegmentButton = ionSegment.querySelector('ion-segment-button.segment-button-checked');
-                if (selectedSegmentButton)
-                    return; // Nothing to patch
-                ionSelectEvent.emit({ value: this._value?.id });
-            });
-        }
-    }
-    get selectedIndex() {
-        return this._selectedIndex;
-    }
-    set selectedIndex(index) {
-        if (index !== this._selectedIndex) {
-            this._selectedIndex = index;
-            this._value = this.items[this.selectedIndex];
-            this.selectedIndexChange.emit(this.selectedIndex);
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        this.selectedIndex = this.items.indexOf(value);
-    }
-    set size(size) {
-        this.isSmallSize = size === 'sm';
-    }
-    get disableChangeOnSwipe() {
-        return this._disableChangeOnSwipe;
-    }
-    set disableChangeOnSwipe(value) {
-        this._disableChangeOnSwipe = value;
-    }
-    onSegmentSelect(selectedId) {
-        const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);
-        if (selectedItemIndex !== this.selectedIndex) {
-            this.selectedIndex = selectedItemIndex;
-            this.segmentSelect.emit(this.value);
-            this.onChange(this.value);
-            this.onTouched();
-        }
-    }
-    focusNativeButton(event) {
-        event.target?.setFocus();
-    }
-    getTabIndex(item, index) {
-        // When focused prevent tab stop from inner native button to outer ion-segment-button:
-        if (this._segmentElementHasFocus)
-            return -1;
-        // Allow tab stop on selected item:
-        if (item.id === this.value?.id)
-            return null;
-        // Allow tab stop on first item if no value is set:
-        if (!this.value && index === 0)
-            return null;
-        // Prevent tab stop on all other items:
-        return -1;
-    }
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.mode = SegmentedControlMode.default;
-        this._items = [];
-        this.isDisabled = false;
-        this._selectedIndex = -1;
-        this.selectedIndexChange = new EventEmitter();
-        this._disableChangeOnSwipe = false;
-        this.segmentSelect = new EventEmitter();
-        this._segmentElementHasFocus = 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 = () => { };
-    }
-    _onFocusInOut() {
-        // @HostListener(focusin|focusout) triggers Change Detection and updates attr.tabindex on each ion-segment-button
-        this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(':focus-within');
-        if (!this._segmentElementHasFocus) {
-            this.onTouched();
-        }
-    }
-    /**
-     * Sets the segmented control'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) {
-        if (value !== this._value) {
-            this.value = value;
-            this.cdr.markForCheck();
-        }
-    }
-    /**
-     * Saves a callback function to be invoked when the segmented control'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 segmented control 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 segmented control. 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.isDisabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SegmentedControlComponent, isStandalone: true, selector: "kirby-segmented-control", inputs: { mode: "mode", items: "items", selectedIndex: "selectedIndex", value: "value", size: "size", disableChangeOnSwipe: "disableChangeOnSwipe" }, outputs: { selectedIndexChange: "selectedIndexChange", segmentSelect: "segmentSelect" }, host: { listeners: { "focusin": "_onFocusInOut()", "focusout": "_onFocusInOut()" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef((() => SegmentedControlComponent)),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "ionSegmentElement", first: true, predicate: IonSegment, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n  [disabled]=\"isDisabled\"\n>\n  @for (item of items; track item.id; let i = $index) {\n    <ion-segment-button\n      [value]=\"item.id\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.tabindex]=\"getTabIndex(item, i)\"\n      (click)=\"focusNativeButton($event)\"\n    >\n      {{ item.text }}\n      @if (item.badge) {\n        <kirby-badge\n          role=\"text\"\n          [attr.aria-label]=\"item.badge.description\"\n          [themeColor]=\"item.badge.themeColor\"\n        >\n          @if (item.badge.icon) {\n            <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n          } @else {\n            {{ item.badge.content }}\n          }\n        </kirby-badge>\n      }\n    </ion-segment-button>\n  }\n</ion-segment>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-inputs-background-color);box-shadow:var(--kirby-inputs-elevation);overflow:visible;contain:none;width:fit-content}:host.default-mode ion-segment-button{--color-hover: var(--kirby-inputs-color-hover)}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-inputs-background-color);--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}@media(hover:hover){:host.chip-mode ion-segment-button:hover,:host.compact ion-segment-button:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}@media(hover:hover){:host.chip-mode ion-segment-button.segment-button-checked:hover,:host.compact ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: none;--color: var(--kirby-inputs-color);--indicator-color: var(--kirby-inputs-indicator-background-color);--color-checked: var(--kirby-inputs-indicator-color);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}ion-segment-button::part(native){border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(native):after{transition:all 80ms linear 0ms;border-radius:var(--border-radius)}ion-segment-button::part(indicator){padding-inline:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: BadgeComponent, selector: "kirby-badge", inputs: ["text", "size"] }, { kind: "component", type: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SegmentedControlComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton], selector: 'kirby-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef((() => SegmentedControlComponent)),
-                            multi: true,
-                        },
-                    ], template: "<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n  [disabled]=\"isDisabled\"\n>\n  @for (item of items; track item.id; let i = $index) {\n    <ion-segment-button\n      [value]=\"item.id\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.tabindex]=\"getTabIndex(item, i)\"\n      (click)=\"focusNativeButton($event)\"\n    >\n      {{ item.text }}\n      @if (item.badge) {\n        <kirby-badge\n          role=\"text\"\n          [attr.aria-label]=\"item.badge.description\"\n          [themeColor]=\"item.badge.themeColor\"\n        >\n          @if (item.badge.icon) {\n            <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n          } @else {\n            {{ item.badge.content }}\n          }\n        </kirby-badge>\n      }\n    </ion-segment-button>\n  }\n</ion-segment>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-inputs-background-color);box-shadow:var(--kirby-inputs-elevation);overflow:visible;contain:none;width:fit-content}:host.default-mode ion-segment-button{--color-hover: var(--kirby-inputs-color-hover)}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-inputs-background-color);--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}@media(hover:hover){:host.chip-mode ion-segment-button:hover,:host.compact ion-segment-button:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}@media(hover:hover){:host.chip-mode ion-segment-button.segment-button-checked:hover,:host.compact ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: none;--color: var(--kirby-inputs-color);--indicator-color: var(--kirby-inputs-indicator-background-color);--color-checked: var(--kirby-inputs-indicator-color);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}ion-segment-button::part(native){border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(native):after{transition:all 80ms linear 0ms;border-radius:var(--border-radius)}ion-segment-button::part(indicator){padding-inline:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { ionSegmentElement: [{
-                type: ViewChild,
-                args: [IonSegment, { static: true, read: ElementRef }]
-            }], mode: [{
-                type: Input
-            }], _modeCssClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], items: [{
-                type: Input
-            }], selectedIndex: [{
-                type: Input
-            }], selectedIndexChange: [{
-                type: Output
-            }], value: [{
-                type: Input
-            }], isSmallSize: [{
-                type: HostBinding,
-                args: ['class.sm']
-            }], size: [{
-                type: Input
-            }], disableChangeOnSwipe: [{
-                type: Input
-            }], segmentSelect: [{
-                type: Output
-            }], _onFocusInOut: [{
-                type: HostListener,
-                args: ['focusin']
-            }, {
-                type: HostListener,
-                args: ['focusout']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var SegmentedControlComponent = class SegmentedControlComponent {
+	preventOutsideClick(event) {
+		if (event.target instanceof HTMLElement) {
+			if (!!!event.target.closest("ion-segment-button")) event.stopImmediatePropagation();
+		}
+	}
+	get _modeCssClass() {
+		return {
+			[SegmentedControlMode.chip]: "chip-mode",
+			[SegmentedControlMode.default]: "default-mode",
+			[SegmentedControlMode.compactChip]: "compact chip-mode"
+		}[this.mode];
+	}
+	get items() {
+		return this._items;
+	}
+	set items(value) {
+		this._items = value || [];
+		this._value = this.items[this.selectedIndex];
+		this.ensureIonSegmentSelected();
+	}
+	ensureIonSegmentSelected() {
+		const ionSegment = this.ionSegmentElement.nativeElement;
+		const ionSelectEvent = ionSegment["ionSelect"];
+		if (this._value && typeof ionSelectEvent?.emit === "function") setTimeout(() => {
+			if (ionSegment.querySelector("ion-segment-button.segment-button-checked")) return;
+			ionSelectEvent.emit({ value: this._value?.id });
+		});
+	}
+	get selectedIndex() {
+		return this._selectedIndex;
+	}
+	set selectedIndex(index) {
+		if (index !== this._selectedIndex) {
+			this._selectedIndex = index;
+			this._value = this.items[this.selectedIndex];
+			this.selectedIndexChange.emit(this.selectedIndex);
+		}
+	}
+	get value() {
+		return this._value;
+	}
+	set value(value) {
+		this.selectedIndex = this.items.indexOf(value);
+	}
+	set size(size) {
+		this.isSmallSize = size === "sm";
+	}
+	get disableChangeOnSwipe() {
+		return this._disableChangeOnSwipe;
+	}
+	set disableChangeOnSwipe(value) {
+		this._disableChangeOnSwipe = value;
+	}
+	onSegmentSelect(selectedId) {
+		const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);
+		if (selectedItemIndex !== this.selectedIndex) {
+			this.selectedIndex = selectedItemIndex;
+			this.segmentSelect.emit(this.value);
+			this.onChange(this.value);
+			this.onTouched();
+		}
+	}
+	focusNativeButton(event) {
+		event.target?.setFocus();
+	}
+	getTabIndex(item, index) {
+		if (this._segmentElementHasFocus) return -1;
+		if (item.id === this.value?.id) return null;
+		if (!this.value && index === 0) return null;
+		return -1;
+	}
+	constructor(cdr) {
+		this.cdr = cdr;
+		this.mode = SegmentedControlMode.default;
+		this._items = [];
+		this.isDisabled = false;
+		this._selectedIndex = -1;
+		this.selectedIndexChange = new EventEmitter();
+		this._disableChangeOnSwipe = false;
+		this.segmentSelect = new EventEmitter();
+		this._segmentElementHasFocus = false;
+		this.onChange = () => {};
+		this.onTouched = () => {};
+	}
+	_onFocusInOut() {
+		this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(":focus-within");
+		if (!this._segmentElementHasFocus) this.onTouched();
+	}
+	writeValue(value) {
+		if (value !== this._value) {
+			this.value = value;
+			this.cdr.markForCheck();
+		}
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.isDisabled = isDisabled;
+		this.cdr.markForCheck();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: SegmentedControlComponent,
+			deps: [{ token: i0.ChangeDetectorRef }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: SegmentedControlComponent,
+			isStandalone: true,
+			selector: "kirby-segmented-control",
+			inputs: {
+				mode: "mode",
+				items: "items",
+				selectedIndex: "selectedIndex",
+				value: "value",
+				size: "size",
+				disableChangeOnSwipe: "disableChangeOnSwipe"
+			},
+			outputs: {
+				selectedIndexChange: "selectedIndexChange",
+				segmentSelect: "segmentSelect"
+			},
+			host: {
+				listeners: {
+					"focusin": "_onFocusInOut()",
+					"focusout": "_onFocusInOut()"
+				},
+				properties: {
+					"class": "this._modeCssClass",
+					"class.sm": "this.isSmallSize"
+				}
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef((() => SegmentedControlComponent)),
+				multi: true
+			}],
+			viewQueries: [{
+				propertyName: "ionSegmentElement",
+				first: true,
+				predicate: IonSegment,
+				descendants: true,
+				read: ElementRef,
+				static: true
+			}],
+			ngImport: i0,
+			template: "<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n  [disabled]=\"isDisabled\"\n>\n  @for (item of items; track item.id; let i = $index) {\n    <ion-segment-button\n      [value]=\"item.id\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.tabindex]=\"getTabIndex(item, i)\"\n      (click)=\"focusNativeButton($event)\"\n    >\n      {{ item.text }}\n      @if (item.badge) {\n        <kirby-badge\n          role=\"text\"\n          [attr.aria-label]=\"item.badge.description\"\n          [themeColor]=\"item.badge.themeColor\"\n        >\n          @if (item.badge.icon) {\n            <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n          } @else {\n            {{ item.badge.content }}\n          }\n        </kirby-badge>\n      }\n    </ion-segment-button>\n  }\n</ion-segment>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-color-fill-raised);outline:1px solid var(--kirby-color-border-raised-quiet);outline-offset:-1px;overflow:visible;contain:none;width:fit-content}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.chip-mode ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-raised)}:host.chip-mode ion-segment-button:not(.segment-button-checked)::part(native){border-color:var(--kirby-color-border-raised-quiet)}@media(hover:hover){:host.chip-mode ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-raised-hover)}:host.chip-mode ion-segment-button:not(.segment-button-checked):hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}:host.chip-mode ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-raised-active)}:host.chip-mode ion-segment-button:not(.segment-button-checked):active::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}:host.compact ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}:host.compact ion-segment-button:not(.segment-button-checked)::part(native),:host.compact ion-segment-button:not(.segment-button-checked):hover::part(native),:host.compact ion-segment-button:not(.segment-button-checked):active::part(native){border-color:transparent}@media(hover:hover){:host.compact ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-base-hover);--color: var(--kirby-color-content-base-hover)}}:host.compact ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-base-active);--color: var(--kirby-color-content-base-active)}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: transparent;--background-hover-opacity: 0;--color: var(--kirby-color-content-raised);--color-hover: var(--color);--indicator-color: var(--kirby-color-fill-brand);--color-checked: var(--kirby-color-content-brand);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}@media(hover:hover){ion-segment-button:hover{--background: var(--kirby-color-fill-raised-hover);--color: var(--kirby-color-content-raised-hover);--indicator-color: var(--kirby-color-fill-brand-hover);--color-checked: var(--kirby-color-content-brand-hover)}}ion-segment-button:active{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active);--indicator-color: var(--kirby-color-fill-brand-active);--color-checked: var(--kirby-color-content-brand-active)}ion-segment-button::part(native){transition:all 80ms linear 0ms;box-sizing:border-box;border:1px solid transparent;border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(indicator){padding-inline:0}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "kirby-icon",
+					inputs: ["size", "name"]
+				},
+				{
+					kind: "component",
+					type: BadgeComponent,
+					selector: "kirby-badge",
+					inputs: ["text", "size"]
+				},
+				{
+					kind: "component",
+					type: IonSegment,
+					selector: "ion-segment",
+					inputs: [
+						"color",
+						"disabled",
+						"mode",
+						"scrollable",
+						"selectOnFocus",
+						"swipeGesture",
+						"value"
+					]
+				},
+				{
+					kind: "component",
+					type: IonSegmentButton,
+					selector: "ion-segment-button",
+					inputs: [
+						"contentId",
+						"disabled",
+						"layout",
+						"mode",
+						"type",
+						"value"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SegmentedControlComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [
+				IconComponent,
+				BadgeComponent,
+				IonSegment,
+				IonSegmentButton
+			],
+			selector: "kirby-segmented-control",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef((() => SegmentedControlComponent)),
+				multi: true
+			}],
+			template: "<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n  [disabled]=\"isDisabled\"\n>\n  @for (item of items; track item.id; let i = $index) {\n    <ion-segment-button\n      [value]=\"item.id\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.tabindex]=\"getTabIndex(item, i)\"\n      (click)=\"focusNativeButton($event)\"\n    >\n      {{ item.text }}\n      @if (item.badge) {\n        <kirby-badge\n          role=\"text\"\n          [attr.aria-label]=\"item.badge.description\"\n          [themeColor]=\"item.badge.themeColor\"\n        >\n          @if (item.badge.icon) {\n            <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n          } @else {\n            {{ item.badge.content }}\n          }\n        </kirby-badge>\n      }\n    </ion-segment-button>\n  }\n</ion-segment>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-color-fill-raised);outline:1px solid var(--kirby-color-border-raised-quiet);outline-offset:-1px;overflow:visible;contain:none;width:fit-content}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.chip-mode ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-raised)}:host.chip-mode ion-segment-button:not(.segment-button-checked)::part(native){border-color:var(--kirby-color-border-raised-quiet)}@media(hover:hover){:host.chip-mode ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-raised-hover)}:host.chip-mode ion-segment-button:not(.segment-button-checked):hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}:host.chip-mode ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-raised-active)}:host.chip-mode ion-segment-button:not(.segment-button-checked):active::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}:host.compact ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}:host.compact ion-segment-button:not(.segment-button-checked)::part(native),:host.compact ion-segment-button:not(.segment-button-checked):hover::part(native),:host.compact ion-segment-button:not(.segment-button-checked):active::part(native){border-color:transparent}@media(hover:hover){:host.compact ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-base-hover);--color: var(--kirby-color-content-base-hover)}}:host.compact ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-base-active);--color: var(--kirby-color-content-base-active)}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: transparent;--background-hover-opacity: 0;--color: var(--kirby-color-content-raised);--color-hover: var(--color);--indicator-color: var(--kirby-color-fill-brand);--color-checked: var(--kirby-color-content-brand);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}@media(hover:hover){ion-segment-button:hover{--background: var(--kirby-color-fill-raised-hover);--color: var(--kirby-color-content-raised-hover);--indicator-color: var(--kirby-color-fill-brand-hover);--color-checked: var(--kirby-color-content-brand-hover)}}ion-segment-button:active{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active);--indicator-color: var(--kirby-color-fill-brand-active);--color-checked: var(--kirby-color-content-brand-active)}ion-segment-button::part(native){transition:all 80ms linear 0ms;box-sizing:border-box;border:1px solid transparent;border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(indicator){padding-inline:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ChangeDetectorRef }],
+	propDecorators: {
+		ionSegmentElement: [{
+			type: ViewChild,
+			args: [IonSegment, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		mode: [{ type: Input }],
+		_modeCssClass: [{
+			type: HostBinding,
+			args: ["class"]
+		}],
+		items: [{ type: Input }],
+		selectedIndex: [{ type: Input }],
+		selectedIndexChange: [{ type: Output }],
+		value: [{ type: Input }],
+		isSmallSize: [{
+			type: HostBinding,
+			args: ["class.sm"]
+		}],
+		size: [{ type: Input }],
+		disableChangeOnSwipe: [{ type: Input }],
+		segmentSelect: [{ type: Output }],
+		_onFocusInOut: [{
+			type: HostListener,
+			args: ["focusin"]
+		}, {
+			type: HostListener,
+			args: ["focusout"]
+		}]
+	}
+});
 export { SegmentedControlComponent, SegmentedControlMode };
-//# sourceMappingURL=kirbydesign-designsystem-segmented-control.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-segmented-control.mjs.map

package/fesm2022/kirbydesign-designsystem-segmented-control.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-segmented-control.mjs","sources":["../../segmented-control/src/segmented-control.component.ts","../../segmented-control/src/segmented-control.component.html","../../segmented-control/src/kirbydesign-designsystem-segmented-control.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  HostListener,\n  Input,\n  Output,\n  ViewChild,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonSegment, IonSegmentButton } from '@ionic/angular';\n\nimport { SegmentItem } from './segment-item';\n\nexport enum SegmentedControlMode {\n  chip = 'chip',\n  compactChip = 'compactChip',\n  default = 'default',\n}\n\n@Component({\n  imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton],\n  selector: 'kirby-segmented-control',\n  templateUrl: './segmented-control.component.html',\n  styleUrls: ['./segmented-control.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SegmentedControlComponent),\n      multi: true,\n    },\n  ],\n})\nexport class SegmentedControlComponent<\n  TItem extends SegmentItem = SegmentItem,\n> implements ControlValueAccessor {\n  @ViewChild(IonSegment, { static: true, read: ElementRef })\n  private ionSegmentElement: ElementRef<HTMLIonSegmentElement>;\n\n  /**\n   * Ensure that the click actually did originate from within the segment-button.\n   * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.\n   */\n  preventOutsideClick(event: TouchEvent) {\n    if (event.target instanceof HTMLElement) {\n      const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');\n      if (!targetIsInSegmentBtn) {\n        event.stopImmediatePropagation();\n      }\n    }\n  }\n\n  @Input() mode: SegmentedControlMode | `${SegmentedControlMode}` = SegmentedControlMode.default;\n\n  @HostBinding('class')\n  get _modeCssClass() {\n    return {\n      [SegmentedControlMode.chip]: 'chip-mode',\n      [SegmentedControlMode.default]: 'default-mode',\n      [SegmentedControlMode.compactChip]: 'compact chip-mode',\n    }[this.mode];\n  }\n\n  private _items: TItem[] = [];\n  get items(): TItem[] {\n    return this._items;\n  }\n\n  @Input() set items(value: TItem[]) {\n    this._items = value || [];\n    this._value = this.items[this.selectedIndex];\n    this.ensureIonSegmentSelected();\n  }\n\n  protected isDisabled = false;\n\n  /**\n   * After upgrading to Ionic standalone components (Ionic v.7.6.6)\n   * there is a lifecycle bug between Angular/Ionic/Stencil that prevents\n   * the value of the segment component to be reflected in the checked state\n   * of it's slotted segment buttons.\n   * This has been patched here: https://github.com/ionic-team/ionic-framework/pull/28837\n   * However the patch doesn't fix the problem if `items` are updated after first initialization\n   * and the ion-segment-button(s) are re-rerendered.\n   */\n  private ensureIonSegmentSelected() {\n    const ionSegment = this.ionSegmentElement.nativeElement;\n    const ionSelectEvent = ionSegment['ionSelect'];\n    if (this._value && typeof ionSelectEvent?.emit === 'function') {\n      // Ensure changes has been reflected to the DOM:\n      setTimeout(() => {\n        const selectedSegmentButton = ionSegment.querySelector(\n          'ion-segment-button.segment-button-checked'\n        );\n        if (selectedSegmentButton) return; // Nothing to patch\n\n        ionSelectEvent.emit({ value: this._value?.id });\n      });\n    }\n  }\n\n  private _selectedIndex: number = -1;\n  get selectedIndex(): number {\n    return this._selectedIndex;\n  }\n\n  @Input() set selectedIndex(index: number) {\n    if (index !== this._selectedIndex) {\n      this._selectedIndex = index;\n      this._value = this.items[this.selectedIndex];\n      this.selectedIndexChange.emit(this.selectedIndex);\n    }\n  }\n\n  @Output() selectedIndexChange = new EventEmitter<number>();\n\n  private _value: NoInfer<TItem>;\n  get value(): NoInfer<TItem> {\n    return this._value;\n  }\n\n  @Input() set value(value: NoInfer<TItem>) {\n    this.selectedIndex = this.items.indexOf(value);\n  }\n\n  @HostBinding('class.sm')\n  isSmallSize: boolean;\n\n  @Input() set size(size: 'sm' | 'md') {\n    this.isSmallSize = size === 'sm';\n  }\n\n  private _disableChangeOnSwipe: boolean = false;\n  get disableChangeOnSwipe(): boolean {\n    return this._disableChangeOnSwipe;\n  }\n\n  @Input() set disableChangeOnSwipe(value: boolean) {\n    this._disableChangeOnSwipe = value;\n  }\n\n  @Output() segmentSelect = new EventEmitter<TItem>();\n\n  onSegmentSelect(selectedId: string) {\n    const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);\n\n    if (selectedItemIndex !== this.selectedIndex) {\n      this.selectedIndex = selectedItemIndex;\n      this.segmentSelect.emit(this.value);\n      this.onChange(this.value);\n      this.onTouched();\n    }\n  }\n\n  focusNativeButton(event: UIEvent) {\n    (event.target as HTMLIonSegmentButtonElement)?.setFocus();\n  }\n\n  private _segmentElementHasFocus = false;\n\n  getTabIndex(item: TItem, index: number) {\n    // When focused prevent tab stop from inner native button to outer ion-segment-button:\n    if (this._segmentElementHasFocus) return -1;\n    // Allow tab stop on selected item:\n    if (item.id === this.value?.id) return null;\n    // Allow tab stop on first item if no value is set:\n    if (!this.value && index === 0) return null;\n    // Prevent tab stop on all other items:\n    return -1;\n  }\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  @HostListener('focusin')\n  @HostListener('focusout')\n  _onFocusInOut() {\n    // @HostListener(focusin|focusout) triggers Change Detection and updates attr.tabindex on each ion-segment-button\n    this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(':focus-within');\n    if (!this._segmentElementHasFocus) {\n      this.onTouched();\n    }\n  }\n\n  // Initialize default ControlValueAccessor callback functions (noop)\n  // eslint-disable-next-line no-empty-function\n  private onChange: (value: NoInfer<TItem>) => void = () => {};\n  // eslint-disable-next-line no-empty-function\n  private onTouched: () => void = () => {};\n  /**\n   * Sets the segmented control'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: NoInfer<TItem>): void {\n    if (value !== this._value) {\n      this.value = value;\n      this.cdr.markForCheck();\n    }\n  }\n\n  /**\n   * Saves a callback function to be invoked when the segmented control'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: (value: NoInfer<TItem>) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the segmented control 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: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * Disables the segmented control. 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.isDisabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n}\n","<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n  [disabled]=\"isDisabled\"\n>\n  @for (item of items; track item.id; let i = $index) {\n    <ion-segment-button\n      [value]=\"item.id\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.tabindex]=\"getTabIndex(item, i)\"\n      (click)=\"focusNativeButton($event)\"\n    >\n      {{ item.text }}\n      @if (item.badge) {\n        <kirby-badge\n          role=\"text\"\n          [attr.aria-label]=\"item.badge.description\"\n          [themeColor]=\"item.badge.themeColor\"\n        >\n          @if (item.badge.icon) {\n            <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n          } @else {\n            {{ item.badge.content }}\n          }\n        </kirby-badge>\n      }\n    </ion-segment-button>\n  }\n</ion-segment>\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-segmented-control.mjs","names":[],"sources":["../../segmented-control/src/segmented-control.component.ts","../../segmented-control/src/segmented-control.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  HostListener,\n  Input,\n  Output,\n  ViewChild,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonSegment, IonSegmentButton } from '@ionic/angular';\n\nimport { SegmentItem } from './segment-item';\n\nexport enum SegmentedControlMode {\n  chip = 'chip',\n  compactChip = 'compactChip',\n  default = 'default',\n}\n\n@Component({\n  imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton],\n  selector: 'kirby-segmented-control',\n  templateUrl: './segmented-control.component.html',\n  styleUrls: ['./segmented-control.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SegmentedControlComponent),\n      multi: true,\n    },\n  ],\n})\nexport class SegmentedControlComponent<\n  TItem extends SegmentItem = SegmentItem,\n> implements ControlValueAccessor {\n  @ViewChild(IonSegment, { static: true, read: ElementRef })\n  private ionSegmentElement: ElementRef<HTMLIonSegmentElement>;\n\n  /**\n   * Ensure that the click actually did originate from within the segment-button.\n   * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.\n   */\n  preventOutsideClick(event: TouchEvent) {\n    if (event.target instanceof HTMLElement) {\n      const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');\n      if (!targetIsInSegmentBtn) {\n        event.stopImmediatePropagation();\n      }\n    }\n  }\n\n  @Input() mode: SegmentedControlMode | `${SegmentedControlMode}` = SegmentedControlMode.default;\n\n  @HostBinding('class')\n  get _modeCssClass() {\n    return {\n      [SegmentedControlMode.chip]: 'chip-mode',\n      [SegmentedControlMode.default]: 'default-mode',\n      [SegmentedControlMode.compactChip]: 'compact chip-mode',\n    }[this.mode];\n  }\n\n  private _items: TItem[] = [];\n  get items(): TItem[] {\n    return this._items;\n  }\n\n  @Input() set items(value: TItem[]) {\n    this._items = value || [];\n    this._value = this.items[this.selectedIndex];\n    this.ensureIonSegmentSelected();\n  }\n\n  protected isDisabled = false;\n\n  /**\n   * After upgrading to Ionic standalone components (Ionic v.7.6.6)\n   * there is a lifecycle bug between Angular/Ionic/Stencil that prevents\n   * the value of the segment component to be reflected in the checked state\n   * of it's slotted segment buttons.\n   * This has been patched here: https://github.com/ionic-team/ionic-framework/pull/28837\n   * However the patch doesn't fix the problem if `items` are updated after first initialization\n   * and the ion-segment-button(s) are re-rerendered.\n   */\n  private ensureIonSegmentSelected() {\n    const ionSegment = this.ionSegmentElement.nativeElement;\n    const ionSelectEvent = ionSegment['ionSelect'];\n    if (this._value && typeof ionSelectEvent?.emit === 'function') {\n      // Ensure changes has been reflected to the DOM:\n      setTimeout(() => {\n        const selectedSegmentButton = ionSegment.querySelector(\n          'ion-segment-button.segment-button-checked'\n        );\n        if (selectedSegmentButton) return; // Nothing to patch\n\n        ionSelectEvent.emit({ value: this._value?.id });\n      });\n    }\n  }\n\n  private _selectedIndex: number = -1;\n  get selectedIndex(): number {\n    return this._selectedIndex;\n  }\n\n  @Input() set selectedIndex(index: number) {\n    if (index !== this._selectedIndex) {\n      this._selectedIndex = index;\n      this._value = this.items[this.selectedIndex];\n      this.selectedIndexChange.emit(this.selectedIndex);\n    }\n  }\n\n  @Output() selectedIndexChange = new EventEmitter<number>();\n\n  private _value: NoInfer<TItem>;\n  get value(): NoInfer<TItem> {\n    return this._value;\n  }\n\n  @Input() set value(value: NoInfer<TItem>) {\n    this.selectedIndex = this.items.indexOf(value);\n  }\n\n  @HostBinding('class.sm')\n  isSmallSize: boolean;\n\n  @Input() set size(size: 'sm' | 'md') {\n    this.isSmallSize = size === 'sm';\n  }\n\n  private _disableChangeOnSwipe: boolean = false;\n  get disableChangeOnSwipe(): boolean {\n    return this._disableChangeOnSwipe;\n  }\n\n  @Input() set disableChangeOnSwipe(value: boolean) {\n    this._disableChangeOnSwipe = value;\n  }\n\n  @Output() segmentSelect = new EventEmitter<TItem>();\n\n  onSegmentSelect(selectedId: string) {\n    const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);\n\n    if (selectedItemIndex !== this.selectedIndex) {\n      this.selectedIndex = selectedItemIndex;\n      this.segmentSelect.emit(this.value);\n      this.onChange(this.value);\n      this.onTouched();\n    }\n  }\n\n  focusNativeButton(event: UIEvent) {\n    (event.target as HTMLIonSegmentButtonElement)?.setFocus();\n  }\n\n  private _segmentElementHasFocus = false;\n\n  getTabIndex(item: TItem, index: number) {\n    // When focused prevent tab stop from inner native button to outer ion-segment-button:\n    if (this._segmentElementHasFocus) return -1;\n    // Allow tab stop on selected item:\n    if (item.id === this.value?.id) return null;\n    // Allow tab stop on first item if no value is set:\n    if (!this.value && index === 0) return null;\n    // Prevent tab stop on all other items:\n    return -1;\n  }\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  @HostListener('focusin')\n  @HostListener('focusout')\n  _onFocusInOut() {\n    // @HostListener(focusin|focusout) triggers Change Detection and updates attr.tabindex on each ion-segment-button\n    this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(':focus-within');\n    if (!this._segmentElementHasFocus) {\n      this.onTouched();\n    }\n  }\n\n  // Initialize default ControlValueAccessor callback functions (noop)\n  // eslint-disable-next-line no-empty-function\n  private onChange: (value: NoInfer<TItem>) => void = () => {};\n  // eslint-disable-next-line no-empty-function\n  private onTouched: () => void = () => {};\n  /**\n   * Sets the segmented control'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: NoInfer<TItem>): void {\n    if (value !== this._value) {\n      this.value = value;\n      this.cdr.markForCheck();\n    }\n  }\n\n  /**\n   * Saves a callback function to be invoked when the segmented control'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: (value: NoInfer<TItem>) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the segmented control 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: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * Disables the segmented control. 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.isDisabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n}\n","<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n  [disabled]=\"isDisabled\"\n>\n  @for (item of items; track item.id; let i = $index) {\n    <ion-segment-button\n      [value]=\"item.id\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.tabindex]=\"getTabIndex(item, i)\"\n      (click)=\"focusNativeButton($event)\"\n    >\n      {{ item.text }}\n      @if (item.badge) {\n        <kirby-badge\n          role=\"text\"\n          [attr.aria-label]=\"item.badge.description\"\n          [themeColor]=\"item.badge.themeColor\"\n        >\n          @if (item.badge.icon) {\n            <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n          } @else {\n            {{ item.badge.content }}\n          }\n        </kirby-badge>\n      }\n    </ion-segment-button>\n  }\n</ion-segment>\n"],"mappings":";;;;;;AAqBA,IAAY;CAAZ,SAAY,sBAAoB;CAC9B,qBAAA,UAAA;CACA,qBAAA,iBAAA;CACA,qBAAA,aAAA;AACF,EAAA,CAJY,yBAAA,uBAAoB,CAAA,EAAA;AAoBhC,IAAa,4BAAb,MAAa,0BAAyB;CAUpC,oBAAoB,OAAiB;EACnC,IAAI,MAAM,kBAAkB,aAE1B;OAAI,CAAC,CADyB,CAAC,MAAM,OAAO,QAAQ,oBAAoB,GAEtE,MAAM,yBAAwB;EAChC;CAEJ;CAIA,IACI,gBAAa;EACf,OAAO;IACJ,qBAAqB,OAAO;IAC5B,qBAAqB,UAAU;IAC/B,qBAAqB,cAAc;EACrC,EAAC,KAAK;CACT;CAGA,IAAI,QAAK;EACP,OAAO,KAAK;CACd;CAEA,IAAa,MAAM,OAAc;EAC/B,KAAK,SAAS,SAAS,CAAA;EACvB,KAAK,SAAS,KAAK,MAAM,KAAK;EAC9B,KAAK,yBAAwB;CAC/B;CAaQ,2BAAwB;EAC9B,MAAM,aAAa,KAAK,kBAAkB;EAC1C,MAAM,iBAAiB,WAAW;EAClC,IAAI,KAAK,UAAU,OAAO,gBAAgB,SAAS,YAEjD,iBAAgB;GAId,IAH8B,WAAW,cACvC,2CAEE,GAAuB;GAE3B,eAAe,KAAK,EAAE,OAAO,KAAK,QAAQ,GAAE,CAAE;EAChD,CAAC;CAEL;CAGA,IAAI,gBAAa;EACf,OAAO,KAAK;CACd;CAEA,IAAa,cAAc,OAAa;EACtC,IAAI,UAAU,KAAK,gBAAgB;GACjC,KAAK,iBAAiB;GACtB,KAAK,SAAS,KAAK,MAAM,KAAK;GAC9B,KAAK,oBAAoB,KAAK,KAAK,aAAa;EAClD;CACF;CAKA,IAAI,QAAK;EACP,OAAO,KAAK;CACd;CAEA,IAAa,MAAM,OAAqB;EACtC,KAAK,gBAAgB,KAAK,MAAM,QAAQ,KAAK;CAC/C;CAKA,IAAa,KAAK,MAAiB;EACjC,KAAK,cAAc,SAAS;CAC9B;CAGA,IAAI,uBAAoB;EACtB,OAAO,KAAK;CACd;CAEA,IAAa,qBAAqB,OAAc;EAC9C,KAAK,wBAAwB;CAC/B;CAIA,gBAAgB,YAAkB;EAChC,MAAM,oBAAoB,KAAK,MAAM,WAAW,SAAS,eAAe,KAAK,EAAE;EAE/E,IAAI,sBAAsB,KAAK,eAAe;GAC5C,KAAK,gBAAgB;GACrB,KAAK,cAAc,KAAK,KAAK,KAAK;GAClC,KAAK,SAAS,KAAK,KAAK;GACxB,KAAK,UAAS;EAChB;CACF;CAEA,kBAAkB,OAAc;EAC7B,MAAM,QAAwC,SAAQ;CACzD;CAIA,YAAY,MAAa,OAAa;EAEpC,IAAI,KAAK,yBAAyB,OAAO;EAEzC,IAAI,KAAK,OAAO,KAAK,OAAO,IAAI,OAAO;EAEvC,IAAI,CAAC,KAAK,SAAS,UAAU,GAAG,OAAO;EAEvC,OAAO;CACT;CAEA,YAAoB,KAAsB;EAAtB,KAAA,MAAA;EAvHX,KAAA,OAAyD,qBAAqB;EAW/E,KAAA,SAAkB,CAAA;EAWhB,KAAA,aAAa;EA2Bf,KAAA,iBAAyB;EAavB,KAAA,sBAAsB,IAAI,aAAY;EAkBxC,KAAA,wBAAiC;EAS/B,KAAA,gBAAgB,IAAI,aAAY;EAiBlC,KAAA,0BAA0B;EA2B1B,KAAA,iBAAiD,CAAE;EAEnD,KAAA,kBAA6B,CAAE;CAhBM;CAI7C,gBAAa;EAEX,KAAK,0BAA0B,KAAK,kBAAkB,cAAc,QAAQ,eAAe;EAC3F,IAAI,CAAC,KAAK,yBACR,KAAK,UAAS;CAElB;CAaA,WAAW,OAAqB;EAC9B,IAAI,UAAU,KAAK,QAAQ;GACzB,KAAK,QAAQ;GACb,KAAK,IAAI,aAAY;EACvB;CACF;CASA,iBAAiB,IAAmC;EAClD,KAAK,WAAW;CAClB;CASA,kBAAkB,IAAc;EAC9B,KAAK,YAAY;CACnB;CAQA,iBAAiB,YAAmB;EAClC,KAAK,aAAa;EAClB,KAAK,IAAI,aAAY;CACvB;CAvMW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAyB,MAAA,CAAA,EAAA,OAAA,GAAA,kBAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAzB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAyB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,MAAA;IAAA,OAAA;IAAA,eAAA;IAAA,OAAA;IAAA,MAAA;IAAA,sBAAA;GAAA;GAAA,SAAA;IAAA,qBAAA;IAAA,eAAA;GAAA;GAAA,MAAA;IAAA,WAAA;KAAA,WAAA;KAAA,YAAA;IAAA;IAAA,YAAA;KAAA,SAAA;KAAA,YAAA;IAAA;GAAA;GAAA,WARzB,CACT;IACE,SAAS;IACT,aAAa,kBAAiB,0BAAyB;IACvD,OAAO;GACR,CACF;GAAA,aAAA,CAAA;IAAA,cAAA;IAAA,OAAA;IAAA,WAKU;IAAU,aAAA;IAAA,MAAwB;IAAU,QAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UC5CzD;GA+BA,QAAA,CAAA,47JAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDHY;KAAa,UAAA;KAAA,QAAA,CAAA,QAAA,MAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAE;KAAc,UAAA;KAAA,QAAA,CAAA,QAAA,MAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAE;KAAU,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAE;KAAgB,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAa1D,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAyB,YAAA,CAAA;EAdrC,MAAA;EACU,MAAA,CAAA;GAAA,SAAA;IAAC;IAAe;IAAgB;IAAY;GAAgB;GAAC,UAC5D;GAAyB,iBAGlB,wBAAwB;GAAM,WACpC,CACT;IACE,SAAS;IACT,aAAa,kBAAgB,0BAA0B;IACvD,OAAO;GACR,CACF;GAAA,UAAA;GAAA,QAAA,CAAA,47JAAA;EAAA,CAAA;;;;;GAKA,MAAA;GAAU,MAAA,CAAA,YAAY;IAAE,QAAQ;IAAM,MAAM;GAAU,CAAE;;EAgBxD,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAEA,MAAA;GAAY,MAAA,CAAA,OAAO;;EAcnB,OAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAsCA,eAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAQA,qBAAA,CAAA,EAAA,MAAA,OAAA,CAAA;EAOA,OAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAIA,MAAA;GAAY,MAAA,CAAA,UAAU;;EAGtB,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EASA,sBAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAIA,eAAA,CAAA,EAAA,MAAA,OAAA,CAAA;;GAgCA,MAAA;GAAa,MAAA,CAAA,SAAS;;GACtB,MAAA;GAAa,MAAA,CAAA,UAAU"}