npm - @kirbydesign/extensions-angular - Versions diffs - 4.2.0 → 4.4.0-rc.0 - Mend

@kirbydesign/extensions-angular 4.2.0 → 4.4.0-rc.0

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

package/fesm2022/kirbydesign-extensions-angular-combobox.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"kirbydesign-extensions-angular-combobox.mjs","sources":["../../combobox/src/combobox.types.ts","../../combobox/src/combobox.component.ts","../../combobox/src/combobox.component.html","../../combobox/src/kirbydesign-extensions-angular-combobox.ts"],"sourcesContent":["export enum OpenState {\n closed,\n opening,\n open,\n}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ContentChildren,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n HostListener,\n Input,\n OnDestroy,\n Output,\n QueryList,\n Renderer2,\n RendererStyleFlags2,\n TemplateRef,\n ViewChild,\n ViewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { UniqueIdGenerator } from '@kirbydesign/designsystem/helpers';\nimport { ItemComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\nimport { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';\nimport { AffixDirective, InputSize } from '@kirbydesign/designsystem/form-field';\nimport {\n EventListenerDisposeFn,\n FORM_FIELD_CONTROL,\n FormFieldControl,\n} from '@kirbydesign/designsystem/types';\nimport { forwardAttributes, ResizeObserverService } from '@kirbydesign/designsystem/shared';\nimport { InputComponent } from '@kirbydesign/designsystem/form-field';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n CdkFixedSizeVirtualScroll,\n CdkVirtualForOf,\n CdkVirtualScrollViewport,\n} from '@angular/cdk/scrolling';\nimport { OpenState } from './combobox.types';\n\n@Component({\n selector: 'kirby-x-combobox',\n templateUrl: './combobox.component.html',\n styleUrls: ['./combobox.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ComboboxComponent),\n multi: true,\n },\n {\n provide: FORM_FIELD_CONTROL,\n useExisting: forwardRef(() => ComboboxComponent),\n },\n ],\n imports: [\n InputComponent,\n NgTemplateOutlet,\n PopoverComponent,\n CardComponent,\n ItemComponent,\n IconComponent,\n AffixDirective,\n CdkFixedSizeVirtualScroll,\n CdkVirtualScrollViewport,\n CdkVirtualForOf,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ComboboxComponent\n implements AfterViewInit, OnDestroy, ControlValueAccessor, FormFieldControl\n{\n static readonly OPEN_DELAY_IN_MS = 100;\n private state = OpenState.closed;\n private _popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n public _listboxId: string = UniqueIdGenerator.scopedTo('kirby-x-combobox').next();\n public _comboboxId: string = UniqueIdGenerator.scopedTo('kirby-input').next();\n\n private readonly _defaultSearchFunction = (\n searchTerm: string,\n itemsToSearch: unknown[]\n ): unknown[] => {\n if (!searchTerm) {\n return itemsToSearch;\n }\n\n const lowerSearchTerm = searchTerm.toLowerCase();\n return itemsToSearch\n .filter((item) => this.getItemText(item).toLowerCase().includes(lowerSearchTerm))\n .sort((a, b) => {\n const textA = this.getItemText(a).toLowerCase();\n const textB = this.getItemText(b).toLowerCase();\n\n const textAStartsWith = textA.startsWith(searchTerm);\n const textBStartsWith = textB.startsWith(searchTerm);\n if (textAStartsWith && textBStartsWith) {\n return this.compareAlphabetically(textA, textB);\n }\n\n if (textAStartsWith) {\n return -1;\n }\n\n if (textBStartsWith) {\n return 1;\n }\n\n return this.compareAlphabetically(textA, textB);\n });\n };\n\n private compareAlphabetically(textA: string, textB: string): number {\n if (textA < textB) {\n return -1;\n }\n if (textA > textB) {\n return 1;\n }\n return 0;\n }\n\n /**\n * The text to display when the search returns no results.\n */\n @Input()\n public noSearchResultsText = 'No results found.';\n\n /**\n * The name of the property to use as the display text for each item.\n */\n @Input()\n public itemTextProperty: string = 'text';\n protected getItemText(item: unknown): string {\n if (this.isTypeString(item)) {\n return item as string;\n }\n\n if (this.objectHasItemTextProperty(item)) {\n const objectItem = item as Record<string, unknown>;\n const textValue: unknown = objectItem[this.itemTextProperty];\n\n if (typeof textValue === 'string') {\n return textValue;\n }\n }\n return '';\n }\n\n /**\n * The height of each item in the dropdown, in pixels. This is used to calculate the height of the dropdown based on the number of items.\n */\n @Input()\n public itemHeight: number = 44;\n\n protected get dropdownMaxHeight(): number {\n return 8 * this.itemHeight;\n }\n\n protected get dropdownMinHeight(): number {\n return this.itemHeight;\n }\n\n protected get viewportHeight(): number {\n const itemCount = this.searchItems?.length ?? 0;\n\n if (itemCount === 0) {\n return this.dropdownMinHeight;\n }\n\n return Math.min(\n this.dropdownMaxHeight,\n Math.max(this.dropdownMinHeight, itemCount * this.itemHeight)\n );\n }\n\n private isTypeString(item: unknown): boolean {\n return typeof item === 'string';\n }\n\n private objectHasItemTextProperty(item: unknown): boolean {\n return item != undefined && typeof item === 'object' && this.itemTextProperty in item;\n }\n\n private objectHasItemIdProperty(item: unknown): boolean {\n return item != undefined && typeof item === 'object' && this.itemIdProperty in item;\n }\n\n /**\n * The name of the property to use as the unique identifier for each item.\n */\n @Input()\n public itemIdProperty = 'id';\n protected getItemId(item: unknown): string {\n if (this.isTypeString(item)) {\n return item as string;\n }\n\n if (this.objectHasItemIdProperty(item)) {\n const objectItem = item as Record<string, unknown>;\n const idValue: unknown = objectItem[this.itemIdProperty];\n\n if (this.isTypeString(idValue)) {\n return idValue as string;\n }\n }\n\n console.error(\n 'Each item must have an id property for scroll to work. Ensure that the itemIdProperty input is set correctly, and that each item has a unique id value.'\n );\n return '';\n }\n\n /**\n * A function that takes a search term and the list of items, and returns a filtered list of items to display in the dropdown.\n */\n @Input()\n public searchFunction: (searchTerm: string, itemsToSearch: unknown[]) => unknown[] =\n this._defaultSearchFunction;\n\n private _searchItems: unknown[] = [];\n protected get searchItems(): unknown[] {\n return this._searchItems;\n }\n private set searchItems(value: unknown[]) {\n this._searchItems = value;\n if (!this._searchItems) {\n return;\n }\n\n this.focusedItem = this._searchItems[0];\n }\n\n private _items: unknown[] = [];\n\n get items(): unknown[] {\n return this._items;\n }\n\n /**\n * The list of items to display in the dropdown.\n * @param value\n */\n @Input()\n public set items(value: unknown[]) {\n this._items = value;\n this.searchItems = this._items;\n }\n\n private _selectedItem: unknown = undefined;\n get selectedItem(): unknown {\n return this._selectedItem;\n }\n\n /**\n * The currently selected item.\n * @param value\n */\n @Input()\n public set selectedItem(value: unknown) {\n // Allow clearing by setting undefined\n if (value !== this._selectedItem) {\n this._selectedItem = value;\n this.focusedItem = this._selectedItem;\n // Keep ControlValueAccessor value in sync with the selected data item\n this.value = this._selectedItem;\n }\n }\n\n // _focusedItem keeps track of which element has focus and will be selected\n // if it is activated (by pressing ENTER)\n private _focusedItem: unknown = undefined;\n public get focusedItem(): unknown {\n return this._focusedItem;\n }\n\n public set focusedItem(item: unknown) {\n // the focus might not have changed, but where in the list might\n this.setAriaPosinsetOnElement(item);\n\n if (this._focusedItem === item) {\n return;\n }\n this._focusedItem = item;\n }\n\n private getIndexOfItem(item: unknown): number {\n return this.searchItems.indexOf(item);\n }\n\n private getKirbyElement(item: unknown | undefined): ElementRef<HTMLElement> | undefined {\n const kirbyItems = this.getKirbyItems();\n if (!kirbyItems || !item) {\n return undefined;\n }\n\n const itemId = this.getItemId(item);\n return kirbyItems.find((el) => el.nativeElement.id === itemId);\n }\n\n private setAriaPosinsetOnElement(item: unknown) {\n const element = this.getKirbyElement(item);\n const index = this.getIndexOfItem(item);\n const setsize = this.searchItems.length;\n\n if (!element) {\n return;\n }\n\n this.renderer.setAttribute(element.nativeElement, 'aria-setsize', setsize.toString());\n this.renderer.setAttribute(element.nativeElement, 'aria-posintset', `${index + 1}`);\n }\n\n /**\n * The placeholder text to display in the input when no item is selected and the input is empty.\n */\n @Input()\n public placeholder = 'Please search...';\n\n /**\n * The direction in which the dropdown should open relative to the input.\n * @param direction\n */\n @Input()\n public set popout(direction: HorizontalDirection | `${HorizontalDirection}`) {\n this._popout = direction || HorizontalDirection.right;\n }\n\n public get popout() {\n return this._popout;\n }\n\n /**\n * If the combobox needs to expand to full width of its parent container, then use expand.\n */\n @Input()\n public expand?: 'block';\n\n /**\n * When `true`, the user cannot interact with the combobox.\n */\n @Input()\n public disabled = false;\n\n @HostBinding('attr.disabled')\n public get _isDisabled(): 'disabled' | null {\n return this.disabled ? 'disabled' : null;\n }\n\n /**\n * Will emit the new value when error changes.\n */\n @Output()\n hasErrorChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n private _hasError: boolean = false;\n\n /**\n * When `true`, the combobox will be styled with error styles.\n */\n @Input()\n get hasError(): boolean {\n return this._hasError;\n }\n\n set hasError(value: boolean) {\n if (this._hasError !== value) {\n this._hasError = value;\n this.hasErrorChange.emit(this._hasError);\n }\n }\n\n /**\n * The size of the input element.\n */\n @Input()\n public size: InputSize = InputSize.medium;\n\n // Prevent Ionic blur on scroll\n @HostBinding('attr.no-blur')\n public get _noBlurOnScroll(): boolean {\n return true;\n }\n\n /**\n * Emitted when an item is selected (tap on mobile, click/keypress on web)\n */\n @Output()\n public change: EventEmitter<unknown> = new EventEmitter<unknown>();\n\n public value: unknown = undefined;\n\n @HostBinding('class.expand')\n public get _isBlockLevel() {\n return this.expand === 'block';\n }\n\n @HostBinding('class.is-opening')\n public get _isOpening(): boolean {\n return this.state === OpenState.opening;\n }\n\n @HostBinding('class.is-open')\n public get isOpen(): boolean {\n return this.state === OpenState.open;\n }\n\n @HostBinding('class.has-value')\n public get hasValue(): boolean {\n return this.selectedItem != null;\n }\n\n @ContentChild(ListItemTemplateDirective, { read: TemplateRef })\n public itemTemplate?: TemplateRef<unknown>;\n\n @ContentChildren(ListItemTemplateDirective, { read: ElementRef })\n public slottedItems?: QueryList<ElementRef<HTMLElement>>;\n\n @ViewChild(CardComponent, { read: ElementRef })\n public cardElement?: ElementRef<HTMLElement>;\n\n @ViewChild(PopoverComponent)\n public popover?: PopoverComponent;\n\n @ViewChild('rootElement', { static: true, read: ElementRef })\n public rootElement!: ElementRef<HTMLElement>;\n\n @ViewChild(InputComponent, { static: true, read: ElementRef })\n private textInput!: ElementRef<HTMLInputElement>;\n\n get interactiveElement(): HTMLElement {\n return this.textInput.nativeElement;\n }\n\n @ViewChild(CdkVirtualScrollViewport)\n private virtualScrollViewport?: CdkVirtualScrollViewport;\n\n private forwardAriaLabelToCombobox() {\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n this.rootElement.nativeElement\n );\n }\n\n @ViewChildren(ItemComponent, { read: ElementRef })\n public kirbyItemsDefault?: QueryList<ElementRef<HTMLElement>>;\n\n _kirbyItemsSlotted?: QueryList<ElementRef<HTMLElement>>;\n @ContentChildren(ItemComponent, { read: ElementRef })\n public set kirbyItemsSlotted(kirbyItems: QueryList<ElementRef<HTMLElement>>) {\n const hasSlottedItems = this.disposeItemClickListeners?.length > 0;\n if (hasSlottedItems) {\n this.unlistenAllSlottedItems();\n }\n\n kirbyItems.forEach((kirbyItem) => {\n this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');\n const disposeClickListener: EventListenerDisposeFn = this.renderer.listen(\n kirbyItem.nativeElement,\n 'click',\n () => {\n const id = kirbyItem.nativeElement.getAttribute('id');\n const item = this.items.find((it) => this.getItemId(it) === id);\n if (item) {\n this.onItemSelect(item);\n }\n }\n );\n\n this.disposeItemClickListeners.push(disposeClickListener);\n });\n\n this._kirbyItemsSlotted = kirbyItems;\n }\n\n public get kirbyItemsSlotted(): QueryList<ElementRef<HTMLElement>> | undefined {\n return this._kirbyItemsSlotted;\n }\n\n private disposeItemClickListeners: EventListenerDisposeFn[] = [];\n\n public constructor(\n private renderer: Renderer2,\n private elementRef: ElementRef<HTMLElement>,\n private cdr: ChangeDetectorRef,\n private resizeObserverService: ResizeObserverService\n ) {}\n\n protected onToggle(event: MouseEvent) {\n event.stopPropagation();\n this.textInput?.nativeElement.focus();\n\n this.toggle();\n }\n\n private toggle(): void {\n if (this.disabled) {\n return;\n }\n this.isOpen ? this.close() : this.open();\n }\n\n public ngAfterViewInit() {\n if (this.expand === 'block') {\n const { width: initialWidth } = this.elementRef.nativeElement.getBoundingClientRect();\n this.setPopoverCardStyle('max-width', 'initial');\n this.setPopoverCardStyle('min-width', 'initial');\n // Ensure initial width is set even if the resize observer callback also fires initially:\n this.setPopoverCardStyle('--kirby-card-width', `${initialWidth}px`);\n\n this.resizeObserverService.observe(this.elementRef, (entry) => {\n const newWidth = entry.contentRect.width;\n if (newWidth > 0) {\n this.setPopoverCardStyle('--kirby-card-width', `${newWidth}px`);\n }\n });\n }\n this.forwardAriaLabelToCombobox();\n }\n\n /* Utility that makes it easier to set styles on card element */\n private setPopoverCardStyle(style: string, value: string) {\n this.renderer.setStyle(\n this.cardElement?.nativeElement,\n style,\n value,\n RendererStyleFlags2.DashCase\n );\n }\n\n public ngOnDestroy(): void {\n this.unlistenAllSlottedItems();\n this.unobserveResize();\n }\n\n public open(): void {\n if (this.disabled) {\n return;\n }\n if (!this.isOpen) {\n this.state = OpenState.opening;\n setTimeout(() => this.showPopOver(), ComboboxComponent.OPEN_DELAY_IN_MS);\n\n this.focusedItem = this.selectedItem;\n }\n }\n\n private showPopOver() {\n if (this.state === OpenState.opening) {\n this.state = OpenState.open;\n this.popover?.show();\n this.scrollToIndexIntoViewWhenOpeningPopup();\n this.cdr.markForCheck();\n }\n }\n\n public close() {\n if (this.disabled) {\n return;\n }\n if (this.isOpen) {\n this.state = OpenState.closed;\n this.setInputDisplayValue(this.getItemText(this.selectedItem));\n this.searchItems = this.items;\n this.popover?.hide();\n }\n }\n\n protected onItemSelect(item: unknown) {\n // Guard: slotted click listeners should map back to a data item, but be safe.\n if (item instanceof HTMLElement) return;\n this.selectItem(item);\n this.close();\n }\n\n private onChange: (value: unknown) => void = () => {\n /* empty */\n };\n private onTouched: () => void = (): void => {\n /* empty */\n };\n\n /**\n * Sets the select's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param value New value to be written to the model.\n */\n public writeValue(value: string): void {\n this.selectItemByInput(value);\n\n // When written from outside, reflect selected text in the input\n this.setInputDisplayValue(this.getItemText(this.value));\n\n this.cdr.markForCheck();\n }\n\n /**\n * Saves a callback function to be invoked when the select's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the value changes.\n */\n registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Saves a callback function to be invoked when the select is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Disables the select. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param isDisabled Sets whether the component is disabled.\n */\n public setDisabledState?(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n private selectItem(item: unknown): void {\n if (item != this.selectedItem) {\n this.selectedItem = item;\n this.focusedItem = item;\n this.change.emit(this.value);\n this.onChange(this.value);\n this.setInputDisplayValue(this.getItemText(item));\n this.searchItems = this.items;\n }\n }\n\n private selectItemByInput(input: string): void {\n this.selectedItem = this.findItemByInput(input);\n }\n\n protected updateSearchResults(event: Event): void {\n if (!this.isOpen) {\n this.open();\n }\n\n const input = event.target as HTMLInputElement;\n this.searchItems = input.value ? this.searchFunction(input.value, this.items) : this.items;\n\n // Screen readers (VoiceOver/NVDA) may move real browser focus to a list-item button.\n // When the list re-renders after filtering, that button is removed from the DOM and\n // focus falls to `document.body`. Restore it to the input so the user can keep typing\n // and the focusout handler doesn't mistake the body-focus for a genuine blur-away.\n if (document.activeElement !== this.textInput?.nativeElement) {\n this.textInput?.nativeElement.focus();\n }\n }\n\n protected onPopoverWillHide() {\n this.state = OpenState.closed;\n this.rootElement.nativeElement.focus();\n this.onTouched();\n }\n\n protected onPopoverClick() {\n this.close();\n }\n\n @HostListener('mousedown', ['$event'])\n public onMouseDown(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n @HostListener('touchstart', ['$event'])\n public onTouchStart(event: TouchEvent) {\n if (this.isOpen) {\n event.stopPropagation();\n }\n }\n\n @HostListener('focusout')\n public onFocusOut() {\n // Defer the check to allow the browser (and screen readers like VoiceOver/NVDA)\n // to settle focus. `relatedTarget` is often `null` with screen readers, so we\n // inspect `document.activeElement` after the microtask queue has flushed.\n setTimeout(() => {\n const activeElement = document.activeElement as HTMLElement | null;\n const isOnTriggerButton =\n activeElement && this.elementRef.nativeElement.contains(activeElement);\n const isInsidePopover = activeElement && activeElement.closest('kirby-popover');\n\n if (isOnTriggerButton || isInsidePopover) {\n // Focus is still within the component — nothing to do.\n return;\n }\n\n // When a screen reader (VoiceOver/NVDA) moves real focus to a list-item button\n // and the user then types a character, CDK virtual scroll re-renders the list and\n // removes the focused button from the DOM. The browser then drops focus to\n // `document.body`. Detect this case: if the popover is still showing and focus is\n // on the body, it means focus was lost due to DOM removal — restore it to the\n // input rather than closing the popover.\n if (this.isOpen && activeElement === document.body) {\n this.textInput?.nativeElement.focus();\n return;\n }\n\n if (this.isOpen) {\n this.close();\n }\n this.onTouched();\n }, 0);\n }\n\n @HostListener('keydown.tab')\n public onTab() {\n if (this.isOpen) {\n this.selectItem(this.focusedItem);\n this.close();\n }\n }\n\n @HostListener('keydown.escape')\n public onEscape() {\n this.close();\n }\n\n @HostListener('keydown.enter', ['$event'])\n public onEnterO(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.isOpen) {\n this.selectItem(this.focusedItem);\n }\n this.toggle();\n }\n\n @HostListener('keydown.arrowUp', ['$event'])\n @HostListener('keydown.arrowDown', ['$event'])\n @HostListener('keydown.pageUp', ['$event'])\n @HostListener('keydown.pageDown', ['$event'])\n @HostListener('keydown.home', ['$event'])\n @HostListener('keydown.end', ['$event'])\n public onArrowKeys(event: Event): void {\n if (this.disabled) return;\n\n const keyEvent = event as KeyboardEvent; // safe in this context\n // Avoid page scroll\n event.preventDefault();\n\n if (!this.isOpen) {\n this.open();\n if (this.selectedItem) {\n this.setFocusOnSelectedItem();\n } else {\n this.setFocusOnFirstOrLastItem(keyEvent);\n }\n } else {\n this.handleFocusNavigation(keyEvent);\n }\n }\n\n private handleFocusNavigation(keyEvent: KeyboardEvent): void {\n switch (keyEvent.key) {\n case 'ArrowDown':\n this.shiftFocusIndex(1);\n break;\n case 'ArrowUp':\n this.shiftFocusIndex(-1);\n break;\n case 'PageDown':\n this.shiftFocusIndex(10);\n break;\n case 'PageUp':\n this.shiftFocusIndex(-10);\n break;\n case 'Home':\n this.setFocusOnFirstItem();\n break;\n case 'End':\n this.setFocusOnLastItem();\n break;\n default:\n break;\n }\n }\n\n private shiftFocusIndex(numberOfItems: number) {\n // Handle up/down navigation when open\n const currentIndex = this.searchItems.indexOf(this.focusedItem);\n let newIndex;\n\n if (numberOfItems > 0) {\n newIndex = Math.min(this.searchItems.length - 1, currentIndex + numberOfItems);\n } else {\n newIndex = Math.max(0, currentIndex + numberOfItems);\n }\n\n if (newIndex !== currentIndex) {\n this.focusedItem = this.searchItems[newIndex];\n }\n this.scrollFocusedItemIntoViewWhileNavigating();\n }\n\n private setFocusOnFirstOrLastItem(keyEvent: KeyboardEvent): void {\n switch (keyEvent.key) {\n case 'ArrowDown':\n case 'PageDown':\n case 'Home':\n this.setFocusOnFirstItem();\n break;\n case 'ArrowUp':\n case 'PageUp':\n case 'End':\n this.setFocusOnLastItem();\n break;\n default:\n break;\n }\n }\n\n private setFocusOnSelectedItem(): void {\n if (this.selectedItem) {\n this.focusedItem = this.selectedItem;\n }\n }\n\n private setFocusOnLastItem(): void {\n if (this.searchItems.length > 0) {\n this.focusedItem = this.searchItems[this.searchItems.length - 1];\n }\n }\n\n private setFocusOnFirstItem(): void {\n if (this.searchItems.length > 0) {\n this.focusedItem = this.searchItems[0];\n }\n }\n\n private unlistenAllSlottedItems(): void {\n let disposeClickListener: EventListenerDisposeFn | undefined;\n while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== undefined) {\n disposeClickListener();\n }\n }\n\n private unobserveResize() {\n this.resizeObserverService.unobserve(this.elementRef);\n }\n\n /**\n * Resolve a model/data item based on current `items` by comparing displayed text.\n * This is used to map an incoming form value or input `selectedItem` to an item\n * from the list.\n */\n private findItemByInput(input: string): unknown {\n if (!this.items || this.items.length === 0) {\n return input;\n }\n\n return this.items.find((it) => this.getItemText(it) === input) ?? input;\n }\n\n private setInputDisplayValue(value: string): void {\n // We intentionally update the DOM input imperatively (\"hard way\")\n // to ensure the visible value is cleared/updated immediately.\n if (this.textInput?.nativeElement) {\n this.renderer.setProperty(this.textInput.nativeElement, 'value', value);\n }\n }\n\n private scrollFocusedItemIntoViewWhileNavigating(): void {\n const kirbyItems = this.getKirbyItems();\n if (!kirbyItems || kirbyItems.length === 0) return;\n\n if (!this.focusedItem) {\n return;\n }\n\n const id = this.getItemId(this.focusedItem);\n if (!id) return;\n\n const match = kirbyItems.toArray().find((el) => {\n if (el.nativeElement.id === undefined) {\n console.error(\n 'Each item must have an id attribute for scroll to work. Ensure that the ´[attr.id]´ is set correctly, and that each item has a unique id value.'\n );\n }\n return el.nativeElement.id === id;\n });\n\n if (!match) {\n this.scrollToIndexIntoViewWhenOpeningPopup();\n return;\n }\n\n const scrollIntoView = match.nativeElement.scrollIntoView;\n if (typeof scrollIntoView === 'function') {\n scrollIntoView.call(match.nativeElement, { block: 'nearest' });\n }\n }\n\n private getKirbyItems(): QueryList<ElementRef<HTMLElement>> | undefined {\n return this.kirbyItemsSlotted && this.kirbyItemsSlotted.length\n ? this.kirbyItemsSlotted\n : this.kirbyItemsDefault;\n }\n\n private scrollToIndexIntoViewWhenOpeningPopup(): void {\n const focusedIndex = this.searchItems.indexOf(this.focusedItem);\n if (focusedIndex < 0) return;\n\n if (focusedIndex === 0) {\n this.virtualScrollViewport?.setRenderedRange({ start: 0, end: 20 });\n this.virtualScrollViewport?.checkViewportSize();\n return;\n }\n\n this.virtualScrollViewport?.scrollToIndex(focusedIndex);\n }\n}\n","<div (click)=\"onToggle($event)\" #rootElement>\n <input\n kirby-input\n type=\"text\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n [hasError]=\"hasError\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.id]=\"_comboboxId\"\n [attr.aria-controls]=\"_listboxId\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n (input)=\"updateSearchResults($event)\"\n />\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\" kirby-affix=\"suffix\"></kirby-icon>\n</div>\n\n<kirby-popover\n [target]=\"rootElement\"\n [popout]=\"popout\"\n (click)=\"onPopoverClick()\"\n (willHide)=\"onPopoverWillHide()\"\n>\n <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n @if (searchItems.length === 0) {\n <kirby-item [attr.aria-live]=\"'polite'\">\n <p class=\"kirby-item-title no-results\">{{ noSearchResultsText }}</p>\n </kirby-item>\n } @else {\n <cdk-virtual-scroll-viewport\n class=\"combobox-viewport\"\n role=\"listbox\"\n minBufferPx=\"1240\"\n maxBufferPx=\"1620\"\n [itemSize]=\"itemHeight\"\n [style.height.px]=\"viewportHeight\"\n >\n <ng-container *cdkVirtualFor=\"let item of searchItems\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: {\n $implicit: item,\n selected: item === selectedItem,\n focused: item === focusedItem,\n }\n \"\n ></ng-container>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </kirby-card>\n</kirby-popover>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-focused=\"focused\">\n <kirby-item\n role=\"option\"\n [selectable]=\"true\"\n [selected]=\"selected\"\n [class.focused]=\"focused\"\n [attr.id]=\"getItemId(item)\"\n [attr.aria-selected]=\"selected\"\n (click)=\"onItemSelect(item)\"\n >\n <p class=\"kirby-item-title\">{{ getItemText(item) }}</p>\n @if (selected) {\n <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n }\n </kirby-item>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs CHANGED Viewed

@@ -36,10 +36,10 @@ class ImageBannerHeightDirective {
         this.currentHeight = cardHeight;
         this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageBannerHeightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ImageBannerHeightDirective, isStandalone: true, selector: "[kirbyImageBannerResize]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ImageBannerHeightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: ImageBannerHeightDirective, isStandalone: true, selector: "[kirbyImageBannerResize]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageBannerHeightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ImageBannerHeightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[kirbyImageBannerResize]`,
@@ -87,12 +87,12 @@ class ImageBannerComponent {
     onImageError($event) {
         this.imageError.emit($event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageBannerComponent, deps: [{ token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImageBannerComponent, isStandalone: true, selector: "kirby-x-image-banner", inputs: { title: "title", imagePath: "imagePath", bodyText: "bodyText", showButtonInNarrowView: "showButtonInNarrowView", actionButtonText: "actionButtonText", externalLink: "externalLink", backgroundBlur: "backgroundBlur" }, outputs: { bannerClick: "bannerClick", dismissClick: "dismissClick", imageError: "imageError" }, host: { properties: { "class.show-button-in-narrow-view": "this.showButtonInNarrowView", "class": "this.backgroundBlur" } }, hostDirectives: [{ directive: ImageBannerHeightDirective }], ngImport: i0, template: "<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"kirby-visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <div class=\"dismiss\">\n      <button\n        kirby-button\n        size=\"xs\"\n        (click)=\"dismissClicked($event)\"\n        [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        [showIconOnly]=\"true\"\n        [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </div>\n  }\n</kirby-card>\n", styles: [":host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;flex-direction:column;justify-content:space-between}@container banner (width < 600px){.main-content{flex-direction:row}}.main-content{min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;padding:12px 0 8px 8px;overflow:hidden}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;flex:1;justify-content:space-between;height:100%}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:24px;min-width:24px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@container banner (width >= 600px){.text-content-layout{gap:12px}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:16px;font-weight:700;line-height:24px}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]", inputs: ["themeColor"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ImageBannerComponent, deps: [{ token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ImageBannerComponent, isStandalone: true, selector: "kirby-x-image-banner", inputs: { title: "title", imagePath: "imagePath", bodyText: "bodyText", showButtonInNarrowView: "showButtonInNarrowView", actionButtonText: "actionButtonText", externalLink: "externalLink", backgroundBlur: "backgroundBlur" }, outputs: { bannerClick: "bannerClick", dismissClick: "dismissClick", imageError: "imageError" }, host: { properties: { "class.show-button-in-narrow-view": "this.showButtonInNarrowView", "class": "this.backgroundBlur" } }, hostDirectives: [{ directive: ImageBannerHeightDirective }], ngImport: i0, template: "<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"kirby-visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <button\n      kirby-button\n      size=\"xs\"\n      (click)=\"dismissClicked($event)\"\n      [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n      [showIconOnly]=\"true\"\n      [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      class=\"dismiss\"\n    >\n      <kirby-icon name=\"close\"></kirby-icon>\n    </button>\n  }\n</kirby-card>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;min-height:180px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1;position:relative}}.main-content{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:14px 0 6px 8px;overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:10px 8px 8px 0}}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{position:absolute;inset:0;height:100%}}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:24px;min-width:24px;margin-bottom:4px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex;margin-bottom:8px}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}button.dismiss{position:absolute;top:16px;right:16px;margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:var(--kirby-x-image-banner-min-height, calc(clamp(13px, 1rem, 32px)*1.5 + 2.8572*clamp(12px, .875rem, 28px)) )}@container banner (width >= 600px){.text-content-layout{gap:12px;min-height:initial}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:clamp(13px,1rem,32px);font-weight:700;line-height:1.5}@supports (text-box: trim-start text alphabetic){.kirby-text-normal-bold,.title{margin-top:0;text-box:trim-start text alphabetic}}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]", inputs: ["themeColor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageBannerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ImageBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-x-image-banner', imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective], hostDirectives: [ImageBannerHeightDirective], template: "<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"kirby-visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <div class=\"dismiss\">\n      <button\n        kirby-button\n        size=\"xs\"\n        (click)=\"dismissClicked($event)\"\n        [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        [showIconOnly]=\"true\"\n        [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </div>\n  }\n</kirby-card>\n", styles: [":host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;flex-direction:column;justify-content:space-between}@container banner (width < 600px){.main-content{flex-direction:row}}.main-content{min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;padding:12px 0 8px 8px;overflow:hidden}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;flex:1;justify-content:space-between;height:100%}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:24px;min-width:24px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@container banner (width >= 600px){.text-content-layout{gap:12px}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:16px;font-weight:700;line-height:24px}\n"] }]
+            args: [{ selector: 'kirby-x-image-banner', imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective], hostDirectives: [ImageBannerHeightDirective], template: "<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"kirby-visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <button\n      kirby-button\n      size=\"xs\"\n      (click)=\"dismissClicked($event)\"\n      [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n      [showIconOnly]=\"true\"\n      [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      class=\"dismiss\"\n    >\n      <kirby-icon name=\"close\"></kirby-icon>\n    </button>\n  }\n</kirby-card>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;min-height:180px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1;position:relative}}.main-content{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:14px 0 6px 8px;overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:10px 8px 8px 0}}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{position:absolute;inset:0;height:100%}}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:24px;min-width:24px;margin-bottom:4px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex;margin-bottom:8px}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}button.dismiss{position:absolute;top:16px;right:16px;margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:var(--kirby-x-image-banner-min-height, calc(clamp(13px, 1rem, 32px)*1.5 + 2.8572*clamp(12px, .875rem, 28px)) )}@container banner (width >= 600px){.text-content-layout{gap:12px;min-height:initial}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:clamp(13px,1rem,32px);font-weight:700;line-height:1.5}@supports (text-box: trim-start text alphabetic){.kirby-text-normal-bold,.title{margin-top:0;text-box:trim-start text alphabetic}}\n"] }]
         }], ctorParameters: () => [{ type: i1.TranslationService }], propDecorators: { title: [{
                 type: Input
             }], imagePath: [{

package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","sources":["../../image-banner/src/image-banner-height.directive.ts","../../image-banner/src/image-banner.component.ts","../../image-banner/src/image-banner.component.html","../../image-banner/src/kirbydesign-extensions-angular-image-banner.ts"],"sourcesContent":["import { Directive, ElementRef, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n/*\n @Description Temporary directive to ensure correct scroll position behavior on Safari.\n \n When navigating between stacked pages, scroll position is not correctly restored on Safari,\n * when the nested kirby-card element uses containment and the host element does not have an explicit height.\n /\n@Directive({\n selector: `[kirbyImageBannerResize]`,\n})\nexport class ImageBannerHeightDirective implements OnInit, OnDestroy {\n private currentHeight: number = 0;\n private host = inject(ElementRef);\n private resizeObserverService = inject(ResizeObserverService);\n private renderer = inject(Renderer2);\n\n ngOnInit() {\n this.resizeObserverService.observe(this.host, (entry) => this.setCardHeightOnHost(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.host);\n }\n\n private setCardHeightOnHost(entry: ResizeObserverEntry) {\n const hostElement = entry.target as HTMLElement;\n const card = hostElement.querySelector('kirby-card');\n const cardHeight = card?.getBoundingClientRect().height;\n\n if (!hostElement \|\| !cardHeight) return;\n if (cardHeight === this.currentHeight) return;\n\n this.currentHeight = cardHeight;\n this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);\n }\n}\n","import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective, TranslationService } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ImageBannerHeightDirective } from './image-banner-height.directive';\n\n@Component({\n selector: 'kirby-x-image-banner',\n imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective],\n hostDirectives: [ImageBannerHeightDirective],\n templateUrl: './image-banner.component.html',\n styleUrl: './image-banner.component.scss',\n})\nexport class ImageBannerComponent {\n /\n The title placed inside the image banners header.\n /\n @Input() title: string \| undefined;\n\n /\n The image shown on the banner, and used for the background blur effect.\n /\n @Input() imagePath: string \| undefined;\n\n /\n The body text placed below the title.\n /\n @Input() bodyText: string \| undefined;\n\n /\n Whether the button should be shown in narrow view or not.\n /\n @HostBinding('class.show-button-in-narrow-view')\n @Input()\n showButtonInNarrowView: boolean = false;\n\n /\n The text of the button in the content area of the image banner. If left empty, will default to 'Read more' (or equivalent translation for [supported locales](https://cookbook.kirby.design/#/home/localization)).\n /\n @Input() actionButtonText: string \| undefined = this.translations.get('readMore');\n\n /\n When an external link is supplied the entire banner will be an anchor-tag and navigate when activated.\n /\n @Input() externalLink: string \| undefined;\n\n /\n The blur-effect used for the background.\n /\n @HostBinding('class')\n @Input()\n backgroundBlur: 'dark' \| 'light' \| 'none' = 'dark';\n\n /\n Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.\n /\n @Output() bannerClick = new EventEmitter<Event>();\n\n /\n If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.\n /\n @Output() dismissClick = new EventEmitter<Event>();\n\n /\n If the input imagePath results in an error, it will be reflected in this output.\n /\n @Output()\n imageError = new EventEmitter<ErrorEvent>();\n\n constructor(public translations: TranslationService) {}\n\n public bannerClicked(event: Event) {\n const eventTarget = event.target as HTMLElement;\n const dismissButtonClicked = eventTarget.closest('.dismiss');\n if (dismissButtonClicked) return;\n this.bannerClick.emit(event);\n }\n\n public dismissClicked(event: Event) {\n this.dismissClick.emit(event);\n }\n\n public onImageError($event: ErrorEvent) {\n this.imageError.emit($event);\n }\n}\n","<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n <div class=\"blur-image-wrapper\">\n <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <div class=\"main-content-wrapper\">\n <div class=\"main-content-image-wrapper\">\n <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n </div>\n\n <div class=\"main-content\">\n <div class=\"text-content-layout\">\n <div class=\"main-content-header\">\n @if (title) {\n <p class=\"kirby-text-normal-bold\">\n {{ title }}\n </p>\n } @else {\n <div class=\"title kirby-text-normal-bold\">\n <ng-content select=\"[title]\"></ng-content>\n </div>\n }\n </div>\n\n <div class=\"main-content-body\">\n <p class=\"main-content-body-text kirby-text-small\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\n </p>\n </div>\n </div>\n @if (externalLink) {\n <!-- Only one of below anchors is displayed at a time -\n we want different behavior on varying screen widths -->\n <a\n kirby-button\n class=\"breakout wide-view-action\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [href]=\"externalLink\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n\n <a\n kirby-button\n class=\"breakout narrow-view-action\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [href]=\"externalLink\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n }\n\n @if (!externalLink) {\n <!-- Only one of below buttons is displayed at a time -\n we want different behavior on varying screen widths -->\n <button\n kirby-button\n class=\"breakout wide-view-action\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n >\n {{ actionButtonText }}\n </button>\n\n <button\n kirby-button\n class=\"breakout narrow-view-action\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n >\n <span class=\"kirby-visually-hidden\">\n {{ actionButtonText }}\n </span>\n </button>\n }\n </div>\n </div>\n\n @if (dismissClick.observed) {\n <div class=\"dismiss\">\n <button\n kirby-button\n size=\"xs\"\n (click)=\"dismissClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [showIconOnly]=\"true\"\n [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n </div>\n }\n</kirby-card>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i2.ImageBannerHeightDirective"],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","sources":["../../image-banner/src/image-banner-height.directive.ts","../../image-banner/src/image-banner.component.ts","../../image-banner/src/image-banner.component.html","../../image-banner/src/kirbydesign-extensions-angular-image-banner.ts"],"sourcesContent":["import { Directive, ElementRef, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n/*\n @Description Temporary directive to ensure correct scroll position behavior on Safari.\n \n When navigating between stacked pages, scroll position is not correctly restored on Safari,\n * when the nested kirby-card element uses containment and the host element does not have an explicit height.\n /\n@Directive({\n selector: `[kirbyImageBannerResize]`,\n})\nexport class ImageBannerHeightDirective implements OnInit, OnDestroy {\n private currentHeight: number = 0;\n private host = inject(ElementRef);\n private resizeObserverService = inject(ResizeObserverService);\n private renderer = inject(Renderer2);\n\n ngOnInit() {\n this.resizeObserverService.observe(this.host, (entry) => this.setCardHeightOnHost(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.host);\n }\n\n private setCardHeightOnHost(entry: ResizeObserverEntry) {\n const hostElement = entry.target as HTMLElement;\n const card = hostElement.querySelector('kirby-card');\n const cardHeight = card?.getBoundingClientRect().height;\n\n if (!hostElement \|\| !cardHeight) return;\n if (cardHeight === this.currentHeight) return;\n\n this.currentHeight = cardHeight;\n this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);\n }\n}\n","import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective, TranslationService } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ImageBannerHeightDirective } from './image-banner-height.directive';\n\n@Component({\n selector: 'kirby-x-image-banner',\n imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective],\n hostDirectives: [ImageBannerHeightDirective],\n templateUrl: './image-banner.component.html',\n styleUrl: './image-banner.component.scss',\n})\nexport class ImageBannerComponent {\n /\n The title placed inside the image banners header.\n /\n @Input() title: string \| undefined;\n\n /\n The image shown on the banner, and used for the background blur effect.\n /\n @Input() imagePath: string \| undefined;\n\n /\n The body text placed below the title.\n /\n @Input() bodyText: string \| undefined;\n\n /\n Whether the button should be shown in narrow view or not.\n /\n @HostBinding('class.show-button-in-narrow-view')\n @Input()\n showButtonInNarrowView: boolean = false;\n\n /\n The text of the button in the content area of the image banner. If left empty, will default to 'Read more' (or equivalent translation for [supported locales](https://cookbook.kirby.design/#/home/localization)).\n /\n @Input() actionButtonText: string \| undefined = this.translations.get('readMore');\n\n /\n When an external link is supplied the entire banner will be an anchor-tag and navigate when activated.\n /\n @Input() externalLink: string \| undefined;\n\n /\n The blur-effect used for the background.\n /\n @HostBinding('class')\n @Input()\n backgroundBlur: 'dark' \| 'light' \| 'none' = 'dark';\n\n /\n Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.\n /\n @Output() bannerClick = new EventEmitter<Event>();\n\n /\n If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.\n /\n @Output() dismissClick = new EventEmitter<Event>();\n\n /\n If the input imagePath results in an error, it will be reflected in this output.\n /\n @Output()\n imageError = new EventEmitter<ErrorEvent>();\n\n constructor(public translations: TranslationService) {}\n\n public bannerClicked(event: Event) {\n const eventTarget = event.target as HTMLElement;\n const dismissButtonClicked = eventTarget.closest('.dismiss');\n if (dismissButtonClicked) return;\n this.bannerClick.emit(event);\n }\n\n public dismissClicked(event: Event) {\n this.dismissClick.emit(event);\n }\n\n public onImageError($event: ErrorEvent) {\n this.imageError.emit($event);\n }\n}\n","<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n <div class=\"blur-image-wrapper\">\n <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <div class=\"main-content-wrapper\">\n <div class=\"main-content-image-wrapper\">\n <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n </div>\n\n <div class=\"main-content\">\n <div class=\"text-content-layout\">\n <div class=\"main-content-header\">\n @if (title) {\n <p class=\"kirby-text-normal-bold\">\n {{ title }}\n </p>\n } @else {\n <div class=\"title kirby-text-normal-bold\">\n <ng-content select=\"[title]\"></ng-content>\n </div>\n }\n </div>\n\n <div class=\"main-content-body\">\n <p class=\"main-content-body-text kirby-text-small\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\n </p>\n </div>\n </div>\n @if (externalLink) {\n <!-- Only one of below anchors is displayed at a time -\n we want different behavior on varying screen widths -->\n <a\n kirby-button\n class=\"breakout wide-view-action\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [href]=\"externalLink\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n\n <a\n kirby-button\n class=\"breakout narrow-view-action\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [href]=\"externalLink\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n }\n\n @if (!externalLink) {\n <!-- Only one of below buttons is displayed at a time -\n we want different behavior on varying screen widths -->\n <button\n kirby-button\n class=\"breakout wide-view-action\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n >\n {{ actionButtonText }}\n </button>\n\n <button\n kirby-button\n class=\"breakout narrow-view-action\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n >\n <span class=\"kirby-visually-hidden\">\n {{ actionButtonText }}\n </span>\n </button>\n }\n </div>\n </div>\n\n @if (dismissClick.observed) {\n <button\n kirby-button\n size=\"xs\"\n (click)=\"dismissClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [showIconOnly]=\"true\"\n [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n class=\"dismiss\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n }\n</kirby-card>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i2.ImageBannerHeightDirective"],"mappings":"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"}

package/fesm2022/kirbydesign-extensions-angular-localization.mjs CHANGED Viewed

@@ -89,10 +89,10 @@ class DateOnlyPipe extends AbstractTimezoneCompensatingPipe {
     transform(input) {
         return this.format(input, DateFormats.SHORT_DATE_FORMAT);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateOnlyPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: DateOnlyPipe, isStandalone: true, name: "dateOnly" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DateOnlyPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: DateOnlyPipe, isStandalone: true, name: "dateOnly" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateOnlyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DateOnlyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dateOnly',
@@ -122,10 +122,10 @@ class TimeOnlyPipe extends AbstractTimezoneCompensatingPipe {
                 throw new Error(`Unable to derive format from "${format}"`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimeOnlyPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: TimeOnlyPipe, isStandalone: true, name: "timeOnly" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TimeOnlyPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: TimeOnlyPipe, isStandalone: true, name: "timeOnly" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimeOnlyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TimeOnlyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'timeOnly',
@@ -160,10 +160,10 @@ class TimeOrDatePipe extends AbstractTimezoneCompensatingPipe {
         }
         return this.format(date, format);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimeOrDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: TimeOrDatePipe, isStandalone: true, name: "timeOrDate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TimeOrDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: TimeOrDatePipe, isStandalone: true, name: "timeOrDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimeOrDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TimeOrDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'timeOrDate',
@@ -181,10 +181,10 @@ class FormatNumberService {
         }
         return formatNumber(value, this.localeId, digitsInfo);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormatNumberService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormatNumberService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FormatNumberService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FormatNumberService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormatNumberService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FormatNumberService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -201,10 +201,10 @@ class FormatNumberPipe {
     transform(value, digitsInfo = '1.2-2') {
         return this.formatNumberService.formatNumber(value, digitsInfo);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormatNumberPipe, deps: [{ token: FormatNumberService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: FormatNumberPipe, isStandalone: true, name: "formatNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FormatNumberPipe, deps: [{ token: FormatNumberService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: FormatNumberPipe, isStandalone: true, name: "formatNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormatNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FormatNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'formatNumber',
@@ -280,10 +280,10 @@ class AmountService {
         }
         return formatAmount(amount, this.locale, this.config, amountServiceConfiguration);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AmountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AmountService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AmountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AmountService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AmountService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AmountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -316,10 +316,10 @@ class AmountPipe {
     transform(amount, amountServiceConfiguration) {
         return this.amountService.formatAmount(amount, amountServiceConfiguration);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AmountPipe, deps: [{ token: AmountService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: AmountPipe, isStandalone: true, name: "amount" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AmountPipe, deps: [{ token: AmountService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: AmountPipe, isStandalone: true, name: "amount" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AmountPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AmountPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'amount',
@@ -343,10 +343,10 @@ class AccountNumberPipe {
     transform(value) {
         return formatAccountNumber(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccountNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: AccountNumberPipe, isStandalone: true, name: "accountNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AccountNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: AccountNumberPipe, isStandalone: true, name: "accountNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccountNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AccountNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'accountNumber',
@@ -379,10 +379,10 @@ class PhoneNumberService {
             return formattedNumber;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PhoneNumberService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PhoneNumberService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PhoneNumberService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PhoneNumberService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PhoneNumberService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PhoneNumberService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -403,10 +403,10 @@ class PhoneNumberPipe {
     transform(phoneNumber, chunk = 2, showCountryCode) {
         return this.phoneNumberService.formatPhoneNumber(phoneNumber, chunk, showCountryCode);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PhoneNumberPipe, deps: [{ token: PhoneNumberService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phoneNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PhoneNumberPipe, deps: [{ token: PhoneNumberService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phoneNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PhoneNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PhoneNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'phoneNumber',