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

@kirbydesign/designsystem 11.11.2-dev-85b2964 → 11.11.2-dev-5e0acd6

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 (220) hide show

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":"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"}
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.18", 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.18", 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.18", 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.18", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", 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.18", 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.18", ngImport: i0, type: ResizeObserverService, deps: [{ token: ResizeObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", 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.18", 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.18", ngImport: i0, type: TextResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", 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.18", 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.18", ngImport: i0, type: ThemeColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", 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.18", ngImport: i0, type: ThemeColorDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -271,61 +259,62 @@ 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.18", 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.18", 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.18", 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: [{
                 type: Input
             }] } });
+const fontSize = DesignTokenHelper.fontSize;
+const lineHeight = DesignTokenHelper.lineHeight;
 class FitHeadingDirective {
     constructor(elementRef, renderer, resizeObserverService, lineClampHelper) {
         this.elementRef = elementRef;
         this.renderer = renderer;
         this.resizeObserverService = resizeObserverService;
         this.lineClampHelper = lineClampHelper;
-        this.isObservingHostElement = false;
-        this.isScalingHeader = false;
         this.headingSizes = [
             {
                 name: 'h1',
-                fontSize: 'var(--kirby-font-size-xl)',
-                lineHeight: 'var(--kirby-line-height-xl)',
+                fontSize: fontSize('xl'),
+                lineHeight: lineHeight('xl'),
             },
             {
                 name: 'h2',
-                fontSize: 'var(--kirby-font-size-l)',
-                lineHeight: 'var(--kirby-line-height-l)',
+                fontSize: fontSize('l'),
+                lineHeight: lineHeight('l'),
             },
             {
                 name: 'h3',
-                fontSize: 'var(--kirby-font-size-m)',
-                lineHeight: 'var(--kirby-line-height-m)',
+                fontSize: fontSize('m'),
+                lineHeight: lineHeight('m'),
             },
         ];
     }
@@ -387,18 +376,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 +398,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.18", 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.18", 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.18", ngImport: i0, type: FitHeadingDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -438,18 +424,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 +456,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 +524,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.18", 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.18", 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.18", ngImport: i0, type: TranslationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',