@kirbydesign/designsystem 11.6.1 → 11.6.2

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-dropdown.mjs","sources":["../../dropdown/src/dropdown.types.ts","../../dropdown/src/keyboard-handler.service.ts","../../dropdown/src/dropdown.component.ts","../../dropdown/src/dropdown.component.html","../../dropdown/src/dropdown.module.ts","../../dropdown/src/kirbydesign-designsystem-dropdown.ts"],"sourcesContent":["export enum OpenState {\n  closed,\n  opening,\n  open,\n}\n","import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class KeyboardHandlerService {\n  handle(event: KeyboardEvent, selectedIndex: number, maxIndex: number, cyclicIndex = false) {\n    let newIndex = -1;\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        if (selectedIndex === 0 && cyclicIndex) {\n          newIndex = maxIndex;\n        } else {\n          // Select previous item:\n          newIndex = selectedIndex - 1;\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowRight':\n        if (selectedIndex === undefined || (selectedIndex === maxIndex && cyclicIndex)) {\n          // None selected, select first item:\n          newIndex = 0;\n        } else if (selectedIndex < maxIndex) {\n          // Select next item:\n          newIndex = selectedIndex + 1;\n        }\n        break;\n      case 'Home':\n        // Select first item:\n        newIndex = 0;\n        break;\n      case 'End':\n        // Select last item:\n        newIndex = maxIndex;\n        break;\n      default:\n        break;\n    }\n    return newIndex;\n  }\n}\n","import {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  Renderer2,\n  RendererStyleFlags2,\n  TemplateRef,\n  ViewChild,\n  ViewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { StringSearchHelper, UniqueIdGenerator } from '@kirbydesign/designsystem/helpers';\nimport { ItemComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\nimport { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\nimport { forwardAttributes, ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { OpenState } from './dropdown.types';\nimport { KeyboardHandlerService } from './keyboard-handler.service';\n\n@Component({\n  selector: 'kirby-dropdown',\n  templateUrl: './dropdown.component.html',\n  styleUrls: ['./dropdown.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => DropdownComponent),\n      multi: true,\n    },\n  ],\n  imports: [\n    ButtonComponent,\n    NgTemplateOutlet,\n    PopoverComponent,\n    CardComponent,\n    ItemComponent,\n    IconComponent,\n  ],\n})\nexport class DropdownComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {\n  static readonly OPEN_DELAY_IN_MS = 100;\n  private state = OpenState.closed;\n  private _popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  _listboxId = UniqueIdGenerator.scopedTo('kirby-dropdown').next();\n  _comboboxId = UniqueIdGenerator.scopedTo('kirby-button').next();\n\n  private _items: string[] | any[] = [];\n\n  get items(): string[] | any[] {\n    return this._items;\n  }\n\n  @Input() set items(value: string[] | any[]) {\n    this._items = value;\n    this._value = this.items[this.selectedIndex] || null;\n  }\n\n  private _selectedIndex: number = -1;\n  get selectedIndex(): number {\n    return this._selectedIndex;\n  }\n\n  @Input() set selectedIndex(value: number) {\n    if (value !== undefined && this._selectedIndex != value) {\n      this._selectedIndex = value;\n      this.focusedIndex = this._selectedIndex;\n      this._value = this.items[this.selectedIndex] || null;\n    }\n  }\n\n  // _focusedIndex keeps track of which element has focus and will be selected\n  // if it is activated (by pressing ENTER or SPACE key)\n  private _focusedIndex: number = 0;\n  get focusedIndex(): number {\n    return this._focusedIndex;\n  }\n\n  @Input() set focusedIndex(value: number) {\n    if (this._focusedIndex !== value) {\n      this._focusedIndex = value;\n      this.scrollItemIntoView(this._focusedIndex);\n    }\n  }\n\n  @Input()\n  itemTextProperty = 'text';\n\n  @Input()\n  placeholder = 'Please select:';\n\n  @Input() set popout(direction: HorizontalDirection | `${HorizontalDirection}`) {\n    this._popout = direction || HorizontalDirection.right;\n  }\n\n  get popout() {\n    return this._popout;\n  }\n\n  @Input()\n  attentionLevel: '1' | '2' | '3' = '3';\n\n  @Input()\n  expand?: 'block';\n\n  @Input()\n  disabled = false;\n\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @Output() hasErrorChange = new EventEmitter<boolean>();\n\n  private _hasError: boolean;\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  @Input()\n  size: 'sm' | 'md' = 'md';\n\n  // Tabindex defaults to 0 instead of no value to align tabbing behavior in Safari\n  // with other browsers and the default select behavior: https://mayank.co/blog/safari-focus/\n  @Input()\n  tabindex = 0;\n\n  /**\n   * @deprecated This input is no longer needed. The dropdown now always uses popover positioning.\n   * This input will be removed in a future major version.\n   */\n  @Input() set usePopover(_value: boolean) {\n    console.warn(\n      `[Kirby Dropdown] The 'usePopover' input is deprecated and no longer has any effect.\n        The dropdown now always uses popover positioning. This input will be removed in a future major version.`\n    );\n  }\n\n  get _tabindex() {\n    return this.disabled ? -1 : this.tabindex;\n  }\n\n  // Prevent Ionic blur on scroll\n  @HostBinding('attr.no-blur')\n  get _noBlurOnScroll() {\n    return true;\n  }\n\n  /**\n   * Emitted when an item is selected (tap on mobile, click/keypress on web)\n   */\n  @Output() change: EventEmitter<string | any> = new EventEmitter<string | any>();\n\n  private _value: string | any = null;\n  get value(): string | any {\n    return this._value;\n  }\n\n  get selectedText(): string {\n    return this.getTextFromItem(this.value);\n  }\n\n  @HostBinding('class.expand')\n  get _isBlockLevel() {\n    return this.expand === 'block';\n  }\n\n  @HostBinding('class.is-opening')\n  get _isOpening(): boolean {\n    return this.state === OpenState.opening;\n  }\n\n  @HostBinding('class.is-open')\n  get isOpen(): boolean {\n    return this.state === OpenState.open;\n  }\n\n  /* The 'clicked' class is applied through Hostbinding to prevent the dropdown from getting a focus ring on click.\n    There is a bug that causes the dropdown to get a focus ring on click, if it is the first element that is interacted with\n    after the page is loaded. If the user interacts with any other element before, then the dropdown won't get a focus ring.\n    See issue: https://github.com/kirbydesign/designsystem/issues/2477.\n\n    This solution can potentially be refactored, when popover is not experimental anymore. Then it could be possible\n    to close the dropdown when the popover backdrop is clicked, instead of relying on the blur event, which is utilized\n    by this line below: this.elementRef.nativeElement.focus(). Right now this forces the blur event to be triggered, when\n    clicking outside of the dropdown.\n    */\n  @HostBinding('class.clicked')\n  clicked = false;\n\n  @ContentChild(ListItemTemplateDirective, { static: true, read: TemplateRef })\n  itemTemplate: TemplateRef<any>;\n  @ContentChildren(ListItemTemplateDirective, { read: ElementRef })\n  slottedItems: QueryList<ElementRef<HTMLElement>>;\n  @ViewChild(CardComponent, { read: ElementRef })\n  cardElement: ElementRef<HTMLElement>;\n  @ViewChild(PopoverComponent)\n  popover: PopoverComponent;\n  @ViewChild(ButtonComponent, { static: true, read: ElementRef })\n  buttonElement: ElementRef<HTMLElement>;\n\n  private forwardAriaLabelToDropdownButton() {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.buttonElement.nativeElement\n    );\n  }\n  @ViewChildren(ItemComponent, { read: ElementRef })\n  kirbyItemsDefault: QueryList<ElementRef<HTMLElement>>;\n\n  _kirbyItemsSlotted: QueryList<ElementRef<HTMLElement>>;\n  @ContentChildren(ItemComponent, { read: ElementRef })\n  set kirbyItemsSlotted(kirbyItems: QueryList<ElementRef<HTMLElement>>) {\n    const hasSlottedItems = this.disposeItemClickListeners?.length > 0;\n    if (hasSlottedItems) {\n      this.unlistenAllSlottedItems();\n    }\n\n    // Setup a click listener for each new slotted items\n    kirbyItems.forEach((kirbyItem, index) => {\n      this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');\n      const disposeClickListener: EventListenerDisposeFn = this.renderer.listen(\n        kirbyItem.nativeElement,\n        'click',\n        () => {\n          this.onItemSelect(index);\n        }\n      );\n\n      this.disposeItemClickListeners.push(disposeClickListener);\n    });\n\n    this._kirbyItemsSlotted = kirbyItems;\n  }\n\n  get kirbyItemsSlotted(): QueryList<ElementRef<HTMLElement>> {\n    return this._kirbyItemsSlotted;\n  }\n\n  private disposeItemClickListeners: EventListenerDisposeFn[] = [];\n  private searchBuffer: string = '';\n  private searchBufferTimeout: ReturnType<typeof setTimeout>;\n  private SEARCH_BUFFER_DELAY = 500; // ms\n\n  constructor(\n    private renderer: Renderer2,\n    private elementRef: ElementRef<HTMLElement>,\n    private cdr: ChangeDetectorRef,\n    private keyboardHandlerService: KeyboardHandlerService,\n    private resizeObserverService: ResizeObserverService\n  ) {}\n\n  onToggle(event: MouseEvent) {\n    event.stopPropagation();\n\n    this.clicked = true;\n\n    this.toggle();\n  }\n\n  toggle() {\n    if (this.disabled) {\n      return;\n    }\n    this.isOpen ? this.close() : this.open();\n  }\n\n  /* Utility that makes it easier to set styles on card element */\n  private setPopoverCardStyle(style: string, value: string) {\n    this.renderer.setStyle(\n      this.cardElement.nativeElement,\n      style,\n      value,\n      RendererStyleFlags2.DashCase\n    );\n  }\n\n  ngAfterViewInit() {\n    if (this.expand === 'block') {\n      const { width: initialWidth } = this.elementRef.nativeElement.getBoundingClientRect();\n      this.setPopoverCardStyle('max-width', 'initial');\n      this.setPopoverCardStyle('min-width', 'initial');\n      // Ensure initial width is set even if the resize observer callback also fires initially:\n      this.setPopoverCardStyle('--kirby-card-width', `${initialWidth}px`);\n\n      this.resizeObserverService.observe(this.elementRef, (entry) => {\n        const newWidth = entry.contentRect.width;\n        if (newWidth > 0) {\n          this.setPopoverCardStyle('--kirby-card-width', `${newWidth}px`);\n        }\n      });\n    }\n    this.forwardAriaLabelToDropdownButton();\n  }\n\n  open() {\n    if (this.disabled) {\n      return;\n    }\n    if (!this.isOpen) {\n      this.state = OpenState.opening;\n      // ensures that the dropdown is opened in case the IntersectionObserverCallback isn't invoked\n      setTimeout(() => this.showDropdown(), DropdownComponent.OPEN_DELAY_IN_MS);\n\n      // Move focus to selected item (if any) or first item\n      this.focusedIndex = this.selectedIndex > -1 ? this.selectedIndex : 0;\n    }\n  }\n\n  private showDropdown() {\n    if (this.state === OpenState.opening) {\n      this.state = OpenState.open;\n      this.popover?.show();\n      this.scrollItemIntoView(this.focusedIndex);\n      this.cdr.markForCheck();\n    }\n  }\n\n  close() {\n    if (this.disabled) {\n      return;\n    }\n    if (this.isOpen) {\n      this.state = OpenState.closed;\n      this.popover?.hide();\n    }\n  }\n\n  onItemSelect(index: number) {\n    this.selectItem(index);\n    this.close();\n  }\n\n  private _onChange: (value: any) => void = () => {};\n  private _onTouched = () => {};\n\n  /**\n   * Sets the select'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: any): void {\n    this._selectItemByValue(value);\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Disables the select. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  private selectItem(index: number) {\n    if (index != this.selectedIndex) {\n      this.selectedIndex = index;\n      this.focusedIndex = index;\n      this.change.emit(this.value);\n      this._onChange(this.value);\n    }\n  }\n\n  private _selectItemByValue(value: string | any) {\n    this.selectedIndex = this.items.indexOf(value);\n  }\n\n  getTextFromItem(item: string | any) {\n    if (!item) {\n      return null;\n    }\n    return typeof item === 'string' ? item : item[this.itemTextProperty];\n  }\n\n  scrollItemIntoView(index: number) {\n    const kirbyItems =\n      this.kirbyItemsSlotted && this.kirbyItemsSlotted.length\n        ? this.kirbyItemsSlotted\n        : this.kirbyItemsDefault;\n    if (kirbyItems && kirbyItems.length) {\n      const selectedKirbyItem = kirbyItems.toArray()[index];\n      if (selectedKirbyItem && selectedKirbyItem.nativeElement) {\n        const itemElement = selectedKirbyItem.nativeElement;\n        itemElement.scrollIntoView({ block: 'nearest' });\n      }\n    }\n  }\n\n  @HostListener('keydown.tab')\n  _onTab() {\n    if (this.isOpen) {\n      this.selectItem(this.focusedIndex);\n      this.close();\n    }\n\n    if (this.clicked) {\n      // Remove the 'clicked' class (Hostbinding) if the user has previously opened the dropdown by clicking,\n      // since the class prevents the focus ring from showing,\n      // which is expected to happen, when using the tab key\n      this.clicked = false;\n    }\n  }\n\n  private preventDefaultAndStopImmediatePropagation(event: KeyboardEvent) {\n    event.stopImmediatePropagation();\n    event.preventDefault();\n  }\n\n  private addToSearchBuffer(char: string) {\n    clearTimeout(this.searchBufferTimeout);\n    this.searchBuffer += char;\n    this.searchBufferTimeout = setTimeout(() => {\n      this.resetSearchBuffer();\n    }, this.SEARCH_BUFFER_DELAY);\n  }\n  private resetSearchBuffer() {\n    this.searchBuffer = '';\n  }\n\n  @HostListener('keydown', ['$event'])\n  _onKeydown(event: KeyboardEvent) {\n    const key = event.key;\n\n    if (this.items.length === 0) {\n      console.warn('[Kirby] No items found within dropdown');\n      return;\n    }\n\n    if (this.disabled) return;\n\n    if (StringSearchHelper.isPrintableCharacter(key)) {\n      this.handlePrintableCharacterKey(event, this.isOpen);\n    }\n\n    // ALT + ArrowDown: Open dropdown\n    if (key === 'ArrowDown' && event.altKey) {\n      this.preventDefaultAndStopImmediatePropagation(event);\n      if (!this.isOpen) {\n        this.open();\n        this.focusedIndex = this.selectedIndex > -1 ? this.selectedIndex : 0;\n      }\n      return;\n    }\n\n    // ALT + ArrowUp: Select focused item and close dropdown\n    if (key === 'ArrowUp' && event.altKey) {\n      this.preventDefaultAndStopImmediatePropagation(event);\n      if (this.focusedIndex > -1) {\n        this.selectItem(this.focusedIndex);\n        this.close();\n      }\n    }\n    // PageUp: Jump up 10 options or to first\n    if (key === 'PageUp') {\n      this.preventDefaultAndStopImmediatePropagation(event);\n      if (!this.isOpen) {\n        this.open();\n      }\n      this.focusedIndex = Math.max(0, this.focusedIndex - 10);\n      return;\n    }\n\n    // PageDown: Jump down 10 options or to last\n    if (key === 'PageDown') {\n      this.preventDefaultAndStopImmediatePropagation(event);\n      if (!this.isOpen) {\n        this.open();\n      }\n      this.focusedIndex = Math.min(this.items.length - 1, this.focusedIndex + 10);\n      return;\n    }\n  }\n\n  private handlePrintableCharacterKey(event: KeyboardEvent, isOpen: boolean) {\n    const key = event.key;\n\n    if (isOpen) {\n      this.preventDefaultAndStopImmediatePropagation(event);\n    } else {\n      this.open();\n    }\n\n    // If the same character is typed twice, the search buffer should only contain that character once\n    if (\n      this.searchBuffer.length === 1 &&\n      this.searchBuffer[0].toLowerCase() === key.toLowerCase()\n    ) {\n      this.searchBuffer = key;\n    } else {\n      this.addToSearchBuffer(key);\n    }\n\n    const isMultiCharSearch = this.searchBuffer.length > 1;\n    let startIndex = 0;\n\n    if (!isMultiCharSearch && this.isOpen) {\n      startIndex = this.focusedIndex + 1;\n    }\n\n    let foundItemIndex = this.getIndexOfItemByFirstCharacter(this.searchBuffer, startIndex);\n\n    if (foundItemIndex === -1 && isMultiCharSearch) {\n      foundItemIndex = this.getIndexOfItemByFirstCharacter(key, startIndex);\n    }\n\n    if (foundItemIndex === -1 && !isMultiCharSearch && this.isOpen) {\n      foundItemIndex = this.getIndexOfItemByFirstCharacter(this.searchBuffer, 0);\n    }\n\n    if (foundItemIndex > -1) {\n      this.focusedIndex = foundItemIndex;\n    }\n  }\n\n  private getIndexOfItemByFirstCharacter(char: string, startIndex: number = 0) {\n    let itemTexts: string[];\n    // Prefer slotted/projected items if present\n    if (this.kirbyItemsSlotted && this.kirbyItemsSlotted.length) {\n      itemTexts = this.kirbyItemsSlotted\n        .toArray()\n        .map((ref) => ref.nativeElement.textContent?.trim() ?? '');\n    } else {\n      itemTexts = this.items.map((item) => this.getTextFromItem(item) ?? '');\n    }\n\n    return StringSearchHelper.getIndexByFirstMatchingStartString(char, itemTexts, startIndex);\n  }\n\n  @HostListener('mousedown', ['$event'])\n  _onMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @HostListener('touchstart', ['$event'])\n  _onTouchStart(event: TouchEvent) {\n    if (this.isOpen) {\n      event.stopPropagation();\n    }\n  }\n\n  _onPopoverWillHide() {\n    this.state = OpenState.closed;\n    this.buttonElement.nativeElement.focus();\n    this._onTouched();\n  }\n\n  @HostListener('focusout', ['$event'])\n  _onFocusOut(event: FocusEvent) {\n    const relatedTarget = event.relatedTarget as HTMLElement | null; // relatedTarget is the element receiving focus\n    const isOnTriggerButton =\n      relatedTarget && this.elementRef.nativeElement.contains(relatedTarget);\n    const isInsidePopover = relatedTarget && relatedTarget.closest('kirby-popover');\n\n    if (!isOnTriggerButton && !isInsidePopover) {\n      if (this.isOpen) {\n        this.close();\n      }\n      this._onTouched();\n    }\n  }\n\n  @HostListener('keydown.enter')\n  @HostListener('keydown.escape')\n  _onEnterOrEscape() {\n    this.close();\n  }\n\n  _onPopoverClick() {\n    this.close();\n  }\n\n  @HostListener('keydown.enter', ['$event'])\n  @HostListener('keydown.space', ['$event'])\n  _onEnterOrSpace(event: KeyboardEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.isOpen) {\n      this.selectItem(this.focusedIndex);\n    }\n    this.toggle();\n  }\n\n  @HostListener('keydown.arrowup', ['$event'])\n  @HostListener('keydown.arrowdown', ['$event'])\n  @HostListener('keydown.arrowleft', ['$event'])\n  @HostListener('keydown.arrowright', ['$event'])\n  _onArrowKeys(event: KeyboardEvent) {\n    if (this.disabled) return false;\n\n    // Mirror default HTML5 select behaviour - prevent left/right arrows when open:\n    if (this.isOpen && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {\n      return false;\n    }\n\n    if (!this.isOpen) {\n      // Avoid page scroll\n      event.preventDefault();\n      this.open();\n\n      // If no selected item then focus first or last item\n      if (!event.altKey && this.selectedIndex < 0) {\n        switch (event.key) {\n          case 'ArrowUp':\n            this.focusedIndex = 0;\n            break;\n          case 'ArrowDown':\n            this.focusedIndex = this.items.length - 1;\n            break;\n          default:\n            break;\n        }\n      }\n      return false;\n    }\n\n    const newFocusedIndex = this.keyboardHandlerService.handle(\n      event,\n      this.focusedIndex,\n      this.items.length - 1\n    );\n    if (newFocusedIndex > -1) {\n      this.focusedIndex = newFocusedIndex;\n    }\n    return false;\n  }\n\n  @HostListener('keydown.home', ['$event'])\n  @HostListener('keydown.end', ['$event'])\n  _onHomeEndKeys(event: KeyboardEvent) {\n    if (this.disabled) return;\n    if (!this.isOpen) {\n      event.preventDefault();\n      this.open();\n    }\n    const newFocusedIndex = this.keyboardHandlerService.handle(\n      event,\n      this.focusedIndex,\n      this.items.length - 1\n    );\n    if (newFocusedIndex > -1) {\n      this.focusedIndex = newFocusedIndex;\n    }\n    return false;\n  }\n\n  private unlistenAllSlottedItems() {\n    let disposeClickListener: EventListenerDisposeFn;\n    while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== undefined) {\n      disposeClickListener();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.unlistenAllSlottedItems();\n    this.resizeObserverService.unobserve(this.elementRef);\n  }\n}\n","<button\n  kirby-button\n  type=\"button\"\n  [attr.id]=\"_comboboxId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-activedescendant]=\"isOpen ? _listboxId + '-item-' + focusedIndex : null\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n  [tabindex]=\"_tabindex\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<kirby-popover\n  [target]=\"buttonElement\"\n  [popout]=\"popout\"\n  (click)=\"_onPopoverClick()\"\n  (willHide)=\"_onPopoverWillHide()\"\n>\n  <kirby-card role=\"listbox\" [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @for (item of items; track item; let i = $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i,\n          }\n        \"\n      ></ng-container>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <p class=\"kirby-item-title\">{{ getTextFromItem(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { CardModule } from '@kirbydesign/designsystem/card';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ItemModule } from '@kirbydesign/designsystem/item';\nimport { PopoverComponent } from '@kirbydesign/designsystem/popover';\n\nimport { ListItemTemplateDirective, ListModule } from '@kirbydesign/designsystem/list';\nimport { DropdownComponent } from './dropdown.component';\nimport { KeyboardHandlerService } from './keyboard-handler.service';\n\n@NgModule({\n  imports: [\n    CardModule,\n    IconModule,\n    ItemModule,\n    PopoverComponent,\n    ButtonComponent,\n    CommonModule,\n    ListModule,\n    DropdownComponent,\n  ],\n  exports: [DropdownComponent, ListItemTemplateDirective],\n  providers: [KeyboardHandlerService],\n})\nexport class DropdownModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.KeyboardHandlerService"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-dropdown.mjs","sources":["../../dropdown/src/dropdown.types.ts","../../dropdown/src/keyboard-handler.service.ts","../../dropdown/src/dropdown.component.ts","../../dropdown/src/dropdown.component.html","../../dropdown/src/dropdown.module.ts","../../dropdown/src/kirbydesign-designsystem-dropdown.ts"],"sourcesContent":["export enum OpenState {\n  closed,\n  opening,\n  open,\n}\n","import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class KeyboardHandlerService {\n  handle(event: KeyboardEvent, selectedIndex: number, maxIndex: number, cyclicIndex = false) {\n    let newIndex = -1;\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        if (selectedIndex === 0 && cyclicIndex) {\n          newIndex = maxIndex;\n        } else {\n          // Select previous item:\n          newIndex = selectedIndex - 1;\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowRight':\n        if (selectedIndex === undefined || (selectedIndex === maxIndex && cyclicIndex)) {\n          // None selected, select first item:\n          newIndex = 0;\n        } else if (selectedIndex < maxIndex) {\n          // Select next item:\n          newIndex = selectedIndex + 1;\n        }\n        break;\n      case 'Home':\n        // Select first item:\n        newIndex = 0;\n        break;\n      case 'End':\n        // Select last item:\n        newIndex = maxIndex;\n        break;\n      default:\n        break;\n    }\n    return newIndex;\n  }\n}\n","import {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  Renderer2,\n  RendererStyleFlags2,\n  TemplateRef,\n  ViewChild,\n  ViewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { StringSearchHelper, UniqueIdGenerator } from '@kirbydesign/designsystem/helpers';\nimport { ItemComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\nimport { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\nimport { forwardAttributes, ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { OpenState } from './dropdown.types';\nimport { KeyboardHandlerService } from './keyboard-handler.service';\n\n@Component({\n  selector: 'kirby-dropdown',\n  templateUrl: './dropdown.component.html',\n  styleUrls: ['./dropdown.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => DropdownComponent),\n      multi: true,\n    },\n  ],\n  imports: [\n    ButtonComponent,\n    NgTemplateOutlet,\n    PopoverComponent,\n    CardComponent,\n    ItemComponent,\n    IconComponent,\n  ],\n})\nexport class DropdownComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {\n  static readonly OPEN_DELAY_IN_MS = 100;\n  private state = OpenState.closed;\n  private _popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  _listboxId = UniqueIdGenerator.scopedTo('kirby-dropdown').next();\n  _comboboxId = UniqueIdGenerator.scopedTo('kirby-button').next();\n\n  private _items: string[] | any[] = [];\n\n  get items(): string[] | any[] {\n    return this._items;\n  }\n\n  @Input() set items(value: string[] | any[]) {\n    this._items = value;\n    this._value = this.items[this.selectedIndex] || null;\n  }\n\n  private _selectedIndex: number = -1;\n  get selectedIndex(): number {\n    return this._selectedIndex;\n  }\n\n  @Input() set selectedIndex(value: number) {\n    if (value !== undefined && this._selectedIndex != value) {\n      this._selectedIndex = value;\n      this.focusedIndex = this._selectedIndex;\n      this._value = this.items[this.selectedIndex] || null;\n    }\n  }\n\n  // _focusedIndex keeps track of which element has focus and will be selected\n  // if it is activated (by pressing ENTER or SPACE key)\n  private _focusedIndex: number = 0;\n  get focusedIndex(): number {\n    return this._focusedIndex;\n  }\n\n  @Input() set focusedIndex(value: number) {\n    if (this._focusedIndex !== value) {\n      this._focusedIndex = value;\n      this.scrollItemIntoView(this._focusedIndex);\n    }\n  }\n\n  @Input()\n  itemTextProperty = 'text';\n\n  @Input()\n  placeholder = 'Please select:';\n\n  @Input() set popout(direction: HorizontalDirection | `${HorizontalDirection}`) {\n    this._popout = direction || HorizontalDirection.right;\n  }\n\n  get popout() {\n    return this._popout;\n  }\n\n  @Input()\n  attentionLevel: '1' | '2' | '3' = '3';\n\n  @Input()\n  expand?: 'block';\n\n  @Input()\n  disabled = false;\n\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @Output() hasErrorChange = new EventEmitter<boolean>();\n\n  private _hasError: boolean;\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  @Input()\n  size: 'sm' | 'md' = 'md';\n\n  // Tabindex defaults to 0 instead of no value to align tabbing behavior in Safari\n  // with other browsers and the default select behavior: https://mayank.co/blog/safari-focus/\n  @Input()\n  tabindex = 0;\n\n  /**\n   * @deprecated This input is no longer needed. The dropdown now always uses popover positioning.\n   * This input will be removed in a future major version.\n   */\n  @Input() set usePopover(_value: boolean) {\n    console.warn(\n      `[Kirby Dropdown] The 'usePopover' input is deprecated and no longer has any effect.\n        The dropdown now always uses popover positioning. This input will be removed in a future major version.`\n    );\n  }\n\n  get _tabindex() {\n    return this.disabled ? -1 : this.tabindex;\n  }\n\n  // Prevent Ionic blur on scroll\n  @HostBinding('attr.no-blur')\n  get _noBlurOnScroll() {\n    return true;\n  }\n\n  /**\n   * Emitted when an item is selected (tap on mobile, click/keypress on web)\n   */\n  @Output() change: EventEmitter<string | any> = new EventEmitter<string | any>();\n\n  private _value: string | any = null;\n  get value(): string | any {\n    return this._value;\n  }\n\n  get selectedText(): string {\n    return this.getTextFromItem(this.value);\n  }\n\n  @HostBinding('class.expand')\n  get _isBlockLevel() {\n    return this.expand === 'block';\n  }\n\n  @HostBinding('class.is-opening')\n  get _isOpening(): boolean {\n    return this.state === OpenState.opening;\n  }\n\n  @HostBinding('class.is-open')\n  get isOpen(): boolean {\n    return this.state === OpenState.open;\n  }\n\n  /* The 'clicked' class is applied through Hostbinding to prevent the dropdown from getting a focus ring on click.\n    There is a bug that causes the dropdown to get a focus ring on click, if it is the first element that is interacted with\n    after the page is loaded. If the user interacts with any other element before, then the dropdown won't get a focus ring.\n    See issue: https://github.com/kirbydesign/designsystem/issues/2477.\n\n    This solution can potentially be refactored, when popover is not experimental anymore. Then it could be possible\n    to close the dropdown when the popover backdrop is clicked, instead of relying on the blur event, which is utilized\n    by this line below: this.elementRef.nativeElement.focus(). Right now this forces the blur event to be triggered, when\n    clicking outside of the dropdown.\n    */\n  @HostBinding('class.clicked')\n  clicked = false;\n\n  @ContentChild(ListItemTemplateDirective, { static: true, read: TemplateRef })\n  itemTemplate: TemplateRef<any>;\n  @ContentChildren(ListItemTemplateDirective, { read: ElementRef })\n  slottedItems: QueryList<ElementRef<HTMLElement>>;\n  @ViewChild(CardComponent, { read: ElementRef })\n  cardElement: ElementRef<HTMLElement>;\n  @ViewChild(PopoverComponent)\n  popover: PopoverComponent;\n  @ViewChild(ButtonComponent, { static: true, read: ElementRef })\n  buttonElement: ElementRef<HTMLElement>;\n\n  private forwardAriaLabelToDropdownButton() {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.buttonElement.nativeElement\n    );\n  }\n  @ViewChildren(ItemComponent, { read: ElementRef })\n  kirbyItemsDefault: QueryList<ElementRef<HTMLElement>>;\n\n  _kirbyItemsSlotted: QueryList<ElementRef<HTMLElement>>;\n  @ContentChildren(ItemComponent, { read: ElementRef })\n  set kirbyItemsSlotted(kirbyItems: QueryList<ElementRef<HTMLElement>>) {\n    const hasSlottedItems = this.disposeItemClickListeners?.length > 0;\n    if (hasSlottedItems) {\n      this.unlistenAllSlottedItems();\n    }\n\n    // Setup a click listener for each new slotted items\n    kirbyItems.forEach((kirbyItem, index) => {\n      this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');\n      const disposeClickListener: EventListenerDisposeFn = this.renderer.listen(\n        kirbyItem.nativeElement,\n        'click',\n        () => {\n          this.onItemSelect(index);\n        }\n      );\n\n      this.disposeItemClickListeners.push(disposeClickListener);\n    });\n\n    this._kirbyItemsSlotted = kirbyItems;\n  }\n\n  get kirbyItemsSlotted(): QueryList<ElementRef<HTMLElement>> {\n    return this._kirbyItemsSlotted;\n  }\n\n  private disposeItemClickListeners: EventListenerDisposeFn[] = [];\n  private searchBuffer: string = '';\n  private searchBufferTimeout: ReturnType<typeof setTimeout>;\n  private SEARCH_BUFFER_DELAY = 500; // ms\n\n  constructor(\n    private renderer: Renderer2,\n    private elementRef: ElementRef<HTMLElement>,\n    private cdr: ChangeDetectorRef,\n    private keyboardHandlerService: KeyboardHandlerService,\n    private resizeObserverService: ResizeObserverService\n  ) {}\n\n  onToggle(event: MouseEvent) {\n    event.stopPropagation();\n\n    this.clicked = true;\n\n    this.toggle();\n  }\n\n  toggle() {\n    if (this.disabled) {\n      return;\n    }\n    this.isOpen ? this.close() : this.open();\n  }\n\n  /* Utility that makes it easier to set styles on card element */\n  private setPopoverCardStyle(style: string, value: string) {\n    this.renderer.setStyle(\n      this.cardElement.nativeElement,\n      style,\n      value,\n      RendererStyleFlags2.DashCase\n    );\n  }\n\n  ngAfterViewInit() {\n    if (this.expand === 'block') {\n      const { width: initialWidth } = this.elementRef.nativeElement.getBoundingClientRect();\n      this.setPopoverCardStyle('max-width', 'initial');\n      this.setPopoverCardStyle('min-width', 'initial');\n      // Ensure initial width is set even if the resize observer callback also fires initially:\n      this.setPopoverCardStyle('--kirby-card-width', `${initialWidth}px`);\n\n      this.resizeObserverService.observe(this.elementRef, (entry) => {\n        const newWidth = entry.contentRect.width;\n        if (newWidth > 0) {\n          this.setPopoverCardStyle('--kirby-card-width', `${newWidth}px`);\n        }\n      });\n    }\n    this.forwardAriaLabelToDropdownButton();\n  }\n\n  open() {\n    if (this.disabled) {\n      return;\n    }\n\n    if (!this.isOpen) {\n      this.state = OpenState.opening;\n      // ensures that the dropdown is opened in case the IntersectionObserverCallback isn't invoked\n      setTimeout(() => this.showDropdown(), DropdownComponent.OPEN_DELAY_IN_MS);\n\n      // Move focus to selected item (if any) or first item\n      this.focusedIndex = this.selectedIndex > -1 ? this.selectedIndex : 0;\n    }\n  }\n\n  private showDropdown() {\n    if (this.state === OpenState.opening) {\n      this.state = OpenState.open;\n      this.popover?.show();\n      this.scrollItemIntoView(this.focusedIndex);\n      this.cdr.markForCheck();\n    }\n  }\n\n  close() {\n    if (this.disabled) {\n      return;\n    }\n    if (this.isOpen) {\n      this.state = OpenState.closed;\n      this.popover?.hide();\n    }\n  }\n\n  onItemSelect(index: number) {\n    this.selectItem(index);\n    this.close();\n  }\n\n  private _onChange: (value: any) => void = () => {};\n  private _onTouched = () => {};\n\n  /**\n   * Sets the select'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: any): void {\n    this._selectItemByValue(value);\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Disables the select. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  private selectItem(index: number) {\n    if (index != this.selectedIndex) {\n      this.selectedIndex = index;\n      this.focusedIndex = index;\n      this.change.emit(this.value);\n      this._onChange(this.value);\n    }\n  }\n\n  private _selectItemByValue(value: string | any) {\n    this.selectedIndex = this.items.indexOf(value);\n  }\n\n  getTextFromItem(item: string | any) {\n    if (!item) {\n      return null;\n    }\n    return typeof item === 'string' ? item : item[this.itemTextProperty];\n  }\n\n  scrollItemIntoView(index: number) {\n    const kirbyItems =\n      this.kirbyItemsSlotted && this.kirbyItemsSlotted.length\n        ? this.kirbyItemsSlotted\n        : this.kirbyItemsDefault;\n    if (kirbyItems && kirbyItems.length) {\n      const selectedKirbyItem = kirbyItems.toArray()[index];\n      if (selectedKirbyItem && selectedKirbyItem.nativeElement) {\n        const itemElement = selectedKirbyItem.nativeElement;\n        itemElement.scrollIntoView({ block: 'nearest' });\n      }\n    }\n  }\n\n  @HostListener('keydown.tab')\n  @HostListener('keydown.shift.tab')\n  _onTab() {\n    if (this.isOpen) {\n      this.selectItem(this.focusedIndex);\n      this.close();\n    }\n\n    if (this.clicked) {\n      // Remove the 'clicked' class (Hostbinding) if the user has previously opened the dropdown by clicking,\n      // since the class prevents the focus ring from showing,\n      // which is expected to happen, when using the tab key\n      this.clicked = false;\n    }\n  }\n\n  private preventDefaultAndStopImmediatePropagation(event: KeyboardEvent) {\n    event.stopImmediatePropagation();\n    event.preventDefault();\n  }\n\n  private addToSearchBuffer(char: string) {\n    clearTimeout(this.searchBufferTimeout);\n    this.searchBuffer += char;\n    this.searchBufferTimeout = setTimeout(() => {\n      this.resetSearchBuffer();\n    }, this.SEARCH_BUFFER_DELAY);\n  }\n  private resetSearchBuffer() {\n    this.searchBuffer = '';\n  }\n\n  @HostListener('keydown', ['$event'])\n  _onKeydown(event: KeyboardEvent) {\n    const key = event.key;\n\n    if (this.items.length === 0) {\n      console.warn('[Kirby] No items found within dropdown');\n      return;\n    }\n\n    if (this.disabled) return;\n\n    if (StringSearchHelper.isPrintableCharacter(key)) {\n      this.handlePrintableCharacterKey(event, this.isOpen);\n    }\n\n    // ALT + ArrowDown: Open dropdown\n    if (key === 'ArrowDown' && event.altKey) {\n      this.preventDefaultAndStopImmediatePropagation(event);\n      if (!this.isOpen) {\n        this.open();\n        this.focusedIndex = this.selectedIndex > -1 ? this.selectedIndex : 0;\n      }\n      return;\n    }\n\n    // ALT + ArrowUp: Select focused item and close dropdown\n    if (key === 'ArrowUp' && event.altKey) {\n      this.preventDefaultAndStopImmediatePropagation(event);\n      if (this.focusedIndex > -1) {\n        this.selectItem(this.focusedIndex);\n        this.close();\n      }\n    }\n    // PageUp: Jump up 10 options or to first\n    if (key === 'PageUp') {\n      this.preventDefaultAndStopImmediatePropagation(event);\n      if (!this.isOpen) {\n        this.open();\n      }\n      this.focusedIndex = Math.max(0, this.focusedIndex - 10);\n      return;\n    }\n\n    // PageDown: Jump down 10 options or to last\n    if (key === 'PageDown') {\n      this.preventDefaultAndStopImmediatePropagation(event);\n      if (!this.isOpen) {\n        this.open();\n      }\n      this.focusedIndex = Math.min(this.items.length - 1, this.focusedIndex + 10);\n      return;\n    }\n  }\n\n  private handlePrintableCharacterKey(event: KeyboardEvent, isOpen: boolean) {\n    const key = event.key;\n\n    if (isOpen) {\n      this.preventDefaultAndStopImmediatePropagation(event);\n    } else {\n      this.open();\n    }\n\n    // If the same character is typed twice, the search buffer should only contain that character once\n    if (\n      this.searchBuffer.length === 1 &&\n      this.searchBuffer[0].toLowerCase() === key.toLowerCase()\n    ) {\n      this.searchBuffer = key;\n    } else {\n      this.addToSearchBuffer(key);\n    }\n\n    const isMultiCharSearch = this.searchBuffer.length > 1;\n    let startIndex = 0;\n\n    if (!isMultiCharSearch && this.isOpen) {\n      startIndex = this.focusedIndex + 1;\n    }\n\n    let foundItemIndex = this.getIndexOfItemByFirstCharacter(this.searchBuffer, startIndex);\n\n    if (foundItemIndex === -1 && isMultiCharSearch) {\n      foundItemIndex = this.getIndexOfItemByFirstCharacter(key, startIndex);\n    }\n\n    if (foundItemIndex === -1 && !isMultiCharSearch && this.isOpen) {\n      foundItemIndex = this.getIndexOfItemByFirstCharacter(this.searchBuffer, 0);\n    }\n\n    if (foundItemIndex > -1) {\n      this.focusedIndex = foundItemIndex;\n    }\n  }\n\n  private getIndexOfItemByFirstCharacter(char: string, startIndex: number = 0) {\n    let itemTexts: string[];\n    // Prefer slotted/projected items if present\n    if (this.kirbyItemsSlotted && this.kirbyItemsSlotted.length) {\n      itemTexts = this.kirbyItemsSlotted\n        .toArray()\n        .map((ref) => ref.nativeElement.textContent?.trim() ?? '');\n    } else {\n      itemTexts = this.items.map((item) => this.getTextFromItem(item) ?? '');\n    }\n\n    return StringSearchHelper.getIndexByFirstMatchingStartString(char, itemTexts, startIndex);\n  }\n\n  @HostListener('mousedown', ['$event'])\n  _onMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @HostListener('touchstart', ['$event'])\n  _onTouchStart(event: TouchEvent) {\n    if (this.isOpen) {\n      event.stopPropagation();\n    }\n  }\n\n  _onPopoverWillHide() {\n    this.state = OpenState.closed;\n    this.buttonElement.nativeElement.focus();\n    this._onTouched();\n  }\n\n  @HostListener('focusout')\n  _onFocusOut() {\n    if (!this.isOpen) {\n      this._onTouched();\n    }\n  }\n\n  @HostListener('keydown.enter')\n  @HostListener('keydown.escape')\n  _onEnterOrEscape() {\n    this.close();\n  }\n\n  _onPopoverClick() {\n    this.close();\n  }\n\n  @HostListener('keydown.enter', ['$event'])\n  @HostListener('keydown.space', ['$event'])\n  _onEnterOrSpace(event: KeyboardEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.isOpen) {\n      this.selectItem(this.focusedIndex);\n    }\n    this.toggle();\n  }\n\n  @HostListener('keydown.arrowup', ['$event'])\n  @HostListener('keydown.arrowdown', ['$event'])\n  @HostListener('keydown.arrowleft', ['$event'])\n  @HostListener('keydown.arrowright', ['$event'])\n  _onArrowKeys(event: KeyboardEvent) {\n    if (this.disabled) return false;\n\n    // Mirror default HTML5 select behaviour - prevent left/right arrows when open:\n    if (this.isOpen && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {\n      return false;\n    }\n\n    if (!this.isOpen) {\n      // Avoid page scroll\n      event.preventDefault();\n      this.open();\n\n      // If no selected item then focus first or last item\n      if (!event.altKey && this.selectedIndex < 0) {\n        switch (event.key) {\n          case 'ArrowUp':\n            this.focusedIndex = 0;\n            break;\n          case 'ArrowDown':\n            this.focusedIndex = this.items.length - 1;\n            break;\n          default:\n            break;\n        }\n      }\n      return false;\n    }\n\n    const newFocusedIndex = this.keyboardHandlerService.handle(\n      event,\n      this.focusedIndex,\n      this.items.length - 1\n    );\n    if (newFocusedIndex > -1) {\n      this.focusedIndex = newFocusedIndex;\n    }\n    return false;\n  }\n\n  @HostListener('keydown.home', ['$event'])\n  @HostListener('keydown.end', ['$event'])\n  _onHomeEndKeys(event: KeyboardEvent) {\n    if (this.disabled) return;\n    if (!this.isOpen) {\n      event.preventDefault();\n      this.open();\n    }\n    const newFocusedIndex = this.keyboardHandlerService.handle(\n      event,\n      this.focusedIndex,\n      this.items.length - 1\n    );\n    if (newFocusedIndex > -1) {\n      this.focusedIndex = newFocusedIndex;\n    }\n    return false;\n  }\n\n  private unlistenAllSlottedItems() {\n    let disposeClickListener: EventListenerDisposeFn;\n    while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== undefined) {\n      disposeClickListener();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.unlistenAllSlottedItems();\n    this.resizeObserverService.unobserve(this.elementRef);\n  }\n}\n","<button\n  kirby-button\n  type=\"button\"\n  [attr.id]=\"_comboboxId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-activedescendant]=\"isOpen ? _listboxId + '-item-' + focusedIndex : null\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n  [tabindex]=\"_tabindex\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<kirby-popover\n  [target]=\"buttonElement\"\n  [popout]=\"popout\"\n  (click)=\"_onPopoverClick()\"\n  (willHide)=\"_onPopoverWillHide()\"\n>\n  <kirby-card role=\"listbox\" [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @for (item of items; track item; let i = $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i,\n          }\n        \"\n      ></ng-container>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <p class=\"kirby-item-title\">{{ getTextFromItem(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { CardModule } from '@kirbydesign/designsystem/card';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ItemModule } from '@kirbydesign/designsystem/item';\nimport { PopoverComponent } from '@kirbydesign/designsystem/popover';\n\nimport { ListItemTemplateDirective, ListModule } from '@kirbydesign/designsystem/list';\nimport { DropdownComponent } from './dropdown.component';\nimport { KeyboardHandlerService } from './keyboard-handler.service';\n\n@NgModule({\n  imports: [\n    CardModule,\n    IconModule,\n    ItemModule,\n    PopoverComponent,\n    ButtonComponent,\n    CommonModule,\n    ListModule,\n    DropdownComponent,\n  ],\n  exports: [DropdownComponent, ListItemTemplateDirective],\n  providers: [KeyboardHandlerService],\n})\nexport class DropdownModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.KeyboardHandlerService"],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-empty-state.mjs

@@ -54,10 +54,10 @@ class EmptyStateComponent {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EmptyStateComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: EmptyStateComponent, isStandalone: true, selector: "kirby-empty-state", inputs: { iconName: "iconName", title: "title", subtitle: "subtitle" }, queries: [{ propertyName: "slottedButtons", predicate: ButtonComponent }], ngImport: i0, template: "<div class=\"message-container\">\n  @if (iconName) {\n    <div class=\"icon-outline\">\n      <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n    </div>\n  }\n  @if (title) {\n    @if (_insideModal) {\n      <h2 class=\"title kirby-text-medium\">{{ title }}</h2>\n    } @else {\n      <span class=\"title kirby-text-medium\">{{ title }}</span>\n    }\n  }\n  @if (subtitle) {\n    <p class=\"subtitle\">{{ subtitle }}</p>\n  }\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".message-container{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.white-overlay) .icon-outline{border-color:var(--kirby-white-overlay)}:host(.white-overlay) kirby-icon{color:var(--kirby-white-overlay)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}:host(.dark-overlay) .icon-outline{border-color:var(--kirby-dark-overlay)}:host(.dark-overlay) kirby-icon{color:var(--kirby-dark-overlay)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmptyStateComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EmptyStateComponent, isStandalone: true, selector: "kirby-empty-state", inputs: { iconName: "iconName", title: "title", subtitle: "subtitle" }, queries: [{ propertyName: "slottedButtons", predicate: ButtonComponent }], ngImport: i0, template: "<div class=\"message-container\">\n  @if (iconName) {\n    <div class=\"icon-outline\">\n      <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n    </div>\n  }\n  @if (title) {\n    @if (_insideModal) {\n      <h2 class=\"title kirby-text-medium\">{{ title }}</h2>\n    } @else {\n      <span class=\"title kirby-text-medium\">{{ title }}</span>\n    }\n  }\n  @if (subtitle) {\n    <p class=\"subtitle\">{{ subtitle }}</p>\n  }\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".message-container{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.white-overlay) .icon-outline{border-color:var(--kirby-white-overlay)}:host(.white-overlay) kirby-icon{color:var(--kirby-white-overlay)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}:host(.dark-overlay) .icon-outline{border-color:var(--kirby-dark-overlay)}:host(.dark-overlay) kirby-icon{color:var(--kirby-dark-overlay)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], template: "<div class=\"message-container\">\n  @if (iconName) {\n    <div class=\"icon-outline\">\n      <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n    </div>\n  }\n  @if (title) {\n    @if (_insideModal) {\n      <h2 class=\"title kirby-text-medium\">{{ title }}</h2>\n    } @else {\n      <span class=\"title kirby-text-medium\">{{ title }}</span>\n    }\n  }\n  @if (subtitle) {\n    <p class=\"subtitle\">{{ subtitle }}</p>\n  }\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".message-container{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.white-overlay) .icon-outline{border-color:var(--kirby-white-overlay)}:host(.white-overlay) kirby-icon{color:var(--kirby-white-overlay)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}:host(.dark-overlay) .icon-outline{border-color:var(--kirby-dark-overlay)}:host(.dark-overlay) kirby-icon{color:var(--kirby-dark-overlay)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { iconName: [{
@@ -72,11 +72,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
             }] } });
 
 class EmptyStateModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EmptyStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: EmptyStateModule, imports: [IconModule, CommonModule, ThemeColorDirective, EmptyStateComponent], exports: [EmptyStateComponent, ThemeColorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EmptyStateModule, imports: [IconModule, CommonModule, EmptyStateComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmptyStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: EmptyStateModule, imports: [IconModule, CommonModule, ThemeColorDirective, EmptyStateComponent], exports: [EmptyStateComponent, ThemeColorDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmptyStateModule, imports: [IconModule, CommonModule, EmptyStateComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EmptyStateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmptyStateModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IconModule, CommonModule, ThemeColorDirective, EmptyStateComponent],

package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs

@@ -51,10 +51,10 @@ class FabSheetComponent {
         }
         this.changeDetectorRef.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media(hover:hover)and (pointer:fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 15px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], dependencies: [{ kind: "component", type: IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { kind: "component", type: IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media(hover:hover)and (pointer:fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 15px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], dependencies: [{ kind: "component", type: IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { kind: "component", type: IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FabSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FabSheetComponent, decorators: [{
             type: Component,
             args: [{ imports: [IonBackdrop, IonFab, IonFabButton, IonFabList], selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media(hover:hover)and (pointer:fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 15px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{

package/fesm2022/kirbydesign-designsystem-flag.mjs

@@ -9,12 +9,12 @@ class FlagComponent {
     get _cssClass() {
         return [this.themeColor, this.size];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: FlagComponent, isStandalone: true, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FlagComponent, isStandalone: true, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host.success{--kirby-flag-background-color: var(--kirby-success-tint)}:host.warning{--kirby-flag-background-color: var(--kirby-warning-tint)}:host.danger{--kirby-flag-background-color: var(--kirby-danger-tint)}:host.semi-light{--kirby-flag-background-color: var(--kirby-semi-light)}:host{--kirby-flag-border-color: var(--kirby-flag-background-color);--kirby-flag-color: var(--kirby-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FlagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FlagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-flag', template: `
     <ng-content></ng-content>

package/fesm2022/kirbydesign-designsystem-form-field.mjs

@@ -16,10 +16,10 @@ class AffixDirective {
     constructor(el) {
         this.el = el;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: AffixDirective, isStandalone: true, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: AffixDirective, isStandalone: true, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AffixDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -158,10 +158,10 @@ class DateInputDirective {
             ? value.slice(0, value.lastIndexOf(lastNumber[1]) + 1)
             : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DateInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: DateInputDirective, isStandalone: true, inputs: { prefillYear: "prefillYear", useNativeDatePicker: "useNativeDatePicker", dateValue: "dateValue" }, host: { listeners: { "input": "onInput()" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DateInputDirective, isStandalone: true, inputs: { prefillYear: "prefillYear", useNativeDatePicker: "useNativeDatePicker", dateValue: "dateValue" }, host: { listeners: { "input": "onInput()" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DateInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateInputDirective, decorators: [{
             type: Directive,
             args: [{}]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
@@ -187,10 +187,10 @@ class FormFieldMessageComponent {
     constructor() {
         this.position = 'left';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: FormFieldMessageComponent, isStandalone: true, selector: "kirby-form-field-message", inputs: { text: "text", position: "position" }, ngImport: i0, template: "{{ text }}\n<ng-content></ng-content>\n", styles: [":host{font-style:italic;font-size:12px;font-weight:400;font-stretch:normal;line-height:16px;min-height:16px;letter-spacing:normal;color:var(--kirby-text-color-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FormFieldMessageComponent, isStandalone: true, selector: "kirby-form-field-message", inputs: { text: "text", position: "position" }, ngImport: i0, template: "{{ text }}\n<ng-content></ng-content>\n", styles: [":host{font-style:italic;font-size:12px;font-weight:400;font-stretch:normal;line-height:16px;min-height:16px;letter-spacing:normal;color:var(--kirby-text-color-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormFieldMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldMessageComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field-message', template: "{{ text }}\n<ng-content></ng-content>\n", styles: [":host{font-style:italic;font-size:12px;font-weight:400;font-stretch:normal;line-height:16px;min-height:16px;letter-spacing:normal;color:var(--kirby-text-color-black)}\n"] }]
         }], propDecorators: { text: [{
@@ -249,10 +249,10 @@ class InputCounterComponent {
             this.textToAnnounce = `${characters} ${this.length} ${outOf} ${this.maxlength} ${entered}`;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: InputCounterComponent, deps: [{ token: i1.TranslationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: InputCounterComponent, isStandalone: true, selector: "kirby-input-counter", inputs: { listenTo: "listenTo" }, ngImport: i0, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n<div class=\"kirby-visually-hidden\" aria-live=\"polite\">{{ textToAnnounce }}</div>\n", dependencies: [{ kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputCounterComponent, deps: [{ token: i1.TranslationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: InputCounterComponent, isStandalone: true, selector: "kirby-input-counter", inputs: { listenTo: "listenTo" }, ngImport: i0, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n<div class=\"kirby-visually-hidden\" aria-live=\"polite\">{{ textToAnnounce }}</div>\n", dependencies: [{ kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: InputCounterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputCounterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-input-counter', imports: [FormFieldMessageComponent], template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n<div class=\"kirby-visually-hidden\" aria-live=\"polite\">{{ textToAnnounce }}</div>\n" }]
         }], ctorParameters: () => [{ type: i1.TranslationService }, { type: i0.ChangeDetectorRef }], propDecorators: { listenTo: [{
@@ -324,10 +324,10 @@ class InputComponent {
         //Value of input element is updated after cut/paste:
         setTimeout(() => this.kirbyChange.emit(target.value));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: InputComponent, isStandalone: true, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, hostDirectives: [{ directive: DateInputDirective, inputs: ["prefillYear", "prefillYear", "useNativeDatePicker", "useNativeDatePicker", "dateValue", "value"] }], ngImport: i0, template: '', isInline: true, styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}@media(hover:hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-inputs-background-color-hover);cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:var(--kirby-inputs-background-color-active)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host[type=date]{background-color:var(--date-input-background-color)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host(.md).error{padding-block:calc(.5em - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;font-size:var(--kirby-font-size-n);color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: InputComponent, isStandalone: true, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, hostDirectives: [{ directive: DateInputDirective, inputs: ["prefillYear", "prefillYear", "useNativeDatePicker", "useNativeDatePicker", "dateValue", "value"] }], ngImport: i0, template: '', isInline: true, styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}@media(hover:hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-inputs-background-color-hover);cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:var(--kirby-inputs-background-color-active)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host[type=date]{background-color:var(--date-input-background-color)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host(.md).error{padding-block:calc(.5em - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;font-size:var(--kirby-font-size-n);color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ hostDirectives: [
                         {
@@ -451,10 +451,10 @@ class TextareaComponent {
         //Value of textarea element is updated after cut/paste:
         setTimeout(() => this.kirbyChange.emit(target.value));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TextareaComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "attr.value": "this.value", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}@media(hover:hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media(min-width:768px){:host{resize:vertical}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextareaComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "attr.value": "this.value", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}@media(hover:hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media(min-width:768px){:host{resize:vertical}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}@media(hover:hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media(min-width:768px){:host{resize:vertical}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
@@ -682,10 +682,10 @@ class FormFieldComponent {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.PlatformService }, { token: i0.Renderer2 }, { token: i2.WindowRef }, { token: i1.ResizeObserverService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FormFieldComponent, isStandalone: true, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" }, properties: { "class.wrap-content-in-label": "this._wrapContentInLabel" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "inputComponent", first: true, predicate: InputComponent, descendants: true }, { propertyName: "dropdownComponent", first: true, predicate: DropdownComponent, descendants: true }, { propertyName: "textareaComponent", first: true, predicate: TextareaComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "textarea", first: true, predicate: TextareaComponent, descendants: true, read: ElementRef }, { propertyName: "dateInput", first: true, predicate: DateInputDirective, descendants: true }, { propertyName: "affixElements", predicate: AffixDirective }], ngImport: i0, template: "@if (_wrapContentInLabel) {\n  <label>\n    <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n    <!-- add error message inside label if nested interative is in error state -->\n    @if (_nestedInteractiveHasError) {\n      <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n    }\n  </label>\n}\n\n<!-- add message outside label if nested interative is in valid state -->\n@if (!_nestedInteractiveHasError && _wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n@if (!_wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n<ng-template #messageTemplate>\n  @if (message !== undefined || counter) {\n    <div class=\"texts\">\n      <div\n        aria-live=\"polite\"\n        class=\"message\"\n        [id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n      >\n        @if (message !== undefined) {\n          <kirby-form-field-message [text]=\"message\"></kirby-form-field-message>\n        }\n      </div>\n      @if (counter) {\n        <div class=\"counter\">\n          <ng-content select=\"kirby-input-counter\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #slottedInputTemplate>\n  <div class=\"affix-container\">\n    <div class=\"prefix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n    </div>\n    <ng-content select=\"input[kirby-input]\"></ng-content>\n    <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n    <ng-content select=\"kirby-radio-group\"></ng-content>\n    <ng-content select=\"kirby-dropdown\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      @if (showDefaultCalendarIcon) {\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  @if (label) {\n    <span class=\"text\">{{ label }}</span>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label) {\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  }\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .message>kirby-form-field-message{width:100%;display:flex}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px;z-index:1}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]),:host(.wrap-content-in-label) label:has(input[type=date]){--date-input-background-color: var(--kirby-inputs-background-color)}@media(hover:hover){:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]):hover,:host(.wrap-content-in-label) label:has(input[type=date]):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--date-input-background-color: #e0e0e0}}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]):active,:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]).interaction-state-active,:host(.wrap-content-in-label) label:has(input[type=date]):active,:host(.wrap-content-in-label) label:has(input[type=date]).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--date-input-background-color: #cbcbcb}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]) .suffix:not(:empty),:host(.wrap-content-in-label) label:has(input[type=date]) .suffix:not(:empty){top:8px;bottom:8px;padding-inline-start:12px;pointer-events:none;background-color:var(--date-input-background-color);transition:all 80ms linear 0ms;transition-property:background-color}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.PlatformService }, { token: i0.Renderer2 }, { token: i2.WindowRef }, { token: i1.ResizeObserverService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FormFieldComponent, isStandalone: true, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" }, properties: { "class.wrap-content-in-label": "this._wrapContentInLabel" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "inputComponent", first: true, predicate: InputComponent, descendants: true }, { propertyName: "dropdownComponent", first: true, predicate: DropdownComponent, descendants: true }, { propertyName: "textareaComponent", first: true, predicate: TextareaComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "textarea", first: true, predicate: TextareaComponent, descendants: true, read: ElementRef }, { propertyName: "dateInput", first: true, predicate: DateInputDirective, descendants: true }, { propertyName: "affixElements", predicate: AffixDirective }], ngImport: i0, template: "@if (_wrapContentInLabel) {\n  <label>\n    <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n    <!-- add error message inside label if nested interative is in error state -->\n    @if (_nestedInteractiveHasError) {\n      <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n    }\n  </label>\n}\n\n<!-- add message outside label if nested interative is in valid state -->\n@if (!_nestedInteractiveHasError && _wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n@if (!_wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n<ng-template #messageTemplate>\n  @if (message !== undefined || counter) {\n    <div class=\"texts\">\n      <div\n        aria-live=\"polite\"\n        class=\"message\"\n        [id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n      >\n        @if (message !== undefined) {\n          <kirby-form-field-message [text]=\"message\"></kirby-form-field-message>\n        }\n      </div>\n      @if (counter) {\n        <div class=\"counter\">\n          <ng-content select=\"kirby-input-counter\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #slottedInputTemplate>\n  <div class=\"affix-container\">\n    <div class=\"prefix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n    </div>\n    <ng-content select=\"input[kirby-input]\"></ng-content>\n    <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n    <ng-content select=\"kirby-radio-group\"></ng-content>\n    <ng-content select=\"kirby-dropdown\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      @if (showDefaultCalendarIcon) {\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  @if (label) {\n    <span class=\"text\">{{ label }}</span>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label) {\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  }\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .message>kirby-form-field-message{width:100%;display:flex}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px;z-index:1}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]),:host(.wrap-content-in-label) label:has(input[type=date]){--date-input-background-color: var(--kirby-inputs-background-color)}@media(hover:hover){:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]):hover,:host(.wrap-content-in-label) label:has(input[type=date]):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--date-input-background-color: #e0e0e0}}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]):active,:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]).interaction-state-active,:host(.wrap-content-in-label) label:has(input[type=date]):active,:host(.wrap-content-in-label) label:has(input[type=date]).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--date-input-background-color: #cbcbcb}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]) .suffix:not(:empty),:host(.wrap-content-in-label) label:has(input[type=date]) .suffix:not(:empty){top:8px;bottom:8px;padding-inline-start:12px;pointer-events:none;background-color:var(--date-input-background-color);transition:all 80ms linear 0ms;transition-property:background-color}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', imports: [NgTemplateOutlet, FormFieldMessageComponent, IconComponent], template: "@if (_wrapContentInLabel) {\n  <label>\n    <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n    <!-- add error message inside label if nested interative is in error state -->\n    @if (_nestedInteractiveHasError) {\n      <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n    }\n  </label>\n}\n\n<!-- add message outside label if nested interative is in valid state -->\n@if (!_nestedInteractiveHasError && _wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n@if (!_wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n<ng-template #messageTemplate>\n  @if (message !== undefined || counter) {\n    <div class=\"texts\">\n      <div\n        aria-live=\"polite\"\n        class=\"message\"\n        [id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n      >\n        @if (message !== undefined) {\n          <kirby-form-field-message [text]=\"message\"></kirby-form-field-message>\n        }\n      </div>\n      @if (counter) {\n        <div class=\"counter\">\n          <ng-content select=\"kirby-input-counter\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #slottedInputTemplate>\n  <div class=\"affix-container\">\n    <div class=\"prefix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n    </div>\n    <ng-content select=\"input[kirby-input]\"></ng-content>\n    <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n    <ng-content select=\"kirby-radio-group\"></ng-content>\n    <ng-content select=\"kirby-dropdown\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      @if (showDefaultCalendarIcon) {\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  @if (label) {\n    <span class=\"text\">{{ label }}</span>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label) {\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  }\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .message>kirby-form-field-message{width:100%;display:flex}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px;z-index:1}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]),:host(.wrap-content-in-label) label:has(input[type=date]){--date-input-background-color: var(--kirby-inputs-background-color)}@media(hover:hover){:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]):hover,:host(.wrap-content-in-label) label:has(input[type=date]):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--date-input-background-color: #e0e0e0}}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]):active,:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]).interaction-state-active,:host(.wrap-content-in-label) label:has(input[type=date]):active,:host(.wrap-content-in-label) label:has(input[type=date]).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--date-input-background-color: #cbcbcb}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]) .suffix:not(:empty),:host(.wrap-content-in-label) label:has(input[type=date]) .suffix:not(:empty){top:8px;bottom:8px;padding-inline-start:12px;pointer-events:none;background-color:var(--date-input-background-color);transition:all 80ms linear 0ms;transition-property:background-color}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.PlatformService }, { type: i0.Renderer2 }, { type: i2.WindowRef }, { type: i1.ResizeObserverService }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
@@ -823,10 +823,10 @@ class DecimalMaskDirective {
             },
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DecimalMaskDirective, deps: [{ token: i0.ElementRef }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: DecimalMaskDirective, isStandalone: true, selector: "[kirby-decimal-mask]", inputs: { min: "min", max: "max", precision: "precision", setMaxOnOverflow: "setMaxOnOverflow", alignment: "alignment", padPrecisionDigits: "padPrecisionDigits", allowMinus: "allowMinus", disableGroupSeperator: "disableGroupSeperator", maxlength: "maxlength" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DecimalMaskDirective, deps: [{ token: i0.ElementRef }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DecimalMaskDirective, isStandalone: true, selector: "[kirby-decimal-mask]", inputs: { min: "min", max: "max", precision: "precision", setMaxOnOverflow: "setMaxOnOverflow", alignment: "alignment", padPrecisionDigits: "padPrecisionDigits", allowMinus: "allowMinus", disableGroupSeperator: "disableGroupSeperator", maxlength: "maxlength" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DecimalMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DecimalMaskDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -862,11 +862,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
 
 const imports = [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent];
 class FormFieldModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: FormFieldModule, imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective, FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective, AffixDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule, FormFieldComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: FormFieldModule, imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective, FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective, AffixDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule, FormFieldComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective, ...imports],