@kirbydesign/designsystem 11.4.2 → 11.5.0

package/fesm2022/kirbydesign-designsystem-empty-state.mjs

@@ -54,10 +54,10 @@ class EmptyStateComponent {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EmptyStateComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: EmptyStateComponent, isStandalone: true, selector: "kirby-empty-state", inputs: { iconName: "iconName", title: "title", subtitle: "subtitle" }, queries: [{ propertyName: "slottedButtons", predicate: ButtonComponent }], ngImport: i0, template: "<div class=\"message-container\">\n  @if (iconName) {\n    <div class=\"icon-outline\">\n      <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n    </div>\n  }\n  @if (title) {\n    @if (_insideModal) {\n      <h2 class=\"title kirby-text-medium\">{{ title }}</h2>\n    } @else {\n      <span class=\"title kirby-text-medium\">{{ title }}</span>\n    }\n  }\n  @if (subtitle) {\n    <p class=\"subtitle\">{{ subtitle }}</p>\n  }\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".message-container{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.white-overlay) .icon-outline{border-color:var(--kirby-white-overlay)}:host(.white-overlay) kirby-icon{color:var(--kirby-white-overlay)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}:host(.dark-overlay) .icon-outline{border-color:var(--kirby-dark-overlay)}:host(.dark-overlay) kirby-icon{color:var(--kirby-dark-overlay)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyStateComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: EmptyStateComponent, isStandalone: true, selector: "kirby-empty-state", inputs: { iconName: "iconName", title: "title", subtitle: "subtitle" }, queries: [{ propertyName: "slottedButtons", predicate: ButtonComponent }], ngImport: i0, template: "<div class=\"message-container\">\n  @if (iconName) {\n    <div class=\"icon-outline\">\n      <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n    </div>\n  }\n  @if (title) {\n    @if (_insideModal) {\n      <h2 class=\"title kirby-text-medium\">{{ title }}</h2>\n    } @else {\n      <span class=\"title kirby-text-medium\">{{ title }}</span>\n    }\n  }\n  @if (subtitle) {\n    <p class=\"subtitle\">{{ subtitle }}</p>\n  }\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".message-container{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.white-overlay) .icon-outline{border-color:var(--kirby-white-overlay)}:host(.white-overlay) kirby-icon{color:var(--kirby-white-overlay)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}:host(.dark-overlay) .icon-outline{border-color:var(--kirby-dark-overlay)}:host(.dark-overlay) kirby-icon{color:var(--kirby-dark-overlay)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], template: "<div class=\"message-container\">\n  @if (iconName) {\n    <div class=\"icon-outline\">\n      <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n    </div>\n  }\n  @if (title) {\n    @if (_insideModal) {\n      <h2 class=\"title kirby-text-medium\">{{ title }}</h2>\n    } @else {\n      <span class=\"title kirby-text-medium\">{{ title }}</span>\n    }\n  }\n  @if (subtitle) {\n    <p class=\"subtitle\">{{ subtitle }}</p>\n  }\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".message-container{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.white-overlay) .icon-outline{border-color:var(--kirby-white-overlay)}:host(.white-overlay) kirby-icon{color:var(--kirby-white-overlay)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}:host(.dark-overlay) .icon-outline{border-color:var(--kirby-dark-overlay)}:host(.dark-overlay) kirby-icon{color:var(--kirby-dark-overlay)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { iconName: [{
@@ -72,11 +72,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class EmptyStateModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EmptyStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: EmptyStateModule, imports: [IconModule, CommonModule, ThemeColorDirective, EmptyStateComponent], exports: [EmptyStateComponent, ThemeColorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EmptyStateModule, imports: [IconModule, CommonModule, EmptyStateComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: EmptyStateModule, imports: [IconModule, CommonModule, ThemeColorDirective, EmptyStateComponent], exports: [EmptyStateComponent, ThemeColorDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyStateModule, imports: [IconModule, CommonModule, EmptyStateComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EmptyStateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyStateModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IconModule, CommonModule, ThemeColorDirective, EmptyStateComponent],

package/fesm2022/kirbydesign-designsystem-empty-state.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-empty-state.mjs","sources":["../../empty-state/src/empty-state.component.ts","../../empty-state/src/empty-state.component.html","../../empty-state/src/empty-state.module.ts","../../empty-state/src/kirbydesign-designsystem-empty-state.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  ElementRef,\n  Input,\n  OnInit,\n  QueryList,\n  Renderer2,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { getIonModalDialogAncestor } from '@kirbydesign/designsystem/helpers';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n@Component({\n  selector: 'kirby-empty-state',\n  templateUrl: './empty-state.component.html',\n  styleUrls: ['./empty-state.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IconComponent],\n})\nexport class EmptyStateComponent implements AfterContentInit, OnInit {\n  private _title: string;\n  private ionModalDialog: HTMLElement;\n\n  @Input() iconName: string;\n\n  @Input() set title(value: string) {\n    this._title = value;\n\n    if (this.ionModalDialog) {\n      this.renderer.setAttribute(this.ionModalDialog, 'aria-label', value);\n    }\n  }\n\n  get title(): string {\n    return this._title;\n  }\n  _insideModal: boolean = false;\n\n  @Input() subtitle: string;\n\n  @ContentChildren(ButtonComponent)\n  private slottedButtons: QueryList<ButtonComponent>;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  ngOnInit(): void {\n    /* If initialized inside a modal we want to set\n     * the aria-label attribute on ion-modal to the title of empty state.\n     * Further updates are handled by title setter.\n     */\n    this.ionModalDialog = getIonModalDialogAncestor(this.elementRef.nativeElement);\n    if (this.ionModalDialog) {\n      this._insideModal = true;\n      this.renderer.setAttribute(this.ionModalDialog, 'aria-label', this.title);\n    }\n  }\n\n  ngAfterContentInit() {\n    this.enforceAttentionLevelRules();\n\n    /* setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when changing attention\n    levels of slotted buttons in this.enforceAttentionLevelRules */\n    this.slottedButtons.changes.subscribe(() => {\n      setTimeout(() => this.enforceAttentionLevelRules());\n    });\n  }\n\n  /** Enforces that all slotted buttons will have their attention\n   * level set to 3, except the first button if it has\n   * level 1.\n   */\n  private enforceAttentionLevelRules() {\n    this.slottedButtons.forEach((button, index) => {\n      if (index === 0 && (button.attentionLevel === undefined || button.attentionLevel === '1')) {\n        return;\n      }\n\n      if (button.attentionLevel !== '3') {\n        button.attentionLevel = '3';\n      }\n    });\n  }\n}\n","<div class=\"message-container\">\n  @if (iconName) {\n    <div class=\"icon-outline\">\n      <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n    </div>\n  }\n  @if (title) {\n    @if (_insideModal) {\n      <h2 class=\"title kirby-text-medium\">{{ title }}</h2>\n    } @else {\n      <span class=\"title kirby-text-medium\">{{ title }}</span>\n    }\n  }\n  @if (subtitle) {\n    <p class=\"subtitle\">{{ subtitle }}</p>\n  }\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { EmptyStateComponent } from './empty-state.component';\n\n@NgModule({\n  imports: [IconModule, CommonModule, ThemeColorDirective, EmptyStateComponent],\n  exports: [EmptyStateComponent, ThemeColorDirective],\n})\nexport class EmptyStateModule {}\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-empty-state.mjs","sources":["../../empty-state/src/empty-state.component.ts","../../empty-state/src/empty-state.component.html","../../empty-state/src/empty-state.module.ts","../../empty-state/src/kirbydesign-designsystem-empty-state.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  ElementRef,\n  Input,\n  OnInit,\n  QueryList,\n  Renderer2,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { getIonModalDialogAncestor } from '@kirbydesign/designsystem/helpers';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n@Component({\n  selector: 'kirby-empty-state',\n  templateUrl: './empty-state.component.html',\n  styleUrls: ['./empty-state.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IconComponent],\n})\nexport class EmptyStateComponent implements AfterContentInit, OnInit {\n  private _title: string;\n  private ionModalDialog: HTMLElement;\n\n  @Input() iconName: string;\n\n  @Input() set title(value: string) {\n    this._title = value;\n\n    if (this.ionModalDialog) {\n      this.renderer.setAttribute(this.ionModalDialog, 'aria-label', value);\n    }\n  }\n\n  get title(): string {\n    return this._title;\n  }\n  _insideModal: boolean = false;\n\n  @Input() subtitle: string;\n\n  @ContentChildren(ButtonComponent)\n  private slottedButtons: QueryList<ButtonComponent>;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  ngOnInit(): void {\n    /* If initialized inside a modal we want to set\n     * the aria-label attribute on ion-modal to the title of empty state.\n     * Further updates are handled by title setter.\n     */\n    this.ionModalDialog = getIonModalDialogAncestor(this.elementRef.nativeElement);\n    if (this.ionModalDialog) {\n      this._insideModal = true;\n      this.renderer.setAttribute(this.ionModalDialog, 'aria-label', this.title);\n    }\n  }\n\n  ngAfterContentInit() {\n    this.enforceAttentionLevelRules();\n\n    /* setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when changing attention\n    levels of slotted buttons in this.enforceAttentionLevelRules */\n    this.slottedButtons.changes.subscribe(() => {\n      setTimeout(() => this.enforceAttentionLevelRules());\n    });\n  }\n\n  /** Enforces that all slotted buttons will have their attention\n   * level set to 3, except the first button if it has\n   * level 1.\n   */\n  private enforceAttentionLevelRules() {\n    this.slottedButtons.forEach((button, index) => {\n      if (index === 0 && (button.attentionLevel === undefined || button.attentionLevel === '1')) {\n        return;\n      }\n\n      if (button.attentionLevel !== '3') {\n        button.attentionLevel = '3';\n      }\n    });\n  }\n}\n","<div class=\"message-container\">\n  @if (iconName) {\n    <div class=\"icon-outline\">\n      <kirby-icon [name]=\"iconName\" size=\"lg\"></kirby-icon>\n    </div>\n  }\n  @if (title) {\n    @if (_insideModal) {\n      <h2 class=\"title kirby-text-medium\">{{ title }}</h2>\n    } @else {\n      <span class=\"title kirby-text-medium\">{{ title }}</span>\n    }\n  }\n  @if (subtitle) {\n    <p class=\"subtitle\">{{ subtitle }}</p>\n  }\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { EmptyStateComponent } from './empty-state.component';\n\n@NgModule({\n  imports: [IconModule, CommonModule, ThemeColorDirective, EmptyStateComponent],\n  exports: [EmptyStateComponent, ThemeColorDirective],\n})\nexport class EmptyStateModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs

@@ -51,12 +51,12 @@ class FabSheetComponent {
         }
         this.changeDetectorRef.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 15px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], dependencies: [{ kind: "component", type: IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { kind: "component", type: IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media(hover:hover)and (pointer:fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 15px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], dependencies: [{ kind: "component", type: IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { kind: "component", type: IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FabSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FabSheetComponent, decorators: [{
             type: Component,
-            args: [{ imports: [IonBackdrop, IonFab, IonFabButton, IonFabList], selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 15px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
+            args: [{ imports: [IonBackdrop, IonFab, IonFabButton, IonFabList], selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media(hover:hover)and (pointer:fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button{--box-shadow: 0 0 5px 0 rgba(28, 28, 28, .04), 0 10px 15px -10px rgba(28, 28, 28, .15);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]

package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-fab-sheet.mjs","sources":["../../fab-sheet/src/fab-sheet.component.ts","../../fab-sheet/src/fab-sheet.component.html","../../fab-sheet/src/kirbydesign-designsystem-fab-sheet.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Inject,\n  Input,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { ActionSheetComponent } from '@kirbydesign/designsystem/modal';\nimport { IonBackdrop, IonFab, IonFabButton, IonFabList } from '@ionic/angular/standalone';\nimport { DOCUMENT } from '@angular/common';\n\nconst KIRBY_FAB_SHEET_DEPRECATION_WARNING =\n  '[Kirby fab sheet] Deprecated - Use Header with Action Group instead';\n\n@Component({\n  imports: [IonBackdrop, IonFab, IonFabButton, IonFabList],\n  selector: 'kirby-fab-sheet',\n  templateUrl: './fab-sheet.component.html',\n  styleUrls: ['./fab-sheet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FabSheetComponent implements AfterContentInit, AfterViewInit {\n  @Input() disabled: boolean = false;\n  @Input() horizontalAlignment: 'left' | 'center' | 'right' = 'right';\n\n  private _isFabSheetOpen: boolean = false;\n  @HostBinding('class.is-open')\n  get isFabSheetOpen() {\n    return this._isFabSheetOpen;\n  }\n\n  @ContentChild(ActionSheetComponent, { static: false }) actionSheet: ActionSheetComponent;\n\n  @ViewChild(IonFabButton, { static: true, read: ElementRef })\n  ionFabButton: ElementRef<HTMLElement>;\n\n  @ViewChild(IonFab, { static: true })\n  ionFab: IonFab;\n\n  constructor(\n    private changeDetectorRef: ChangeDetectorRef,\n    private renderer: Renderer2,\n    @Inject(DOCUMENT) private document: Document\n  ) {\n    console.warn(KIRBY_FAB_SHEET_DEPRECATION_WARNING);\n  }\n\n  ngAfterContentInit(): void {\n    if (this.actionSheet) {\n      this.actionSheet.hideCancel = true;\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n  }\n\n  hideActions() {\n    this.ionFab.close().then(() => this.fabSheetStateChanged(false));\n  }\n\n  onFabButtonClick() {\n    setTimeout(() => {\n      this.fabSheetStateChanged(this.ionFab.activated);\n    });\n  }\n\n  onFabListClick() {\n    this.ionFab.close().then(() => {\n      this.fabSheetStateChanged(false);\n    });\n  }\n\n  fabSheetStateChanged(isOpen: boolean) {\n    this._isFabSheetOpen = isOpen;\n    if (this.isFabSheetOpen) {\n      this.renderer.addClass(this.document.body, 'fab-sheet-active');\n      this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n    } else {\n      this.renderer.removeClass(this.document.body, 'fab-sheet-active');\n      this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.changeDetectorRef.detectChanges();\n  }\n}\n","<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\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-fab-sheet.mjs","sources":["../../fab-sheet/src/fab-sheet.component.ts","../../fab-sheet/src/fab-sheet.component.html","../../fab-sheet/src/kirbydesign-designsystem-fab-sheet.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Inject,\n  Input,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { ActionSheetComponent } from '@kirbydesign/designsystem/modal';\nimport { IonBackdrop, IonFab, IonFabButton, IonFabList } from '@ionic/angular/standalone';\nimport { DOCUMENT } from '@angular/common';\n\nconst KIRBY_FAB_SHEET_DEPRECATION_WARNING =\n  '[Kirby fab sheet] Deprecated - Use Header with Action Group instead';\n\n@Component({\n  imports: [IonBackdrop, IonFab, IonFabButton, IonFabList],\n  selector: 'kirby-fab-sheet',\n  templateUrl: './fab-sheet.component.html',\n  styleUrls: ['./fab-sheet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FabSheetComponent implements AfterContentInit, AfterViewInit {\n  @Input() disabled: boolean = false;\n  @Input() horizontalAlignment: 'left' | 'center' | 'right' = 'right';\n\n  private _isFabSheetOpen: boolean = false;\n  @HostBinding('class.is-open')\n  get isFabSheetOpen() {\n    return this._isFabSheetOpen;\n  }\n\n  @ContentChild(ActionSheetComponent, { static: false }) actionSheet: ActionSheetComponent;\n\n  @ViewChild(IonFabButton, { static: true, read: ElementRef })\n  ionFabButton: ElementRef<HTMLElement>;\n\n  @ViewChild(IonFab, { static: true })\n  ionFab: IonFab;\n\n  constructor(\n    private changeDetectorRef: ChangeDetectorRef,\n    private renderer: Renderer2,\n    @Inject(DOCUMENT) private document: Document\n  ) {\n    console.warn(KIRBY_FAB_SHEET_DEPRECATION_WARNING);\n  }\n\n  ngAfterContentInit(): void {\n    if (this.actionSheet) {\n      this.actionSheet.hideCancel = true;\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n  }\n\n  hideActions() {\n    this.ionFab.close().then(() => this.fabSheetStateChanged(false));\n  }\n\n  onFabButtonClick() {\n    setTimeout(() => {\n      this.fabSheetStateChanged(this.ionFab.activated);\n    });\n  }\n\n  onFabListClick() {\n    this.ionFab.close().then(() => {\n      this.fabSheetStateChanged(false);\n    });\n  }\n\n  fabSheetStateChanged(isOpen: boolean) {\n    this._isFabSheetOpen = isOpen;\n    if (this.isFabSheetOpen) {\n      this.renderer.addClass(this.document.body, 'fab-sheet-active');\n      this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n    } else {\n      this.renderer.removeClass(this.document.body, 'fab-sheet-active');\n      this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.changeDetectorRef.detectChanges();\n  }\n}\n","<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-flag.mjs

@@ -9,12 +9,12 @@ class FlagComponent {
     get _cssClass() {
         return [this.themeColor, this.size];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FlagComponent, isStandalone: true, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FlagComponent, isStandalone: true, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host.success{--kirby-flag-background-color: var(--kirby-success-tint)}:host.warning{--kirby-flag-background-color: var(--kirby-warning-tint)}:host.danger{--kirby-flag-background-color: var(--kirby-danger-tint)}:host.semi-light{--kirby-flag-background-color: var(--kirby-semi-light)}:host{--kirby-flag-border-color: var(--kirby-flag-background-color);--kirby-flag-color: var(--kirby-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FlagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FlagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-flag', template: `
     <ng-content></ng-content>

package/fesm2022/kirbydesign-designsystem-flag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-flag.mjs","sources":["../../flag/src/flag.component.ts","../../flag/src/kirbydesign-designsystem-flag.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nexport type FlagThemeColor = 'success' | 'warning' | 'danger' | 'semi-light' | 'transparent';\n\n@Component({\n  selector: 'kirby-flag',\n  template: `\n    <ng-content></ng-content>\n  `,\n  styleUrls: ['./flag.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagComponent {\n  @Input() size: 'xs' | 'sm' | 'md' = 'md';\n  @Input() themeColor: FlagThemeColor = 'transparent';\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.themeColor, this.size];\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAYa,aAAa,CAAA;AAR1B,IAAA,WAAA,GAAA;QASW,IAAA,CAAA,IAAI,GAAuB,IAAI;QAC/B,IAAA,CAAA,UAAU,GAAmB,aAAa;AAMpD,IAAA;AAJC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;IACrC;kIAPW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANd;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8zBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAIU,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,QAAA,EACZ;;GAET,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,8zBAAA,CAAA,EAAA;;sBAG9C;;sBACA;;sBAEA,WAAW;uBAAC,OAAO;;;AChBtB;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-flag.mjs","sources":["../../flag/src/flag.component.ts","../../flag/src/kirbydesign-designsystem-flag.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nexport type FlagThemeColor = 'success' | 'warning' | 'danger' | 'semi-light' | 'transparent';\n\n@Component({\n  selector: 'kirby-flag',\n  template: `\n    <ng-content></ng-content>\n  `,\n  styleUrls: ['./flag.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagComponent {\n  @Input() size: 'xs' | 'sm' | 'md' = 'md';\n  @Input() themeColor: FlagThemeColor = 'transparent';\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.themeColor, this.size];\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAYa,aAAa,CAAA;AAR1B,IAAA,WAAA,GAAA;QASW,IAAA,CAAA,IAAI,GAAuB,IAAI;QAC/B,IAAA,CAAA,UAAU,GAAmB,aAAa;AAMpD,IAAA;AAJC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;IACrC;iIAPW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANd;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8zBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAIU,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,QAAA,EACZ;;GAET,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,8zBAAA,CAAA,EAAA;;sBAG9C;;sBACA;;sBAEA,WAAW;uBAAC,OAAO;;;AChBtB;;AAEG;;;;"}