npm - @kirbydesign/designsystem - Versions diffs - 10.4.0 → 10.5.0 - Mend

@kirbydesign/designsystem 10.4.0 → 10.5.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 (74) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-shared.mjs","sources":["../../shared/src/resize-observer/resize-observer.factory.ts","../../shared/src/resize-observer/resize-observer.service.ts","../../shared/src/theme-color/theme-color.directive.ts","../../shared/src/component-loader.directive.ts","../../shared/src/fit-heading/fit-heading.directive.ts","../../shared/src/controls/label-helpers.ts","../../shared/src/translation/translations/da.ts","../../shared/src/translation/translations/en.ts","../../shared/src/translation/translations/de.ts","../../shared/src/translation/translation.service.ts","../../shared/src/kirbydesign-designsystem-shared.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n/*\n Factory that creates a new ResizeObserver and allows us to stub it out in unit tests.\n * @docs-private\n /\n@Injectable({ providedIn: 'root' })\nexport class ResizeObserverFactory {\n create(callback: ResizeObserverCallback): ResizeObserver \| null {\n return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);\n }\n}\n","import { ElementRef, Injectable, OnDestroy } from '@angular/core';\nimport { ResizeObserverFactory } from './resize-observer.factory';\n\n@Injectable({ providedIn: 'root' })\nexport class ResizeObserverService implements OnDestroy {\n // IMPORTANT: Keeps track of the existing ResizeObserver so it can be reused for performance.\n // See: https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/z6ienONUb5A/F5-VcUZtBAAJ\n private observer: ResizeObserver \| null;\n private observedElements = new WeakMap<Element, (entry: ResizeObserverEntry) => void>();\n\n constructor(private _resizeObserverFactory: ResizeObserverFactory) {\n this.observer = this._resizeObserverFactory.create((entries) => this.handleResize(entries));\n }\n\n observe(\n elementOrRef: Element \| ElementRef<Element>,\n action: (entry: ResizeObserverEntry) => void\n ): void {\n const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;\n if (!this.observedElements.has(element)) {\n if (this.observer) {\n this.observer.observe(element);\n }\n this.observedElements.set(element, action);\n }\n }\n\n ngOnDestroy() {\n if (this.observer) {\n this.observer.disconnect();\n }\n this.observedElements = null;\n }\n\n unobserve(elementOrRef: Element \| ElementRef<Element>) {\n const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;\n if (this.observedElements.has(element)) {\n if (this.observer) {\n this.observer.unobserve(element);\n }\n this.observedElements.delete(element);\n }\n }\n\n private handleResize(entries: ResizeObserverEntry[]) {\n entries.forEach((entry) => {\n const action = this.observedElements.get(entry.target);\n if (action) {\n action(entry);\n }\n });\n }\n}\n","import { Directive, HostBinding, Input } from '@angular/core';\n\nimport { ColorHelper } from '@kirbydesign/designsystem/helpers';\nimport { ThemeColor } from '@kirbydesign/core';\n\n@Directive({\n standalone: true,\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: `kirby-avatar[themeColor],\n kirby-card[themeColor],\n kirby-icon[themeColor],\n kirby-progress-circle-ring[themeColor],\n kirby-modal-footer[themeColor],\n kirby-empty-state[themeColor]`,\n})\nexport class ThemeColorDirective {\n private _isDefault = true;\n @HostBinding('class.default')\n get isDefault() {\n return this._isDefault;\n }\n\n private _isPrimary: boolean;\n @HostBinding('class.primary')\n get isPrimary() {\n return this._isPrimary;\n }\n\n private _isSecondary: boolean;\n @HostBinding('class.secondary')\n get isSecondary() {\n return this._isSecondary;\n }\n\n private _isTertiary: boolean;\n @HostBinding('class.tertiary')\n get isTertiary() {\n return this._isTertiary;\n }\n\n private _isSuccess: boolean;\n @HostBinding('class.success')\n get isSuccess() {\n return this._isSuccess;\n }\n\n private _isWarning: boolean;\n @HostBinding('class.warning')\n get isWarning() {\n return this._isWarning;\n }\n\n private _isDanger: boolean;\n @HostBinding('class.danger')\n get isDanger() {\n return this._isDanger;\n }\n\n private _isLight: boolean;\n @HostBinding('class.light')\n get isLight() {\n return this._isLight;\n }\n\n private _isMedium: boolean;\n @HostBinding('class.medium')\n get isMedium() {\n return this._isMedium;\n }\n\n private _isDark: boolean;\n @HostBinding('class.dark')\n get isDark() {\n return this._isDark;\n }\n\n private _isWhite: boolean;\n @HostBinding('class.white')\n get isWhite() {\n return this._isWhite;\n }\n\n private _isBrightnessWhite: boolean;\n @HostBinding('class.kirby-color-brightness-white')\n get isBrightnessWhite() {\n return this._isBrightnessWhite;\n }\n\n private _isBrightnessLight: boolean;\n @HostBinding('class.kirby-color-brightness-light')\n get isBrightnessLight() {\n return this._isBrightnessLight;\n }\n\n private _isBrightnessDark: boolean;\n @HostBinding('class.kirby-color-brightness-dark')\n get isBrightnessDark() {\n return this._isBrightnessDark;\n }\n\n @Input() set themeColor(value: ThemeColor) {\n this._isDefault = !value;\n this._isPrimary = value === 'primary';\n this._isSecondary = value === 'secondary';\n this._isTertiary = value === 'tertiary';\n this._isSuccess = value === 'success';\n this._isWarning = value === 'warning';\n this._isDanger = value === 'danger';\n this._isLight = value === 'light';\n this._isMedium = value === 'medium';\n this._isDark = value === 'dark';\n this._isWhite = value === 'white';\n const colorBrightness = ColorHelper.getColorBrightness(value);\n this._isBrightnessWhite = colorBrightness === 'white';\n this._isBrightnessLight = colorBrightness === 'light';\n this._isBrightnessDark = colorBrightness === 'dark';\n }\n}\n","import {\n ComponentFactoryResolver,\n Directive,\n Input,\n OnInit,\n Renderer2,\n ViewContainerRef,\n} from '@angular/core';\n\nimport { ComponentConfiguration } from './component-configuration';\nimport { DynamicComponent } from './dynamic-component';\n\n@Directive({\n selector: '[kirbyLoadComponent]',\n standalone: true,\n})\nexport class ComponentLoaderDirective implements OnInit {\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('kirbyLoadComponent') configuration: ComponentConfiguration;\n @Input() cssClass: string;\n\n constructor(\n private componentFactoryResolver: ComponentFactoryResolver,\n private viewContainerRef: ViewContainerRef,\n private renderer: Renderer2\n ) {}\n\n ngOnInit() {\n this.loadCard();\n }\n\n loadCard() {\n const componentFactory = this.componentFactoryResolver.resolveComponentFactory(\n this.configuration.component\n );\n this.viewContainerRef.clear();\n const componentRef = this.viewContainerRef.createComponent(componentFactory);\n if (componentRef && componentRef.location && componentRef.location.nativeElement) {\n this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);\n }\n (<DynamicComponent>componentRef.instance).data = this.configuration.data;\n }\n}\n","import { Directive, ElementRef, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';\n\nimport { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';\nimport { LineClampHelper } from '@kirbydesign/designsystem/helpers';\nimport { ResizeObserverService } from '../resize-observer/resize-observer.service';\n\nconst fontSize = DesignTokenHelper.fontSize;\nconst lineHeight = DesignTokenHelper.lineHeight;\n\ninterface HeadingSize {\n name: string;\n fontSize: string;\n lineHeight: string;\n}\n\nexport interface FitHeadingConfig {\n maxLines: number;\n}\n\n@Directive({\n standalone: true,\n selector: `h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]`,\n providers: [LineClampHelper],\n})\nexport class FitHeadingDirective implements OnInit, OnDestroy {\n @Input('kirbyFitHeading') config?: FitHeadingConfig;\n\n private isObservingHostElement: boolean;\n private hostElementClone: Element;\n private isScalingHeader: boolean; // used to prevent resizeObserver to trigger on font scaling by this.scaleHeader()\n\n private headingSizes: HeadingSize[] = [\n {\n name: 'h1',\n fontSize: fontSize('xl'),\n lineHeight: lineHeight('xl'),\n },\n {\n name: 'h2',\n fontSize: fontSize('l'),\n lineHeight: lineHeight('l'),\n },\n {\n name: 'h3',\n fontSize: fontSize('m'),\n lineHeight: lineHeight('m'),\n },\n ];\n\n constructor(\n private elementRef: ElementRef,\n private renderer: Renderer2,\n private resizeObserverService: ResizeObserverService,\n private lineClampHelper: LineClampHelper\n ) {}\n\n ngOnInit(): void {\n if (this.config && this.config.maxLines) {\n this.lineClampHelper.setMaxLines(this.elementRef.nativeElement, this.config.maxLines);\n this.observeResize();\n this.isObservingHostElement = true;\n }\n }\n\n ngOnDestroy(): void {\n if (this.isObservingHostElement) {\n this.resizeObserverService.unobserve(this.elementRef);\n if (this.hostElementClone) {\n this.renderer.removeChild(this.elementRef.nativeElement, this.hostElementClone);\n }\n }\n }\n\n private observeResize(): void {\n this.resizeObserverService.observe(this.elementRef, () => {\n /\n setTimeout is used here to avoid repeated size changes\n * while the first size change is still ongoing.\n * This would result in the ResizeObserver being called again,\n * giving 'ResizeObserver loop limit exceeded' types of errors.\n /\n setTimeout(() => {\n this.scaleHeader();\n }, 0);\n });\n }\n\n private scaleHeader(): void {\n if (this.isScalingHeader) return;\n\n this.isScalingHeader = true;\n\n if (!this.hostElementClone) {\n this.hostElementClone = this.generateHostElementClone();\n this.renderer.appendChild(this.elementRef.nativeElement, this.hostElementClone);\n }\n\n this.renderer.setStyle(\n this.hostElementClone,\n 'width',\n `${this.elementRef.nativeElement.clientWidth}px`\n );\n\n const fallbackSize = this.headingSizes[this.headingSizes.length - 1];\n const fittedSize = this.headingSizes.find(this.canFitHeading.bind(this)) \|\| fallbackSize;\n\n this.setSize(this.elementRef.nativeElement, fittedSize);\n this.lineClampHelper.setLineHeight(this.elementRef.nativeElement, fittedSize.lineHeight);\n this.isScalingHeader = false;\n }\n\n private canFitHeading(size: HeadingSize) {\n this.setSize(this.hostElementClone, size);\n const lines = this.hostElementClone.clientHeight / parseInt(size.lineHeight);\n return lines <= this.config.maxLines;\n }\n\n private generateHostElementClone(): Element {\n const clone = this.elementRef.nativeElement.cloneNode(true);\n this.renderer.setStyle(clone, 'position', 'absolute');\n this.renderer.setStyle(clone, 'visibility', 'hidden');\n this.lineClampHelper.removeLineClamp(clone);\n return clone;\n }\n\n private setSize(el: Element, size: HeadingSize): void {\n this.renderer.setStyle(el, 'font-size', size.fontSize);\n this.renderer.setStyle(el, 'line-height', size.lineHeight);\n }\n}\n","import { Renderer2 } from '@angular/core';\n\nexport function findItemLabel(element: HTMLElement): HTMLElement {\n const itemEl = element.closest('kirby-item');\n if (itemEl) {\n return itemEl.querySelector('kirby-label');\n }\n\n return null;\n}\n\nexport function setAccessibleLabel(element: HTMLElement): string {\n const label = findItemLabel(element);\n if (label) {\n label.setAttribute('aria-hidden', 'true');\n return label.textContent;\n }\n}\n\nexport function inheritAriaLabelText(element: HTMLElement): string {\n const attribute = 'aria-label';\n if (element.hasAttribute(attribute)) {\n const value = element.getAttribute(attribute);\n element.removeAttribute(attribute);\n return value;\n }\n}\n\n/\n Forwards specified attributes from a source element to a target element.\n \n @param sourceElement - The HTML element from which attributes will be removed from.\n * @param attributes - An array of attribute names to inherit from the source element.\n * @param renderer - An instance of Angular's Renderer2.\n * @param targetElement - (Optional) The HTML element to which the attributes should be applied.\n * If not provided, the attributes will only be removed from the source element.\n \n @returns A record of the inherited attributes and their values. If no attributes are inherited, an empty object is returned.\n /\nexport function forwardAttributes(\n sourceElement: HTMLElement,\n attributes: string[],\n renderer: Renderer2,\n targetElement?: HTMLElement\n): Record<string, any> {\n const inheritedAttributes: Record<string, any> = {};\n\n if (!sourceElement \|\| !attributes \|\| attributes.length === 0) {\n return inheritedAttributes;\n }\n\n attributes.forEach((attribute) => {\n if (sourceElement.hasAttribute(attribute)) {\n const value = sourceElement.getAttribute(attribute);\n inheritedAttributes[attribute] = value;\n\n if (targetElement) {\n renderer.setAttribute(targetElement, attribute, value);\n }\n\n renderer.removeAttribute(sourceElement, attribute);\n }\n });\n\n return inheritedAttributes;\n}\n","import { Translation } from '../translation.interface';\n\nexport const da: Translation = {\n $code: 'da',\n back: 'Tilbage',\n close: 'Luk',\n nextMonth: 'Næste måned',\n nextSlide: 'Næste slide',\n previousMonth: 'Forrige måned',\n previousSlide: 'Forrige slide',\n selectYear: 'Vælg år',\n readMore: 'Læs mere',\n};\n","import { Translation } from '../translation.interface';\n\nexport const en: Translation = {\n $code: 'en',\n back: 'Back',\n close: 'Close',\n nextMonth: 'Next month',\n nextSlide: 'Next slide',\n previousMonth: 'Previous month',\n previousSlide: 'Previous slide',\n selectYear: 'Select year',\n readMore: 'Read more',\n};\n","import { Translation } from '../translation.interface';\n\nexport const de: Translation = {\n $code: 'de',\n back: 'Zurück',\n close: 'Schließen',\n nextMonth: 'Nächsten Monat',\n nextSlide: 'Zur nächsten Folie',\n previousMonth: 'Letzten Monat',\n previousSlide: 'Zur vorherigen Folie',\n selectYear: 'Jahr auswählen',\n readMore: 'Mehr lesen',\n};\n","import { Injectable } from '@angular/core';\nimport { Inject, LOCALE_ID } from '@angular/core';\nimport { da } from './translations/da';\nimport { en } from './translations/en';\nimport { de } from './translations/de';\nimport { Translation } from './translation.interface';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class TranslationService {\n private activeTranslation: Translation = en;\n private translations: { [key: string]: Translation } = { da, en, de };\n\n constructor(@Inject(LOCALE_ID) private localeId: string) {\n this.setActiveTranslation(localeId);\n }\n\n private setActiveTranslation(localeId: string): string {\n const baseLocaleId = localeId.split('-')[0];\n const translation = this.translations[baseLocaleId];\n\n if (!translation) {\n console.warn(\n `[Kirby] Internal component translations were not found for locale \"${this.localeId}\", falling back to ${this.get('$code')}`\n );\n return;\n }\n\n this.activeTranslation = translation;\n }\n\n get(key: keyof Translation): string {\n return this.activeTranslation[key];\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i1.ResizeObserverFactory","i1.ResizeObserverService"],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-shared.mjs","sources":["../../shared/src/resize-observer/resize-observer.factory.ts","../../shared/src/resize-observer/resize-observer.service.ts","../../shared/src/theme-color/theme-color.directive.ts","../../shared/src/component-loader.directive.ts","../../shared/src/fit-heading/fit-heading.directive.ts","../../shared/src/controls/label-helpers.ts","../../shared/src/translation/translations/da.ts","../../shared/src/translation/translations/en.ts","../../shared/src/translation/translations/de.ts","../../shared/src/translation/translation.service.ts","../../shared/src/kirbydesign-designsystem-shared.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n/*\n Factory that creates a new ResizeObserver and allows us to stub it out in unit tests.\n * @docs-private\n /\n@Injectable({ providedIn: 'root' })\nexport class ResizeObserverFactory {\n create(callback: ResizeObserverCallback): ResizeObserver \| null {\n return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);\n }\n}\n","import { ElementRef, Injectable, OnDestroy } from '@angular/core';\nimport { ResizeObserverFactory } from './resize-observer.factory';\n\n@Injectable({ providedIn: 'root' })\nexport class ResizeObserverService implements OnDestroy {\n // IMPORTANT: Keeps track of the existing ResizeObserver so it can be reused for performance.\n // See: https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/z6ienONUb5A/F5-VcUZtBAAJ\n private observer: ResizeObserver \| null;\n private observedElements = new WeakMap<Element, (entry: ResizeObserverEntry) => void>();\n\n constructor(private _resizeObserverFactory: ResizeObserverFactory) {\n this.observer = this._resizeObserverFactory.create((entries) => this.handleResize(entries));\n }\n\n observe(\n elementOrRef: Element \| ElementRef<Element>,\n action: (entry: ResizeObserverEntry) => void\n ): void {\n const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;\n if (!this.observedElements.has(element)) {\n if (this.observer) {\n this.observer.observe(element);\n }\n this.observedElements.set(element, action);\n }\n }\n\n ngOnDestroy() {\n if (this.observer) {\n this.observer.disconnect();\n }\n this.observedElements = null;\n }\n\n unobserve(elementOrRef: Element \| ElementRef<Element>) {\n const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;\n if (this.observedElements.has(element)) {\n if (this.observer) {\n this.observer.unobserve(element);\n }\n this.observedElements.delete(element);\n }\n }\n\n private handleResize(entries: ResizeObserverEntry[]) {\n entries.forEach((entry) => {\n const action = this.observedElements.get(entry.target);\n if (action) {\n action(entry);\n }\n });\n }\n}\n","import { Directive, HostBinding, Input } from '@angular/core';\n\nimport { ColorHelper } from '@kirbydesign/designsystem/helpers';\nimport { ThemeColor } from '@kirbydesign/core';\n\n@Directive({\n standalone: true,\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: `kirby-avatar[themeColor],\n kirby-card[themeColor],\n kirby-icon[themeColor],\n kirby-progress-circle-ring[themeColor],\n kirby-modal-footer[themeColor],\n kirby-empty-state[themeColor]`,\n})\nexport class ThemeColorDirective {\n private _isDefault = true;\n @HostBinding('class.default')\n get isDefault() {\n return this._isDefault;\n }\n\n private _isPrimary: boolean;\n @HostBinding('class.primary')\n get isPrimary() {\n return this._isPrimary;\n }\n\n private _isSecondary: boolean;\n @HostBinding('class.secondary')\n get isSecondary() {\n return this._isSecondary;\n }\n\n private _isTertiary: boolean;\n @HostBinding('class.tertiary')\n get isTertiary() {\n return this._isTertiary;\n }\n\n private _isSuccess: boolean;\n @HostBinding('class.success')\n get isSuccess() {\n return this._isSuccess;\n }\n\n private _isWarning: boolean;\n @HostBinding('class.warning')\n get isWarning() {\n return this._isWarning;\n }\n\n private _isDanger: boolean;\n @HostBinding('class.danger')\n get isDanger() {\n return this._isDanger;\n }\n\n private _isLight: boolean;\n @HostBinding('class.light')\n get isLight() {\n return this._isLight;\n }\n\n private _isMedium: boolean;\n @HostBinding('class.medium')\n get isMedium() {\n return this._isMedium;\n }\n\n private _isDark: boolean;\n @HostBinding('class.dark')\n get isDark() {\n return this._isDark;\n }\n\n private _isWhite: boolean;\n @HostBinding('class.white')\n get isWhite() {\n return this._isWhite;\n }\n\n private _isBrightnessWhite: boolean;\n @HostBinding('class.kirby-color-brightness-white')\n get isBrightnessWhite() {\n return this._isBrightnessWhite;\n }\n\n private _isBrightnessLight: boolean;\n @HostBinding('class.kirby-color-brightness-light')\n get isBrightnessLight() {\n return this._isBrightnessLight;\n }\n\n private _isBrightnessDark: boolean;\n @HostBinding('class.kirby-color-brightness-dark')\n get isBrightnessDark() {\n return this._isBrightnessDark;\n }\n\n @Input() set themeColor(value: ThemeColor) {\n this._isDefault = !value;\n this._isPrimary = value === 'primary';\n this._isSecondary = value === 'secondary';\n this._isTertiary = value === 'tertiary';\n this._isSuccess = value === 'success';\n this._isWarning = value === 'warning';\n this._isDanger = value === 'danger';\n this._isLight = value === 'light';\n this._isMedium = value === 'medium';\n this._isDark = value === 'dark';\n this._isWhite = value === 'white';\n const colorBrightness = ColorHelper.getColorBrightness(value);\n this._isBrightnessWhite = colorBrightness === 'white';\n this._isBrightnessLight = colorBrightness === 'light';\n this._isBrightnessDark = colorBrightness === 'dark';\n }\n}\n","import {\n ComponentFactoryResolver,\n Directive,\n Input,\n OnInit,\n Renderer2,\n ViewContainerRef,\n} from '@angular/core';\n\nimport { ComponentConfiguration } from './component-configuration';\nimport { DynamicComponent } from './dynamic-component';\n\n@Directive({\n selector: '[kirbyLoadComponent]',\n standalone: true,\n})\nexport class ComponentLoaderDirective implements OnInit {\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('kirbyLoadComponent') configuration: ComponentConfiguration;\n @Input() cssClass: string;\n\n constructor(\n private componentFactoryResolver: ComponentFactoryResolver,\n private viewContainerRef: ViewContainerRef,\n private renderer: Renderer2\n ) {}\n\n ngOnInit() {\n this.loadCard();\n }\n\n loadCard() {\n const componentFactory = this.componentFactoryResolver.resolveComponentFactory(\n this.configuration.component\n );\n this.viewContainerRef.clear();\n const componentRef = this.viewContainerRef.createComponent(componentFactory);\n if (componentRef && componentRef.location && componentRef.location.nativeElement) {\n this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);\n }\n (<DynamicComponent>componentRef.instance).data = this.configuration.data;\n }\n}\n","import { Directive, ElementRef, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';\n\nimport { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';\nimport { LineClampHelper } from '@kirbydesign/designsystem/helpers';\nimport { ResizeObserverService } from '../resize-observer/resize-observer.service';\n\nconst fontSize = DesignTokenHelper.fontSize;\nconst lineHeight = DesignTokenHelper.lineHeight;\n\ninterface HeadingSize {\n name: string;\n fontSize: string;\n lineHeight: string;\n}\n\nexport interface FitHeadingConfig {\n maxLines: number;\n}\n\n@Directive({\n standalone: true,\n selector: `h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]`,\n providers: [LineClampHelper],\n})\nexport class FitHeadingDirective implements OnInit, OnDestroy {\n @Input('kirbyFitHeading') config?: FitHeadingConfig;\n\n private isObservingHostElement: boolean;\n private hostElementClone: Element;\n private isScalingHeader: boolean; // used to prevent resizeObserver to trigger on font scaling by this.scaleHeader()\n\n private headingSizes: HeadingSize[] = [\n {\n name: 'h1',\n fontSize: fontSize('xl'),\n lineHeight: lineHeight('xl'),\n },\n {\n name: 'h2',\n fontSize: fontSize('l'),\n lineHeight: lineHeight('l'),\n },\n {\n name: 'h3',\n fontSize: fontSize('m'),\n lineHeight: lineHeight('m'),\n },\n ];\n\n constructor(\n private elementRef: ElementRef,\n private renderer: Renderer2,\n private resizeObserverService: ResizeObserverService,\n private lineClampHelper: LineClampHelper\n ) {}\n\n ngOnInit(): void {\n if (this.config && this.config.maxLines) {\n this.lineClampHelper.setMaxLines(this.elementRef.nativeElement, this.config.maxLines);\n this.observeResize();\n this.isObservingHostElement = true;\n }\n }\n\n ngOnDestroy(): void {\n if (this.isObservingHostElement) {\n this.resizeObserverService.unobserve(this.elementRef);\n if (this.hostElementClone) {\n this.renderer.removeChild(this.elementRef.nativeElement, this.hostElementClone);\n }\n }\n }\n\n private observeResize(): void {\n this.resizeObserverService.observe(this.elementRef, () => {\n /\n setTimeout is used here to avoid repeated size changes\n * while the first size change is still ongoing.\n * This would result in the ResizeObserver being called again,\n * giving 'ResizeObserver loop limit exceeded' types of errors.\n /\n setTimeout(() => {\n this.scaleHeader();\n }, 0);\n });\n }\n\n private scaleHeader(): void {\n if (this.isScalingHeader) return;\n\n this.isScalingHeader = true;\n\n if (!this.hostElementClone) {\n this.hostElementClone = this.generateHostElementClone();\n this.renderer.appendChild(this.elementRef.nativeElement.parentElement, this.hostElementClone);\n }\n\n this.renderer.setStyle(\n this.hostElementClone,\n 'width',\n `${this.elementRef.nativeElement.clientWidth}px`\n );\n\n const fallbackSize = this.headingSizes[this.headingSizes.length - 1];\n const fittedSize = this.headingSizes.find(this.canFitHeading.bind(this)) \|\| fallbackSize;\n\n this.setSize(this.elementRef.nativeElement, fittedSize);\n this.lineClampHelper.setLineHeight(this.elementRef.nativeElement, fittedSize.lineHeight);\n this.isScalingHeader = false;\n }\n\n private canFitHeading(size: HeadingSize) {\n this.setSize(this.hostElementClone, size);\n const lines = this.hostElementClone.clientHeight / parseInt(size.lineHeight);\n return lines <= this.config.maxLines;\n }\n\n private generateHostElementClone(): Element {\n const clone = this.elementRef.nativeElement.cloneNode(true);\n this.renderer.setStyle(clone, 'position', 'absolute');\n this.renderer.setStyle(clone, 'visibility', 'hidden');\n this.lineClampHelper.removeLineClamp(clone);\n return clone;\n }\n\n private setSize(el: Element, size: HeadingSize): void {\n this.renderer.setStyle(el, 'font-size', size.fontSize);\n this.renderer.setStyle(el, 'line-height', size.lineHeight);\n }\n}\n","import { Renderer2 } from '@angular/core';\n\nexport function findItemLabel(element: HTMLElement): HTMLElement {\n const itemEl = element.closest('kirby-item');\n if (itemEl) {\n return itemEl.querySelector('kirby-label');\n }\n\n return null;\n}\n\nexport function setAccessibleLabel(element: HTMLElement): string {\n const label = findItemLabel(element);\n if (label) {\n label.setAttribute('aria-hidden', 'true');\n return label.textContent;\n }\n}\n\nexport function inheritAriaLabelText(element: HTMLElement): string {\n const attribute = 'aria-label';\n if (element.hasAttribute(attribute)) {\n const value = element.getAttribute(attribute);\n element.removeAttribute(attribute);\n return value;\n }\n}\n\n/\n Forwards specified attributes from a source element to a target element.\n \n @param sourceElement - The HTML element from which attributes will be removed from.\n * @param attributes - An array of attribute names to inherit from the source element.\n * @param renderer - An instance of Angular's Renderer2.\n * @param targetElement - (Optional) The HTML element to which the attributes should be applied.\n * If not provided, the attributes will only be removed from the source element.\n \n @returns A record of the inherited attributes and their values. If no attributes are inherited, an empty object is returned.\n /\nexport function forwardAttributes(\n sourceElement: HTMLElement,\n attributes: string[],\n renderer: Renderer2,\n targetElement?: HTMLElement\n): Record<string, any> {\n const inheritedAttributes: Record<string, any> = {};\n\n if (!sourceElement \|\| !attributes \|\| attributes.length === 0) {\n return inheritedAttributes;\n }\n\n attributes.forEach((attribute) => {\n if (sourceElement.hasAttribute(attribute)) {\n const value = sourceElement.getAttribute(attribute);\n inheritedAttributes[attribute] = value;\n\n if (targetElement) {\n renderer.setAttribute(targetElement, attribute, value);\n }\n\n renderer.removeAttribute(sourceElement, attribute);\n }\n });\n\n return inheritedAttributes;\n}\n","import { Translation } from '../translation.interface';\n\nexport const da: Translation = {\n $code: 'da',\n back: 'Tilbage',\n close: 'Luk',\n nextMonth: 'Næste måned',\n nextSlide: 'Næste slide',\n previousMonth: 'Forrige måned',\n previousSlide: 'Forrige slide',\n selectYear: 'Vælg år',\n readMore: 'Læs mere',\n};\n","import { Translation } from '../translation.interface';\n\nexport const en: Translation = {\n $code: 'en',\n back: 'Back',\n close: 'Close',\n nextMonth: 'Next month',\n nextSlide: 'Next slide',\n previousMonth: 'Previous month',\n previousSlide: 'Previous slide',\n selectYear: 'Select year',\n readMore: 'Read more',\n};\n","import { Translation } from '../translation.interface';\n\nexport const de: Translation = {\n $code: 'de',\n back: 'Zurück',\n close: 'Schließen',\n nextMonth: 'Nächsten Monat',\n nextSlide: 'Zur nächsten Folie',\n previousMonth: 'Letzten Monat',\n previousSlide: 'Zur vorherigen Folie',\n selectYear: 'Jahr auswählen',\n readMore: 'Mehr lesen',\n};\n","import { Injectable } from '@angular/core';\nimport { Inject, LOCALE_ID } from '@angular/core';\nimport { da } from './translations/da';\nimport { en } from './translations/en';\nimport { de } from './translations/de';\nimport { Translation } from './translation.interface';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class TranslationService {\n private activeTranslation: Translation = en;\n private translations: { [key: string]: Translation } = { da, en, de };\n\n constructor(@Inject(LOCALE_ID) private localeId: string) {\n this.setActiveTranslation(localeId);\n }\n\n private setActiveTranslation(localeId: string): string {\n const baseLocaleId = localeId.split('-')[0];\n const translation = this.translations[baseLocaleId];\n\n if (!translation) {\n console.warn(\n `[Kirby] Internal component translations were not found for locale \"${this.localeId}\", falling back to ${this.get('$code')}`\n );\n return;\n }\n\n this.activeTranslation = translation;\n }\n\n get(key: keyof Translation): string {\n return this.activeTranslation[key];\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i1.ResizeObserverFactory","i1.ResizeObserverService"],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-slide-button.mjs CHANGED Viewed

@@ -73,10 +73,10 @@ class SlideButtonComponent {
         this.slideDone.emit();
         this.isSlideDone = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SlideButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: SlideButtonComponent, isStandalone: true, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, host: { listeners: { "keyup.arrowup": "onSliderMouseup($event)", "keyup.arrowdown": "onSliderMouseup($event)", "keyup.arrowleft": "onSliderMouseup($event)", "keyup.arrowright": "onSliderMouseup($event)", "keyup.pageup": "onSliderMouseup($event)", "keyup.pagedown": "onSliderMouseup($event)", "keyup.home": "onSliderMouseup($event)", "keyup.end": "onSliderMouseup($event)", "keydown.arrowup": "onKeyDownEvents($event)", "keydown.arrowdown": "onKeyDownEvents($event)", "keydown.arrowleft": "onKeyDownEvents($event)", "keydown.arrowright": "onKeyDownEvents($event)", "keydown.pageup": "onSliderMousedown($event)", "keydown.pagedown": "onSliderMousedown($event)", "keydown.home": "onSliderMousedown($event)", "keydown.end": "onSliderMousedown($event)" } }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\" [inert]=\"isSlideDone\">\n  <input\n    type=\"range\"\n    (mouseup)=\"onSliderMouseup()\"\n    (touchend)=\"onSliderMouseup()\"\n    (input)=\"onSliderValueChange($event.target.value)\"\n    (mousedown)=\"onSliderMousedown()\"\n    (touchstart)=\"onSliderMousedown()\"\n    class=\"slide-button\"\n    [value]=\"value\"\n    max=\"100\"\n    [step]=\"step\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px;pointer-events:none}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2;pointer-events:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-webkit-slider-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}:host .slide-button:focus-visible::-webkit-slider-thumb{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: SlideButtonComponent, isStandalone: true, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, host: { listeners: { "keyup.arrowup": "onSliderMouseup($event)", "keyup.arrowdown": "onSliderMouseup($event)", "keyup.arrowleft": "onSliderMouseup($event)", "keyup.arrowright": "onSliderMouseup($event)", "keyup.pageup": "onSliderMouseup($event)", "keyup.pagedown": "onSliderMouseup($event)", "keyup.home": "onSliderMouseup($event)", "keyup.end": "onSliderMouseup($event)", "keydown.arrowup": "onKeyDownEvents($event)", "keydown.arrowdown": "onKeyDownEvents($event)", "keydown.arrowleft": "onKeyDownEvents($event)", "keydown.arrowright": "onKeyDownEvents($event)", "keydown.pageup": "onSliderMousedown($event)", "keydown.pagedown": "onSliderMousedown($event)", "keydown.home": "onSliderMousedown($event)", "keydown.end": "onSliderMousedown($event)" } }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\" [inert]=\"isSlideDone\">\n  <input\n    type=\"range\"\n    (mouseup)=\"onSliderMouseup()\"\n    (touchend)=\"onSliderMouseup()\"\n    (input)=\"onSliderValueChange($event.target.value)\"\n    (mousedown)=\"onSliderMousedown()\"\n    (touchstart)=\"onSliderMousedown()\"\n    class=\"slide-button\"\n    [value]=\"value\"\n    max=\"100\"\n    [step]=\"step\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px;pointer-events:none}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2;pointer-events:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-webkit-slider-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}:host .slide-button:focus-visible::-webkit-slider-thumb{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SlideButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideButtonComponent, decorators: [{
             type: Component,
             args: [{ imports: [CommonModule], selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\" [inert]=\"isSlideDone\">\n  <input\n    type=\"range\"\n    (mouseup)=\"onSliderMouseup()\"\n    (touchend)=\"onSliderMouseup()\"\n    (input)=\"onSliderValueChange($event.target.value)\"\n    (mousedown)=\"onSliderMousedown()\"\n    (touchstart)=\"onSliderMousedown()\"\n    class=\"slide-button\"\n    [value]=\"value\"\n    max=\"100\"\n    [step]=\"step\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px;pointer-events:none}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2;pointer-events:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-webkit-slider-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}:host .slide-button:focus-visible::-webkit-slider-thumb{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { text: [{

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

@@ -12,10 +12,10 @@ import * as i5 from '@kirbydesign/designsystem/icon';
 import { IconModule } from '@kirbydesign/designsystem/icon';
 class SlideDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: SlideDirective, isStandalone: false, selector: "[kirbySlide]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: SlideDirective, isStandalone: false, selector: "[kirbySlide]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SlideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbySlide]',
@@ -101,10 +101,10 @@ class SlidesComponent {
     getNoControlsConfig() {
         return { ...this.getDefaultConfig(), pagination: false, navigation: false };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SlidesComponent, deps: [{ token: i1.PlatformService }, { token: i0.ChangeDetectorRef }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: SlidesComponent, isStandalone: false, selector: "kirby-slides", inputs: { slidesOptions: "slidesOptions", title: "title", slides: "slides", showNavigation: "showNavigation" }, outputs: { slideChange: "slideChange" }, queries: [{ propertyName: "slideTemplate", first: true, predicate: SlideDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"navigation\" *ngIf=\"showNavigation || title !== undefined\">\n  <span class=\"kirby-text-medium\">{{ title }}</span>\n\n  <div\n    class=\"navigation-inner\"\n    *ngIf=\"\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    \"\n  >\n    <div\n      class=\"pagination\"\n      [ngClass]=\"_paginationId\"\n      *ngIf=\"!slidesOptions || slidesOptions?.pagination === undefined\"\n    ></div>\n    <div\n      class=\"buttons\"\n      *ngIf=\"!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)\"\n    >\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-prev swiper-button-prev\"\n        [ngClass]=\"_prevButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-back\"></kirby-icon>\n      </button>\n\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-next swiper-button-next\"\n        [ngClass]=\"_nextButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-more\"></kirby-icon>\n      </button>\n\n      <ng-content select=\"button[kirby-button]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\n     https://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  <swiper-slide *ngFor=\"let slide of slides; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n    ></ng-container>\n  </swiper-slide>\n</swiper-container>\n", styles: [":host{--swiper-navigation-sides-offset: 0;--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 6px;--swiper-pagination-bullet-border-radius: 3px;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-color: var(--kirby-black);--swiper-pagination-bullet-inactive-color: var(--kirby-black);--swiper-pagination-bullet-inactive-opacity: .2}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media (min-width: 768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container{padding-block:24px;margin-block:-24px}@media (max-width: 767px){:host swiper-container{padding-inline:16px;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: i5.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlidesComponent, deps: [{ token: i1.PlatformService }, { token: i0.ChangeDetectorRef }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: SlidesComponent, isStandalone: false, selector: "kirby-slides", inputs: { slidesOptions: "slidesOptions", title: "title", slides: "slides", showNavigation: "showNavigation" }, outputs: { slideChange: "slideChange" }, queries: [{ propertyName: "slideTemplate", first: true, predicate: SlideDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"navigation\" *ngIf=\"showNavigation || title !== undefined\">\n  <span class=\"kirby-text-medium\">{{ title }}</span>\n\n  <div\n    class=\"navigation-inner\"\n    *ngIf=\"\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    \"\n  >\n    <div\n      class=\"pagination\"\n      [ngClass]=\"_paginationId\"\n      *ngIf=\"!slidesOptions || slidesOptions?.pagination === undefined\"\n    ></div>\n    <div\n      class=\"buttons\"\n      *ngIf=\"!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)\"\n    >\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-prev swiper-button-prev\"\n        [ngClass]=\"_prevButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-back\"></kirby-icon>\n      </button>\n\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-next swiper-button-next\"\n        [ngClass]=\"_nextButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-more\"></kirby-icon>\n      </button>\n\n      <ng-content select=\"button[kirby-button]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\n     https://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  <swiper-slide *ngFor=\"let slide of slides; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n    ></ng-container>\n  </swiper-slide>\n</swiper-container>\n", styles: [":host{--swiper-navigation-sides-offset: 0;--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 6px;--swiper-pagination-bullet-border-radius: 3px;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-color: var(--kirby-black);--swiper-pagination-bullet-inactive-color: var(--kirby-black);--swiper-pagination-bullet-inactive-opacity: .2}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media (min-width: 768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container{padding-block:24px;margin-block:-24px}@media (max-width: 767px){:host swiper-container{padding-inline:16px;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: i5.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SlidesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlidesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-slides', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"navigation\" *ngIf=\"showNavigation || title !== undefined\">\n  <span class=\"kirby-text-medium\">{{ title }}</span>\n\n  <div\n    class=\"navigation-inner\"\n    *ngIf=\"\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    \"\n  >\n    <div\n      class=\"pagination\"\n      [ngClass]=\"_paginationId\"\n      *ngIf=\"!slidesOptions || slidesOptions?.pagination === undefined\"\n    ></div>\n    <div\n      class=\"buttons\"\n      *ngIf=\"!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)\"\n    >\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-prev swiper-button-prev\"\n        [ngClass]=\"_prevButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-back\"></kirby-icon>\n      </button>\n\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-next swiper-button-next\"\n        [ngClass]=\"_nextButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-more\"></kirby-icon>\n      </button>\n\n      <ng-content select=\"button[kirby-button]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\n     https://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  <swiper-slide *ngFor=\"let slide of slides; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n    ></ng-container>\n  </swiper-slide>\n</swiper-container>\n", styles: [":host{--swiper-navigation-sides-offset: 0;--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 6px;--swiper-pagination-bullet-border-radius: 3px;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-color: var(--kirby-black);--swiper-pagination-bullet-inactive-color: var(--kirby-black);--swiper-pagination-bullet-inactive-opacity: .2}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media (min-width: 768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container{padding-block:24px;margin-block:-24px}@media (max-width: 767px){:host swiper-container{padding-inline:16px;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1.PlatformService }, { type: i0.ChangeDetectorRef }, { type: i2.TranslationService }], propDecorators: { swiperContainer: [{
@@ -131,10 +131,10 @@ class SlideStretchHeightDirective {
         this.renderer = renderer;
         this.renderer.setStyle(this.elementRef.nativeElement, 'height', '100%');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SlideStretchHeightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: SlideStretchHeightDirective, isStandalone: false, selector: "[slideStretchHeight]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideStretchHeightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: SlideStretchHeightDirective, isStandalone: false, selector: "[slideStretchHeight]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SlideStretchHeightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideStretchHeightDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -145,11 +145,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 const declarations = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];
 class SlideModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SlideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: SlideModule, declarations: [SlidesComponent, SlideDirective, SlideStretchHeightDirective], imports: [CommonModule, ButtonComponent, IconModule], exports: [SlidesComponent, SlideDirective, SlideStretchHeightDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: SlideModule, declarations: [SlidesComponent, SlideDirective, SlideStretchHeightDirective], imports: [CommonModule, ButtonComponent, IconModule], exports: [SlidesComponent, SlideDirective, SlideStretchHeightDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SlideModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...declarations],

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

@@ -3,20 +3,20 @@ import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 class SpinnerComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: SpinnerComponent, isStandalone: false, selector: "kirby-spinner", ngImport: i0, template: "<div class=\"spinner\">\n  <div class=\"inner-circle\"></div>\n  <div class=\"outer-circle\"></div>\n</div>\n", styles: [".spinner{overflow:hidden;width:32px;height:32px;position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:50%;background-color:var(--kirby-primary);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.outer-circle{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: SpinnerComponent, isStandalone: false, selector: "kirby-spinner", ngImport: i0, template: "<div class=\"spinner\">\n  <div class=\"inner-circle\"></div>\n  <div class=\"outer-circle\"></div>\n</div>\n", styles: [".spinner{overflow:hidden;width:32px;height:32px;position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:50%;background-color:var(--kirby-primary);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.outer-circle{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-spinner', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"spinner\">\n  <div class=\"inner-circle\"></div>\n  <div class=\"outer-circle\"></div>\n</div>\n", styles: [".spinner{overflow:hidden;width:32px;height:32px;position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:50%;background-color:var(--kirby-primary);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.outer-circle{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"] }]
         }] });
 class SpinnerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule], exports: [SpinnerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SpinnerModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule], exports: [SpinnerComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SpinnerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SpinnerComponent],

package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs CHANGED Viewed

@@ -10,10 +10,10 @@ class TabNavigationItemComponent {
         this.truncate = true;
         /* */
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: TabNavigationItemComponent, isStandalone: false, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, ngImport: i0, template: "<button role=\"tab\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: TabNavigationItemComponent, isStandalone: false, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, ngImport: i0, template: "<button role=\"tab\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-tab-navigation-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button role=\"tab\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
@@ -115,10 +115,10 @@ class TabNavigationComponent {
             this.setTabElements();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: TabNavigationComponent, isStandalone: false, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;position:relative}@media (max-width: 767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:12px;-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media (max-width: 767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: TabNavigationComponent, isStandalone: false, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;position:relative}@media (max-width: 767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:12px;-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media (max-width: 767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-tab-navigation', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;position:relative}@media (max-width: 767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:12px;-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media (max-width: 767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"] }]
         }], ctorParameters: () => [{ type: i1.WindowRef }, { type: i2.KeyboardHandlerService }], propDecorators: { tabBar: [{
@@ -152,11 +152,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 class TabNavigationModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: TabNavigationModule, declarations: [TabNavigationComponent, TabNavigationItemComponent], imports: [CommonModule], exports: [TabNavigationComponent, TabNavigationItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabNavigationModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: TabNavigationModule, declarations: [TabNavigationComponent, TabNavigationItemComponent], imports: [CommonModule], exports: [TabNavigationComponent, TabNavigationItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabNavigationModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabNavigationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabNavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

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

@@ -19,10 +19,10 @@ class TabsService {
     resetOutlet() {
         this.outletSubject$.next(null);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabsService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -40,10 +40,10 @@ class TabsComponent {
     ngOnDestroy() {
         this.tabsService.resetOutlet();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: TabsComponent, isStandalone: false, selector: "kirby-tab-bar", host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: IonTabs, descendants: true, static: true }], ngImport: i0, template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width: 768px){ion-tabs{--kirby-tab-bar-height: 70px}ion-tabs ion-tab-bar{column-gap:24px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end;column-gap:initial}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"], dependencies: [{ kind: "component", type: i2.IonTabs, selector: "ion-tabs" }, { kind: "component", type: i2.IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: TabsComponent, isStandalone: false, selector: "kirby-tab-bar", host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: IonTabs, descendants: true, static: true }], ngImport: i0, template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width: 768px){ion-tabs{--kirby-tab-bar-height: 70px}ion-tabs ion-tab-bar{column-gap:24px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end;column-gap:initial}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"], dependencies: [{ kind: "component", type: i2.IonTabs, selector: "ion-tabs" }, { kind: "component", type: i2.IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-tab-bar', standalone: false, template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width: 768px){ion-tabs{--kirby-tab-bar-height: 70px}ion-tabs ion-tab-bar{column-gap:24px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end;column-gap:initial}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"] }]
         }], ctorParameters: () => [{ type: TabsService }], propDecorators: { tabBarBottomHidden: [{
@@ -67,10 +67,10 @@ class TabButtonComponent {
             dispatchEvent(clickEvent);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: TabButtonComponent, isStandalone: false, selector: "kirby-tab-button", inputs: { tab: "tab" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  <ng-content\n    *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n    select=\"kirby-icon:not([selected-tab])\"\n  ></ng-content>\n  <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: rgb(244.8, 244.8, 244.8);--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(244.8, 244.8, 244.8)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(234.6, 234.6, 234.6)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:500;font-size:12px;line-height:16px;--color: var(--kirby-text-color-semi-dark);--color-selected: var(--kirby-black);--padding-start: 0;--padding-end: 0;--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) }ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media (min-width: 768px){ion-tab-button{flex:none;flex-direction:row;font-size:14px;line-height:20px;--padding-start: 24px;--padding-end: 24px;--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: 8px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tab-button{--padding-start: 12px;--padding-end: 12px}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: TabButtonComponent, isStandalone: false, selector: "kirby-tab-button", inputs: { tab: "tab" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  <ng-content\n    *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n    select=\"kirby-icon:not([selected-tab])\"\n  ></ng-content>\n  <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: rgb(244.8, 244.8, 244.8);--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(244.8, 244.8, 244.8)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(234.6, 234.6, 234.6)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:500;font-size:12px;line-height:16px;--color: var(--kirby-text-color-semi-dark);--color-selected: var(--kirby-black);--padding-start: 0;--padding-end: 0;--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) }ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media (min-width: 768px){ion-tab-button{flex:none;flex-direction:row;font-size:14px;line-height:20px;--padding-start: 24px;--padding-end: 24px;--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: 8px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tab-button{--padding-start: 12px;--padding-end: 12px}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-tab-button', standalone: false, template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  <ng-content\n    *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n    select=\"kirby-icon:not([selected-tab])\"\n  ></ng-content>\n  <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: rgb(244.8, 244.8, 244.8);--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(244.8, 244.8, 244.8)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(234.6, 234.6, 234.6)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:500;font-size:12px;line-height:16px;--color: var(--kirby-text-color-semi-dark);--color-selected: var(--kirby-black);--padding-start: 0;--padding-end: 0;--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) }ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media (min-width: 768px){ion-tab-button{flex:none;flex-direction:row;font-size:14px;line-height:20px;--padding-start: 24px;--padding-end: 24px;--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: 8px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tab-button{--padding-start: 12px;--padding-end: 12px}}\n"] }]
         }], propDecorators: { tab: [{
@@ -83,11 +83,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 class TabsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: TabsModule, declarations: [TabsComponent, TabButtonComponent], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton], exports: [TabsComponent, TabButtonComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabsModule, providers: [TabsService], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: TabsModule, declarations: [TabsComponent, TabButtonComponent], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton], exports: [TabsComponent, TabButtonComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabsModule, providers: [TabsService], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton],