npm - @kirbydesign/designsystem - Versions diffs - 11.11.2-dev-85b2964 → 11.11.3 - Mend

@kirbydesign/designsystem 11.11.2-dev-85b2964 → 11.11.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (188) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-segmented-control.mjs","sources":["../../segmented-control/src/segmented-control.component.ts","../../segmented-control/src/segmented-control.component.html","../../segmented-control/src/kirbydesign-designsystem-segmented-control.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n HostListener,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonSegment, IonSegmentButton } from '@ionic/angular';\n\nimport { SegmentItem } from './segment-item';\n\nexport enum SegmentedControlMode {\n chip = 'chip',\n compactChip = 'compactChip',\n default = 'default',\n}\n\n@Component({\n imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton],\n selector: 'kirby-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SegmentedControlComponent),\n multi: true,\n },\n ],\n})\nexport class SegmentedControlComponent<\n TItem extends SegmentItem = SegmentItem,\n> implements ControlValueAccessor {\n @ViewChild(IonSegment, { static: true, read: ElementRef })\n private ionSegmentElement: ElementRef<HTMLIonSegmentElement>;\n\n /*\n Ensure that the click actually did originate from within the segment-button.\n * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.\n /\n preventOutsideClick(event: TouchEvent) {\n if (event.target instanceof HTMLElement) {\n const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');\n if (!targetIsInSegmentBtn) {\n event.stopImmediatePropagation();\n }\n }\n }\n\n @Input() mode: SegmentedControlMode \| `${SegmentedControlMode}` = SegmentedControlMode.default;\n\n @HostBinding('class')\n get _modeCssClass() {\n return {\n [SegmentedControlMode.chip]: 'chip-mode',\n [SegmentedControlMode.default]: 'default-mode',\n [SegmentedControlMode.compactChip]: 'compact chip-mode',\n }[this.mode];\n }\n\n private _items: TItem[] = [];\n get items(): TItem[] {\n return this._items;\n }\n\n @Input() set items(value: TItem[]) {\n this._items = value \|\| [];\n this._value = this.items[this.selectedIndex];\n this.ensureIonSegmentSelected();\n }\n\n protected isDisabled = false;\n\n /\n After upgrading to Ionic standalone components (Ionic v.7.6.6)\n * there is a lifecycle bug between Angular/Ionic/Stencil that prevents\n * the value of the segment component to be reflected in the checked state\n * of it's slotted segment buttons.\n * This has been patched here: https://github.com/ionic-team/ionic-framework/pull/28837\n * However the patch doesn't fix the problem if `items` are updated after first initialization\n * and the ion-segment-button(s) are re-rerendered.\n /\n private ensureIonSegmentSelected() {\n const ionSegment = this.ionSegmentElement.nativeElement;\n const ionSelectEvent = ionSegment['ionSelect'];\n if (this._value && typeof ionSelectEvent?.emit === 'function') {\n // Ensure changes has been reflected to the DOM:\n setTimeout(() => {\n const selectedSegmentButton = ionSegment.querySelector(\n 'ion-segment-button.segment-button-checked'\n );\n if (selectedSegmentButton) return; // Nothing to patch\n\n ionSelectEvent.emit({ value: this._value?.id });\n });\n }\n }\n\n private _selectedIndex: number = -1;\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n @Input() set selectedIndex(index: number) {\n if (index !== this._selectedIndex) {\n this._selectedIndex = index;\n this._value = this.items[this.selectedIndex];\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n\n @Output() selectedIndexChange = new EventEmitter<number>();\n\n private _value: NoInfer<TItem>;\n get value(): NoInfer<TItem> {\n return this._value;\n }\n\n @Input() set value(value: NoInfer<TItem>) {\n this.selectedIndex = this.items.indexOf(value);\n }\n\n @HostBinding('class.sm')\n isSmallSize: boolean;\n\n @Input() set size(size: 'sm' \| 'md') {\n this.isSmallSize = size === 'sm';\n }\n\n private _disableChangeOnSwipe: boolean = false;\n get disableChangeOnSwipe(): boolean {\n return this._disableChangeOnSwipe;\n }\n\n @Input() set disableChangeOnSwipe(value: boolean) {\n this._disableChangeOnSwipe = value;\n }\n\n @Output() segmentSelect = new EventEmitter<TItem>();\n\n onSegmentSelect(selectedId: string) {\n const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);\n\n if (selectedItemIndex !== this.selectedIndex) {\n this.selectedIndex = selectedItemIndex;\n this.segmentSelect.emit(this.value);\n this.onChange(this.value);\n this.onTouched();\n }\n }\n\n focusNativeButton(event: UIEvent) {\n (event.target as HTMLIonSegmentButtonElement)?.setFocus();\n }\n\n private _segmentElementHasFocus = false;\n\n getTabIndex(item: TItem, index: number) {\n // When focused prevent tab stop from inner native button to outer ion-segment-button:\n if (this._segmentElementHasFocus) return -1;\n // Allow tab stop on selected item:\n if (item.id === this.value?.id) return null;\n // Allow tab stop on first item if no value is set:\n if (!this.value && index === 0) return null;\n // Prevent tab stop on all other items:\n return -1;\n }\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n @HostListener('focusin')\n @HostListener('focusout')\n _onFocusInOut() {\n // @HostListener(focusin\|focusout) triggers Change Detection and updates attr.tabindex on each ion-segment-button\n this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(':focus-within');\n if (!this._segmentElementHasFocus) {\n this.onTouched();\n }\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private onChange: (value: NoInfer<TItem>) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private onTouched: () => void = () => {};\n /\n Sets the segmented control's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n \n @param value New value to be written to the model.\n /\n writeValue(value: NoInfer<TItem>): void {\n if (value !== this._value) {\n this.value = value;\n this.cdr.markForCheck();\n }\n }\n\n /\n Saves a callback function to be invoked when the segmented control's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n \n @param fn Callback to be triggered when the value changes.\n /\n registerOnChange(fn: (value: NoInfer<TItem>) => void): void {\n this.onChange = fn;\n }\n\n /\n Saves a callback function to be invoked when the segmented control is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n \n @param fn Callback to be triggered when the component has been touched.\n /\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /\n Disables the segmented control. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n \n @param isDisabled Sets whether the component is disabled.\n /\n setDisabledState(isDisabled: boolean): void {\n this.isDisabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe \|\| mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-segmented-control.mjs","sources":["../../segmented-control/src/segmented-control.component.ts","../../segmented-control/src/segmented-control.component.html","../../segmented-control/src/kirbydesign-designsystem-segmented-control.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n HostListener,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonSegment, IonSegmentButton } from '@ionic/angular';\n\nimport { SegmentItem } from './segment-item';\n\nexport enum SegmentedControlMode {\n chip = 'chip',\n compactChip = 'compactChip',\n default = 'default',\n}\n\n@Component({\n imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton],\n selector: 'kirby-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SegmentedControlComponent),\n multi: true,\n },\n ],\n})\nexport class SegmentedControlComponent<\n TItem extends SegmentItem = SegmentItem,\n> implements ControlValueAccessor {\n @ViewChild(IonSegment, { static: true, read: ElementRef })\n private ionSegmentElement: ElementRef<HTMLIonSegmentElement>;\n\n /*\n Ensure that the click actually did originate from within the segment-button.\n * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.\n /\n preventOutsideClick(event: TouchEvent) {\n if (event.target instanceof HTMLElement) {\n const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');\n if (!targetIsInSegmentBtn) {\n event.stopImmediatePropagation();\n }\n }\n }\n\n @Input() mode: SegmentedControlMode \| `${SegmentedControlMode}` = SegmentedControlMode.default;\n\n @HostBinding('class')\n get _modeCssClass() {\n return {\n [SegmentedControlMode.chip]: 'chip-mode',\n [SegmentedControlMode.default]: 'default-mode',\n [SegmentedControlMode.compactChip]: 'compact chip-mode',\n }[this.mode];\n }\n\n private _items: TItem[] = [];\n get items(): TItem[] {\n return this._items;\n }\n\n @Input() set items(value: TItem[]) {\n this._items = value \|\| [];\n this._value = this.items[this.selectedIndex];\n this.ensureIonSegmentSelected();\n }\n\n protected isDisabled = false;\n\n /\n After upgrading to Ionic standalone components (Ionic v.7.6.6)\n * there is a lifecycle bug between Angular/Ionic/Stencil that prevents\n * the value of the segment component to be reflected in the checked state\n * of it's slotted segment buttons.\n * This has been patched here: https://github.com/ionic-team/ionic-framework/pull/28837\n * However the patch doesn't fix the problem if `items` are updated after first initialization\n * and the ion-segment-button(s) are re-rerendered.\n /\n private ensureIonSegmentSelected() {\n const ionSegment = this.ionSegmentElement.nativeElement;\n const ionSelectEvent = ionSegment['ionSelect'];\n if (this._value && typeof ionSelectEvent?.emit === 'function') {\n // Ensure changes has been reflected to the DOM:\n setTimeout(() => {\n const selectedSegmentButton = ionSegment.querySelector(\n 'ion-segment-button.segment-button-checked'\n );\n if (selectedSegmentButton) return; // Nothing to patch\n\n ionSelectEvent.emit({ value: this._value?.id });\n });\n }\n }\n\n private _selectedIndex: number = -1;\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n @Input() set selectedIndex(index: number) {\n if (index !== this._selectedIndex) {\n this._selectedIndex = index;\n this._value = this.items[this.selectedIndex];\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n\n @Output() selectedIndexChange = new EventEmitter<number>();\n\n private _value: NoInfer<TItem>;\n get value(): NoInfer<TItem> {\n return this._value;\n }\n\n @Input() set value(value: NoInfer<TItem>) {\n this.selectedIndex = this.items.indexOf(value);\n }\n\n @HostBinding('class.sm')\n isSmallSize: boolean;\n\n @Input() set size(size: 'sm' \| 'md') {\n this.isSmallSize = size === 'sm';\n }\n\n private _disableChangeOnSwipe: boolean = false;\n get disableChangeOnSwipe(): boolean {\n return this._disableChangeOnSwipe;\n }\n\n @Input() set disableChangeOnSwipe(value: boolean) {\n this._disableChangeOnSwipe = value;\n }\n\n @Output() segmentSelect = new EventEmitter<TItem>();\n\n onSegmentSelect(selectedId: string) {\n const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);\n\n if (selectedItemIndex !== this.selectedIndex) {\n this.selectedIndex = selectedItemIndex;\n this.segmentSelect.emit(this.value);\n this.onChange(this.value);\n this.onTouched();\n }\n }\n\n focusNativeButton(event: UIEvent) {\n (event.target as HTMLIonSegmentButtonElement)?.setFocus();\n }\n\n private _segmentElementHasFocus = false;\n\n getTabIndex(item: TItem, index: number) {\n // When focused prevent tab stop from inner native button to outer ion-segment-button:\n if (this._segmentElementHasFocus) return -1;\n // Allow tab stop on selected item:\n if (item.id === this.value?.id) return null;\n // Allow tab stop on first item if no value is set:\n if (!this.value && index === 0) return null;\n // Prevent tab stop on all other items:\n return -1;\n }\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n @HostListener('focusin')\n @HostListener('focusout')\n _onFocusInOut() {\n // @HostListener(focusin\|focusout) triggers Change Detection and updates attr.tabindex on each ion-segment-button\n this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(':focus-within');\n if (!this._segmentElementHasFocus) {\n this.onTouched();\n }\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private onChange: (value: NoInfer<TItem>) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private onTouched: () => void = () => {};\n /\n Sets the segmented control's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n \n @param value New value to be written to the model.\n /\n writeValue(value: NoInfer<TItem>): void {\n if (value !== this._value) {\n this.value = value;\n this.cdr.markForCheck();\n }\n }\n\n /\n Saves a callback function to be invoked when the segmented control's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n \n @param fn Callback to be triggered when the value changes.\n /\n registerOnChange(fn: (value: NoInfer<TItem>) => void): void {\n this.onChange = fn;\n }\n\n /\n Saves a callback function to be invoked when the segmented control is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n \n @param fn Callback to be triggered when the component has been touched.\n /\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /\n Disables the segmented control. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n \n @param isDisabled Sets whether the component is disabled.\n /\n setDisabledState(isDisabled: boolean): void {\n this.isDisabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe \|\| mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;IAqBY;AAAZ,CAAA,UAAY,oBAAoB,EAAA;AAC9B,IAAA,oBAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,oBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3B,IAAA,oBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAJW,oBAAoB,KAApB,oBAAoB,GAAA,EAAA,CAAA,CAAA;MAoBnB,yBAAyB,CAAA;AAMpC;;;AAGG;AACH,IAAA,mBAAmB,CAAC,KAAiB,EAAA;AACnC,QAAA,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,EAAE;AACvC,YAAA,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,oBAAoB,CAAC;YACzE,IAAI,CAAC,oBAAoB,EAAE;gBACzB,KAAK,CAAC,wBAAwB,EAAE;YAClC;QACF;IACF;AAIA,IAAA,IACI,aAAa,GAAA;QACf,OAAO;AACL,YAAA,CAAC,oBAAoB,CAAC,IAAI,GAAG,WAAW;AACxC,YAAA,CAAC,oBAAoB,CAAC,OAAO,GAAG,cAAc;AAC9C,YAAA,CAAC,oBAAoB,CAAC,WAAW,GAAG,mBAAmB;AACxD,SAAA,CAAC,IAAI,CAAC,IAAI,CAAC;IACd;AAGA,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,MAAM;IACpB;IAEA,IAAa,KAAK,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,IAAI,EAAE;QACzB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;QAC5C,IAAI,CAAC,wBAAwB,EAAE;IACjC;AAIA;;;;;;;;AAQG;IACK,wBAAwB,GAAA;AAC9B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa;AACvD,QAAA,MAAM,cAAc,GAAG,UAAU,CAAC,WAAW,CAAC;QAC9C,IAAI,IAAI,CAAC,MAAM,IAAI,OAAO,cAAc,EAAE,IAAI,KAAK,UAAU,EAAE;;YAE7D,UAAU,CAAC,MAAK;gBACd,MAAM,qBAAqB,GAAG,UAAU,CAAC,aAAa,CACpD,2CAA2C,CAC5C;AACD,gBAAA,IAAI,qBAAqB;AAAE,oBAAA,OAAO;AAElC,gBAAA,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC;AACjD,YAAA,CAAC,CAAC;QACJ;IACF;AAGA,IAAA,IAAI,aAAa,GAAA;QACf,OAAO,IAAI,CAAC,cAAc;IAC5B;IAEA,IAAa,aAAa,CAAC,KAAa,EAAA;AACtC,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE;AACjC,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;YAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;YAC5C,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QACnD;IACF;AAKA,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,MAAM;IACpB;IAEA,IAAa,KAAK,CAAC,KAAqB,EAAA;QACtC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;IAChD;IAKA,IAAa,IAAI,CAAC,IAAiB,EAAA;AACjC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,KAAK,IAAI;IAClC;AAGA,IAAA,IAAI,oBAAoB,GAAA;QACtB,OAAO,IAAI,CAAC,qBAAqB;IACnC;IAEA,IAAa,oBAAoB,CAAC,KAAc,EAAA;AAC9C,QAAA,IAAI,CAAC,qBAAqB,GAAG,KAAK;IACpC;AAIA,IAAA,eAAe,CAAC,UAAkB,EAAA;AAChC,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,UAAU,KAAK,IAAI,CAAC,EAAE,CAAC;AAEhF,QAAA,IAAI,iBAAiB,KAAK,IAAI,CAAC,aAAa,EAAE;AAC5C,YAAA,IAAI,CAAC,aAAa,GAAG,iBAAiB;YACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,SAAS,EAAE;QAClB;IACF;AAEA,IAAA,iBAAiB,CAAC,KAAc,EAAA;AAC7B,QAAA,KAAK,CAAC,MAAsC,EAAE,QAAQ,EAAE;IAC3D;IAIA,WAAW,CAAC,IAAW,EAAE,KAAa,EAAA;;QAEpC,IAAI,IAAI,CAAC,uBAAuB;YAAE,OAAO,CAAC,CAAC;;QAE3C,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,EAAE,EAAE;AAAE,YAAA,OAAO,IAAI;;AAE3C,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,CAAC;AAAE,YAAA,OAAO,IAAI;;QAE3C,OAAO,CAAC,CAAC;IACX;AAEA,IAAA,WAAA,CAAoB,GAAsB,EAAA;QAAtB,IAAA,CAAA,GAAG,GAAH,GAAG;AAvHd,QAAA,IAAA,CAAA,IAAI,GAAqD,oBAAoB,CAAC,OAAO;QAWtF,IAAA,CAAA,MAAM,GAAY,EAAE;QAWlB,IAAA,CAAA,UAAU,GAAG,KAAK;QA2BpB,IAAA,CAAA,cAAc,GAAW,CAAC,CAAC;AAazB,QAAA,IAAA,CAAA,mBAAmB,GAAG,IAAI,YAAY,EAAU;QAkBlD,IAAA,CAAA,qBAAqB,GAAY,KAAK;AASpC,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAS;QAiB3C,IAAA,CAAA,uBAAuB,GAAG,KAAK;;;AA2B/B,QAAA,IAAA,CAAA,QAAQ,GAAoC,MAAK,EAAE,CAAC;;AAEpD,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,EAAE,CAAC;IAhBK;IAI7C,aAAa,GAAA;;AAEX,QAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,OAAO,CAAC,eAAe,CAAC;AAC5F,QAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;YACjC,IAAI,CAAC,SAAS,EAAE;QAClB;IACF;AAOA;;;;;AAKG;AACH,IAAA,UAAU,CAAC,KAAqB,EAAA;AAC9B,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,MAAM,EAAE;AACzB,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;QACzB;IACF;AAEA;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,EAAmC,EAAA;AAClD,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA;;;;;;AAMG;AACH,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA;;;;;AAKG;AACH,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,UAAU,GAAG,UAAU;AAC5B,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;IACzB;kIAvMW,yBAAyB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAzB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,aAAA,EAAA,eAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EARzB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,EAAC,MAAM,yBAAyB,EAAC;AACxD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,mBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAKU,UAAU,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAwB,UAAU,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5CzD,27BA+BA,EAAA,MAAA,EAAA,CAAA,ypHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDHY,aAAa,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,cAAc,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,YAAA,EAAA,eAAA,EAAA,cAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAa1D,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAdrC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAC,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAC5D,yBAAyB,EAAA,eAAA,EAGlB,uBAAuB,CAAC,MAAM,EAAA,SAAA,EACpC;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,EAAC,+BAA+B,EAAC;AACxD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,27BAAA,EAAA,MAAA,EAAA,CAAA,ypHAAA,CAAA,EAAA;;sBAKA,SAAS;uBAAC,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE;;sBAgBxD;;sBAEA,WAAW;uBAAC,OAAO;;sBAcnB;;sBAsCA;;sBAQA;;sBAOA;;sBAIA,WAAW;uBAAC,UAAU;;sBAGtB;;sBASA;;sBAIA;;sBAgCA,YAAY;uBAAC,SAAS;;sBACtB,YAAY;uBAAC,UAAU;;;AEtL1B;;AAEG;;;;"}

package/fesm2022/kirbydesign-designsystem-shared-floating.mjs CHANGED Viewed

@@ -336,10 +336,10 @@ class FloatingDirective {
         this.tearDownReferenceElementEventHandling();
         this.removeAutoUpdaterRef();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FloatingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PortalDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: FloatingDirective, isStandalone: true, selector: "[kirbyFloating]", inputs: { reference: "reference", placement: "placement", strategy: "strategy", triggers: "triggers", DOMPortalOutlet: "DOMPortalOutlet", portalOutletConfig: "portalOutletConfig", isDisabled: "isDisabled", offset: "offset", shift: "shift", autoPlacement: "autoPlacement", closeOnSelect: "closeOnSelect", closeOnEscapeKey: "closeOnEscapeKey", closeOnBackdrop: "closeOnBackdrop" }, outputs: { displayChanged: "displayChanged" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyPressed()" } }, providers: [PortalDirective], hostDirectives: [{ directive: i1.PortalDirective }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FloatingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PortalDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: FloatingDirective, isStandalone: true, selector: "[kirbyFloating]", inputs: { reference: "reference", placement: "placement", strategy: "strategy", triggers: "triggers", DOMPortalOutlet: "DOMPortalOutlet", portalOutletConfig: "portalOutletConfig", isDisabled: "isDisabled", offset: "offset", shift: "shift", autoPlacement: "autoPlacement", closeOnSelect: "closeOnSelect", closeOnEscapeKey: "closeOnEscapeKey", closeOnBackdrop: "closeOnBackdrop" }, outputs: { displayChanged: "displayChanged" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyPressed()" } }, providers: [PortalDirective], hostDirectives: [{ directive: i1.PortalDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FloatingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FloatingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyFloating]',

package/fesm2022/kirbydesign-designsystem-shared-floating.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-shared-floating.mjs","sources":["../../shared/floating/src/floating.directive.ts","../../shared/floating/src/kirbydesign-designsystem-shared-floating.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnDestroy,\n OnInit,\n Output,\n Renderer2,\n} from '@angular/core';\nimport {\n autoPlacement,\n autoUpdate,\n computePosition,\n ComputePositionConfig,\n flip,\n Middleware,\n offset,\n Placement,\n shift,\n Strategy,\n} from '@floating-ui/dom';\nimport { DesignTokenHelper } from '@kirbydesign/core';\nimport { from } from 'rxjs';\nimport { PortalDirective } from '@kirbydesign/designsystem/shared/portal';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\n\nexport type TriggerEvent = 'hover' \| 'click' \| 'focus';\n\nexport enum FloatingOffset {\n none = 0,\n small = 4,\n medium = 8,\n}\n\nexport enum OutletSelector {\n tag = 'tag',\n id = 'id',\n class = 'class',\n name = 'name',\n}\n\nexport interface PortalOutletConfig {\n selector: OutletSelector;\n value: string;\n}\n\ninterface EventMethods {\n event: string;\n method: () => void;\n}\n\n/*\n @summary FloatingDirective is a utility that lets you declarative anchor \"popup\" containers to another element.\n \n Uses floating-ui, with this directive wraps the functionality: https://floating-ui.com/docs/getting-started\n \n Uses PortalDirective to enable functionality for portaling the floated content. This should be used when needed\n * and not as the default option.\n /\n@Directive({\n selector: '[kirbyFloating]',\n providers: [PortalDirective],\n hostDirectives: [PortalDirective],\n standalone: true,\n})\nexport class FloatingDirective implements OnInit, OnDestroy {\n /\n Reference to the element for which the host should anchor to\n * /\n @Input() public set reference(ref: ElementRef<HTMLElement> \| undefined) {\n this.tearDownReferenceElementEventHandling();\n this._reference = ref;\n this.setupEventHandling();\n if (this.isShown) {\n this.autoUpdatePosition();\n }\n }\n\n public get reference(): ElementRef<HTMLElement> \| undefined {\n return this._reference;\n }\n\n /\n How the host should be placed relative to the reference. Can be affected by middleware\n * /\n @Input() public set placement(placement: Placement) {\n this._placement = placement;\n if (this.isShown) {\n this.updateHostElementPosition();\n }\n }\n\n public get placement() {\n return this._placement;\n }\n\n /\n The strategy for how the host should be positioned.\n * /\n @Input() public set strategy(strategy: Strategy) {\n this._strategy = strategy;\n if (this.isShown) {\n this.updateHostElementPosition();\n }\n }\n\n public get strategy(): Strategy {\n return this._strategy;\n }\n\n /\n Defines when the host should be displayed/hidden, i.e. click will attach a click listener to the reference\n * that makes the host toggle display. Supports multiple triggers, to provide functionality for combinations\n * like click/focus.\n * /\n @Input() public set triggers(eventTriggers: Array<TriggerEvent>) {\n this._triggers = eventTriggers;\n this.tearDownReferenceElementEventHandling();\n this.setupEventHandling();\n }\n\n public get triggers(): Array<TriggerEvent> {\n return this._triggers;\n }\n\n /\n The HTMLElement for which the content should portal into.\n * Providing an outlet enables the portal, if nothing is provided, the provided strategy is used.\n * This should be used when there's issues with the stacking context, and not as a default option.\n * /\n @Input() public set DOMPortalOutlet(outlet: HTMLElement \| undefined) {\n this._providedPortalOutlet = outlet;\n this.portalDirective.outlet =\n this.DOMPortalOutlet ?? this.getOutletElement(this.portalOutletConfig);\n }\n\n public get DOMPortalOutlet(): HTMLElement \| undefined {\n return this._providedPortalOutlet;\n }\n\n /\n Defines how to automatically find and assign DOMPortalOutlet if none is provided in DOMPortalOutlet.\n * If nothing is provided here and in DOMPortalOutlet, the provided strategy is used\n * /\n @Input() public set portalOutletConfig(config: PortalOutletConfig \| undefined) {\n this._portalOutletConfig = config;\n\n if (!this.DOMPortalOutlet) {\n this.portalDirective.outlet = this.getOutletElement(config);\n }\n }\n\n public get portalOutletConfig(): PortalOutletConfig \| undefined {\n return this._portalOutletConfig;\n }\n\n /\n Prevent host from being toggled if set.\n * /\n @Input() public isDisabled: boolean = false;\n\n /\n Displaces the floating element from its core placement along the specified axes.\n * /\n @Input() public offset: FloatingOffset = FloatingOffset.none;\n\n /\n Moves the floating element along the specified axes in order to keep it in view.\n * This does not always work as expected, so don't \"just\" set it.\n * /\n @Input() public shift: boolean = false;\n\n /\n Chooses the placement that has the most space available automatically.\n * /\n @Input() public autoPlacement: boolean = false;\n\n /\n Enables hiding the host by events. See variable names.\n * /\n @Input() public closeOnSelect: boolean = true;\n @Input() public closeOnEscapeKey: boolean = true;\n @Input() public closeOnBackdrop: boolean = true;\n\n /\n Enables the option to be notified when the host changes display. The new display value is provided.\n * /\n @Output() public displayChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n @HostListener('document:keydown.escape')\n public onEscapeKeyPressed(): void {\n if (this.closeOnEscapeKey) {\n this.hide();\n }\n }\n\n private _placement: Placement = 'bottom-start';\n\n private _strategy: Strategy = 'absolute';\n\n private _providedPortalOutlet: HTMLElement \| undefined;\n\n private _portalOutletConfig: PortalOutletConfig \| undefined;\n\n private _triggers: Array<TriggerEvent> = ['click'];\n\n private _reference: ElementRef<HTMLElement> \| undefined;\n\n private autoUpdaterRef: () => void;\n private isShown: boolean = false;\n private disposeTriggerEventListeners: EventListenerDisposeFn[] = [];\n private disposeDocumentClickListener: EventListenerDisposeFn;\n private disposeHostClickListener: EventListenerDisposeFn;\n private triggerEventMap: Map<TriggerEvent, EventMethods[]> = new Map([\n ['click', [{ event: 'click', method: this.toggleShow.bind(this) }]],\n [\n 'hover',\n [\n { event: 'mouseenter', method: this.show.bind(this) },\n { event: 'mouseleave', method: this.hide.bind(this) },\n ],\n ],\n [\n 'focus',\n [\n { event: 'focus', method: this.show.bind(this) },\n { event: 'blur', method: this.hide.bind(this) },\n ],\n ],\n ]);\n\n private HTMLElements: {\n [key in OutletSelector \| 'default']: (value?: string) => Array<Element> \| null;\n } = {\n id: (value) => Array.of(document.getElementById(value)),\n class: (value) => Array.from(document.getElementsByClassName(value)),\n name: (value) => Array.from(document.getElementsByName(value)),\n tag: (value) => Array.from(document.getElementsByTagName(value)),\n default: () => null,\n };\n\n public constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2,\n private portalDirective: PortalDirective\n ) {}\n\n public ngOnInit(): void {\n this.addFloatStylingToHostElement();\n }\n\n / Should be accessible for programmatically setting display /\n public show(): void {\n if (this.isDisabled) {\n return;\n }\n\n this.attachDocumentClickEventHandler();\n this.attachHostClickEventHandler();\n this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'block');\n this.isShown = true;\n this.autoUpdatePosition();\n this.displayChanged.emit(this.isShown);\n }\n\n / Should be accessible for programmatically setting display /\n public hide(): void {\n if (this.isDisabled \|\| !this.isShown) {\n return;\n }\n\n this.removeAutoUpdaterRef();\n this.tearDownDocumentClickEventHandling();\n this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');\n this.isShown = false;\n this.displayChanged.emit(this.isShown);\n }\n\n / Should be accessible for programmatically setting display /\n public toggleShow(): void {\n if (this.isShown) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n private addFloatStylingToHostElement(): void {\n this.renderer.setStyle(this.elementRef.nativeElement, 'left', `0px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'top', `0px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'position', this.strategy);\n this.renderer.setStyle(\n this.elementRef.nativeElement,\n 'z-index',\n DesignTokenHelper.zLayer('popover')\n );\n this.setDisplayStyling();\n }\n\n private setDisplayStyling(): void {\n this.renderer.setStyle(\n this.elementRef.nativeElement,\n 'display',\n this.isShown ? `block` : `none`\n );\n }\n\n private updateHostElementPosition(): void {\n if (!this.reference) {\n return;\n }\n\n const config: ComputePositionConfig = {\n placement: this.placement,\n middleware: this.getMiddlewareConfig(),\n strategy: this.strategy,\n } as ComputePositionConfig;\n\n from(\n computePosition(this.reference?.nativeElement, this.elementRef.nativeElement, config)\n ).subscribe(({ x, y }) => this.setPositionStylingOnHostElement(x, y));\n }\n\n private getMiddlewareConfig(): Array<Middleware \| null \| undefined \| false> {\n const middleware: Array<Middleware \| null \| undefined \| false> = [];\n middleware.push(offset(this.offset));\n middleware.push(flip());\n\n if (this.shift) {\n middleware.push(shift({ padding: parseInt(DesignTokenHelper.size('s')) }));\n }\n\n if (this.autoPlacement) {\n middleware.push(autoPlacement());\n }\n\n return middleware;\n }\n\n private autoUpdatePosition(): void {\n this.removeAutoUpdaterRef();\n\n if (!this.reference) {\n return;\n }\n\n this.autoUpdaterRef = autoUpdate(\n this.reference?.nativeElement,\n this.elementRef.nativeElement,\n this.updateHostElementPosition.bind(this)\n );\n }\n\n private setPositionStylingOnHostElement(xPosition: number, yPosition: number): void {\n this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${xPosition}px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${yPosition}px`);\n this.setDisplayStyling();\n }\n\n private setupEventHandling(): void {\n if (!this.reference \|\| !this.triggers) {\n return;\n }\n\n this.triggers.forEach((trigger: TriggerEvent) =>\n this.attachTriggerEventToReferenceElement(trigger)\n );\n }\n\n private attachDocumentClickEventHandler(): void {\n if (this.disposeDocumentClickListener) {\n return;\n }\n\n this.disposeDocumentClickListener = this.renderer.listen('document', 'mousedown', (event) =>\n this.handleClickOutsideHostElement(event)\n );\n }\n\n private attachHostClickEventHandler(): void {\n if (this.disposeHostClickListener \|\| !this.closeOnSelect) {\n return;\n }\n\n this.disposeHostClickListener = this.renderer.listen(\n this.elementRef.nativeElement,\n 'click',\n () => this.handleClickInsideHostElement()\n );\n }\n\n private attachTriggerEventToReferenceElement(trigger: TriggerEvent): void {\n const events: EventMethods[] \| undefined = this.triggerEventMap.get(trigger);\n\n if (!events) {\n throw new Error(`${trigger} is missing event definition(s)`);\n }\n\n events.forEach((event: EventMethods) => {\n const disposeTriggerEventListener: EventListenerDisposeFn = this.renderer.listen(\n this.reference?.nativeElement,\n event.event,\n event.method\n );\n this.disposeTriggerEventListeners.push(disposeTriggerEventListener);\n });\n }\n\n private handleClickInsideHostElement(): void {\n if (this.closeOnSelect) {\n this.hide();\n }\n }\n\n private handleClickOutsideHostElement(event: Event): void {\n if (event.target instanceof Node) {\n const clickedOnHost: boolean = this.elementRef.nativeElement.contains(event.target);\n if (clickedOnHost) return;\n\n const clickedOnReferenceWithClickTriggerEnabled: boolean =\n this.reference?.nativeElement.contains(event.target) && this.triggers.includes('click');\n\n if (this.closeOnBackdrop && !clickedOnReferenceWithClickTriggerEnabled) {\n this.hide();\n }\n }\n }\n\n private getOutletElement(config: PortalOutletConfig \| undefined): HTMLElement \| null {\n if (!config \|\| !config.selector \|\| !config.value) {\n return null;\n }\n\n const elements: Array<Element> \| null = this.getHTMLElements(config);\n\n if (!elements \|\| elements.length === 0) {\n throw Error(`Could not locate HTMLElement for ${config.selector}. Did you misspell it?`);\n }\n\n if (elements.length > 1) {\n throw Error(\n `Multiple HTMLElements found for ${config.selector}.\n This can lead to unintended behaviours. Provide an unique outlet`\n );\n }\n\n return elements[0] as HTMLElement;\n }\n\n private getHTMLElements(config: PortalOutletConfig \| undefined): Array<Element> \| null {\n return (\n this.HTMLElements[config.selector](config.value) \|\| this.HTMLElements['default'](config.value)\n );\n }\n\n private tearDownReferenceElementEventHandling(): void {\n this.disposeTriggerEventListeners.forEach((disposeTriggerEventListener) =>\n disposeTriggerEventListener?.()\n );\n this.disposeTriggerEventListeners = [];\n }\n\n private tearDownDocumentClickEventHandling(): void {\n if (this.disposeDocumentClickListener) {\n this.disposeDocumentClickListener();\n this.disposeDocumentClickListener = null;\n }\n\n if (this.disposeHostClickListener) {\n this.disposeHostClickListener();\n this.disposeHostClickListener = null;\n }\n }\n\n private removeAutoUpdaterRef(): void {\n if (this.autoUpdaterRef) {\n this.autoUpdaterRef();\n }\n }\n\n public ngOnDestroy() {\n this.tearDownDocumentClickEventHandling();\n this.tearDownReferenceElementEventHandling();\n this.removeAutoUpdaterRef();\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;;IA8BY;AAAZ,CAAA,UAAY,cAAc,EAAA;AACxB,IAAA,cAAA,CAAA,cAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAQ;AACR,IAAA,cAAA,CAAA,cAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAS;AACT,IAAA,cAAA,CAAA,cAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAU;AACZ,CAAC,EAJW,cAAc,KAAd,cAAc,GAAA,EAAA,CAAA,CAAA;IAMd;AAAZ,CAAA,UAAY,cAAc,EAAA;AACxB,IAAA,cAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACX,IAAA,cAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,cAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,cAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EALW,cAAc,KAAd,cAAc,GAAA,EAAA,CAAA,CAAA;AAiB1B;;;;;;;AAOG;MAOU,iBAAiB,CAAA;AAC5B;;AAEK;IACL,IAAoB,SAAS,CAAC,GAAwC,EAAA;QACpE,IAAI,CAAC,qCAAqC,EAAE;AAC5C,QAAA,IAAI,CAAC,UAAU,GAAG,GAAG;QACrB,IAAI,CAAC,kBAAkB,EAAE;AACzB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,kBAAkB,EAAE;QAC3B;IACF;AAEA,IAAA,IAAW,SAAS,GAAA;QAClB,OAAO,IAAI,CAAC,UAAU;IACxB;AAEA;;AAEK;IACL,IAAoB,SAAS,CAAC,SAAoB,EAAA;AAChD,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS;AAC3B,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,yBAAyB,EAAE;QAClC;IACF;AAEA,IAAA,IAAW,SAAS,GAAA;QAClB,OAAO,IAAI,CAAC,UAAU;IACxB;AAEA;;AAEK;IACL,IAAoB,QAAQ,CAAC,QAAkB,EAAA;AAC7C,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;AACzB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,yBAAyB,EAAE;QAClC;IACF;AAEA,IAAA,IAAW,QAAQ,GAAA;QACjB,OAAO,IAAI,CAAC,SAAS;IACvB;AAEA;;;;AAIK;IACL,IAAoB,QAAQ,CAAC,aAAkC,EAAA;AAC7D,QAAA,IAAI,CAAC,SAAS,GAAG,aAAa;QAC9B,IAAI,CAAC,qCAAqC,EAAE;QAC5C,IAAI,CAAC,kBAAkB,EAAE;IAC3B;AAEA,IAAA,IAAW,QAAQ,GAAA;QACjB,OAAO,IAAI,CAAC,SAAS;IACvB;AAEA;;;;AAIK;IACL,IAAoB,eAAe,CAAC,MAA+B,EAAA;AACjE,QAAA,IAAI,CAAC,qBAAqB,GAAG,MAAM;QACnC,IAAI,CAAC,eAAe,CAAC,MAAM;YACzB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC;IAC1E;AAEA,IAAA,IAAW,eAAe,GAAA;QACxB,OAAO,IAAI,CAAC,qBAAqB;IACnC;AAEA;;;AAGK;IACL,IAAoB,kBAAkB,CAAC,MAAsC,EAAA;AAC3E,QAAA,IAAI,CAAC,mBAAmB,GAAG,MAAM;AAEjC,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;QAC7D;IACF;AAEA,IAAA,IAAW,kBAAkB,GAAA;QAC3B,OAAO,IAAI,CAAC,mBAAmB;IACjC;IAoCO,kBAAkB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,IAAI,CAAC,IAAI,EAAE;QACb;IACF;AA+CA,IAAA,WAAA,CACU,UAAmC,EACnC,QAAmB,EACnB,eAAgC,EAAA;QAFhC,IAAA,CAAA,UAAU,GAAV,UAAU;QACV,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACR,IAAA,CAAA,eAAe,GAAf,eAAe;AAxFzB;;AAEK;QACW,IAAA,CAAA,UAAU,GAAY,KAAK;AAE3C;;AAEK;AACW,QAAA,IAAA,CAAA,MAAM,GAAmB,cAAc,CAAC,IAAI;AAE5D;;;AAGK;QACW,IAAA,CAAA,KAAK,GAAY,KAAK;AAEtC;;AAEK;QACW,IAAA,CAAA,aAAa,GAAY,KAAK;AAE9C;;AAEK;QACW,IAAA,CAAA,aAAa,GAAY,IAAI;QAC7B,IAAA,CAAA,gBAAgB,GAAY,IAAI;QAChC,IAAA,CAAA,eAAe,GAAY,IAAI;AAE/C;;AAEK;AACY,QAAA,IAAA,CAAA,cAAc,GAA0B,IAAI,YAAY,EAAW;QAS5E,IAAA,CAAA,UAAU,GAAc,cAAc;QAEtC,IAAA,CAAA,SAAS,GAAa,UAAU;AAMhC,QAAA,IAAA,CAAA,SAAS,GAAwB,CAAC,OAAO,CAAC;QAK1C,IAAA,CAAA,OAAO,GAAY,KAAK;QACxB,IAAA,CAAA,4BAA4B,GAA6B,EAAE;QAG3D,IAAA,CAAA,eAAe,GAAsC,IAAI,GAAG,CAAC;YACnE,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnE,YAAA;gBACE,OAAO;AACP,gBAAA;AACE,oBAAA,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AACrD,oBAAA,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AACtD,iBAAA;AACF,aAAA;AACD,YAAA;gBACE,OAAO;AACP,gBAAA;AACE,oBAAA,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AAChD,oBAAA,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AAChD,iBAAA;AACF,aAAA;AACF,SAAA,CAAC;AAEM,QAAA,IAAA,CAAA,YAAY,GAEhB;AACF,YAAA,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AACvD,YAAA,KAAK,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;AACpE,YAAA,IAAI,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAC9D,YAAA,GAAG,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;AAChE,YAAA,OAAO,EAAE,MAAM,IAAI;SACpB;IAME;IAEI,QAAQ,GAAA;QACb,IAAI,CAAC,4BAA4B,EAAE;IACrC;;IAGO,IAAI,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB;QACF;QAEA,IAAI,CAAC,+BAA+B,EAAE;QACtC,IAAI,CAAC,2BAA2B,EAAE;AAClC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,SAAS,EAAE,OAAO,CAAC;AACzE,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;QACnB,IAAI,CAAC,kBAAkB,EAAE;QACzB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IACxC;;IAGO,IAAI,GAAA;QACT,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACpC;QACF;QAEA,IAAI,CAAC,oBAAoB,EAAE;QAC3B,IAAI,CAAC,kCAAkC,EAAE;AACzC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC;AACxE,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;QACpB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IACxC;;IAGO,UAAU,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,EAAE;QACb;aAAO;YACL,IAAI,CAAC,IAAI,EAAE;QACb;IACF;IAEQ,4BAA4B,GAAA;AAClC,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,MAAM,EAAE,CAAA,GAAA,CAAK,CAAC;AACpE,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,KAAK,EAAE,CAAA,GAAA,CAAK,CAAC;AACnE,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC;QAChF,IAAI,CAAC,QAAQ,CAAC,QAAQ,CACpB,IAAI,CAAC,UAAU,CAAC,aAAa,EAC7B,SAAS,EACT,iBAAiB,CAAC,MAAM,CAAC,SAAS,CAAC,CACpC;QACD,IAAI,CAAC,iBAAiB,EAAE;IAC1B;IAEQ,iBAAiB,GAAA;QACvB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CACpB,IAAI,CAAC,UAAU,CAAC,aAAa,EAC7B,SAAS,EACT,IAAI,CAAC,OAAO,GAAG,CAAA,KAAA,CAAO,GAAG,CAAA,IAAA,CAAM,CAChC;IACH;IAEQ,yBAAyB,GAAA;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB;QACF;AAEA,QAAA,MAAM,MAAM,GAA0B;YACpC,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,UAAU,EAAE,IAAI,CAAC,mBAAmB,EAAE;YACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACC;AAE1B,QAAA,IAAI,CACF,eAAe,CAAC,IAAI,CAAC,SAAS,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,MAAM,CAAC,CACtF,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,+BAA+B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACvE;IAEQ,mBAAmB,GAAA;QACzB,MAAM,UAAU,GAAiD,EAAE;QACnE,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACpC,QAAA,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AAEvB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;QAC5E;AAEA,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,UAAU,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAClC;AAEA,QAAA,OAAO,UAAU;IACnB;IAEQ,kBAAkB,GAAA;QACxB,IAAI,CAAC,oBAAoB,EAAE;AAE3B,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB;QACF;QAEA,IAAI,CAAC,cAAc,GAAG,UAAU,CAC9B,IAAI,CAAC,SAAS,EAAE,aAAa,EAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,EAC7B,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,CAC1C;IACH;IAEQ,+BAA+B,CAAC,SAAiB,EAAE,SAAiB,EAAA;AAC1E,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA,EAAA,CAAI,CAAC;AAC/E,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,KAAK,EAAE,GAAG,SAAS,CAAA,EAAA,CAAI,CAAC;QAC9E,IAAI,CAAC,iBAAiB,EAAE;IAC1B;IAEQ,kBAAkB,GAAA;QACxB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACrC;QACF;AAEA,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAqB,KAC1C,IAAI,CAAC,oCAAoC,CAAC,OAAO,CAAC,CACnD;IACH;IAEQ,+BAA+B,GAAA;AACrC,QAAA,IAAI,IAAI,CAAC,4BAA4B,EAAE;YACrC;QACF;QAEA,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,WAAW,EAAE,CAAC,KAAK,KACtF,IAAI,CAAC,6BAA6B,CAAC,KAAK,CAAC,CAC1C;IACH;IAEQ,2BAA2B,GAAA;QACjC,IAAI,IAAI,CAAC,wBAAwB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACxD;QACF;QAEA,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAClD,IAAI,CAAC,UAAU,CAAC,aAAa,EAC7B,OAAO,EACP,MAAM,IAAI,CAAC,4BAA4B,EAAE,CAC1C;IACH;AAEQ,IAAA,oCAAoC,CAAC,OAAqB,EAAA;QAChE,MAAM,MAAM,GAA+B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC;QAE5E,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,MAAM,IAAI,KAAK,CAAC,GAAG,OAAO,CAAA,+BAAA,CAAiC,CAAC;QAC9D;AAEA,QAAA,MAAM,CAAC,OAAO,CAAC,CAAC,KAAmB,KAAI;YACrC,MAAM,2BAA2B,GAA2B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAC9E,IAAI,CAAC,SAAS,EAAE,aAAa,EAC7B,KAAK,CAAC,KAAK,EACX,KAAK,CAAC,MAAM,CACb;AACD,YAAA,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,2BAA2B,CAAC;AACrE,QAAA,CAAC,CAAC;IACJ;IAEQ,4BAA4B,GAAA;AAClC,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,IAAI,EAAE;QACb;IACF;AAEQ,IAAA,6BAA6B,CAAC,KAAY,EAAA;AAChD,QAAA,IAAI,KAAK,CAAC,MAAM,YAAY,IAAI,EAAE;AAChC,YAAA,MAAM,aAAa,GAAY,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;AACnF,YAAA,IAAI,aAAa;gBAAE;YAEnB,MAAM,yCAAyC,GAC7C,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC;AAEzF,YAAA,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,yCAAyC,EAAE;gBACtE,IAAI,CAAC,IAAI,EAAE;YACb;QACF;IACF;AAEQ,IAAA,gBAAgB,CAAC,MAAsC,EAAA;AAC7D,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;AAChD,YAAA,OAAO,IAAI;QACb;QAEA,MAAM,QAAQ,GAA0B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC;QAEpE,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;YACtC,MAAM,KAAK,CAAC,CAAA,iCAAA,EAAoC,MAAM,CAAC,QAAQ,CAAA,sBAAA,CAAwB,CAAC;QAC1F;AAEA,QAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AACvB,YAAA,MAAM,KAAK,CACT,CAAA,gCAAA,EAAmC,MAAM,CAAC,QAAQ,CAAA;AACgB,yEAAA,CAAA,CACnE;QACH;AAEA,QAAA,OAAO,QAAQ,CAAC,CAAC,CAAgB;IACnC;AAEQ,IAAA,eAAe,CAAC,MAAsC,EAAA;QAC5D,QACE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IAElG;IAEQ,qCAAqC,GAAA;AAC3C,QAAA,IAAI,CAAC,4BAA4B,CAAC,OAAO,CAAC,CAAC,2BAA2B,KACpE,2BAA2B,IAAI,CAChC;AACD,QAAA,IAAI,CAAC,4BAA4B,GAAG,EAAE;IACxC;IAEQ,kCAAkC,GAAA;AACxC,QAAA,IAAI,IAAI,CAAC,4BAA4B,EAAE;YACrC,IAAI,CAAC,4BAA4B,EAAE;AACnC,YAAA,IAAI,CAAC,4BAA4B,GAAG,IAAI;QAC1C;AAEA,QAAA,IAAI,IAAI,CAAC,wBAAwB,EAAE;YACjC,IAAI,CAAC,wBAAwB,EAAE;AAC/B,YAAA,IAAI,CAAC,wBAAwB,GAAG,IAAI;QACtC;IACF;IAEQ,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,EAAE;QACvB;IACF;IAEO,WAAW,GAAA;QAChB,IAAI,CAAC,kCAAkC,EAAE;QACzC,IAAI,CAAC,qCAAqC,EAAE;QAC5C,IAAI,CAAC,oBAAoB,EAAE;IAC7B;iIAnaW,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;qHAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,OAAA,EAAA,aAAA,EAAA,eAAA,EAAA,aAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,yBAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,SAAA,EAJjB,CAAC,eAAe,CAAC,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,eAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAIjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;oBAC3B,SAAS,EAAE,CAAC,eAAe,CAAC;oBAC5B,cAAc,EAAE,CAAC,eAAe,CAAC;AACjC,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;sBAKE;;sBAgBA;;sBAcA;;sBAgBA;;sBAeA;;sBAcA;;sBAeA;;sBAKA;;sBAMA;;sBAKA;;sBAKA;;sBACA;;sBACA;;sBAKA;;sBAEA,YAAY;uBAAC,yBAAyB;;;AC/LzC;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-shared-floating.mjs","sources":["../../shared/floating/src/floating.directive.ts","../../shared/floating/src/kirbydesign-designsystem-shared-floating.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnDestroy,\n OnInit,\n Output,\n Renderer2,\n} from '@angular/core';\nimport {\n autoPlacement,\n autoUpdate,\n computePosition,\n ComputePositionConfig,\n flip,\n Middleware,\n offset,\n Placement,\n shift,\n Strategy,\n} from '@floating-ui/dom';\nimport { DesignTokenHelper } from '@kirbydesign/core';\nimport { from } from 'rxjs';\nimport { PortalDirective } from '@kirbydesign/designsystem/shared/portal';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\n\nexport type TriggerEvent = 'hover' \| 'click' \| 'focus';\n\nexport enum FloatingOffset {\n none = 0,\n small = 4,\n medium = 8,\n}\n\nexport enum OutletSelector {\n tag = 'tag',\n id = 'id',\n class = 'class',\n name = 'name',\n}\n\nexport interface PortalOutletConfig {\n selector: OutletSelector;\n value: string;\n}\n\ninterface EventMethods {\n event: string;\n method: () => void;\n}\n\n/*\n @summary FloatingDirective is a utility that lets you declarative anchor \"popup\" containers to another element.\n \n Uses floating-ui, with this directive wraps the functionality: https://floating-ui.com/docs/getting-started\n \n Uses PortalDirective to enable functionality for portaling the floated content. This should be used when needed\n * and not as the default option.\n /\n@Directive({\n selector: '[kirbyFloating]',\n providers: [PortalDirective],\n hostDirectives: [PortalDirective],\n standalone: true,\n})\nexport class FloatingDirective implements OnInit, OnDestroy {\n /\n Reference to the element for which the host should anchor to\n * /\n @Input() public set reference(ref: ElementRef<HTMLElement> \| undefined) {\n this.tearDownReferenceElementEventHandling();\n this._reference = ref;\n this.setupEventHandling();\n if (this.isShown) {\n this.autoUpdatePosition();\n }\n }\n\n public get reference(): ElementRef<HTMLElement> \| undefined {\n return this._reference;\n }\n\n /\n How the host should be placed relative to the reference. Can be affected by middleware\n * /\n @Input() public set placement(placement: Placement) {\n this._placement = placement;\n if (this.isShown) {\n this.updateHostElementPosition();\n }\n }\n\n public get placement() {\n return this._placement;\n }\n\n /\n The strategy for how the host should be positioned.\n * /\n @Input() public set strategy(strategy: Strategy) {\n this._strategy = strategy;\n if (this.isShown) {\n this.updateHostElementPosition();\n }\n }\n\n public get strategy(): Strategy {\n return this._strategy;\n }\n\n /\n Defines when the host should be displayed/hidden, i.e. click will attach a click listener to the reference\n * that makes the host toggle display. Supports multiple triggers, to provide functionality for combinations\n * like click/focus.\n * /\n @Input() public set triggers(eventTriggers: Array<TriggerEvent>) {\n this._triggers = eventTriggers;\n this.tearDownReferenceElementEventHandling();\n this.setupEventHandling();\n }\n\n public get triggers(): Array<TriggerEvent> {\n return this._triggers;\n }\n\n /\n The HTMLElement for which the content should portal into.\n * Providing an outlet enables the portal, if nothing is provided, the provided strategy is used.\n * This should be used when there's issues with the stacking context, and not as a default option.\n * /\n @Input() public set DOMPortalOutlet(outlet: HTMLElement \| undefined) {\n this._providedPortalOutlet = outlet;\n this.portalDirective.outlet =\n this.DOMPortalOutlet ?? this.getOutletElement(this.portalOutletConfig);\n }\n\n public get DOMPortalOutlet(): HTMLElement \| undefined {\n return this._providedPortalOutlet;\n }\n\n /\n Defines how to automatically find and assign DOMPortalOutlet if none is provided in DOMPortalOutlet.\n * If nothing is provided here and in DOMPortalOutlet, the provided strategy is used\n * /\n @Input() public set portalOutletConfig(config: PortalOutletConfig \| undefined) {\n this._portalOutletConfig = config;\n\n if (!this.DOMPortalOutlet) {\n this.portalDirective.outlet = this.getOutletElement(config);\n }\n }\n\n public get portalOutletConfig(): PortalOutletConfig \| undefined {\n return this._portalOutletConfig;\n }\n\n /\n Prevent host from being toggled if set.\n * /\n @Input() public isDisabled: boolean = false;\n\n /\n Displaces the floating element from its core placement along the specified axes.\n * /\n @Input() public offset: FloatingOffset = FloatingOffset.none;\n\n /\n Moves the floating element along the specified axes in order to keep it in view.\n * This does not always work as expected, so don't \"just\" set it.\n * /\n @Input() public shift: boolean = false;\n\n /\n Chooses the placement that has the most space available automatically.\n * /\n @Input() public autoPlacement: boolean = false;\n\n /\n Enables hiding the host by events. See variable names.\n * /\n @Input() public closeOnSelect: boolean = true;\n @Input() public closeOnEscapeKey: boolean = true;\n @Input() public closeOnBackdrop: boolean = true;\n\n /\n Enables the option to be notified when the host changes display. The new display value is provided.\n * /\n @Output() public displayChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n @HostListener('document:keydown.escape')\n public onEscapeKeyPressed(): void {\n if (this.closeOnEscapeKey) {\n this.hide();\n }\n }\n\n private _placement: Placement = 'bottom-start';\n\n private _strategy: Strategy = 'absolute';\n\n private _providedPortalOutlet: HTMLElement \| undefined;\n\n private _portalOutletConfig: PortalOutletConfig \| undefined;\n\n private _triggers: Array<TriggerEvent> = ['click'];\n\n private _reference: ElementRef<HTMLElement> \| undefined;\n\n private autoUpdaterRef: () => void;\n private isShown: boolean = false;\n private disposeTriggerEventListeners: EventListenerDisposeFn[] = [];\n private disposeDocumentClickListener: EventListenerDisposeFn;\n private disposeHostClickListener: EventListenerDisposeFn;\n private triggerEventMap: Map<TriggerEvent, EventMethods[]> = new Map([\n ['click', [{ event: 'click', method: this.toggleShow.bind(this) }]],\n [\n 'hover',\n [\n { event: 'mouseenter', method: this.show.bind(this) },\n { event: 'mouseleave', method: this.hide.bind(this) },\n ],\n ],\n [\n 'focus',\n [\n { event: 'focus', method: this.show.bind(this) },\n { event: 'blur', method: this.hide.bind(this) },\n ],\n ],\n ]);\n\n private HTMLElements: {\n [key in OutletSelector \| 'default']: (value?: string) => Array<Element> \| null;\n } = {\n id: (value) => Array.of(document.getElementById(value)),\n class: (value) => Array.from(document.getElementsByClassName(value)),\n name: (value) => Array.from(document.getElementsByName(value)),\n tag: (value) => Array.from(document.getElementsByTagName(value)),\n default: () => null,\n };\n\n public constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2,\n private portalDirective: PortalDirective\n ) {}\n\n public ngOnInit(): void {\n this.addFloatStylingToHostElement();\n }\n\n / Should be accessible for programmatically setting display /\n public show(): void {\n if (this.isDisabled) {\n return;\n }\n\n this.attachDocumentClickEventHandler();\n this.attachHostClickEventHandler();\n this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'block');\n this.isShown = true;\n this.autoUpdatePosition();\n this.displayChanged.emit(this.isShown);\n }\n\n / Should be accessible for programmatically setting display /\n public hide(): void {\n if (this.isDisabled \|\| !this.isShown) {\n return;\n }\n\n this.removeAutoUpdaterRef();\n this.tearDownDocumentClickEventHandling();\n this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');\n this.isShown = false;\n this.displayChanged.emit(this.isShown);\n }\n\n / Should be accessible for programmatically setting display /\n public toggleShow(): void {\n if (this.isShown) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n private addFloatStylingToHostElement(): void {\n this.renderer.setStyle(this.elementRef.nativeElement, 'left', `0px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'top', `0px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'position', this.strategy);\n this.renderer.setStyle(\n this.elementRef.nativeElement,\n 'z-index',\n DesignTokenHelper.zLayer('popover')\n );\n this.setDisplayStyling();\n }\n\n private setDisplayStyling(): void {\n this.renderer.setStyle(\n this.elementRef.nativeElement,\n 'display',\n this.isShown ? `block` : `none`\n );\n }\n\n private updateHostElementPosition(): void {\n if (!this.reference) {\n return;\n }\n\n const config: ComputePositionConfig = {\n placement: this.placement,\n middleware: this.getMiddlewareConfig(),\n strategy: this.strategy,\n } as ComputePositionConfig;\n\n from(\n computePosition(this.reference?.nativeElement, this.elementRef.nativeElement, config)\n ).subscribe(({ x, y }) => this.setPositionStylingOnHostElement(x, y));\n }\n\n private getMiddlewareConfig(): Array<Middleware \| null \| undefined \| false> {\n const middleware: Array<Middleware \| null \| undefined \| false> = [];\n middleware.push(offset(this.offset));\n middleware.push(flip());\n\n if (this.shift) {\n middleware.push(shift({ padding: parseInt(DesignTokenHelper.size('s')) }));\n }\n\n if (this.autoPlacement) {\n middleware.push(autoPlacement());\n }\n\n return middleware;\n }\n\n private autoUpdatePosition(): void {\n this.removeAutoUpdaterRef();\n\n if (!this.reference) {\n return;\n }\n\n this.autoUpdaterRef = autoUpdate(\n this.reference?.nativeElement,\n this.elementRef.nativeElement,\n this.updateHostElementPosition.bind(this)\n );\n }\n\n private setPositionStylingOnHostElement(xPosition: number, yPosition: number): void {\n this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${xPosition}px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${yPosition}px`);\n this.setDisplayStyling();\n }\n\n private setupEventHandling(): void {\n if (!this.reference \|\| !this.triggers) {\n return;\n }\n\n this.triggers.forEach((trigger: TriggerEvent) =>\n this.attachTriggerEventToReferenceElement(trigger)\n );\n }\n\n private attachDocumentClickEventHandler(): void {\n if (this.disposeDocumentClickListener) {\n return;\n }\n\n this.disposeDocumentClickListener = this.renderer.listen('document', 'mousedown', (event) =>\n this.handleClickOutsideHostElement(event)\n );\n }\n\n private attachHostClickEventHandler(): void {\n if (this.disposeHostClickListener \|\| !this.closeOnSelect) {\n return;\n }\n\n this.disposeHostClickListener = this.renderer.listen(\n this.elementRef.nativeElement,\n 'click',\n () => this.handleClickInsideHostElement()\n );\n }\n\n private attachTriggerEventToReferenceElement(trigger: TriggerEvent): void {\n const events: EventMethods[] \| undefined = this.triggerEventMap.get(trigger);\n\n if (!events) {\n throw new Error(`${trigger} is missing event definition(s)`);\n }\n\n events.forEach((event: EventMethods) => {\n const disposeTriggerEventListener: EventListenerDisposeFn = this.renderer.listen(\n this.reference?.nativeElement,\n event.event,\n event.method\n );\n this.disposeTriggerEventListeners.push(disposeTriggerEventListener);\n });\n }\n\n private handleClickInsideHostElement(): void {\n if (this.closeOnSelect) {\n this.hide();\n }\n }\n\n private handleClickOutsideHostElement(event: Event): void {\n if (event.target instanceof Node) {\n const clickedOnHost: boolean = this.elementRef.nativeElement.contains(event.target);\n if (clickedOnHost) return;\n\n const clickedOnReferenceWithClickTriggerEnabled: boolean =\n this.reference?.nativeElement.contains(event.target) && this.triggers.includes('click');\n\n if (this.closeOnBackdrop && !clickedOnReferenceWithClickTriggerEnabled) {\n this.hide();\n }\n }\n }\n\n private getOutletElement(config: PortalOutletConfig \| undefined): HTMLElement \| null {\n if (!config \|\| !config.selector \|\| !config.value) {\n return null;\n }\n\n const elements: Array<Element> \| null = this.getHTMLElements(config);\n\n if (!elements \|\| elements.length === 0) {\n throw Error(`Could not locate HTMLElement for ${config.selector}. Did you misspell it?`);\n }\n\n if (elements.length > 1) {\n throw Error(\n `Multiple HTMLElements found for ${config.selector}.\n This can lead to unintended behaviours. Provide an unique outlet`\n );\n }\n\n return elements[0] as HTMLElement;\n }\n\n private getHTMLElements(config: PortalOutletConfig \| undefined): Array<Element> \| null {\n return (\n this.HTMLElements[config.selector](config.value) \|\| this.HTMLElements['default'](config.value)\n );\n }\n\n private tearDownReferenceElementEventHandling(): void {\n this.disposeTriggerEventListeners.forEach((disposeTriggerEventListener) =>\n disposeTriggerEventListener?.()\n );\n this.disposeTriggerEventListeners = [];\n }\n\n private tearDownDocumentClickEventHandling(): void {\n if (this.disposeDocumentClickListener) {\n this.disposeDocumentClickListener();\n this.disposeDocumentClickListener = null;\n }\n\n if (this.disposeHostClickListener) {\n this.disposeHostClickListener();\n this.disposeHostClickListener = null;\n }\n }\n\n private removeAutoUpdaterRef(): void {\n if (this.autoUpdaterRef) {\n this.autoUpdaterRef();\n }\n }\n\n public ngOnDestroy() {\n this.tearDownDocumentClickEventHandling();\n this.tearDownReferenceElementEventHandling();\n this.removeAutoUpdaterRef();\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-shared-portal.mjs CHANGED Viewed

@@ -33,9 +33,10 @@ class PortalDirective extends CdkPortalOutlet {
         }
         super.portal = portal;
     }
-    constructor(elementRef, viewContainerRef) {
-        super();
+    constructor(elementRef, componentFactoryResolver, viewContainerRef) {
+        super(componentFactoryResolver, viewContainerRef);
         this.elementRef = elementRef;
+        this.componentFactoryResolver = componentFactoryResolver;
         this.viewContainerRef = viewContainerRef;
         /**
          * Nearly identical to super class, yet we want to use provided outlet instead of directive host as new content
@@ -63,16 +64,16 @@ class PortalDirective extends CdkPortalOutlet {
             });
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: PortalDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: PortalDirective, isStandalone: true, selector: "[kirbyPortal]", inputs: { outlet: "outlet" }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PortalDirective, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: PortalDirective, isStandalone: true, selector: "[kirbyPortal]", inputs: { outlet: "outlet" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: PortalDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PortalDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyPortal]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { outlet: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }], propDecorators: { outlet: [{
                 type: Input
             }] } });

package/fesm2022/kirbydesign-designsystem-shared-portal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-shared-portal.mjs","sources":["../../shared/portal/src/portal.directive.ts","../../shared/portal/src/kirbydesign-designsystem-shared-portal.ts"],"sourcesContent":["import { CdkPortalOutlet, DomPortal, Portal } from '@angular/cdk/portal';\nimport { Directive, ElementRef, Input, ViewContainerRef } from '@angular/core';\n\n/*\n @summary PortalDirective is a utility that lets you portal the host element into another DOM element.\n * This is designed to be beneficial when there's issues with the stacking context.\n \n Extends CdkPortalOutlet to gain functionality for attaching/detaching the host element, and for proper cleanup.\n \n Using portal directive to reposition HTML elements, might break angular functionality and/or styling, so use\n * with care.\n /\n@Directive({\n selector: '[kirbyPortal]',\n standalone: true,\n})\nexport class PortalDirective extends CdkPortalOutlet {\n private _outlet: HTMLElement \| undefined;\n\n /* The DOM element for which the host element should be appended as a child. /\n @Input() public set outlet(outlet: HTMLElement \| undefined) {\n this._outlet = outlet;\n\n if (this.outlet) {\n this.portal = new DomPortal(this.elementRef);\n }\n }\n\n public get outlet(): HTMLElement \| undefined {\n return this._outlet;\n }\n\n /\n Override portal to handle if user provides a portal of another type than DOMPortal, which CdkPortal would\n * otherwise allow. This can be modified to handle other portal types in the future, should the need arise\n /\n public override set portal(portal: Portal<unknown> \| null) {\n const isDOMPortal: boolean = portal instanceof DomPortal;\n\n if (!isDOMPortal) {\n throw Error(`Portal type ${portal} is not supported`);\n }\n\n super.portal = portal;\n }\n\n public constructor(\n private elementRef: ElementRef,\n private viewContainerRef: ViewContainerRef\n ) {\n super();\n }\n\n /\n Nearly identical to super class, yet we want to use provided outlet instead of directive host as new content\n * parent which is otherwise the default for CdKPortal\n /\n public override attachDomPortal = (portal: DomPortal): void => {\n if (!this.outlet) {\n throw Error('Outlet must be defined!');\n }\n\n const { element } = portal;\n\n if (!element.parentNode) {\n throw Error('DOM portal content must be attached to a parent node.');\n }\n\n // Anchor used to save the element's previous position so\n // that we can restore it when the portal is detached.\n const anchorNode = document.createComment('dom-portal');\n\n portal.setAttachedHost(this);\n element.parentNode.insertBefore(anchorNode, element);\n this.outlet.appendChild(element);\n this._attachedPortal = portal;\n\n super.setDisposeFn(() => {\n if (anchorNode.parentNode) {\n anchorNode.parentNode.replaceChild(element, anchorNode);\n }\n });\n };\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;~~AAGA~~;;;;;;;;AAQG;AAKG,MAAO,eAAgB,SAAQ,eAAe,CAAA;;IAIlD,IAAoB,MAAM,CAAC,MAA+B,EAAA;AACxD,QAAA,IAAI,CAAC,OAAO,GAAG,MAAM;AAErB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;QAC9C;IACF;AAEA,IAAA,IAAW,MAAM,GAAA;QACf,OAAO,IAAI,CAAC,OAAO;IACrB;AAEA;;;AAGG;IACH,IAAoB,MAAM,CAAC,MAA8B,EAAA;AACvD,QAAA,MAAM,WAAW,GAAY,MAAM,YAAY,SAAS;QAExD,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,KAAK,CAAC,CAAA,YAAA,EAAe,MAAM,CAAA,iBAAA,CAAmB,CAAC;QACvD;AAEA,QAAA,KAAK,CAAC,MAAM,GAAG,MAAM;IACvB;~~IAEA~~,WAAA,CACU,UAAsB,EACtB,gBAAkC,EAAA;AAE1C,QAAA,KAAK,EAAE;~~QAHC~~,IAAA,CAAA,UAAU,GAAV,UAAU;QACV,IAAA,CAAA,gBAAgB,GAAhB,gBAAgB;AAK1B;;;AAGG;AACa,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,MAAiB,KAAU;AAC5D,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AAChB,gBAAA,MAAM,KAAK,CAAC,yBAAyB,CAAC;YACxC;AAEA,YAAA,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM;AAE1B,YAAA,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AACvB,gBAAA,MAAM,KAAK,CAAC,uDAAuD,CAAC;YACtE;;;YAIA,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC;AAEvD,YAAA,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC;YAC5B,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC;AACpD,YAAA,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC;AAChC,YAAA,IAAI,CAAC,eAAe,GAAG,MAAM;AAE7B,YAAA,KAAK,CAAC,YAAY,CAAC,MAAK;AACtB,gBAAA,IAAI,UAAU,CAAC,UAAU,EAAE;oBACzB,UAAU,CAAC,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC;gBACzD;AACF,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;IA/BD;~~iIAnCW~~,eAAe,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;~~qHAAf~~,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;~~2FAAf~~,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;sBAKE;;;~~ACpBH~~;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-shared-portal.mjs","sources":["../../shared/portal/src/portal.directive.ts","../../shared/portal/src/kirbydesign-designsystem-shared-portal.ts"],"sourcesContent":["import { CdkPortalOutlet, DomPortal, Portal } from '@angular/cdk/portal';\nimport {\n ComponentFactoryResolver,\n Directive,\n ElementRef,\n Input,\n ViewContainerRef,\n} from '@angular/core';\n\n/*\n @summary PortalDirective is a utility that lets you portal the host element into another DOM element.\n * This is designed to be beneficial when there's issues with the stacking context.\n \n Extends CdkPortalOutlet to gain functionality for attaching/detaching the host element, and for proper cleanup.\n \n Using portal directive to reposition HTML elements, might break angular functionality and/or styling, so use\n * with care.\n /\n@Directive({\n selector: '[kirbyPortal]',\n standalone: true,\n})\nexport class PortalDirective extends CdkPortalOutlet {\n private _outlet: HTMLElement \| undefined;\n\n /* The DOM element for which the host element should be appended as a child. /\n @Input() public set outlet(outlet: HTMLElement \| undefined) {\n this._outlet = outlet;\n\n if (this.outlet) {\n this.portal = new DomPortal(this.elementRef);\n }\n }\n\n public get outlet(): HTMLElement \| undefined {\n return this._outlet;\n }\n\n /\n Override portal to handle if user provides a portal of another type than DOMPortal, which CdkPortal would\n * otherwise allow. This can be modified to handle other portal types in the future, should the need arise\n /\n public override set portal(portal: Portal<unknown> \| null) {\n const isDOMPortal: boolean = portal instanceof DomPortal;\n\n if (!isDOMPortal) {\n throw Error(`Portal type ${portal} is not supported`);\n }\n\n super.portal = portal;\n }\n\n public constructor(\n private elementRef: ElementRef,\n private componentFactoryResolver: ComponentFactoryResolver,\n private viewContainerRef: ViewContainerRef\n ) {\n super(componentFactoryResolver, viewContainerRef);\n }\n\n /\n Nearly identical to super class, yet we want to use provided outlet instead of directive host as new content\n * parent which is otherwise the default for CdKPortal\n /\n public override attachDomPortal = (portal: DomPortal): void => {\n if (!this.outlet) {\n throw Error('Outlet must be defined!');\n }\n\n const { element } = portal;\n\n if (!element.parentNode) {\n throw Error('DOM portal content must be attached to a parent node.');\n }\n\n // Anchor used to save the element's previous position so\n // that we can restore it when the portal is detached.\n const anchorNode = document.createComment('dom-portal');\n\n portal.setAttachedHost(this);\n element.parentNode.insertBefore(anchorNode, element);\n this.outlet.appendChild(element);\n this._attachedPortal = portal;\n\n super.setDisposeFn(() => {\n if (anchorNode.parentNode) {\n anchorNode.parentNode.replaceChild(element, anchorNode);\n }\n });\n };\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;AASA;;;;;;;;AAQG;AAKG,MAAO,eAAgB,SAAQ,eAAe,CAAA;;IAIlD,IAAoB,MAAM,CAAC,MAA+B,EAAA;AACxD,QAAA,IAAI,CAAC,OAAO,GAAG,MAAM;AAErB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;QAC9C;IACF;AAEA,IAAA,IAAW,MAAM,GAAA;QACf,OAAO,IAAI,CAAC,OAAO;IACrB;AAEA;;;AAGG;IACH,IAAoB,MAAM,CAAC,MAA8B,EAAA;AACvD,QAAA,MAAM,WAAW,GAAY,MAAM,YAAY,SAAS;QAExD,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,KAAK,CAAC,CAAA,YAAA,EAAe,MAAM,CAAA,iBAAA,CAAmB,CAAC;QACvD;AAEA,QAAA,KAAK,CAAC,MAAM,GAAG,MAAM;IACvB;AAEA,IAAA,WAAA,CACU,UAAsB,EACtB,wBAAkD,EAClD,gBAAkC,EAAA;AAE1C,QAAA,KAAK,CAAC,wBAAwB,EAAE,gBAAgB,CAAC;QAJzC,IAAA,CAAA,UAAU,GAAV,UAAU;QACV,IAAA,CAAA,wBAAwB,GAAxB,wBAAwB;QACxB,IAAA,CAAA,gBAAgB,GAAhB,gBAAgB;AAK1B;;;AAGG;AACa,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,MAAiB,KAAU;AAC5D,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AAChB,gBAAA,MAAM,KAAK,CAAC,yBAAyB,CAAC;YACxC;AAEA,YAAA,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM;AAE1B,YAAA,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AACvB,gBAAA,MAAM,KAAK,CAAC,uDAAuD,CAAC;YACtE;;;YAIA,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC;AAEvD,YAAA,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC;YAC5B,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC;AACpD,YAAA,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC;AAChC,YAAA,IAAI,CAAC,eAAe,GAAG,MAAM;AAE7B,YAAA,KAAK,CAAC,YAAY,CAAC,MAAK;AACtB,gBAAA,IAAI,UAAU,CAAC,UAAU,EAAE;oBACzB,UAAU,CAAC,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC;gBACzD;AACF,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;IA/BD;kIApCW,eAAe,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,wBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;sBAKE;;;AC1BH;;AAEG;;;;"}

package/fesm2022/kirbydesign-designsystem-shared.mjs CHANGED Viewed

@@ -11,10 +11,10 @@ class ResizeObserverFactory {
     create(callback) {
         return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ResizeObserverFactory, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ResizeObserverFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -38,6 +38,7 @@ class ResizeObserverService {
         if (this.observer) {
             this.observer.disconnect();
         }
+        this.observedElements = null;
     }
     unobserve(elementOrRef) {
         const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
@@ -56,10 +57,10 @@ class ResizeObserverService {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ResizeObserverService, deps: [{ token: ResizeObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ResizeObserverService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverService, deps: [{ token: ResizeObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ResizeObserverService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: ResizeObserverFactory }] });
@@ -125,10 +126,10 @@ class TextResizeObserverService {
         this.resizeObserver?.disconnect();
         this.textResizeObserverElement?.remove();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TextResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TextResizeObserverService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TextResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TextResizeObserverService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TextResizeObserverService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TextResizeObserverService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -136,19 +137,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 class ThemeColorDirective {
     constructor() {
         this._isDefault = true;
-        this._isPrimary = false;
-        this._isSecondary = false;
-        this._isTertiary = false;
-        this._isSuccess = false;
-        this._isWarning = false;
-        this._isDanger = false;
-        this._isLight = false;
-        this._isMedium = false;
-        this._isDark = false;
-        this._isWhite = false;
-        this._isBrightnessWhite = false;
-        this._isBrightnessLight = false;
-        this._isBrightnessDark = false;
     }
     get isDefault() {
         return this._isDefault;
@@ -209,10 +197,10 @@ class ThemeColorDirective {
         this._isBrightnessLight = colorBrightness === 'light';
         this._isBrightnessDark = colorBrightness === 'dark';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ThemeColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: ThemeColorDirective, isStandalone: true, selector: "kirby-avatar[themeColor],\n             kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-progress-circle-ring[themeColor],\n             kirby-modal-footer[themeColor],\n             kirby-empty-state[themeColor]", inputs: { themeColor: "themeColor" }, host: { properties: { "class.default": "this.isDefault", "class.primary": "this.isPrimary", "class.secondary": "this.isSecondary", "class.tertiary": "this.isTertiary", "class.success": "this.isSuccess", "class.warning": "this.isWarning", "class.danger": "this.isDanger", "class.light": "this.isLight", "class.medium": "this.isMedium", "class.dark": "this.isDark", "class.white": "this.isWhite", "class.kirby-color-brightness-white": "this.isBrightnessWhite", "class.kirby-color-brightness-light": "this.isBrightnessLight", "class.kirby-color-brightness-dark": "this.isBrightnessDark" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ThemeColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ThemeColorDirective, isStandalone: true, selector: "kirby-avatar[themeColor],\n             kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-progress-circle-ring[themeColor],\n             kirby-modal-footer[themeColor],\n             kirby-empty-state[themeColor]", inputs: { themeColor: "themeColor" }, host: { properties: { "class.default": "this.isDefault", "class.primary": "this.isPrimary", "class.secondary": "this.isSecondary", "class.tertiary": "this.isTertiary", "class.success": "this.isSuccess", "class.warning": "this.isWarning", "class.danger": "this.isDanger", "class.light": "this.isLight", "class.medium": "this.isMedium", "class.dark": "this.isDark", "class.white": "this.isWhite", "class.kirby-color-brightness-white": "this.isBrightnessWhite", "class.kirby-color-brightness-light": "this.isBrightnessLight", "class.kirby-color-brightness-dark": "this.isBrightnessDark" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ThemeColorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ThemeColorDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -271,32 +259,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             }] } });
 class ComponentLoaderDirective {
-    constructor(viewContainerRef, renderer) {
+    constructor(componentFactoryResolver, viewContainerRef, renderer) {
+        this.componentFactoryResolver = componentFactoryResolver;
         this.viewContainerRef = viewContainerRef;
         this.renderer = renderer;
-        this.cssClass = '';
     }
     ngOnInit() {
         this.loadCard();
     }
     loadCard() {
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.configuration.component);
         this.viewContainerRef.clear();
-        const componentRef = this.viewContainerRef.createComponent(this.configuration.component);
+        const componentRef = this.viewContainerRef.createComponent(componentFactory);
         if (componentRef && componentRef.location && componentRef.location.nativeElement) {
             this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);
         }
         componentRef.instance.data = this.configuration.data;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ComponentLoaderDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: ComponentLoaderDirective, isStandalone: true, selector: "[kirbyLoadComponent]", inputs: { configuration: ["kirbyLoadComponent", "configuration"], cssClass: "cssClass" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ComponentLoaderDirective, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ComponentLoaderDirective, isStandalone: true, selector: "[kirbyLoadComponent]", inputs: { configuration: ["kirbyLoadComponent", "configuration"], cssClass: "cssClass" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ComponentLoaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ComponentLoaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyLoadComponent]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }], propDecorators: { configuration: [{
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }], propDecorators: { configuration: [{
                 type: Input,
                 args: ['kirbyLoadComponent']
             }], cssClass: [{
@@ -309,8 +298,6 @@ class FitHeadingDirective {
         this.renderer = renderer;
         this.resizeObserverService = resizeObserverService;
         this.lineClampHelper = lineClampHelper;
-        this.isObservingHostElement = false;
-        this.isScalingHeader = false;
         this.headingSizes = [
             {
                 name: 'h1',
@@ -387,18 +374,15 @@ class FitHeadingDirective {
         this.isScalingHeader = false;
     }
     canFitHeading(size) {
-        const hostElementClone = this.hostElementClone;
-        if (!hostElementClone || !this.config)
-            return false;
-        this.setSize(hostElementClone, size);
+        this.setSize(this.hostElementClone, size);
         // Resolve line-height to pixels via getComputedStyle (handles unitless ratios)
-        const computedLineHeight = parseFloat(getComputedStyle(hostElementClone).lineHeight);
+        const computedLineHeight = parseFloat(getComputedStyle(this.hostElementClone).lineHeight);
         // Skip vertical check for line-height: normal (single-line content like values)
         const fitsVertically = isNaN(computedLineHeight)
             ? true
-            : Math.round(hostElementClone.clientHeight / computedLineHeight) <= this.config.maxLines;
+            : Math.round(this.hostElementClone.clientHeight / computedLineHeight) <= this.config.maxLines;
         // Check horizontal overflow for non-wrapping content (e.g. numbers)
-        const fitsHorizontally = hostElementClone.scrollWidth <= hostElementClone.clientWidth;
+        const fitsHorizontally = this.hostElementClone.scrollWidth <= this.hostElementClone.clientWidth;
         return fitsVertically && fitsHorizontally;
     }
     generateHostElementClone() {
@@ -412,10 +396,10 @@ class FitHeadingDirective {
         this.renderer.setStyle(el, 'font-size', size.fontSize);
         this.renderer.setStyle(el, 'line-height', size.lineHeight);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FitHeadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ResizeObserverService }, { token: i2.LineClampHelper }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: FitHeadingDirective, isStandalone: true, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]", inputs: { config: ["kirbyFitHeading", "config"] }, providers: [LineClampHelper], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FitHeadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ResizeObserverService }, { token: i2.LineClampHelper }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: FitHeadingDirective, isStandalone: true, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]", inputs: { config: ["kirbyFitHeading", "config"] }, providers: [LineClampHelper], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FitHeadingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FitHeadingDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -438,18 +422,16 @@ function setAccessibleLabel(element) {
     const label = findItemLabel(element);
     if (label) {
         label.setAttribute('aria-hidden', 'true');
-        return label.textContent ?? '';
+        return label.textContent;
     }
-    return '';
 }
 function inheritAriaLabelText(element) {
     const attribute = 'aria-label';
     if (element.hasAttribute(attribute)) {
         const value = element.getAttribute(attribute);
         element.removeAttribute(attribute);
-        return value ?? '';
+        return value;
     }
-    return '';
 }
 /**
  * Forwards specified attributes from a source element to a target element.
@@ -472,7 +454,7 @@ function forwardAttributes(sourceElement, attributes, renderer, targetElement) {
             const value = sourceElement.getAttribute(attribute);
             inheritedAttributes[attribute] = value;
             if (targetElement) {
-                renderer.setAttribute(targetElement, attribute, value ?? '');
+                renderer.setAttribute(targetElement, attribute, value);
             }
             renderer.removeAttribute(sourceElement, attribute);
         }
@@ -540,18 +522,17 @@ class TranslationService {
         const translation = this.translations[baseLocaleId];
         if (!translation) {
             console.warn(`[Kirby] Internal component translations were not found for locale "${this.localeId}", falling back to ${this.get('$code')}`);
-            return this.activeTranslation.$code;
+            return;
         }
         this.activeTranslation = translation;
-        return this.activeTranslation.$code;
     }
     get(key) {
         return this.activeTranslation[key];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TranslationService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TranslationService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TranslationService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TranslationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TranslationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TranslationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',