@kirbydesign/designsystem 12.0.0-dev-67d5287 → 12.0.0-dev-286cdc0

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-radio.mjs","names":[],"sources":["../../radio/src/radio.component.ts","../../radio/src/radio.component.html","../../radio/src/radio-group/radio-group.component.ts","../../radio/src/radio-group/radio-group.component.html","../../radio/src/radio-module.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnInit,\n  ViewChild,\n} from '@angular/core';\nimport { IonRadio } from '@ionic/angular';\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  selector: 'kirby-radio',\n  templateUrl: './radio.component.html',\n  styleUrls: ['./radio.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [IonicElementPartHelper],\n  imports: [IonRadio],\n})\nexport class RadioComponent implements AfterViewInit, OnInit, AfterContentInit {\n  @ViewChild(IonRadio, { read: ElementRef, static: true })\n  private ionRadioElement?: ElementRef<HTMLIonRadioElement>;\n\n  @Input()\n  value: any;\n\n  @Input()\n  text: string;\n\n  @HostBinding('class')\n  @Input()\n  size: 'xs' | 'sm' | 'md' = 'md';\n\n  @Input()\n  disabled: boolean;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @HostBinding('class.has-hidden-label') _labelText: string;\n\n  get buttonTabIndex(): number {\n    return this.ionRadioElement ? this.ionRadioElement.nativeElement.tabIndex : -1;\n  }\n\n  _justify: 'start' | 'end' | 'space-between' = 'start';\n  _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n  _hasSlottedContent: boolean;\n\n  constructor(\n    private element: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n     * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n     * So it has to be done by querying an additional wrapper around the default content slot like this.\n     */\n    this._hasSlottedContent = this.element.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.element.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n      this._labelPlacement = 'start';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionRadioElement, '.radio-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionRadioElement,\n      '.label-text-wrapper'\n    );\n    this.ionicElementPartHelper.setPart('native-wrapper', this.ionRadioElement, '.native-wrapper');\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n    if (!this.text && !this._labelText && !this._hasSlottedContent) {\n      // if no label has been set try to find a label in an item and use its text content\n      this._labelText = setAccessibleLabel(this.element.nativeElement);\n    }\n  }\n\n  focus() {\n    this.ionRadioElement?.nativeElement.focus();\n  }\n}\n","<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","import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  Output,\n  QueryList,\n  Renderer2,\n  TemplateRef,\n  ViewChildren,\n} from '@angular/core';\nimport { Component, HostListener, Input } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\nimport { FORM_FIELD_CONTROL, FormFieldControl } from '@kirbydesign/designsystem/types';\n\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { IonRadioGroup } from '@ionic/angular';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RadioComponent } from '../radio.component';\n\n@Component({\n  selector: 'kirby-radio-group',\n  templateUrl: './radio-group.component.html',\n  styles: ['ion-radio-group { display: inherit; flex-wrap: inherit}'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: RadioGroupComponent,\n      multi: true,\n    },\n    { provide: FORM_FIELD_CONTROL, useExisting: RadioGroupComponent },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonRadioGroup, NgTemplateOutlet, RadioComponent],\n})\nexport class RadioGroupComponent\n  implements AfterContentInit, ControlValueAccessor, FormFieldControl, AfterViewInit\n{\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private element: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  // #region public properties\n\n  get disabled(): boolean {\n    return this._disabled;\n  }\n\n  @Input() set disabled(value: boolean) {\n    this._disabled = value;\n    this.setProjectedRadiosDisabledState(value);\n  }\n\n  private _hasError: boolean = false;\n\n  @HostBinding('class.error')\n  @Input()\n  get hasError(): boolean {\n    return this._hasError;\n  }\n\n  set hasError(value: boolean) {\n    if (this._hasError !== value) {\n      this._hasError = value;\n      this.hasErrorChange.emit(this._hasError);\n    }\n  }\n\n  @Output() hasErrorChange = new EventEmitter<boolean>();\n\n  get interactiveElement(): HTMLElement {\n    return this.element?.nativeElement?.querySelector('ion-radio-group');\n  }\n\n  get items(): string[] | any[] {\n    return this._items || []; // Ensure items return empty array even if set to null/undefined\n  }\n\n  @Input() set items(value: string[] | any[]) {\n    if ((!value || !value.length) && !this.items.length) return; // Nothing changed, no items before or after\n    this._items = value;\n    this.refreshSelectionState();\n  }\n\n  @Input()\n  itemTextProperty = 'text';\n\n  @Input()\n  itemDisabledProperty = 'disabled';\n\n  get selectedIndex(): number {\n    return this._selectedIndex;\n  }\n\n  @Input() set selectedIndex(value: number) {\n    if (typeof value === 'string') value = parseInt(value); // Ensure data type number, e.g. when used with template syntax without binding: <... selectedIndex=\"1\"\n    if (value === undefined || value === null || Number.isNaN(value)) value = -1;\n    if (value === this.selectedIndex) return;\n    this._selectedIndex = value;\n    this._value = this.getValueFromSelectedIndex() || null;\n  }\n\n  get value(): string | any {\n    return this._value;\n  }\n\n  @Input() set value(value: string | any) {\n    this.setSelectedItem(value);\n  }\n\n  private get hasValue(): boolean {\n    return this.value !== undefined && this.value !== null;\n  }\n\n  /**\n   * Emitted when an option is selected\n   */\n  @Output() valueChange: EventEmitter<string | any> = new EventEmitter<string | any>();\n  // #endregion public properties\n\n  // #region \"protected\" properties used by template\n  @ContentChild(ListItemTemplateDirective, { read: TemplateRef })\n  _customItemTemplate: TemplateRef<any>;\n  // #endregion \"protected\" properties used by template\n\n  // #region private fields\n  private _disabled = false;\n  private _items: string[] | any[] = [];\n  private _onChangeCallback: (value: any) => void = () => {};\n  private _onTouched = () => {};\n  private _selectedIndex: number = -1;\n  private _value?: string | any = null;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  @ViewChildren(RadioComponent)\n  private radioButtons: QueryList<RadioComponent>;\n  @ContentChildren(RadioComponent, { descendants: true })\n  private projectedRadioButtons: QueryList<RadioComponent>;\n\n  private get hasItemsFromContentProjection(): boolean {\n    return (\n      !this.items.length &&\n      !this._customItemTemplate &&\n      this.projectedRadioButtons &&\n      this.projectedRadioButtons.length > 0\n    );\n  }\n\n  // #endregion private fields\n\n  // #region public methods\n  focus() {\n    const findFocusable = (radios: QueryList<RadioComponent>) =>\n      radios && radios.find((radio) => !isNaN(radio.buttonTabIndex) && radio.buttonTabIndex !== -1);\n    const focusable = findFocusable(this.radioButtons) || findFocusable(this.projectedRadioButtons);\n    focusable?.focus();\n  }\n\n  ngAfterContentInit(): void {\n    this.initSelectionStateFromProjectedContent();\n    this.listenForProjectedRadiosChange();\n  }\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.element.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.element.nativeElement.querySelector('ion-radio-group')\n    );\n  }\n\n  registerOnChange(fn: any): void {\n    this._onChangeCallback = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean) {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  writeValue(value: any): void {\n    this.value = value;\n    this.cdr.markForCheck();\n  }\n\n  // #endregion public methods\n\n  // #region \"protected\" methods used by template\n  _getTextFromItem(item: string | any): string {\n    if (!item) return null;\n    return typeof item === 'string' ? item : item[this.itemTextProperty];\n  }\n\n  _getDisabledStateFromItem(item: string | any): boolean {\n    if (!item) return undefined;\n    return typeof item === 'string' ? undefined : item[this.itemDisabledProperty];\n  }\n\n  _onChange(value: string | any) {\n    if (value === this._value) return;\n    this.setSelectedItem(value);\n    this.valueChange.emit(value);\n    this._onChangeCallback(value);\n  }\n\n  @HostListener('ionBlur')\n  _onRadioBlur() {\n    this._onTouched();\n  }\n\n  // #endregion \"protected\" methods used by template\n\n  // #region private methods\n  private getIndexOfSelectedValue() {\n    if (!this.hasValue) return -1;\n    return this.hasItemsFromContentProjection\n      ? this.getIndexOfProjectedRadio(this.value)\n      : this.items.indexOf(this.value);\n  }\n\n  private getIndexOfProjectedRadio(value: string | any): number {\n    let selectedIndex = -1;\n    this.projectedRadioButtons?.find((radio, i) => {\n      const found = radio.value === value;\n      if (found) {\n        selectedIndex = i;\n      }\n      return found;\n    });\n    return selectedIndex;\n  }\n\n  private getValueFromSelectedIndex(): string | any {\n    if (this.selectedIndex === -1) return;\n    return this.hasItemsFromContentProjection\n      ? this.getValueFromProjectedRadios(this.selectedIndex)\n      : this.items[this.selectedIndex];\n  }\n\n  private getValueFromProjectedRadios(index: number): string | any {\n    const radio =\n      this.projectedRadioButtons &&\n      this.projectedRadioButtons.find((_, i) => {\n        return i === index;\n      });\n    return radio && radio.value;\n  }\n\n  private initSelectionStateFromProjectedContent() {\n    if (this.hasItemsFromContentProjection) {\n      this.refreshSelectionState(); // Initialize selected index and value from projected radios\n    }\n  }\n\n  private listenForProjectedRadiosChange() {\n    this.projectedRadioButtons.changes.subscribe(() => {\n      this.refreshStateFromProjectedContent();\n\n      if (this.disabled) {\n        // Ensure disabled state propagates when re-rendering projected radios.\n        // setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when updating the DOM in QueryList.changes:\n        setTimeout(() => this.setProjectedRadiosDisabledState(this.disabled));\n      }\n    });\n  }\n\n  private refreshSelectionState() {\n    if (this.hasValue) {\n      this._selectedIndex = this.getIndexOfSelectedValue(); // Ensure selectedIndex reflects value within items\n    }\n\n    const valueFromSelectedIndex = this.getValueFromSelectedIndex();\n    this._value = valueFromSelectedIndex !== undefined ? valueFromSelectedIndex : null;\n  }\n\n  private refreshStateFromProjectedContent() {\n    if (this._customItemTemplate) return; // Only refresh on changes to projected content, not when re-rendering custom template\n    this.cdr.markForCheck(); // Ensure changes to projected content gets checked in next change detection cycle\n    this.refreshSelectionState(); // Sync selected index and value from projected radios\n  }\n\n  private setSelectedItem(value: string | any) {\n    if (value === this._value) return; // Nothing changed\n    this._value = value;\n    this._selectedIndex = this.getIndexOfSelectedValue();\n  }\n\n  private setProjectedRadiosDisabledState(isDisabled: boolean) {\n    if (!this.projectedRadioButtons || !this.projectedRadioButtons.length) return;\n    this.projectedRadioButtons.forEach((radio, index) => {\n      // Disable all radios when group is disabled, otherwise fall back to each item's disabled state, if defined:\n      radio.disabled = isDisabled || this._getDisabledStateFromItem(this.items[index]);\n    });\n  }\n\n  // #endregion private methods\n}\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<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","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { IonRadio, IonRadioGroup } from '@ionic/angular';\nimport { RadioGroupComponent } from './radio-group/radio-group.component';\nimport { RadioComponent } from './radio.component';\n\nconst declarations = [RadioComponent, RadioGroupComponent];\n\n@NgModule({\n  imports: [CommonModule, IonRadio, IonRadioGroup, ...declarations],\n  exports: [...declarations],\n})\nexport class RadioModule {}\n"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-radio.mjs","names":[],"sources":["../../radio/src/radio.component.ts","../../radio/src/radio.component.html","../../radio/src/radio-group/radio-group.component.ts","../../radio/src/radio-group/radio-group.component.html","../../radio/src/radio-module.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnInit,\n  ViewChild,\n} from '@angular/core';\nimport { IonRadio } from '@ionic/angular';\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  selector: 'kirby-radio',\n  templateUrl: './radio.component.html',\n  styleUrls: ['./radio.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [IonicElementPartHelper],\n  imports: [IonRadio],\n})\nexport class RadioComponent implements AfterViewInit, OnInit, AfterContentInit {\n  @ViewChild(IonRadio, { read: ElementRef, static: true })\n  private ionRadioElement?: ElementRef<HTMLIonRadioElement>;\n\n  @Input()\n  value: any;\n\n  @Input()\n  text: string;\n\n  @HostBinding('class')\n  @Input()\n  size: 'xs' | 'sm' | 'md' = 'md';\n\n  @Input()\n  disabled: boolean;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @HostBinding('class.has-hidden-label') _labelText: string;\n\n  get buttonTabIndex(): number {\n    return this.ionRadioElement ? this.ionRadioElement.nativeElement.tabIndex : -1;\n  }\n\n  _justify: 'start' | 'end' | 'space-between' = 'start';\n  _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n  _hasSlottedContent: boolean;\n\n  constructor(\n    private element: ElementRef<HTMLElement>,\n    private ionicElementPartHelper: IonicElementPartHelper\n  ) {}\n\n  ngOnInit(): void {\n    /**\n     * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n     * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n     * So it has to be done by querying an additional wrapper around the default content slot like this.\n     */\n    this._hasSlottedContent = this.element.nativeElement\n      .querySelector('.default-content')\n      .hasChildNodes();\n\n    const slot = this.element.nativeElement.getAttribute('slot');\n    if (slot === 'end' && this._hasSlottedContent) {\n      this._justify = 'space-between';\n      this._labelPlacement = 'start';\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.ionicElementPartHelper.setPart('label', this.ionRadioElement, '.radio-wrapper');\n    this.ionicElementPartHelper.setPart(\n      'label-text-wrapper',\n      this.ionRadioElement,\n      '.label-text-wrapper'\n    );\n    this.ionicElementPartHelper.setPart('native-wrapper', this.ionRadioElement, '.native-wrapper');\n  }\n\n  ngAfterContentInit(): void {\n    this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n    if (!this.text && !this._labelText && !this._hasSlottedContent) {\n      // if no label has been set try to find a label in an item and use its text content\n      this._labelText = setAccessibleLabel(this.element.nativeElement);\n    }\n  }\n\n  focus() {\n    this.ionRadioElement?.nativeElement.focus();\n  }\n}\n","<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","import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  Output,\n  QueryList,\n  Renderer2,\n  TemplateRef,\n  ViewChildren,\n} from '@angular/core';\nimport { Component, HostListener, Input } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\nimport { FORM_FIELD_CONTROL, FormFieldControl } from '@kirbydesign/designsystem/types';\n\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { IonRadioGroup } from '@ionic/angular';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RadioComponent } from '../radio.component';\n\n@Component({\n  selector: 'kirby-radio-group',\n  templateUrl: './radio-group.component.html',\n  styles: ['ion-radio-group { display: inherit; flex-wrap: inherit}'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: RadioGroupComponent,\n      multi: true,\n    },\n    { provide: FORM_FIELD_CONTROL, useExisting: RadioGroupComponent },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonRadioGroup, NgTemplateOutlet, RadioComponent],\n})\nexport class RadioGroupComponent\n  implements AfterContentInit, ControlValueAccessor, FormFieldControl, AfterViewInit\n{\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private element: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  // #region public properties\n\n  get disabled(): boolean {\n    return this._disabled;\n  }\n\n  @Input() set disabled(value: boolean) {\n    this._disabled = value;\n    this.setProjectedRadiosDisabledState(value);\n  }\n\n  private _hasError: boolean = false;\n\n  @HostBinding('class.error')\n  @Input()\n  get hasError(): boolean {\n    return this._hasError;\n  }\n\n  set hasError(value: boolean) {\n    if (this._hasError !== value) {\n      this._hasError = value;\n      this.hasErrorChange.emit(this._hasError);\n    }\n  }\n\n  @Output() hasErrorChange = new EventEmitter<boolean>();\n\n  get interactiveElement(): HTMLElement {\n    return this.element?.nativeElement?.querySelector('ion-radio-group');\n  }\n\n  get items(): string[] | any[] {\n    return this._items || []; // Ensure items return empty array even if set to null/undefined\n  }\n\n  @Input() set items(value: string[] | any[]) {\n    if ((!value || !value.length) && !this.items.length) return; // Nothing changed, no items before or after\n    this._items = value;\n    this.refreshSelectionState();\n  }\n\n  @Input()\n  itemTextProperty = 'text';\n\n  @Input()\n  itemDisabledProperty = 'disabled';\n\n  get selectedIndex(): number {\n    return this._selectedIndex;\n  }\n\n  @Input() set selectedIndex(value: number) {\n    if (typeof value === 'string') value = parseInt(value); // Ensure data type number, e.g. when used with template syntax without binding: <... selectedIndex=\"1\"\n    if (value === undefined || value === null || Number.isNaN(value)) value = -1;\n    if (value === this.selectedIndex) return;\n    this._selectedIndex = value;\n    this._value = this.getValueFromSelectedIndex() || null;\n  }\n\n  get value(): string | any {\n    return this._value;\n  }\n\n  @Input() set value(value: string | any) {\n    this.setSelectedItem(value);\n  }\n\n  private get hasValue(): boolean {\n    return this.value !== undefined && this.value !== null;\n  }\n\n  /**\n   * Emitted when an option is selected\n   */\n  @Output() valueChange: EventEmitter<string | any> = new EventEmitter<string | any>();\n  // #endregion public properties\n\n  // #region \"protected\" properties used by template\n  @ContentChild(ListItemTemplateDirective, { read: TemplateRef })\n  _customItemTemplate: TemplateRef<any>;\n  // #endregion \"protected\" properties used by template\n\n  // #region private fields\n  private _disabled = false;\n  private _items: string[] | any[] = [];\n  private _onChangeCallback: (value: any) => void = () => {};\n  private _onTouched = () => {};\n  private _selectedIndex: number = -1;\n  private _value?: string | any = null;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  @ViewChildren(RadioComponent)\n  private radioButtons: QueryList<RadioComponent>;\n  @ContentChildren(RadioComponent, { descendants: true })\n  private projectedRadioButtons: QueryList<RadioComponent>;\n\n  private get hasItemsFromContentProjection(): boolean {\n    return (\n      !this.items.length &&\n      !this._customItemTemplate &&\n      this.projectedRadioButtons &&\n      this.projectedRadioButtons.length > 0\n    );\n  }\n\n  // #endregion private fields\n\n  // #region public methods\n  focus() {\n    const findFocusable = (radios: QueryList<RadioComponent>) =>\n      radios && radios.find((radio) => !isNaN(radio.buttonTabIndex) && radio.buttonTabIndex !== -1);\n    const focusable = findFocusable(this.radioButtons) || findFocusable(this.projectedRadioButtons);\n    focusable?.focus();\n  }\n\n  ngAfterContentInit(): void {\n    this.initSelectionStateFromProjectedContent();\n    this.listenForProjectedRadiosChange();\n  }\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.element.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.element.nativeElement.querySelector('ion-radio-group')\n    );\n  }\n\n  registerOnChange(fn: any): void {\n    this._onChangeCallback = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean) {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  writeValue(value: any): void {\n    this.value = value;\n    this.cdr.markForCheck();\n  }\n\n  // #endregion public methods\n\n  // #region \"protected\" methods used by template\n  _getTextFromItem(item: string | any): string {\n    if (!item) return null;\n    return typeof item === 'string' ? item : item[this.itemTextProperty];\n  }\n\n  _getDisabledStateFromItem(item: string | any): boolean {\n    if (!item) return undefined;\n    return typeof item === 'string' ? undefined : item[this.itemDisabledProperty];\n  }\n\n  _onChange(value: string | any) {\n    if (value === this._value) return;\n    this.setSelectedItem(value);\n    this.valueChange.emit(value);\n    this._onChangeCallback(value);\n  }\n\n  @HostListener('ionBlur')\n  _onRadioBlur() {\n    this._onTouched();\n  }\n\n  // #endregion \"protected\" methods used by template\n\n  // #region private methods\n  private getIndexOfSelectedValue() {\n    if (!this.hasValue) return -1;\n    return this.hasItemsFromContentProjection\n      ? this.getIndexOfProjectedRadio(this.value)\n      : this.items.indexOf(this.value);\n  }\n\n  private getIndexOfProjectedRadio(value: string | any): number {\n    let selectedIndex = -1;\n    this.projectedRadioButtons?.find((radio, i) => {\n      const found = radio.value === value;\n      if (found) {\n        selectedIndex = i;\n      }\n      return found;\n    });\n    return selectedIndex;\n  }\n\n  private getValueFromSelectedIndex(): string | any {\n    if (this.selectedIndex === -1) return;\n    return this.hasItemsFromContentProjection\n      ? this.getValueFromProjectedRadios(this.selectedIndex)\n      : this.items[this.selectedIndex];\n  }\n\n  private getValueFromProjectedRadios(index: number): string | any {\n    const radio =\n      this.projectedRadioButtons &&\n      this.projectedRadioButtons.find((_, i) => {\n        return i === index;\n      });\n    return radio && radio.value;\n  }\n\n  private initSelectionStateFromProjectedContent() {\n    if (this.hasItemsFromContentProjection) {\n      this.refreshSelectionState(); // Initialize selected index and value from projected radios\n    }\n  }\n\n  private listenForProjectedRadiosChange() {\n    this.projectedRadioButtons.changes.subscribe(() => {\n      this.refreshStateFromProjectedContent();\n\n      if (this.disabled) {\n        // Ensure disabled state propagates when re-rendering projected radios.\n        // setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when updating the DOM in QueryList.changes:\n        setTimeout(() => this.setProjectedRadiosDisabledState(this.disabled));\n      }\n    });\n  }\n\n  private refreshSelectionState() {\n    if (this.hasValue) {\n      this._selectedIndex = this.getIndexOfSelectedValue(); // Ensure selectedIndex reflects value within items\n    }\n\n    const valueFromSelectedIndex = this.getValueFromSelectedIndex();\n    this._value = valueFromSelectedIndex !== undefined ? valueFromSelectedIndex : null;\n  }\n\n  private refreshStateFromProjectedContent() {\n    if (this._customItemTemplate) return; // Only refresh on changes to projected content, not when re-rendering custom template\n    this.cdr.markForCheck(); // Ensure changes to projected content gets checked in next change detection cycle\n    this.refreshSelectionState(); // Sync selected index and value from projected radios\n  }\n\n  private setSelectedItem(value: string | any) {\n    if (value === this._value) return; // Nothing changed\n    this._value = value;\n    this._selectedIndex = this.getIndexOfSelectedValue();\n  }\n\n  private setProjectedRadiosDisabledState(isDisabled: boolean) {\n    if (!this.projectedRadioButtons || !this.projectedRadioButtons.length) return;\n    this.projectedRadioButtons.forEach((radio, index) => {\n      // Disable all radios when group is disabled, otherwise fall back to each item's disabled state, if defined:\n      radio.disabled = isDisabled || this._getDisabledStateFromItem(this.items[index]);\n    });\n  }\n\n  // #endregion private methods\n}\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<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","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { IonRadio, IonRadioGroup } from '@ionic/angular';\nimport { RadioGroupComponent } from './radio-group/radio-group.component';\nimport { RadioComponent } from './radio.component';\n\nconst declarations = [RadioComponent, RadioGroupComponent];\n\n@NgModule({\n  imports: [CommonModule, IonRadio, IonRadioGroup, ...declarations],\n  exports: [...declarations],\n})\nexport class RadioModule {}\n"],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-range.mjs

@@ -79,7 +79,7 @@ var RangeComponent = class RangeComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: RangeComponent,
 			deps: [
@@ -93,7 +93,7 @@ var RangeComponent = class RangeComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: RangeComponent,
 			isStandalone: true,
 			selector: "kirby-range",
@@ -129,7 +129,7 @@ var RangeComponent = class RangeComponent {
 			usesOnChanges: true,
 			ngImport: i0,
 			template: "<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [pinFormatter]=\"pinFormatter\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n></ion-range>\n\n@if (minLabel) {\n  <label class=\"min-label\">{{ minLabel }}</label>\n}\n@if (maxLabel) {\n  <label class=\"max-label\">{{ maxLabel }}</label>\n}\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range{--knob-background: var(--kirby-color-fill-brand-loud);--knob-box-shadow: 0 0 0 2px var(--kirby-color-fill-base);--knob-size: var(--kirby-spacing-s);--pin-color: var(--kirby-color-content-brand-loud);--pin-background: var(--kirby-color-fill-brand-loud);--bar-background: var(--kirby-color-border-base-quiet);--bar-background-active: var(--kirby-color-fill-brand-loud);--bar-border-radius: var(--kirby-spacing-xxxs);--bar-height: var(--kirby-spacing-xxxxs);flex:1 1 100%;padding:0}ion-range.range-disabled{opacity:.4}ion-range.range-has-pin{padding:0 calc(var(--kirby-spacing-xxs) / 2)}ion-range::part(knob){transition:all 80ms linear 0ms;transition-property:background,transform}ion-range::part(knob hover){--knob-background: var(--kirby-color-fill-brand-loud-hover)}ion-range::part(knob activated),ion-range::part(knob pressed){--knob-background: var(--kirby-color-fill-brand-loud-active)}ion-range::part(knob hover),ion-range::part(knob activated),ion-range::part(knob pressed){transform:scale(1.25)}ion-range::part(knob focused){box-shadow:var(--kirby-focus-ring-md-outer)}ion-range::part(pin){font-size:var(--kirby-font-size-xs);color:var(--pin-color);background-color:var(--pin-background);padding:var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs);border-radius:var(--kirby-spacing-xxxs);min-width:var(--kirby-spacing-m);top:calc(-1 * var(--kirby-spacing-xxs))}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);display:block;border:solid transparent 6px;border-top-color:var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:var(--kirby-border-radius-circle);width:var(--kirby-spacing-xxs);height:var(--kirby-spacing-xxs);margin-inline-start:calc(var(--kirby-spacing-xxs) / -2);z-index:1}ion-range::part(tick){background:var(--kirby-color-border-base-quiet)}label{font-size:var(--kirby-font-size-xs);line-height:var(--kirby-line-height-xs);color:var(--kirby-color-content-base-quiet);margin-top:calc(-1 * var(--kirby-spacing-xxxs))}\n"],
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range{--knob-background: var(--kirby-color-fill-brand-loud);--knob-box-shadow: 0 0 0 2px var(--kirby-color-fill-base);--knob-size: var(--kirby-spacing-s);--knob-handle-size: var(--kirby-size-fat-finger);--pin-color: var(--kirby-color-content-brand-loud);--pin-background: var(--kirby-color-fill-brand-loud);--bar-background: var(--kirby-color-border-base-quiet);--bar-background-active: var(--kirby-color-fill-brand-loud);--bar-border-radius: var(--kirby-spacing-xxxs);--bar-height: var(--kirby-spacing-xxxxs);flex:1 1 100%;padding:0}ion-range.range-disabled{opacity:var(--kirby-opacity-40)}ion-range.range-has-pin{padding:0 calc(var(--kirby-spacing-xxs) / 2)}ion-range::part(knob){transition:all 80ms linear 0ms;transition-property:background,transform}ion-range::part(knob hover){--knob-background: var(--kirby-color-fill-brand-loud-hover)}ion-range::part(knob activated),ion-range::part(knob pressed){--knob-background: var(--kirby-color-fill-brand-loud-active)}ion-range::part(knob hover),ion-range::part(knob activated),ion-range::part(knob pressed){transform:scale(1.25)}ion-range::part(knob focused){box-shadow:var(--kirby-focus-ring-md-outer)}ion-range::part(pin){font-size:var(--kirby-font-size-xs);color:var(--pin-color);background-color:var(--pin-background);padding:var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs);border-radius:var(--kirby-spacing-xxxs);min-width:var(--kirby-spacing-m);top:calc(-1 * var(--kirby-spacing-xxs))}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);display:block;border:solid transparent 6px;border-top-color:var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:var(--kirby-border-radius-circle);width:var(--kirby-spacing-xxs);height:var(--kirby-spacing-xxs);margin-inline-start:calc(var(--kirby-spacing-xxs) / -2);z-index:1}ion-range::part(tick){background:var(--kirby-color-border-base-quiet)}label{font-size:var(--kirby-font-size-xs);line-height:var(--kirby-line-height-xs);color:var(--kirby-color-content-base-quiet);margin-top:calc(-1 * var(--kirby-spacing-xxxs))}\n"],
 			dependencies: [{
 				kind: "component",
 				type: IonRange,
@@ -160,7 +160,7 @@ var RangeComponent = class RangeComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: RangeComponent,
 	decorators: [{
@@ -175,7 +175,7 @@ i0.ɵɵngDeclareClassMetadata({
 			}],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [pinFormatter]=\"pinFormatter\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n></ion-range>\n\n@if (minLabel) {\n  <label class=\"min-label\">{{ minLabel }}</label>\n}\n@if (maxLabel) {\n  <label class=\"max-label\">{{ maxLabel }}</label>\n}\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range{--knob-background: var(--kirby-color-fill-brand-loud);--knob-box-shadow: 0 0 0 2px var(--kirby-color-fill-base);--knob-size: var(--kirby-spacing-s);--pin-color: var(--kirby-color-content-brand-loud);--pin-background: var(--kirby-color-fill-brand-loud);--bar-background: var(--kirby-color-border-base-quiet);--bar-background-active: var(--kirby-color-fill-brand-loud);--bar-border-radius: var(--kirby-spacing-xxxs);--bar-height: var(--kirby-spacing-xxxxs);flex:1 1 100%;padding:0}ion-range.range-disabled{opacity:.4}ion-range.range-has-pin{padding:0 calc(var(--kirby-spacing-xxs) / 2)}ion-range::part(knob){transition:all 80ms linear 0ms;transition-property:background,transform}ion-range::part(knob hover){--knob-background: var(--kirby-color-fill-brand-loud-hover)}ion-range::part(knob activated),ion-range::part(knob pressed){--knob-background: var(--kirby-color-fill-brand-loud-active)}ion-range::part(knob hover),ion-range::part(knob activated),ion-range::part(knob pressed){transform:scale(1.25)}ion-range::part(knob focused){box-shadow:var(--kirby-focus-ring-md-outer)}ion-range::part(pin){font-size:var(--kirby-font-size-xs);color:var(--pin-color);background-color:var(--pin-background);padding:var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs);border-radius:var(--kirby-spacing-xxxs);min-width:var(--kirby-spacing-m);top:calc(-1 * var(--kirby-spacing-xxs))}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);display:block;border:solid transparent 6px;border-top-color:var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:var(--kirby-border-radius-circle);width:var(--kirby-spacing-xxs);height:var(--kirby-spacing-xxs);margin-inline-start:calc(var(--kirby-spacing-xxs) / -2);z-index:1}ion-range::part(tick){background:var(--kirby-color-border-base-quiet)}label{font-size:var(--kirby-font-size-xs);line-height:var(--kirby-line-height-xs);color:var(--kirby-color-content-base-quiet);margin-top:calc(-1 * var(--kirby-spacing-xxxs))}\n"]
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range{--knob-background: var(--kirby-color-fill-brand-loud);--knob-box-shadow: 0 0 0 2px var(--kirby-color-fill-base);--knob-size: var(--kirby-spacing-s);--knob-handle-size: var(--kirby-size-fat-finger);--pin-color: var(--kirby-color-content-brand-loud);--pin-background: var(--kirby-color-fill-brand-loud);--bar-background: var(--kirby-color-border-base-quiet);--bar-background-active: var(--kirby-color-fill-brand-loud);--bar-border-radius: var(--kirby-spacing-xxxs);--bar-height: var(--kirby-spacing-xxxxs);flex:1 1 100%;padding:0}ion-range.range-disabled{opacity:var(--kirby-opacity-40)}ion-range.range-has-pin{padding:0 calc(var(--kirby-spacing-xxs) / 2)}ion-range::part(knob){transition:all 80ms linear 0ms;transition-property:background,transform}ion-range::part(knob hover){--knob-background: var(--kirby-color-fill-brand-loud-hover)}ion-range::part(knob activated),ion-range::part(knob pressed){--knob-background: var(--kirby-color-fill-brand-loud-active)}ion-range::part(knob hover),ion-range::part(knob activated),ion-range::part(knob pressed){transform:scale(1.25)}ion-range::part(knob focused){box-shadow:var(--kirby-focus-ring-md-outer)}ion-range::part(pin){font-size:var(--kirby-font-size-xs);color:var(--pin-color);background-color:var(--pin-background);padding:var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs);border-radius:var(--kirby-spacing-xxxs);min-width:var(--kirby-spacing-m);top:calc(-1 * var(--kirby-spacing-xxs))}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);display:block;border:solid transparent 6px;border-top-color:var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:var(--kirby-border-radius-circle);width:var(--kirby-spacing-xxs);height:var(--kirby-spacing-xxs);margin-inline-start:calc(var(--kirby-spacing-xxs) / -2);z-index:1}ion-range::part(tick){background:var(--kirby-color-border-base-quiet)}label{font-size:var(--kirby-font-size-xs);line-height:var(--kirby-line-height-xs);color:var(--kirby-color-content-base-quiet);margin-top:calc(-1 * var(--kirby-spacing-xxxs))}\n"]
 		}]
 	}],
 	ctorParameters: () => [

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-range.mjs","names":[],"sources":["../../range/src/range.component.ts","../../range/src/range.component.html"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IonRange } from '@ionic/angular';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  imports: [IonRange],\n  selector: 'kirby-range',\n  templateUrl: './range.component.html',\n  styleUrls: ['./range.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      multi: true,\n      useExisting: forwardRef(() => RangeComponent),\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeComponent implements OnChanges, OnInit, ControlValueAccessor, AfterViewInit {\n  @Input() minLabel: string;\n  @Input() maxLabel: string;\n  @Input() debounce: number;\n  @Input() max: number;\n  @Input() min: number;\n  @Input() pin: boolean;\n  @Input() step = 1;\n  @Input() ticks: boolean;\n  @Input() disabled = false;\n  @Input() pinFormatter: (value: number) => string | number = this.defaultPinFormatter;\n  @Input()\n  set value(value: number) {\n    if (value !== this.currentValue) {\n      this.currentValue = value;\n      this.propagateChange(this.currentValue);\n    }\n  }\n\n  get value(): number {\n    return this.currentValue;\n  }\n\n  @Output() change: EventEmitter<number> = new EventEmitter<number>();\n  @Output() move: EventEmitter<number> = new EventEmitter<number>();\n\n  @ViewChild(IonRange, { static: true }) private ionRange: IonRange;\n\n  private currentValue: number;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private element: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  ngOnInit() {\n    this.initializeMoveEventEmitter();\n  }\n\n  ngOnChanges() {\n    if (!this.ticks) return;\n\n    /*\n     * Max 10 ticks are allowed\n     */\n    const amountOfTicks = (this.max - this.min) / this.step;\n    if (amountOfTicks > 9) {\n      this.step = (this.max - this.min) / 9;\n    }\n\n    /*\n     * Set value to the nearest tick\n     */\n    this.value = this.getTicks().reduce((a, b) => {\n      return Math.abs(b - this.value) < Math.abs(a - this.value) ? b : a;\n    });\n  }\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.element.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.element.nativeElement.querySelector('ion-range')\n    );\n  }\n\n  private getTicks() {\n    const ticks = [];\n    for (let value = Number(this.min); value <= Number(this.max); value += Number(this.step)) {\n      ticks.push(value);\n    }\n    return ticks;\n  }\n\n  private initializeMoveEventEmitter() {\n    // We subscribe to ionRange's ionInput imperatively instead of in markup\n    // to avoid doing work when no-one is listening to the move event.\n    if (this.move.observed) {\n      this.ionRange.ionInput.subscribe((rangeEvent) => {\n        this._onRangeKnobMove(rangeEvent);\n      });\n    }\n  }\n\n  private defaultPinFormatter(value: number): number {\n    return value;\n  }\n\n  public setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  public _onRangeValueChange($event: any): void {\n    this.writeValue($event.detail.value);\n    this.change.emit(this.currentValue);\n  }\n\n  public _onRangeKnobMove($event: any): void {\n    this.writeValue($event.detail.value);\n    this.move.emit(this.currentValue);\n  }\n\n  public onTouched = () => {};\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  public propagateChange = (_: any) => {};\n\n  public writeValue(value: any): void {\n    if (value !== undefined) {\n      this.value = value;\n      this.cdr.markForCheck();\n    }\n  }\n\n  public registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  public registerOnChange(fn: any): void {\n    this.propagateChange = fn;\n  }\n}\n","<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [pinFormatter]=\"pinFormatter\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n></ion-range>\n\n@if (minLabel) {\n  <label class=\"min-label\">{{ minLabel }}</label>\n}\n@if (maxLabel) {\n  <label class=\"max-label\">{{ maxLabel }}</label>\n}\n"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-range.mjs","names":[],"sources":["../../range/src/range.component.ts","../../range/src/range.component.html"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IonRange } from '@ionic/angular';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  imports: [IonRange],\n  selector: 'kirby-range',\n  templateUrl: './range.component.html',\n  styleUrls: ['./range.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      multi: true,\n      useExisting: forwardRef(() => RangeComponent),\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeComponent implements OnChanges, OnInit, ControlValueAccessor, AfterViewInit {\n  @Input() minLabel: string;\n  @Input() maxLabel: string;\n  @Input() debounce: number;\n  @Input() max: number;\n  @Input() min: number;\n  @Input() pin: boolean;\n  @Input() step = 1;\n  @Input() ticks: boolean;\n  @Input() disabled = false;\n  @Input() pinFormatter: (value: number) => string | number = this.defaultPinFormatter;\n  @Input()\n  set value(value: number) {\n    if (value !== this.currentValue) {\n      this.currentValue = value;\n      this.propagateChange(this.currentValue);\n    }\n  }\n\n  get value(): number {\n    return this.currentValue;\n  }\n\n  @Output() change: EventEmitter<number> = new EventEmitter<number>();\n  @Output() move: EventEmitter<number> = new EventEmitter<number>();\n\n  @ViewChild(IonRange, { static: true }) private ionRange: IonRange;\n\n  private currentValue: number;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private element: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  ngOnInit() {\n    this.initializeMoveEventEmitter();\n  }\n\n  ngOnChanges() {\n    if (!this.ticks) return;\n\n    /*\n     * Max 10 ticks are allowed\n     */\n    const amountOfTicks = (this.max - this.min) / this.step;\n    if (amountOfTicks > 9) {\n      this.step = (this.max - this.min) / 9;\n    }\n\n    /*\n     * Set value to the nearest tick\n     */\n    this.value = this.getTicks().reduce((a, b) => {\n      return Math.abs(b - this.value) < Math.abs(a - this.value) ? b : a;\n    });\n  }\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.element.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.element.nativeElement.querySelector('ion-range')\n    );\n  }\n\n  private getTicks() {\n    const ticks = [];\n    for (let value = Number(this.min); value <= Number(this.max); value += Number(this.step)) {\n      ticks.push(value);\n    }\n    return ticks;\n  }\n\n  private initializeMoveEventEmitter() {\n    // We subscribe to ionRange's ionInput imperatively instead of in markup\n    // to avoid doing work when no-one is listening to the move event.\n    if (this.move.observed) {\n      this.ionRange.ionInput.subscribe((rangeEvent) => {\n        this._onRangeKnobMove(rangeEvent);\n      });\n    }\n  }\n\n  private defaultPinFormatter(value: number): number {\n    return value;\n  }\n\n  public setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  public _onRangeValueChange($event: any): void {\n    this.writeValue($event.detail.value);\n    this.change.emit(this.currentValue);\n  }\n\n  public _onRangeKnobMove($event: any): void {\n    this.writeValue($event.detail.value);\n    this.move.emit(this.currentValue);\n  }\n\n  public onTouched = () => {};\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  public propagateChange = (_: any) => {};\n\n  public writeValue(value: any): void {\n    if (value !== undefined) {\n      this.value = value;\n      this.cdr.markForCheck();\n    }\n  }\n\n  public registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  public registerOnChange(fn: any): void {\n    this.propagateChange = fn;\n  }\n}\n","<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [pinFormatter]=\"pinFormatter\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n></ion-range>\n\n@if (minLabel) {\n  <label class=\"min-label\">{{ minLabel }}</label>\n}\n@if (maxLabel) {\n  <label class=\"max-label\">{{ maxLabel }}</label>\n}\n"],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-reorder-list.mjs

@@ -60,7 +60,7 @@ var ReorderListComponent = class ReorderListComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ReorderListComponent,
 			deps: [{ token: i0.ChangeDetectorRef }],
@@ -70,7 +70,7 @@ var ReorderListComponent = class ReorderListComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: ReorderListComponent,
 			isStandalone: true,
 			selector: "kirby-reorder-list",
@@ -99,7 +99,7 @@ var ReorderListComponent = class ReorderListComponent {
 			usesOnChanges: true,
 			ngImport: i0,
 			template: "@if (reorderActive) {\n  <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n  @for (reorderItem of items; track reorderItem) {\n    <div>\n      <kirby-card>\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate || defaultItemTemplate;\n            context: { $implicit: reorderItem }\n          \"\n        ></ng-container>\n        @if (reorderItem[subItemsName]) {\n          <div #reorderGroupContainer>\n            <ion-reorder-group\n              (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n              disabled=\"false\"\n            >\n              @for (subItem of reorderItem[subItemsName]; track subItem) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate || defaultItemTemplate;\n                      context: { $implicit: subItem, isSubItem: true }\n                    \"\n                  ></ng-container>\n                </div>\n              }\n            </ion-reorder-group>\n          </div>\n        }\n      </kirby-card>\n    </div>\n  }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n  <kirby-item [reorderable]=\"true\">\n    <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n  </kirby-item>\n</ng-template>\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-color-border-base-silent)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}:host>ion-reorder-group>div{border-bottom:20px transparent solid}:host>ion-reorder-group>div:last-child{border-bottom-width:0}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-color-border-base-silent)}\n"],
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}:host>ion-reorder-group>div{border-bottom:20px transparent solid}:host>ion-reorder-group>div:last-child{border-bottom-width:0}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -173,7 +173,7 @@ var ReorderListComponent = class ReorderListComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ReorderListComponent,
 	decorators: [{
@@ -190,7 +190,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "kirby-reorder-list",
 			changeDetection: ChangeDetectionStrategy.Eager,
 			template: "@if (reorderActive) {\n  <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n  @for (reorderItem of items; track reorderItem) {\n    <div>\n      <kirby-card>\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate || defaultItemTemplate;\n            context: { $implicit: reorderItem }\n          \"\n        ></ng-container>\n        @if (reorderItem[subItemsName]) {\n          <div #reorderGroupContainer>\n            <ion-reorder-group\n              (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n              disabled=\"false\"\n            >\n              @for (subItem of reorderItem[subItemsName]; track subItem) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate || defaultItemTemplate;\n                      context: { $implicit: subItem, isSubItem: true }\n                    \"\n                  ></ng-container>\n                </div>\n              }\n            </ion-reorder-group>\n          </div>\n        }\n      </kirby-card>\n    </div>\n  }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n  <kirby-item [reorderable]=\"true\">\n    <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n  </kirby-item>\n</ng-template>\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-color-border-base-silent)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}:host>ion-reorder-group>div{border-bottom:20px transparent solid}:host>ion-reorder-group>div:last-child{border-bottom-width:0}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-color-border-base-silent)}\n"]
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}:host>ion-reorder-group>div{border-bottom:20px transparent solid}:host>ion-reorder-group>div:last-child{border-bottom-width:0}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}\n"]
 		}]
 	}],
 	ctorParameters: () => [{ type: i0.ChangeDetectorRef }],

package/fesm2022/kirbydesign-designsystem-reorder-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-reorder-list.mjs","names":[],"sources":["../../reorder-list/src/reorder-event.ts","../../reorder-list/src/reorder-list.component.ts","../../reorder-list/src/reorder-list.component.html"],"sourcesContent":["export class ReorderEvent {\n  private origEvent: CustomEvent<any>;\n  private parent?: any;\n\n  constructor(ev: CustomEvent<any>, parentItem?: any) {\n    this.origEvent = ev;\n    this.parent = parentItem;\n    this.origEvent.cancelBubble = true;\n  }\n  complete(listOrReorder?: boolean | any[]): Promise<any> {\n    return this.origEvent.detail.complete(listOrReorder);\n  }\n\n  get parentItem(): any {\n    return this.parent;\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnDestroy,\n  Output,\n  QueryList,\n  TemplateRef,\n  ViewChildren,\n} from '@angular/core';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ItemComponent, LabelComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\n\nimport { IonBackdrop, IonReorderGroup } from '@ionic/angular';\nimport { ReorderEvent } from './reorder-event';\n\n@Component({\n  imports: [\n    CardComponent,\n    ItemComponent,\n    LabelComponent,\n    CommonModule,\n    IonBackdrop,\n    IonReorderGroup,\n  ],\n  selector: 'kirby-reorder-list',\n  templateUrl: './reorder-list.component.html',\n  styleUrls: ['./reorder-list.component.scss'],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class ReorderListComponent implements OnChanges, OnDestroy {\n  @Input() items: any[];\n  @Input() subItemsName: string;\n  @Input() getItemTextDefault: (item: any) => string;\n\n  @Output() itemReorder = new EventEmitter<ReorderEvent>();\n  @Output() subItemReorder = new EventEmitter<ReorderEvent>();\n\n  @ContentChild(ListItemTemplateDirective, { static: true, read: TemplateRef })\n  itemTemplate: TemplateRef<any>;\n  @ViewChildren('reorderGroupContainer')\n  reorderGroupContainer: QueryList<ElementRef>;\n\n  private observer: MutationObserver;\n  reorderActive: boolean = false;\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  ngOnChanges(): void {\n    if (this.items && this.items.length > 0) {\n      setTimeout(() => {\n        this.setupDomListener();\n      });\n    }\n  }\n\n  private setupDomListener() {\n    const callback = (mutationsList: any) => {\n      for (const mutation of mutationsList) {\n        if (mutation.oldValue !== mutation.target['className']) {\n          this.reorderActive = mutation.target['className'].includes('reorder-list-active');\n        }\n      }\n      this.cdr.detectChanges();\n    };\n    this.observer = new MutationObserver(callback);\n\n    this.reorderGroupContainer.forEach((div: ElementRef) => {\n      this.observer.observe(div.nativeElement, {\n        attributes: true,\n        attributeFilter: ['class'],\n        attributeOldValue: true,\n        childList: false,\n        subtree: true,\n      });\n    });\n  }\n\n  doReorder(ev: CustomEvent) {\n    this.itemReorder.emit(new ReorderEvent(ev));\n  }\n\n  doSubReorder(ev: CustomEvent, parentItem: any) {\n    this.subItemReorder.emit(new ReorderEvent(ev, parentItem));\n  }\n\n  ngOnDestroy() {\n    //clean up the observer\n    this.observer?.disconnect();\n    delete this.observer;\n  }\n}\n","@if (reorderActive) {\n  <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n  @for (reorderItem of items; track reorderItem) {\n    <div>\n      <kirby-card>\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate || defaultItemTemplate;\n            context: { $implicit: reorderItem }\n          \"\n        ></ng-container>\n        @if (reorderItem[subItemsName]) {\n          <div #reorderGroupContainer>\n            <ion-reorder-group\n              (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n              disabled=\"false\"\n            >\n              @for (subItem of reorderItem[subItemsName]; track subItem) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate || defaultItemTemplate;\n                      context: { $implicit: subItem, isSubItem: true }\n                    \"\n                  ></ng-container>\n                </div>\n              }\n            </ion-reorder-group>\n          </div>\n        }\n      </kirby-card>\n    </div>\n  }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n  <kirby-item [reorderable]=\"true\">\n    <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n  </kirby-item>\n</ng-template>\n"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-reorder-list.mjs","names":[],"sources":["../../reorder-list/src/reorder-event.ts","../../reorder-list/src/reorder-list.component.ts","../../reorder-list/src/reorder-list.component.html"],"sourcesContent":["export class ReorderEvent {\n  private origEvent: CustomEvent<any>;\n  private parent?: any;\n\n  constructor(ev: CustomEvent<any>, parentItem?: any) {\n    this.origEvent = ev;\n    this.parent = parentItem;\n    this.origEvent.cancelBubble = true;\n  }\n  complete(listOrReorder?: boolean | any[]): Promise<any> {\n    return this.origEvent.detail.complete(listOrReorder);\n  }\n\n  get parentItem(): any {\n    return this.parent;\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnDestroy,\n  Output,\n  QueryList,\n  TemplateRef,\n  ViewChildren,\n} from '@angular/core';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ItemComponent, LabelComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\n\nimport { IonBackdrop, IonReorderGroup } from '@ionic/angular';\nimport { ReorderEvent } from './reorder-event';\n\n@Component({\n  imports: [\n    CardComponent,\n    ItemComponent,\n    LabelComponent,\n    CommonModule,\n    IonBackdrop,\n    IonReorderGroup,\n  ],\n  selector: 'kirby-reorder-list',\n  templateUrl: './reorder-list.component.html',\n  styleUrls: ['./reorder-list.component.scss'],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class ReorderListComponent implements OnChanges, OnDestroy {\n  @Input() items: any[];\n  @Input() subItemsName: string;\n  @Input() getItemTextDefault: (item: any) => string;\n\n  @Output() itemReorder = new EventEmitter<ReorderEvent>();\n  @Output() subItemReorder = new EventEmitter<ReorderEvent>();\n\n  @ContentChild(ListItemTemplateDirective, { static: true, read: TemplateRef })\n  itemTemplate: TemplateRef<any>;\n  @ViewChildren('reorderGroupContainer')\n  reorderGroupContainer: QueryList<ElementRef>;\n\n  private observer: MutationObserver;\n  reorderActive: boolean = false;\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  ngOnChanges(): void {\n    if (this.items && this.items.length > 0) {\n      setTimeout(() => {\n        this.setupDomListener();\n      });\n    }\n  }\n\n  private setupDomListener() {\n    const callback = (mutationsList: any) => {\n      for (const mutation of mutationsList) {\n        if (mutation.oldValue !== mutation.target['className']) {\n          this.reorderActive = mutation.target['className'].includes('reorder-list-active');\n        }\n      }\n      this.cdr.detectChanges();\n    };\n    this.observer = new MutationObserver(callback);\n\n    this.reorderGroupContainer.forEach((div: ElementRef) => {\n      this.observer.observe(div.nativeElement, {\n        attributes: true,\n        attributeFilter: ['class'],\n        attributeOldValue: true,\n        childList: false,\n        subtree: true,\n      });\n    });\n  }\n\n  doReorder(ev: CustomEvent) {\n    this.itemReorder.emit(new ReorderEvent(ev));\n  }\n\n  doSubReorder(ev: CustomEvent, parentItem: any) {\n    this.subItemReorder.emit(new ReorderEvent(ev, parentItem));\n  }\n\n  ngOnDestroy() {\n    //clean up the observer\n    this.observer?.disconnect();\n    delete this.observer;\n  }\n}\n","@if (reorderActive) {\n  <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n  @for (reorderItem of items; track reorderItem) {\n    <div>\n      <kirby-card>\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate || defaultItemTemplate;\n            context: { $implicit: reorderItem }\n          \"\n        ></ng-container>\n        @if (reorderItem[subItemsName]) {\n          <div #reorderGroupContainer>\n            <ion-reorder-group\n              (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n              disabled=\"false\"\n            >\n              @for (subItem of reorderItem[subItemsName]; track subItem) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate || defaultItemTemplate;\n                      context: { $implicit: subItem, isSubItem: true }\n                    \"\n                  ></ng-container>\n                </div>\n              }\n            </ion-reorder-group>\n          </div>\n        }\n      </kirby-card>\n    </div>\n  }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n  <kirby-item [reorderable]=\"true\">\n    <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n  </kirby-item>\n</ng-template>\n"],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-router-outlet.mjs

@@ -9,7 +9,7 @@ var RouterOutletComponent = class RouterOutletComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: RouterOutletComponent,
 			deps: [],
@@ -19,7 +19,7 @@ var RouterOutletComponent = class RouterOutletComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: RouterOutletComponent,
 			isStandalone: true,
 			selector: "kirby-router-outlet",
@@ -38,7 +38,7 @@ var RouterOutletComponent = class RouterOutletComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: RouterOutletComponent,
 	decorators: [{
@@ -57,7 +57,7 @@ var RouterOutletModule = class RouterOutletModule {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: RouterOutletModule,
 			deps: [],
@@ -67,7 +67,7 @@ var RouterOutletModule = class RouterOutletModule {
 	static {
 		this.ɵmod = i0.ɵɵngDeclareNgModule({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: RouterOutletModule,
 			imports: [
@@ -81,7 +81,7 @@ var RouterOutletModule = class RouterOutletModule {
 	static {
 		this.ɵinj = i0.ɵɵngDeclareInjector({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: RouterOutletModule,
 			imports: [
@@ -94,7 +94,7 @@ var RouterOutletModule = class RouterOutletModule {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: RouterOutletModule,
 	decorators: [{

package/fesm2022/kirbydesign-designsystem-section-header.mjs

@@ -5,7 +5,7 @@ var SectionHeaderComponent = class SectionHeaderComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SectionHeaderComponent,
 			deps: [],
@@ -15,7 +15,7 @@ var SectionHeaderComponent = class SectionHeaderComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: SectionHeaderComponent,
 			isStandalone: true,
 			selector: "kirby-section-header",
@@ -38,7 +38,7 @@ var SectionHeaderComponent = class SectionHeaderComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SectionHeaderComponent,
 	decorators: [{

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

@@ -118,7 +118,7 @@ var SegmentedControlComponent = class SegmentedControlComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SegmentedControlComponent,
 			deps: [{ token: i0.ChangeDetectorRef }],
@@ -128,7 +128,7 @@ var SegmentedControlComponent = class SegmentedControlComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: SegmentedControlComponent,
 			isStandalone: true,
 			selector: "kirby-segmented-control",
@@ -169,7 +169,7 @@ var SegmentedControlComponent = class SegmentedControlComponent {
 			}],
 			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"],
+			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:var(--kirby-stroke-xs) solid var(--kirby-color-border-raised-quiet);outline-offset:calc(-1 * var(--kirby-stroke-xs));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:var(--kirby-stroke-xs) 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",
@@ -217,7 +217,7 @@ var SegmentedControlComponent = class SegmentedControlComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SegmentedControlComponent,
 	decorators: [{
@@ -237,7 +237,7 @@ i0.ɵɵngDeclareClassMetadata({
 				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"]
+			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:var(--kirby-stroke-xs) solid var(--kirby-color-border-raised-quiet);outline-offset:calc(-1 * var(--kirby-stroke-xs));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:var(--kirby-stroke-xs) 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 }],

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

@@ -1 +1 @@
-{"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"}
+{"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":"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"}