@kirbydesign/designsystem 8.9.0 → 8.11.0

package/fesm2015/kirbydesign-designsystem-tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-tabs.mjs","sources":["../../../../libs/designsystem/tabs/src/tabs.service.ts","../../../../libs/designsystem/tabs/src/tabs.component.ts","../../../../libs/designsystem/tabs/src/tabs.component.html","../../../../libs/designsystem/tabs/src/tab-button/tab-button.events.ts","../../../../libs/designsystem/tabs/src/tab-button/tab-button.component.ts","../../../../libs/designsystem/tabs/src/tab-button/tab-button.component.html","../../../../libs/designsystem/tabs/src/tabs.module.ts","../../../../libs/designsystem/tabs/src/kirbydesign-designsystem-tabs.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { IonRouterOutlet } from '@ionic/angular';\nimport { ReplaySubject } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class TabsService {\n  private outletSubject$: ReplaySubject<IonRouterOutlet> = new ReplaySubject(1);\n  public outlet$ = this.outletSubject$.asObservable();\n\n  public setOutlet(outlet: IonRouterOutlet) {\n    this.outletSubject$.next(outlet);\n  }\n\n  public resetOutlet() {\n    this.outletSubject$.next(null);\n  }\n}\n\nexport { IonRouterOutlet };\n","import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';\nimport { IonTabs } from '@ionic/angular';\n\nimport { TabsService } from './tabs.service';\n\n@Component({\n  selector: 'kirby-tab-bar',\n  templateUrl: './tabs.component.html',\n  styleUrls: ['./tabs.component.scss'],\n})\nexport class TabsComponent implements AfterViewInit, OnDestroy {\n  @HostBinding('class.tab-bar-bottom-hidden')\n  tabBarBottomHidden = false;\n  @ViewChild(IonTabs, { static: true }) tabs: IonTabs;\n\n  constructor(private tabsService: TabsService) {}\n\n  ngAfterViewInit() {\n    this.tabsService.setOutlet(this.tabs.outlet);\n  }\n\n  ngOnDestroy() {\n    this.tabsService.resetOutlet();\n  }\n}\n","<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n","export const selectedTabClickEvent = 'kirbySelectedTabClick';\n","import {\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnInit,\n  Output,\n  QueryList,\n  Renderer2,\n} from '@angular/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { selectedTabClickEvent } from './tab-button.events';\n\n@Component({\n  selector: 'kirby-tab-button',\n  templateUrl: './tab-button.component.html',\n  styleUrls: ['./tab-button.component.scss'],\n})\nexport class TabButtonComponent implements OnInit {\n  @Input() routerLink: string;\n  @Output() click = new EventEmitter<Event>();\n  @ContentChildren(IconComponent) icons: QueryList<IconComponent>;\n\n  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}\n\n  ngOnInit(): void {\n    this.removeWrapper();\n  }\n\n  onClick(event: Event, isSelected: boolean) {\n    this.click.emit(event);\n\n    if (isSelected) {\n      const clickEvent = new CustomEvent(selectedTabClickEvent);\n      dispatchEvent(clickEvent);\n    }\n  }\n\n  private removeWrapper() {\n    const parent = this.elementRef.nativeElement.parentNode;\n    const button = this.elementRef.nativeElement.childNodes[0];\n    this.renderer.removeChild(parent, this.elementRef.nativeElement);\n    this.renderer.appendChild(parent, button);\n  }\n}\n","<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { KirbyIonicModule } from '@kirbydesign/designsystem/kirby-ionic-module';\n\nimport { TabsComponent } from './tabs.component';\nimport { TabButtonComponent } from './tab-button/tab-button.component';\nimport { TabsService } from './tabs.service';\n\n@NgModule({\n  imports: [KirbyIonicModule, IconModule, CommonModule],\n  providers: [TabsService],\n  declarations: [TabsComponent, TabButtonComponent],\n  exports: [TabsComponent, TabButtonComponent],\n})\nexport class TabsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.TabsService","i1","i2"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-tabs.mjs","sources":["../../../../libs/designsystem/tabs/src/tabs.service.ts","../../../../libs/designsystem/tabs/src/tabs.component.ts","../../../../libs/designsystem/tabs/src/tabs.component.html","../../../../libs/designsystem/tabs/src/tab-button/tab-button.events.ts","../../../../libs/designsystem/tabs/src/tab-button/tab-button.component.ts","../../../../libs/designsystem/tabs/src/tab-button/tab-button.component.html","../../../../libs/designsystem/tabs/src/tabs.module.ts","../../../../libs/designsystem/tabs/src/kirbydesign-designsystem-tabs.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { IonRouterOutlet } from '@ionic/angular';\nimport { ReplaySubject } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class TabsService {\n  private outletSubject$: ReplaySubject<IonRouterOutlet> = new ReplaySubject(1);\n  public outlet$ = this.outletSubject$.asObservable();\n\n  public setOutlet(outlet: IonRouterOutlet) {\n    this.outletSubject$.next(outlet);\n  }\n\n  public resetOutlet() {\n    this.outletSubject$.next(null);\n  }\n}\n\nexport { IonRouterOutlet };\n","import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';\nimport { IonTabs } from '@ionic/angular';\n\nimport { TabsService } from './tabs.service';\n\n@Component({\n  selector: 'kirby-tab-bar',\n  templateUrl: './tabs.component.html',\n  styleUrls: ['./tabs.component.scss'],\n})\nexport class TabsComponent implements AfterViewInit, OnDestroy {\n  @HostBinding('class.tab-bar-bottom-hidden')\n  tabBarBottomHidden = false;\n  @ViewChild(IonTabs, { static: true }) tabs: IonTabs;\n\n  constructor(private tabsService: TabsService) {}\n\n  ngAfterViewInit() {\n    this.tabsService.setOutlet(this.tabs.outlet);\n  }\n\n  ngOnDestroy() {\n    this.tabsService.resetOutlet();\n  }\n}\n","<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n","export const selectedTabClickEvent = 'kirbySelectedTabClick';\n","import {\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnInit,\n  Output,\n  QueryList,\n  Renderer2,\n} from '@angular/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { selectedTabClickEvent } from './tab-button.events';\n\n@Component({\n  selector: 'kirby-tab-button',\n  templateUrl: './tab-button.component.html',\n  styleUrls: ['./tab-button.component.scss'],\n})\nexport class TabButtonComponent implements OnInit {\n  @Input() routerLink: string;\n  @Output() click = new EventEmitter<Event>();\n  @ContentChildren(IconComponent) icons: QueryList<IconComponent>;\n\n  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}\n\n  ngOnInit(): void {\n    this.removeWrapper();\n  }\n\n  onClick(event: Event, isSelected: boolean) {\n    this.click.emit(event);\n\n    if (isSelected) {\n      const clickEvent = new CustomEvent(selectedTabClickEvent);\n      dispatchEvent(clickEvent);\n    }\n  }\n\n  private removeWrapper() {\n    const parent = this.elementRef.nativeElement.parentNode;\n    const button = this.elementRef.nativeElement.childNodes[0];\n    this.renderer.removeChild(parent, this.elementRef.nativeElement);\n    this.renderer.appendChild(parent, button);\n  }\n}\n","<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { KirbyIonicModule } from '@kirbydesign/designsystem/kirby-ionic-module';\n\nimport { TabsComponent } from './tabs.component';\nimport { TabButtonComponent } from './tab-button/tab-button.component';\nimport { TabsService } from './tabs.service';\n\n@NgModule({\n  imports: [KirbyIonicModule, IconModule, CommonModule],\n  providers: [TabsService],\n  declarations: [TabsComponent, TabButtonComponent],\n  exports: [TabsComponent, TabButtonComponent],\n})\nexport class TabsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.TabsService","i1","i2"],"mappings":"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"}

package/fesm2015/kirbydesign-designsystem-testing.mjs

@@ -3,6 +3,14 @@ import { __awaiter } from 'tslib';
 import { IonicModule } from '@ionic/angular';
 
 class TestHelper {
+    static disableAnimationsInTest() {
+        //@ts-ignore
+        window.Ionic = {
+            config: {
+                _testing: true,
+            },
+        };
+    }
     static muteIonicReInitializeWarning() {
         const originalWarn = console.warn;
         const patchedWarn = (warning, ...optionalParams) => {

package/fesm2015/kirbydesign-designsystem-testing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-testing.mjs","sources":["../../../../libs/designsystem/testing/src/test-helper.ts","../../../../libs/designsystem/testing/src/element-css-custom-matchers.ts","../../../../libs/designsystem/testing/src/kirbydesign-designsystem-testing.ts"],"sourcesContent":["import { IonicModule } from '@ionic/angular';\nimport { IonicConfig } from '@ionic/core';\n\nexport class TestHelper {\n  public static readonly _init = TestHelper.muteIonicReInitializeWarning();\n\n  public static muteIonicReInitializeWarning() {\n    const originalWarn = console.warn;\n    const patchedWarn = (warning: any, ...optionalParams: any[]) => {\n      const suppress = `Ionic Angular was already initialized. Make sure IonicModule.forRoot() is just called once.`;\n      if (warning !== suppress) originalWarn(warning, ...optionalParams);\n    };\n    console.warn = patchedWarn;\n  }\n\n  public static ionicModuleForTest = IonicModule.forRoot({\n    mode: 'ios',\n    _testing: true,\n    get: () => {}, // Prevents Ionic \"config.get is not a function\" errors\n  } as IonicConfig);\n\n  /*\n   * Checks for the Web Component(s) being ready,\n   * ie. the component is hydrated, styles have been applied\n   * and the Shadow DOM is ready for query\n   */\n  public static async whenReady(\n    elementOrNodeList: Element | NodeListOf<Element> | Element[]\n  ): Promise<void> {\n    if (elementOrNodeList === undefined || elementOrNodeList === null)\n      return Promise.reject('TestHelper.whenReady: Element is null or undefined');\n    if (elementOrNodeList instanceof Element) {\n      await TestHelper.whenDefined(elementOrNodeList);\n      await TestHelper.ionComponentOnReady(elementOrNodeList);\n    } else {\n      await Promise.all(\n        Array.from(elementOrNodeList).map(async (element) => await TestHelper.whenReady(element))\n      );\n    }\n  }\n\n  /* Checks for the Web Component being defined, ie. the public methods are available */\n  public static async whenDefined(element: Element): Promise<void> {\n    await customElements.whenDefined(element.localName);\n  }\n\n  /* Checks for the Ionic Web Component being ready, ie. the component is hydrated and styles applied */\n  public static async ionComponentOnReady(element: Element): Promise<void> {\n    const componentOnReady = (element as any).componentOnReady as () => Promise<void>;\n    if (typeof componentOnReady === 'function') {\n      await componentOnReady.bind(element)();\n    }\n  }\n\n  public static async whenTrue(\n    pollFunc: () => boolean,\n    timeoutInMs: number = 2000,\n    pollIntervalInMs: number = 5\n  ): Promise<void> {\n    if (pollFunc() === true) return Promise.resolve();\n    return new Promise<void>((resolve, reject) => {\n      let timeoutId, intervalId;\n      const pollState = () => {\n        const result = pollFunc();\n        if (result === true) {\n          clearTimeout(timeoutId);\n          clearInterval(intervalId);\n          resolve();\n        }\n      };\n      timeoutId = setTimeout(() => {\n        clearInterval(intervalId);\n        reject(\n          `Error: Timeout - TestHelper.whenTrue function did not complete within ${timeoutInMs}ms`\n        );\n      }, timeoutInMs);\n      intervalId = setInterval(pollState, pollIntervalInMs);\n    });\n  }\n\n  public static getCssProperty(element: Element, propertyName: string, pseudoElt?: string) {\n    return window.getComputedStyle(element, pseudoElt).getPropertyValue(propertyName).trim();\n  }\n\n  public static screensize = {\n    phonesmall: { width: '320px', height: '568px' },\n    phone: { width: '375px', height: '667px' },\n    phablet: { width: '575px', height: '767px' },\n    'phablet-landscape': { width: '767px', height: '575px' },\n    tablet: { width: '768px', height: '1024px' },\n    desktop: { width: '1200px', height: '900px' },\n  };\n\n  public static resizeTestWindow(size: { width?: string; height?: string }): Promise<void> {\n    return new Promise<void>((resolve, reject) => {\n      if (!window.frameElement) {\n        console.warn('window.frameElement is undefined. Cannot resize test window.');\n        reject();\n      } else {\n        const query = [];\n        if (size.width) {\n          query.push(`(max-width: ${size.width})`);\n        }\n        if (size.height) {\n          query.push(`(max-height: ${size.height})`);\n        }\n        console.log(`Set test window size to: ${JSON.stringify(size)}`);\n        (window.frameElement as HTMLIFrameElement).style.width = size.width;\n        (window.frameElement as HTMLIFrameElement).style.height = size.height;\n        const mediaQuery = window.matchMedia(query.join(' and '));\n        if (mediaQuery.matches) {\n          resolve();\n        } else {\n          // Ensure window has resized before executing:\n          mediaQuery.onchange = (ev) => {\n            if (ev.matches) {\n              // Stop listening for changes:\n              mediaQuery.onchange = null;\n              resolve();\n            }\n          };\n          console.log(`Awaiting media query to match: ${mediaQuery.media}`);\n        }\n      }\n    });\n  }\n\n  public static resetTestWindow(): void {\n    if (!window.frameElement) {\n      console.warn('window.frameElement is undefined. Cannot resize test window.');\n      return;\n    }\n    console.log('Resetting test window width');\n    (window.frameElement as HTMLIFrameElement).style.width = null;\n    (window.frameElement as HTMLIFrameElement).style.height = null;\n  }\n\n  public static scrollMainWindowToTop() {\n    if (\n      window.parent &&\n      window.parent.document &&\n      window.parent.document.documentElement &&\n      window.parent.document.documentElement.scrollTop > 0\n    ) {\n      window.parent.document.documentElement.scrollTop = 0;\n    }\n  }\n\n  public static waitForResizeObserver(): Promise<void> {\n    return TestHelper.waitForTimeout(1);\n  }\n\n  public static waitForTimeout(timeoutInMs?: number): Promise<void> {\n    return new Promise<void>((resolve) => setTimeout(resolve, timeoutInMs));\n  }\n}\n\nexport type ScreenSize = keyof typeof TestHelper.screensize;\n","import { ColorHelper, ThemeColorDefinition } from '@kirbydesign/core';\nimport jasmine from 'jasmine-core';\nimport { TestHelper } from './test-helper';\n\nimport CustomMatcherFactories = jasmine.CustomMatcherFactories;\nimport CustomMatcherResult = jasmine.CustomMatcherResult;\nimport MatchersUtil = jasmine.MatchersUtil;\n\nexport const ElementCssCustomMatchers: CustomMatcherFactories = {\n  toHaveComputedStyle: (util: MatchersUtil) => cssPropertyMatcher(util),\n};\n\nfunction cssPropertyMatcher(util: MatchersUtil) {\n  return {\n    compare: (\n      element: Element,\n      expectedStyles: { [cssProperty: string]: string | ThemeColorDefinition },\n      pseudoElt?: string\n    ) => {\n      let allPassed = Object.keys(expectedStyles).length !== 0;\n      const messages = [];\n      Object.keys(expectedStyles).forEach((cssProperty) => {\n        const expectedValue = expectedStyles[cssProperty];\n        const { expectedStringValue, expectedValueAlias } = getExpectedStringValueAndAlias(\n          cssProperty,\n          expectedValue\n        );\n        const { pass, message } = compareCssProperty(\n          util,\n          element,\n          cssProperty,\n          expectedStringValue,\n          expectedValueAlias,\n          pseudoElt\n        );\n        allPassed = allPassed && pass;\n        if (message) {\n          messages.push(message);\n        }\n      });\n      const result = {\n        pass: allPassed,\n        message: messages.join('\\n'),\n      };\n      return result;\n    },\n  };\n}\n\nfunction getExpectedStringValueAndAlias(\n  cssProperty: string,\n  expectedValue: string | ThemeColorDefinition\n) {\n  let expectedStringValue: string;\n  let expectedValueAlias: string;\n\n  if (typeof expectedValue === 'string') {\n    expectedStringValue = expectedValue;\n    // Check of css property is a color:\n    if (\n      cssProperty.indexOf('color') > -1 ||\n      expectedValue.startsWith('rgb') ||\n      expectedValue.startsWith('#')\n    ) {\n      // Check if css property is a css variable:\n      // Css variable values are hex when getting computed style, all other property values are rgb:\n      if (!cssProperty.startsWith('--')) {\n        // Not a css variable, convert color to rgb:\n        expectedStringValue = ColorHelper.colorStringToRgbString(expectedValue);\n      }\n    }\n  } else {\n    // Check if css property is a css variable:\n    // Css variable values are hex when getting computed style, all other property values are rgb:\n    expectedStringValue = cssProperty.startsWith('--') ? expectedValue.hex : expectedValue.value;\n    expectedValueAlias = expectedValue.fullname;\n  }\n\n  return {\n    expectedStringValue,\n    expectedValueAlias,\n  };\n}\n\nfunction compareCssProperty(\n  util: MatchersUtil,\n  element: Element,\n  cssProperty: string,\n  expectedValue: string,\n  expectedValueAlias?: string,\n  pseudoElt?: string\n): CustomMatcherResult {\n  const actualValue = TestHelper.getCssProperty(element, cssProperty, pseudoElt);\n  const pass = util.equals(actualValue, expectedValue) || !!compareSize(actualValue, expectedValue);\n  const message = pass\n    ? null\n    : getErrorMessage(\n        element,\n        cssProperty,\n        actualValue,\n        expectedValue,\n        expectedValueAlias,\n        pseudoElt\n      );\n  const result = {\n    pass: pass,\n    message: message,\n  };\n  return result;\n}\n\nfunction compareSize(actualValue: string, expectedValue: string): boolean | void {\n  if (!expectedValue.startsWith('<') && !expectedValue.startsWith('>')) return;\n\n  const matches = expectedValue.match(/(?<operator>\\<\\=|\\<|\\>\\=|\\>)(?<value>\\d*)px/);\n  if (matches && matches.groups) {\n    const actualValueNumber = parseInt(actualValue);\n    const operator = matches.groups['operator'];\n    const expectedValueNumber = parseInt(matches.groups['value']);\n    switch (operator) {\n      case '<':\n        return actualValueNumber < expectedValueNumber;\n      case '<=':\n        return actualValueNumber <= expectedValueNumber;\n      case '>':\n        return actualValueNumber > expectedValueNumber;\n      case '>=':\n        return actualValueNumber >= expectedValueNumber;\n      default:\n        break;\n    }\n  }\n}\n\nfunction getErrorMessage(\n  element: Element,\n  cssProperty: string,\n  actualValue: string,\n  expectedValue: string,\n  expectedValueAlias?: string,\n  pseudoElt?: string\n) {\n  const expectedColorNameSuffix = expectedValueAlias ? ` (${expectedValueAlias})` : '';\n  return `Expected [${cssProperty}] of ${element.tagName}${\n    pseudoElt ?? ''\n  } '${actualValue}' to be '${expectedValue}'${expectedColorNameSuffix}`;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-testing.mjs","sources":["../../../../libs/designsystem/testing/src/test-helper.ts","../../../../libs/designsystem/testing/src/element-css-custom-matchers.ts","../../../../libs/designsystem/testing/src/kirbydesign-designsystem-testing.ts"],"sourcesContent":["import { IonicModule } from '@ionic/angular';\nimport { IonicConfig } from '@ionic/core';\n\nexport class TestHelper {\n  public static readonly _init = TestHelper.muteIonicReInitializeWarning();\n\n  public static disableAnimationsInTest() {\n    //@ts-ignore\n    window.Ionic = {\n      config: {\n        _testing: true,\n      },\n    };\n  }\n\n  public static muteIonicReInitializeWarning() {\n    const originalWarn = console.warn;\n    const patchedWarn = (warning: any, ...optionalParams: any[]) => {\n      const suppress = `Ionic Angular was already initialized. Make sure IonicModule.forRoot() is just called once.`;\n      if (warning !== suppress) originalWarn(warning, ...optionalParams);\n    };\n    console.warn = patchedWarn;\n  }\n\n  public static ionicModuleForTest = IonicModule.forRoot({\n    mode: 'ios',\n    _testing: true,\n    get: () => {}, // Prevents Ionic \"config.get is not a function\" errors\n  } as IonicConfig);\n\n  /*\n   * Checks for the Web Component(s) being ready,\n   * ie. the component is hydrated, styles have been applied\n   * and the Shadow DOM is ready for query\n   */\n  public static async whenReady(\n    elementOrNodeList: Element | NodeListOf<Element> | Element[]\n  ): Promise<void> {\n    if (elementOrNodeList === undefined || elementOrNodeList === null)\n      return Promise.reject('TestHelper.whenReady: Element is null or undefined');\n    if (elementOrNodeList instanceof Element) {\n      await TestHelper.whenDefined(elementOrNodeList);\n      await TestHelper.ionComponentOnReady(elementOrNodeList);\n    } else {\n      await Promise.all(\n        Array.from(elementOrNodeList).map(async (element) => await TestHelper.whenReady(element))\n      );\n    }\n  }\n\n  /* Checks for the Web Component being defined, ie. the public methods are available */\n  public static async whenDefined(element: Element): Promise<void> {\n    await customElements.whenDefined(element.localName);\n  }\n\n  /* Checks for the Ionic Web Component being ready, ie. the component is hydrated and styles applied */\n  public static async ionComponentOnReady(element: Element): Promise<void> {\n    const componentOnReady = (element as any).componentOnReady as () => Promise<void>;\n    if (typeof componentOnReady === 'function') {\n      await componentOnReady.bind(element)();\n    }\n  }\n\n  public static async whenTrue(\n    pollFunc: () => boolean,\n    timeoutInMs: number = 2000,\n    pollIntervalInMs: number = 5\n  ): Promise<void> {\n    if (pollFunc() === true) return Promise.resolve();\n    return new Promise<void>((resolve, reject) => {\n      let timeoutId, intervalId;\n      const pollState = () => {\n        const result = pollFunc();\n        if (result === true) {\n          clearTimeout(timeoutId);\n          clearInterval(intervalId);\n          resolve();\n        }\n      };\n      timeoutId = setTimeout(() => {\n        clearInterval(intervalId);\n        reject(\n          `Error: Timeout - TestHelper.whenTrue function did not complete within ${timeoutInMs}ms`\n        );\n      }, timeoutInMs);\n      intervalId = setInterval(pollState, pollIntervalInMs);\n    });\n  }\n\n  public static getCssProperty(element: Element, propertyName: string, pseudoElt?: string) {\n    return window.getComputedStyle(element, pseudoElt).getPropertyValue(propertyName).trim();\n  }\n\n  public static screensize = {\n    phonesmall: { width: '320px', height: '568px' },\n    phone: { width: '375px', height: '667px' },\n    phablet: { width: '575px', height: '767px' },\n    'phablet-landscape': { width: '767px', height: '575px' },\n    tablet: { width: '768px', height: '1024px' },\n    desktop: { width: '1200px', height: '900px' },\n  };\n\n  public static resizeTestWindow(size: { width?: string; height?: string }): Promise<void> {\n    return new Promise<void>((resolve, reject) => {\n      if (!window.frameElement) {\n        console.warn('window.frameElement is undefined. Cannot resize test window.');\n        reject();\n      } else {\n        const query = [];\n        if (size.width) {\n          query.push(`(max-width: ${size.width})`);\n        }\n        if (size.height) {\n          query.push(`(max-height: ${size.height})`);\n        }\n        console.log(`Set test window size to: ${JSON.stringify(size)}`);\n        (window.frameElement as HTMLIFrameElement).style.width = size.width;\n        (window.frameElement as HTMLIFrameElement).style.height = size.height;\n        const mediaQuery = window.matchMedia(query.join(' and '));\n        if (mediaQuery.matches) {\n          resolve();\n        } else {\n          // Ensure window has resized before executing:\n          mediaQuery.onchange = (ev) => {\n            if (ev.matches) {\n              // Stop listening for changes:\n              mediaQuery.onchange = null;\n              resolve();\n            }\n          };\n          console.log(`Awaiting media query to match: ${mediaQuery.media}`);\n        }\n      }\n    });\n  }\n\n  public static resetTestWindow(): void {\n    if (!window.frameElement) {\n      console.warn('window.frameElement is undefined. Cannot resize test window.');\n      return;\n    }\n    console.log('Resetting test window width');\n    (window.frameElement as HTMLIFrameElement).style.width = null;\n    (window.frameElement as HTMLIFrameElement).style.height = null;\n  }\n\n  public static scrollMainWindowToTop() {\n    if (\n      window.parent &&\n      window.parent.document &&\n      window.parent.document.documentElement &&\n      window.parent.document.documentElement.scrollTop > 0\n    ) {\n      window.parent.document.documentElement.scrollTop = 0;\n    }\n  }\n\n  public static waitForResizeObserver(): Promise<void> {\n    return TestHelper.waitForTimeout(1);\n  }\n\n  public static waitForTimeout(timeoutInMs?: number): Promise<void> {\n    return new Promise<void>((resolve) => setTimeout(resolve, timeoutInMs));\n  }\n}\n\nexport type ScreenSize = keyof typeof TestHelper.screensize;\n","import { ColorHelper, ThemeColorDefinition } from '@kirbydesign/core';\nimport jasmine from 'jasmine-core';\nimport { TestHelper } from './test-helper';\n\nimport CustomMatcherFactories = jasmine.CustomMatcherFactories;\nimport CustomMatcherResult = jasmine.CustomMatcherResult;\nimport MatchersUtil = jasmine.MatchersUtil;\n\nexport const ElementCssCustomMatchers: CustomMatcherFactories = {\n  toHaveComputedStyle: (util: MatchersUtil) => cssPropertyMatcher(util),\n};\n\nfunction cssPropertyMatcher(util: MatchersUtil) {\n  return {\n    compare: (\n      element: Element,\n      expectedStyles: { [cssProperty: string]: string | ThemeColorDefinition },\n      pseudoElt?: string\n    ) => {\n      let allPassed = Object.keys(expectedStyles).length !== 0;\n      const messages = [];\n      Object.keys(expectedStyles).forEach((cssProperty) => {\n        const expectedValue = expectedStyles[cssProperty];\n        const { expectedStringValue, expectedValueAlias } = getExpectedStringValueAndAlias(\n          cssProperty,\n          expectedValue\n        );\n        const { pass, message } = compareCssProperty(\n          util,\n          element,\n          cssProperty,\n          expectedStringValue,\n          expectedValueAlias,\n          pseudoElt\n        );\n        allPassed = allPassed && pass;\n        if (message) {\n          messages.push(message);\n        }\n      });\n      const result = {\n        pass: allPassed,\n        message: messages.join('\\n'),\n      };\n      return result;\n    },\n  };\n}\n\nfunction getExpectedStringValueAndAlias(\n  cssProperty: string,\n  expectedValue: string | ThemeColorDefinition\n) {\n  let expectedStringValue: string;\n  let expectedValueAlias: string;\n\n  if (typeof expectedValue === 'string') {\n    expectedStringValue = expectedValue;\n    // Check of css property is a color:\n    if (\n      cssProperty.indexOf('color') > -1 ||\n      expectedValue.startsWith('rgb') ||\n      expectedValue.startsWith('#')\n    ) {\n      // Check if css property is a css variable:\n      // Css variable values are hex when getting computed style, all other property values are rgb:\n      if (!cssProperty.startsWith('--')) {\n        // Not a css variable, convert color to rgb:\n        expectedStringValue = ColorHelper.colorStringToRgbString(expectedValue);\n      }\n    }\n  } else {\n    // Check if css property is a css variable:\n    // Css variable values are hex when getting computed style, all other property values are rgb:\n    expectedStringValue = cssProperty.startsWith('--') ? expectedValue.hex : expectedValue.value;\n    expectedValueAlias = expectedValue.fullname;\n  }\n\n  return {\n    expectedStringValue,\n    expectedValueAlias,\n  };\n}\n\nfunction compareCssProperty(\n  util: MatchersUtil,\n  element: Element,\n  cssProperty: string,\n  expectedValue: string,\n  expectedValueAlias?: string,\n  pseudoElt?: string\n): CustomMatcherResult {\n  const actualValue = TestHelper.getCssProperty(element, cssProperty, pseudoElt);\n  const pass = util.equals(actualValue, expectedValue) || !!compareSize(actualValue, expectedValue);\n  const message = pass\n    ? null\n    : getErrorMessage(\n        element,\n        cssProperty,\n        actualValue,\n        expectedValue,\n        expectedValueAlias,\n        pseudoElt\n      );\n  const result = {\n    pass: pass,\n    message: message,\n  };\n  return result;\n}\n\nfunction compareSize(actualValue: string, expectedValue: string): boolean | void {\n  if (!expectedValue.startsWith('<') && !expectedValue.startsWith('>')) return;\n\n  const matches = expectedValue.match(/(?<operator>\\<\\=|\\<|\\>\\=|\\>)(?<value>\\d*)px/);\n  if (matches && matches.groups) {\n    const actualValueNumber = parseInt(actualValue);\n    const operator = matches.groups['operator'];\n    const expectedValueNumber = parseInt(matches.groups['value']);\n    switch (operator) {\n      case '<':\n        return actualValueNumber < expectedValueNumber;\n      case '<=':\n        return actualValueNumber <= expectedValueNumber;\n      case '>':\n        return actualValueNumber > expectedValueNumber;\n      case '>=':\n        return actualValueNumber >= expectedValueNumber;\n      default:\n        break;\n    }\n  }\n}\n\nfunction getErrorMessage(\n  element: Element,\n  cssProperty: string,\n  actualValue: string,\n  expectedValue: string,\n  expectedValueAlias?: string,\n  pseudoElt?: string\n) {\n  const expectedColorNameSuffix = expectedValueAlias ? ` (${expectedValueAlias})` : '';\n  return `Expected [${cssProperty}] of ${element.tagName}${\n    pseudoElt ?? ''\n  } '${actualValue}' to be '${expectedValue}'${expectedColorNameSuffix}`;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/kirbydesign-designsystem-accordion.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import { Directive, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1 from '@kirbydesign/designsystem/icon';
 import { IconModule } from '@kirbydesign/designsystem/icon';
@@ -22,6 +22,7 @@ class AccordionItemComponent {
     constructor() {
         this.isExpanded = false;
         this.isDisabled = false;
+        this.toggle = new EventEmitter();
         // IDs used for a11y labelling
         this._titleId = `kirby-accordion-item-title-${++uniqueId}`;
         this._contentId = `kirby-accordion-item-content-${uniqueId}`;
@@ -41,11 +42,14 @@ class AccordionItemComponent {
     }
     _onToggleExpanded(event) {
         event.preventDefault();
+        if (this.isDisabled)
+            return;
         this.isExpanded = !this.isExpanded && !this.isDisabled;
+        this.toggle.emit(this.isExpanded);
     }
 }
 /** @nocollapse */ AccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ AccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AccordionItemComponent, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    tabindex=\"0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}@media (hover: hover) and (pointer: fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body{padding:0 16px 16px}.disabled{pointer-events:none}.disabled .kirby-icon{color:var(--kirby-semi-dark)}.disabled .title{color:var(--kirby-text-color-semi-dark)}.expanded .title{font-weight:700}.expanded .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], animations: [
+/** @nocollapse */ AccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AccordionItemComponent, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle" }, outputs: { toggle: "toggle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}@media (hover: hover) and (pointer: fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body{padding:0 16px 16px}.disabled{pointer-events:none}.disabled .kirby-icon{color:var(--kirby-semi-dark)}.disabled .title{color:var(--kirby-text-color-semi-dark)}.expanded .title{font-weight:700}.expanded .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], animations: [
         trigger('isExpanded', [
             state('true', style({ height: '*', visibility: 'visible' })),
             state('false', style({ height: '0px', visibility: 'hidden' })),
@@ -60,7 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             state('false', style({ height: '0px', visibility: 'hidden' })),
                             transition('true <=> false', animate('0.2s')),
                         ]),
-                    ], template: "<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    tabindex=\"0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}@media (hover: hover) and (pointer: fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body{padding:0 16px 16px}.disabled{pointer-events:none}.disabled .kirby-icon{color:var(--kirby-semi-dark)}.disabled .title{color:var(--kirby-text-color-semi-dark)}.expanded .title{font-weight:700}.expanded .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"] }]
+                    ], template: "<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}@media (hover: hover) and (pointer: fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body{padding:0 16px 16px}.disabled{pointer-events:none}.disabled .kirby-icon{color:var(--kirby-semi-dark)}.disabled .title{color:var(--kirby-text-color-semi-dark)}.expanded .title{font-weight:700}.expanded .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], isExpanded: [{
@@ -69,6 +73,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], disabledTitle: [{
                 type: Input
+            }], toggle: [{
+                type: Output
             }] } });
 
 const declarations = [AccordionDirective, AccordionItemComponent];

package/fesm2020/kirbydesign-designsystem-accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-accordion.mjs","sources":["../../../../libs/designsystem/accordion/src/accordion.directive.ts","../../../../libs/designsystem/accordion/src/accordion-item.component.ts","../../../../libs/designsystem/accordion/src/accordion-item.component.html","../../../../libs/designsystem/accordion/src/accordion.module.ts","../../../../libs/designsystem/accordion/src/kirbydesign-designsystem-accordion.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[kirbyAccordion], kirby-accordion',\n  exportAs: 'kirby-accordion',\n})\nexport class AccordionDirective {}\n","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\n\n// Counter for generating unique element ids\nlet uniqueId = 0;\n\n@Component({\n  selector: 'kirby-accordion-item',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('isExpanded', [\n      state('true', style({ height: '*', visibility: 'visible' })),\n      state('false', style({ height: '0px', visibility: 'hidden' })),\n      transition('true <=> false', animate('0.2s')),\n    ]),\n  ],\n})\nexport class AccordionItemComponent implements OnChanges {\n  @Input() title: string;\n  @Input() isExpanded: boolean = false;\n  @Input() isDisabled: boolean = false;\n  @Input() disabledTitle: string;\n\n  ngOnChanges(): void {\n    if (this.isDisabled) {\n      this.isExpanded = false;\n    }\n  }\n\n  getTitle() {\n    if (this.isDisabled && !!this.disabledTitle) {\n      return this.disabledTitle;\n    } else {\n      return this.title;\n    }\n  }\n\n  _onToggleExpanded(event: KeyboardEvent) {\n    event.preventDefault();\n    this.isExpanded = !this.isExpanded && !this.isDisabled;\n  }\n\n  // IDs used for a11y labelling\n  _titleId = `kirby-accordion-item-title-${++uniqueId}`;\n  _contentId = `kirby-accordion-item-content-${uniqueId}`;\n}\n","<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    tabindex=\"0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\n\nimport { AccordionItemComponent } from './accordion-item.component';\nimport { AccordionDirective } from './accordion.directive';\n\nconst declarations = [AccordionDirective, AccordionItemComponent];\n\n@NgModule({\n  declarations: [...declarations],\n  imports: [IconModule],\n  exports: [...declarations],\n})\nexport class AccordionModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-accordion.mjs","sources":["../../../../libs/designsystem/accordion/src/accordion.directive.ts","../../../../libs/designsystem/accordion/src/accordion-item.component.ts","../../../../libs/designsystem/accordion/src/accordion-item.component.html","../../../../libs/designsystem/accordion/src/accordion.module.ts","../../../../libs/designsystem/accordion/src/kirbydesign-designsystem-accordion.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[kirbyAccordion], kirby-accordion',\n  exportAs: 'kirby-accordion',\n})\nexport class AccordionDirective {}\n","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n} from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\n\n// Counter for generating unique element ids\nlet uniqueId = 0;\n\n@Component({\n  selector: 'kirby-accordion-item',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('isExpanded', [\n      state('true', style({ height: '*', visibility: 'visible' })),\n      state('false', style({ height: '0px', visibility: 'hidden' })),\n      transition('true <=> false', animate('0.2s')),\n    ]),\n  ],\n})\nexport class AccordionItemComponent implements OnChanges {\n  @Input() title: string;\n  @Input() isExpanded: boolean = false;\n  @Input() isDisabled: boolean = false;\n  @Input() disabledTitle: string;\n  @Output() toggle: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  ngOnChanges(): void {\n    if (this.isDisabled) {\n      this.isExpanded = false;\n    }\n  }\n\n  getTitle() {\n    if (this.isDisabled && !!this.disabledTitle) {\n      return this.disabledTitle;\n    } else {\n      return this.title;\n    }\n  }\n\n  _onToggleExpanded(event: UIEvent) {\n    event.preventDefault();\n    if (this.isDisabled) return;\n\n    this.isExpanded = !this.isExpanded && !this.isDisabled;\n    this.toggle.emit(this.isExpanded);\n  }\n\n  // IDs used for a11y labelling\n  _titleId = `kirby-accordion-item-title-${++uniqueId}`;\n  _contentId = `kirby-accordion-item-content-${uniqueId}`;\n}\n","<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\n\nimport { AccordionItemComponent } from './accordion-item.component';\nimport { AccordionDirective } from './accordion.directive';\n\nconst declarations = [AccordionDirective, AccordionItemComponent];\n\n@NgModule({\n  declarations: [...declarations],\n  imports: [IconModule],\n  exports: [...declarations],\n})\nexport class AccordionModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/kirbydesign-designsystem-action-group.mjs

@@ -97,7 +97,7 @@ class ActionGroupComponent {
     }
 }
 /** @nocollapse */ ActionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ActionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class": "this._align" } }, queries: [{ propertyName: "buttonElements", predicate: ButtonComponent, read: ElementRef }, { propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "hiddenLayer", first: true, predicate: ["hiddenLayer"], descendants: true, read: ElementRef, static: true }, { propertyName: "menuElement", first: true, predicate: MenuComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  <kirby-item\n    *ngFor=\"let action of _collapsedActions\"\n    [selectable]=\"true\"\n    (click)=\"onActionSelect(action)\"\n  >\n    {{ action.text }}\n  </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ItemModule }, { kind: "component", type: i2.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size"] }, { kind: "component", type: MenuComponent, selector: "kirby-menu", inputs: ["isDisabled", "buttonSize", "placement", "attentionLevel", "triggers", "DOMPortalOutlet", "portalOutletConfig", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop", "shift", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ActionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class": "this._align" } }, queries: [{ propertyName: "buttonElements", predicate: ButtonComponent, read: ElementRef }, { propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "hiddenLayer", first: true, predicate: ["hiddenLayer"], descendants: true, read: ElementRef, static: true }, { propertyName: "menuElement", first: true, predicate: MenuComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  <kirby-item\n    *ngFor=\"let action of _collapsedActions\"\n    [selectable]=\"true\"\n    (click)=\"onActionSelect(action)\"\n  >\n    {{ action.text }}\n  </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ItemModule }, { kind: "component", type: i2.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: MenuComponent, selector: "kirby-menu", inputs: ["isDisabled", "buttonSize", "placement", "attentionLevel", "triggers", "DOMPortalOutlet", "portalOutletConfig", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop", "shift", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ActionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-action-group', standalone: true, imports: [CommonModule, ButtonComponent, ItemModule, MenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  <kirby-item\n    *ngFor=\"let action of _collapsedActions\"\n    [selectable]=\"true\"\n    (click)=\"onActionSelect(action)\"\n  >\n    {{ action.text }}\n  </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"] }]

package/fesm2020/kirbydesign-designsystem-action-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-action-group.mjs","sources":["../../../../libs/designsystem/action-group/src/action-group.component.ts","../../../../libs/designsystem/action-group/src/action-group.component.html","../../../../libs/designsystem/action-group/src/kirbydesign-designsystem-action-group.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  ElementRef,\n  HostBinding,\n  Inject,\n  InjectionToken,\n  Input,\n  OnChanges,\n  Optional,\n  QueryList,\n  Renderer2,\n  SimpleChanges,\n  ViewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { ItemModule } from '@kirbydesign/designsystem/item';\nimport { MenuComponent } from '@kirbydesign/designsystem/menu';\n\nexport type ActionGroupConfig = {\n  isCondensed?: boolean;\n  defaultVisibleActions?: number;\n  maxVisibleActions?: number;\n};\nexport const ACTIONGROUP_CONFIG = new InjectionToken<ActionGroupConfig>('action-group.config');\n\ntype CollapsedAction = { button: HTMLButtonElement; text: string };\n\n@Component({\n  selector: 'kirby-action-group',\n  standalone: true,\n  imports: [CommonModule, ButtonComponent, ItemModule, MenuComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './action-group.component.html',\n  styleUrls: ['./action-group.component.scss'],\n})\nexport class ActionGroupComponent implements AfterContentInit, OnChanges {\n  @Input() visibleActions?: number;\n\n  @Input()\n  align: 'start' | 'end' = 'end';\n\n  @ContentChildren(ButtonComponent, { read: ElementRef }) private buttonElements?: QueryList<\n    ElementRef<HTMLButtonElement>\n  >;\n  @ContentChildren(ButtonComponent) private buttons?: QueryList<ButtonComponent>;\n  @ViewChild('hiddenLayer', { read: ElementRef, static: true })\n  private hiddenLayer!: ElementRef<HTMLElement>;\n\n  @ViewChild(MenuComponent, { read: ElementRef, static: true })\n  private menuElement!: ElementRef<HTMLElement>;\n\n  @HostBinding('class.is-collapsed')\n  _isCollapsed: boolean;\n  _collapsedActions: CollapsedAction[] = [];\n\n  @HostBinding('class')\n  get _align() {\n    return 'align-' + this.align;\n  }\n\n  private collapseThreshold = 2;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2,\n    @Optional() @Inject(ACTIONGROUP_CONFIG) private config: ActionGroupConfig\n  ) {}\n\n  ngAfterContentInit(): void {\n    // Ensure we collapse according to visibleActions if lower than our default threshold (2).\n    // I.e. if there are 2 buttons and visibleActions = 1 we'll collapse the 2nd button into the menu:\n    if (this.visibleActions < this.collapseThreshold) {\n      this.collapseThreshold = this.visibleActions;\n    }\n\n    this.initializeFromConfig();\n\n    if (this.visibleActions !== undefined) {\n      this.initializeCollapsing();\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.visibleActions && !changes.visibleActions.firstChange) {\n      const satifiesMaxVisibleActions =\n        this.config?.maxVisibleActions === undefined ||\n        this.config?.maxVisibleActions === null ||\n        changes.visibleActions.currentValue <= this.config?.maxVisibleActions;\n      if (satifiesMaxVisibleActions) {\n        this.initializeCollapsing();\n      }\n    }\n  }\n\n  onActionSelect(action: CollapsedAction) {\n    const event = new PointerEvent('click', {\n      bubbles: true,\n      cancelable: true,\n      view: window,\n    });\n\n    action.button.dispatchEvent(event);\n  }\n\n  private initializeFromConfig() {\n    if (!this.config) return;\n\n    if (this.visibleActions === undefined && this.config.defaultVisibleActions !== undefined) {\n      this.visibleActions = this.config.defaultVisibleActions;\n    }\n\n    if (this.config.maxVisibleActions !== undefined) {\n      // Don't overwrite visibleActions value if configured lower than maxVisibleActions:\n      if (!(this.visibleActions < this.config.maxVisibleActions)) {\n        this.visibleActions = this.config.maxVisibleActions;\n      }\n    }\n\n    if (this.config.isCondensed) {\n      this.buttons?.forEach((button) => (button.showIconOnly = true));\n    }\n  }\n\n  private initializeCollapsing() {\n    if (this.buttonElements.length <= this.collapseThreshold) return;\n\n    this.moveButtons();\n    this.populateMenu();\n    this.toggleMenu();\n  }\n\n  private moveButtons() {\n    const buttonsToShow = [...this.buttonElements]\n      .slice(0, this.visibleActions)\n      .filter((btn) => btn.nativeElement.parentElement === this.hiddenLayer.nativeElement);\n    buttonsToShow.forEach((button) => {\n      this.renderer.insertBefore(\n        this.elementRef.nativeElement,\n        button.nativeElement,\n        this.menuElement.nativeElement\n      );\n    });\n\n    const buttonsToHide = [...this.buttonElements].slice(this.visibleActions);\n    buttonsToHide.forEach((button) => {\n      this.renderer.appendChild(this.hiddenLayer.nativeElement, button.nativeElement);\n    });\n  }\n\n  private toggleMenu() {\n    const hasHiddenButtons = this.hiddenLayer.nativeElement.childElementCount > 0;\n    this._isCollapsed = hasHiddenButtons;\n  }\n\n  private populateMenu() {\n    const hiddenButtons = Array.from(\n      this.hiddenLayer.nativeElement.children\n    ) as HTMLButtonElement[];\n\n    this._collapsedActions = hiddenButtons.map((button) => ({\n      button,\n      text: button.textContent.trim(),\n    }));\n  }\n}\n","<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  <kirby-item\n    *ngFor=\"let action of _collapsedActions\"\n    [selectable]=\"true\"\n    (click)=\"onActionSelect(action)\"\n  >\n    {{ action.text }}\n  </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-action-group.mjs","sources":["../../../../libs/designsystem/action-group/src/action-group.component.ts","../../../../libs/designsystem/action-group/src/action-group.component.html","../../../../libs/designsystem/action-group/src/kirbydesign-designsystem-action-group.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  ElementRef,\n  HostBinding,\n  Inject,\n  InjectionToken,\n  Input,\n  OnChanges,\n  Optional,\n  QueryList,\n  Renderer2,\n  SimpleChanges,\n  ViewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { ItemModule } from '@kirbydesign/designsystem/item';\nimport { MenuComponent } from '@kirbydesign/designsystem/menu';\n\nexport type ActionGroupConfig = {\n  isCondensed?: boolean;\n  defaultVisibleActions?: number;\n  maxVisibleActions?: number;\n};\nexport const ACTIONGROUP_CONFIG = new InjectionToken<ActionGroupConfig>('action-group.config');\n\ntype CollapsedAction = { button: HTMLButtonElement; text: string };\n\n@Component({\n  selector: 'kirby-action-group',\n  standalone: true,\n  imports: [CommonModule, ButtonComponent, ItemModule, MenuComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './action-group.component.html',\n  styleUrls: ['./action-group.component.scss'],\n})\nexport class ActionGroupComponent implements AfterContentInit, OnChanges {\n  @Input() visibleActions?: number;\n\n  @Input()\n  align: 'start' | 'end' = 'end';\n\n  @ContentChildren(ButtonComponent, { read: ElementRef }) private buttonElements?: QueryList<\n    ElementRef<HTMLButtonElement>\n  >;\n  @ContentChildren(ButtonComponent) private buttons?: QueryList<ButtonComponent>;\n  @ViewChild('hiddenLayer', { read: ElementRef, static: true })\n  private hiddenLayer!: ElementRef<HTMLElement>;\n\n  @ViewChild(MenuComponent, { read: ElementRef, static: true })\n  private menuElement!: ElementRef<HTMLElement>;\n\n  @HostBinding('class.is-collapsed')\n  _isCollapsed: boolean;\n  _collapsedActions: CollapsedAction[] = [];\n\n  @HostBinding('class')\n  get _align() {\n    return 'align-' + this.align;\n  }\n\n  private collapseThreshold = 2;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2,\n    @Optional() @Inject(ACTIONGROUP_CONFIG) private config: ActionGroupConfig\n  ) {}\n\n  ngAfterContentInit(): void {\n    // Ensure we collapse according to visibleActions if lower than our default threshold (2).\n    // I.e. if there are 2 buttons and visibleActions = 1 we'll collapse the 2nd button into the menu:\n    if (this.visibleActions < this.collapseThreshold) {\n      this.collapseThreshold = this.visibleActions;\n    }\n\n    this.initializeFromConfig();\n\n    if (this.visibleActions !== undefined) {\n      this.initializeCollapsing();\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.visibleActions && !changes.visibleActions.firstChange) {\n      const satifiesMaxVisibleActions =\n        this.config?.maxVisibleActions === undefined ||\n        this.config?.maxVisibleActions === null ||\n        changes.visibleActions.currentValue <= this.config?.maxVisibleActions;\n      if (satifiesMaxVisibleActions) {\n        this.initializeCollapsing();\n      }\n    }\n  }\n\n  onActionSelect(action: CollapsedAction) {\n    const event = new PointerEvent('click', {\n      bubbles: true,\n      cancelable: true,\n      view: window,\n    });\n\n    action.button.dispatchEvent(event);\n  }\n\n  private initializeFromConfig() {\n    if (!this.config) return;\n\n    if (this.visibleActions === undefined && this.config.defaultVisibleActions !== undefined) {\n      this.visibleActions = this.config.defaultVisibleActions;\n    }\n\n    if (this.config.maxVisibleActions !== undefined) {\n      // Don't overwrite visibleActions value if configured lower than maxVisibleActions:\n      if (!(this.visibleActions < this.config.maxVisibleActions)) {\n        this.visibleActions = this.config.maxVisibleActions;\n      }\n    }\n\n    if (this.config.isCondensed) {\n      this.buttons?.forEach((button) => (button.showIconOnly = true));\n    }\n  }\n\n  private initializeCollapsing() {\n    if (this.buttonElements.length <= this.collapseThreshold) return;\n\n    this.moveButtons();\n    this.populateMenu();\n    this.toggleMenu();\n  }\n\n  private moveButtons() {\n    const buttonsToShow = [...this.buttonElements]\n      .slice(0, this.visibleActions)\n      .filter((btn) => btn.nativeElement.parentElement === this.hiddenLayer.nativeElement);\n    buttonsToShow.forEach((button) => {\n      this.renderer.insertBefore(\n        this.elementRef.nativeElement,\n        button.nativeElement,\n        this.menuElement.nativeElement\n      );\n    });\n\n    const buttonsToHide = [...this.buttonElements].slice(this.visibleActions);\n    buttonsToHide.forEach((button) => {\n      this.renderer.appendChild(this.hiddenLayer.nativeElement, button.nativeElement);\n    });\n  }\n\n  private toggleMenu() {\n    const hasHiddenButtons = this.hiddenLayer.nativeElement.childElementCount > 0;\n    this._isCollapsed = hasHiddenButtons;\n  }\n\n  private populateMenu() {\n    const hiddenButtons = Array.from(\n      this.hiddenLayer.nativeElement.children\n    ) as HTMLButtonElement[];\n\n    this._collapsedActions = hiddenButtons.map((button) => ({\n      button,\n      text: button.textContent.trim(),\n    }));\n  }\n}\n","<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  <kirby-item\n    *ngFor=\"let action of _collapsedActions\"\n    [selectable]=\"true\"\n    (click)=\"onActionSelect(action)\"\n  >\n    {{ action.text }}\n  </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/kirbydesign-designsystem-calendar.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, LOCALE_ID, Component, Inject, ViewChild, Output, Input, HostBinding } from '@angular/core';
-import { isBefore, isAfter, format, isSameMonth, startOfMonth, startOfDay, eachDayOfInterval, startOfWeek, endOfWeek, isSameDay, endOfMonth, differenceInDays, add, isWeekend, getYear } from 'date-fns';
+import { isBefore, isAfter, format, isSameMonth, startOfMonth, startOfDay, eachDayOfInterval, startOfWeek, endOfWeek, isSameDay, add, isWeekend, getYear } from 'date-fns';
 import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
 import { da, enGB, enUS } from 'date-fns/locale';
 import { capitalizeFirstLetter } from '@kirbydesign/core';
@@ -291,12 +291,10 @@ class CalendarComponent {
         if (!this.activeMonth)
             return;
         const monthStart = startOfMonth(this.activeMonth);
-        const monthEnd = endOfMonth(this.activeMonth);
         const startOfFirstWeek = startOfWeek(monthStart, { locale: this.locale });
-        const endOfLastWeek = endOfWeek(monthEnd, { locale: this.locale });
-        const totalDayCount = differenceInDays(endOfLastWeek, startOfFirstWeek) + 1;
         const today = this.todayDate ? startOfDay(this.todayDate) : startOfDay(new Date());
-        const daysArray = Array.from(Array(totalDayCount).keys());
+        const totalNumberOfDays = 42; // Always show 42 days (6 weeks) in calendar
+        const daysArray = Array.from(Array(totalNumberOfDays).keys());
         const days = daysArray.map((number) => {
             const cellDate = add(startOfFirstWeek, { [TimeUnit.days]: number });
             const day = this.getCalendarDay(cellDate, today, monthStart);
@@ -463,10 +461,10 @@ class CalendarComponent {
     }
 }
 /** @nocollapse */ CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarComponent, deps: [{ token: CalendarHelper }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CalendarComponent, isStandalone: true, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", locales: "locales", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect", previousMonthClicked: "previousMonthClicked", nextMonthClicked: "nextMonthClicked" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, providers: [CalendarHelper], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day:not(.current-month){visibility:hidden;pointer-events:none}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2.DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["change"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+/** @nocollapse */ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CalendarComponent, isStandalone: true, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", locales: "locales", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect", previousMonthClicked: "previousMonthClicked", nextMonthClicked: "nextMonthClicked" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, providers: [CalendarHelper], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day:not(.current-month){pointer-events:none}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2.DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["change"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [DropdownModule, ButtonComponent, IconModule, CommonModule], selector: 'kirby-calendar', providers: [CalendarHelper], template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day:not(.current-month){visibility:hidden;pointer-events:none}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"] }]
+            args: [{ standalone: true, imports: [DropdownModule, ButtonComponent, IconModule, CommonModule], selector: 'kirby-calendar', providers: [CalendarHelper], template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day:not(.current-month){pointer-events:none}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"] }]
         }], ctorParameters: function () { return [{ type: CalendarHelper }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]