npm - @kirbydesign/designsystem - Versions diffs - 10.5.1 → 10.6.0-rc.1 - Mend

@kirbydesign/designsystem 10.5.1 → 10.6.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/config/provide-kirby.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { EnvironmentProviders, InjectionToken } from '@angular/core';
+import { EnvironmentProviders, InjectionToken, Provider } from '@angular/core';
 /**
  * Configuration object for global configuration of Kirby.
  */
@@ -19,9 +19,20 @@ export interface KirbyConfig {
  */
 export declare const KIRBY_CONFIG: InjectionToken<KirbyConfig>;
 /**
- * Sets up top level configuration and providers needed for the Kirby components.
  *
- * @param config - Optional configuration for the Kirby design system.
+ * @param features - Additional features to be provided to the Kirby environment:
+ * @see {@link withGlobalSetup} for setting up global configuration.
  */
-export declare function provideKirby(config?: KirbyConfig): EnvironmentProviders;
+export declare function provideKirby(...features: Provider[] | EnvironmentProviders[]): EnvironmentProviders;
+/**
+ * Sets up global configuration when used with the provideKirby EnvironmentProvider function.
+ * Should always be called exactly once per application when bootstrapping, to set up Kirby in the browsers runtime.
+ *
+ * @param config - (Optional) Additional configuration via the `KirbyConfig` object.
+ */
+export declare function withGlobalSetup(config?: KirbyConfig): EnvironmentProviders;
+/**
+ * Retrieves the global Kirby configuration object from the window object.
+ */
+export declare function getGlobalConfig(): KirbyConfig | undefined;
 //# sourceMappingURL=provide-kirby.d.ts.map

package/config/provide-kirby.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"provide-kirby.d.ts","sourceRoot":"","sources":["../../config/src/provide-kirby.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,cAAc,~~EAGf~~,MAAM,eAAe,CAAC;~~AAcvB~~;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,6BAAkD,CAAC;AAE5E;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,oBAAoB,~~CAoCvE~~"}
1	+ {"version":3,"file":"provide-kirby.d.ts","sourceRoot":"","sources":["../../config/src/provide-kirby.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,cAAc,EAEd,QAAQ,EACT,MAAM,eAAe,CAAC;AAuBvB;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,6BAAkD,CAAC;AAE5E;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,GAAG,QAAQ,EAAE,QAAQ,EAAE,GAAG,oBAAoB,EAAE,GAC/C,oBAAoB,CAetB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,oBAAoB,CAuB1E;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,WAAW,GAAG,SAAS,CAEzD"}

package/config/public_api.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export * from './provide-kirby';
+export { provideKirby, withGlobalSetup, getGlobalConfig, KIRBY_CONFIG, KirbyConfig, } from './provide-kirby';
 //# sourceMappingURL=public_api.d.ts.map

package/config/public_api.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"public_api.d.ts","sourceRoot":"","sources":["../../config/src/public_api.ts"],"names":[],"mappings":"AAAA,~~cAAc~~,iBAAiB,CAAC"}
1	+ {"version":3,"file":"public_api.d.ts","sourceRoot":"","sources":["../../config/src/public_api.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,eAAe,EACf,eAAe,EACf,YAAY,EACZ,WAAW,GACZ,MAAM,iBAAiB,CAAC"}

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

@@ -6,10 +6,10 @@ import * as i1 from '@kirbydesign/designsystem/icon';
 import { IconModule } from '@kirbydesign/designsystem/icon';
 class AccordionDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: AccordionDirective, isStandalone: false, selector: "[kirbyAccordion], kirby-accordion", exportAs: ["kirby-accordion"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: AccordionDirective, isStandalone: false, selector: "[kirbyAccordion], kirby-accordion", exportAs: ["kirby-accordion"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AccordionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccordionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyAccordion], kirby-accordion',
@@ -60,8 +60,8 @@ class AccordionItemComponent {
         this.isExpanded = !this.isExpanded && !this.isDisabled;
         this.toggle.emit(this.isExpanded);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: AccordionItemComponent, isStandalone: false, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle", hasPadding: "hasPadding" }, outputs: { toggle: "toggle" }, host: { properties: { "class.has-list": "this.hasList" } }, queries: [{ propertyName: "listChildren", predicate: ListComponent }], 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\" [class.padding]=\"hasPadding\">\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}: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))}:host{display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host(.has-list){--kirby-item-background: transparent}@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)}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body.padding{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"] }], animations: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AccordionItemComponent, isStandalone: false, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle", hasPadding: "hasPadding" }, outputs: { toggle: "toggle" }, host: { properties: { "class.has-list": "this.hasList" } }, queries: [{ propertyName: "listChildren", predicate: ListComponent }], 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\" [class.padding]=\"hasPadding\">\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}: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))}:host{display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host(.has-list){--kirby-item-background: transparent}@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)}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body.padding{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"] }], animations: [
             trigger('isExpanded', [
                 state('true', style({ height: '*', visibility: 'visible' })),
                 state('false', style({ height: '0px', visibility: 'hidden' })),
@@ -69,7 +69,7 @@ class AccordionItemComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('isExpanded', [
@@ -100,11 +100,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
 const declarations = [AccordionDirective, AccordionItemComponent];
 class AccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: AccordionModule, declarations: [AccordionDirective, AccordionItemComponent], imports: [IconModule], exports: [AccordionDirective, AccordionItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AccordionModule, imports: [IconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AccordionModule, declarations: [AccordionDirective, AccordionItemComponent], imports: [IconModule], exports: [AccordionDirective, AccordionItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccordionModule, imports: [IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...declarations],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-accordion.mjs","sources":["../../accordion/src/accordion.directive.ts","../../accordion/src/accordion-item.component.ts","../../accordion/src/accordion-item.component.html","../../accordion/src/accordion.module.ts","../../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 standalone: false,\n})\nexport class AccordionDirective {}\n","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n EventEmitter,\n HostBinding,\n Input,\n OnChanges,\n Output,\n QueryList,\n} from '@angular/core';\nimport { ListComponent } from '@kirbydesign/designsystem/list';\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 standalone: false,\n})\nexport class AccordionItemComponent implements OnChanges, AfterContentInit {\n @HostBinding('class.has-list') hasList: boolean = false;\n @Input() title: string;\n @Input() isExpanded: boolean = false;\n @Input() isDisabled: boolean = false;\n @Input() disabledTitle: string;\n @Input() hasPadding: boolean = true;\n @Output() toggle: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n @ContentChildren(ListComponent) listChildren: QueryList<ListComponent>;\n\n ngAfterContentInit(): void {\n if (this.listChildren.length > 0) {\n this.hasPadding = false;\n this.hasList = true;\n this.listChildren.forEach((child) => {\n child.shape = 'none';\n });\n }\n }\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\" [class.padding]=\"hasPadding\">\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":";;;;;;;MAOa,kBAAkB,CAAA;~~iIAAlB~~,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;~~qHAAlB~~,kBAAkB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,QAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;~~2FAAlB~~,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mCAAmC;AAC7C,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,KAAK;AAClB,iBAAA;;;ACSD;AACA,IAAI,QAAQ,GAAG,CAAC;MAgBH,sBAAsB,CAAA;AAdnC,IAAA,WAAA,GAAA;QAeiC,IAAO,CAAA,OAAA,GAAY,KAAK;QAE9C,IAAU,CAAA,UAAA,GAAY,KAAK;QAC3B,IAAU,CAAA,UAAA,GAAY,KAAK;QAE3B,IAAU,CAAA,UAAA,GAAY,IAAI;AACzB,QAAA,IAAA,CAAA,MAAM,GAA0B,IAAI,YAAY,EAAW;;AAqCrE,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAA,2BAAA,EAA8B,EAAE,QAAQ,EAAE;AACrD,QAAA,IAAA,CAAA,UAAU,GAAG,CAAA,6BAAA,EAAgC,QAAQ,CAAA,CAAE;AACxD;IAnCC,kBAAkB,GAAA;QAChB,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACnB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AAClC,gBAAA,KAAK,CAAC,KAAK,GAAG,MAAM;AACtB,aAAC,CAAC;;;IAIN,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;;;IAI3B,QAAQ,GAAA;QACN,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;YAC3C,OAAO,IAAI,CAAC,aAAa;;aACpB;YACL,OAAO,IAAI,CAAC,KAAK;;;AAIrB,IAAA,iBAAiB,CAAC,KAAc,EAAA;QAC9B,KAAK,CAAC,cAAc,EAAE;QACtB,IAAI,IAAI,CAAC,UAAU;YAAE;AAErB,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,UAAU;QACtD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;;~~iIAxCxB~~,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,IAAA,EAAA,sBAAsB,EAShB,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,aAAA,EAAA,eAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAAA,aAAa,ECzChC,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,48BA+BA,EDRc,MAAA,EAAA,CAAA,yzDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA;YACV,OAAO,CAAC,YAAY,EAAE;AACpB,gBAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC;AAC5D,gBAAA,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC9D,gBAAA,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;aAC9C,CAAC;AACH,SAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAGU~~,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAdlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,EAGf,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACnC,UAAA,EAAA;wBACV,OAAO,CAAC,YAAY,EAAE;AACpB,4BAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC;AAC5D,4BAAA,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC9D,4BAAA,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;yBAC9C,CAAC;AACH,qBAAA,EAAA,UAAA,EACW,KAAK,EAAA,QAAA,EAAA,48BAAA,EAAA,MAAA,EAAA,CAAA,yzDAAA,CAAA,EAAA;8BAGc,OAAO,EAAA,CAAA;sBAArC,WAAW;uBAAC,gBAAgB;gBACpB,KAAK,EAAA,CAAA;sBAAb;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACS,MAAM,EAAA,CAAA;sBAAf;gBAE+B,YAAY,EAAA,CAAA;sBAA3C,eAAe;uBAAC,aAAa;;;AEnChC,MAAM,YAAY,GAAG,CAAC,kBAAkB,EAAE,sBAAsB,CAAC;MAOpD,eAAe,CAAA;~~iIAAf~~,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;~~kIAAf~~,eAAe,EAAA,YAAA,EAAA,CAPN,kBAAkB,EAAE,sBAAsB,aAIpD,UAAU,CAAA,EAAA,OAAA,EAAA,CAJA,kBAAkB,EAAE,sBAAsB,CAAA,EAAA,CAAA,CAAA;AAOnD,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YAHhB,UAAU,CAAA,EAAA,CAAA,CAAA;;~~2FAGT~~,eAAe,EAAA,UAAA,EAAA,CAAA;kBAL3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,CAAC,GAAG,YAAY,CAAC;oBAC/B,OAAO,EAAE,CAAC,UAAU,CAAC;AACrB,oBAAA,OAAO,EAAE,CAAC,GAAG,YAAY,CAAC;AAC3B,iBAAA;;;ACZD;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-accordion.mjs","sources":["../../accordion/src/accordion.directive.ts","../../accordion/src/accordion-item.component.ts","../../accordion/src/accordion-item.component.html","../../accordion/src/accordion.module.ts","../../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 standalone: false,\n})\nexport class AccordionDirective {}\n","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n EventEmitter,\n HostBinding,\n Input,\n OnChanges,\n Output,\n QueryList,\n} from '@angular/core';\nimport { ListComponent } from '@kirbydesign/designsystem/list';\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 standalone: false,\n})\nexport class AccordionItemComponent implements OnChanges, AfterContentInit {\n @HostBinding('class.has-list') hasList: boolean = false;\n @Input() title: string;\n @Input() isExpanded: boolean = false;\n @Input() isDisabled: boolean = false;\n @Input() disabledTitle: string;\n @Input() hasPadding: boolean = true;\n @Output() toggle: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n @ContentChildren(ListComponent) listChildren: QueryList<ListComponent>;\n\n ngAfterContentInit(): void {\n if (this.listChildren.length > 0) {\n this.hasPadding = false;\n this.hasList = true;\n this.listChildren.forEach((child) => {\n child.shape = 'none';\n });\n }\n }\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\" [class.padding]=\"hasPadding\">\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/fesm2022/kirbydesign-designsystem-action-group.mjs CHANGED Viewed

@@ -95,12 +95,12 @@ class ActionGroupComponent {
             text: button.textContent.trim(),
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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    [disabled]=\"action.button?.disabled\"\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: "19.2.9", ngImport: i0, type: ActionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-action-group', 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"] }]
+            args: [{ selector: 'kirby-action-group', 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    [disabled]=\"action.button?.disabled\"\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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {

package/fesm2022/kirbydesign-designsystem-action-group.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-action-group.mjs","sources":["../../action-group/src/action-group.component.ts","../../action-group/src/action-group.component.html","../../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 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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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-action-group.mjs","sources":["../../action-group/src/action-group.component.ts","../../action-group/src/action-group.component.html","../../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 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 [disabled]=\"action.button?.disabled\"\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/fesm2022/kirbydesign-designsystem-avatar.mjs CHANGED Viewed

@@ -21,10 +21,10 @@ class AvatarComponent {
     onImageError($event) {
         this.imageError.emit($event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", imageLoading: "imageLoading", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, outputs: { imageError: "imageError" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  <img\n    *ngIf=\"imageSrc\"\n    [src]=\"imageSrc\"\n    [attr.alt]=\"altText\"\n    [attr.loading]=\"imageLoading\"\n    (error)=\"onImageError($event)\"\n  />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", imageLoading: "imageLoading", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, outputs: { imageError: "imageError" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  <img\n    *ngIf=\"imageSrc\"\n    [src]=\"imageSrc\"\n    [attr.alt]=\"altText\"\n    [attr.loading]=\"imageLoading\"\n    (error)=\"onImageError($event)\"\n  />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ imports: [CommonModule], selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  <img\n    *ngIf=\"imageSrc\"\n    [src]=\"imageSrc\"\n    [attr.alt]=\"altText\"\n    [attr.loading]=\"imageLoading\"\n    (error)=\"onImageError($event)\"\n  />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"] }]
         }], propDecorators: { imageSrc: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-avatar.mjs","sources":["../../avatar/src/avatar.component.ts","../../avatar/src/avatar.component.html","../../avatar/src/kirbydesign-designsystem-avatar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n} from '@angular/core';\n\nimport { BrandColor, NotificationColor } from '@kirbydesign/core';\n\nexport enum AvatarSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\n@Component({\n imports: [CommonModule],\n selector: 'kirby-avatar',\n templateUrl: './avatar.component.html',\n styleUrls: ['./avatar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarComponent {\n @Input() imageSrc: string;\n @Input() imageLoading: 'eager' \| 'lazy' \| undefined;\n @Input() altText: string;\n @Input() stroke: boolean;\n @Input() text: string;\n @Input() overlay: boolean;\n @Input() size: AvatarSize \| `${AvatarSize}` = AvatarSize.SM;\n @Input()\n themeColor: NotificationColor \| BrandColor \| 'medium' \| 'white' \| 'dark' \| 'light' \| 'semi-light';\n @Output()\n imageError: EventEmitter<ErrorEvent> = new EventEmitter();\n\n @HostBinding('class')\n get _cssClass() {\n return [this.themeColor, this.size].filter((cssClass) => !!cssClass);\n }\n\n onImageError($event: ErrorEvent) {\n this.imageError.emit($event);\n }\n}\n","<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n <img\n ngIf=\"imageSrc\"\n [src]=\"imageSrc\"\n [attr.alt]=\"altText\"\n [attr.loading]=\"imageLoading\"\n (error)=\"onImageError($event)\"\n />\n <ng-content ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;IAYY;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACX,CAAC,EALW,UAAU,KAAV,UAAU,GAKrB,EAAA,CAAA,CAAA;MASY,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;AAcW,QAAA,IAAA,CAAA,IAAI,GAAiC,UAAU,CAAC,EAAE;AAI3D,QAAA,IAAA,CAAA,UAAU,GAA6B,IAAI,YAAY,EAAE;AAU1D;AARC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,QAAQ,CAAC;;AAGtE,IAAA,YAAY,CAAC,MAAkB,EAAA;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;;~~iIAnBnB~~,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;~~qHAAf~~,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1B5B,+aAYA,EAAA,MAAA,EAAA,CAAA,g9FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDQY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAMX~~,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAC,YAAY,CAAC,EAAA,QAAA,EACb,cAAc,EAGP,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+aAAA,EAAA,MAAA,EAAA,CAAA,g9FAAA,CAAA,EAAA;8BAGtC,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBAED,UAAU,EAAA,CAAA;sBADT;gBAGD,UAAU,EAAA,CAAA;sBADT;gBAIG,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,OAAO;;;AEvCtB;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-avatar.mjs","sources":["../../avatar/src/avatar.component.ts","../../avatar/src/avatar.component.html","../../avatar/src/kirbydesign-designsystem-avatar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n} from '@angular/core';\n\nimport { BrandColor, NotificationColor } from '@kirbydesign/core';\n\nexport enum AvatarSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\n@Component({\n imports: [CommonModule],\n selector: 'kirby-avatar',\n templateUrl: './avatar.component.html',\n styleUrls: ['./avatar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarComponent {\n @Input() imageSrc: string;\n @Input() imageLoading: 'eager' \| 'lazy' \| undefined;\n @Input() altText: string;\n @Input() stroke: boolean;\n @Input() text: string;\n @Input() overlay: boolean;\n @Input() size: AvatarSize \| `${AvatarSize}` = AvatarSize.SM;\n @Input()\n themeColor: NotificationColor \| BrandColor \| 'medium' \| 'white' \| 'dark' \| 'light' \| 'semi-light';\n @Output()\n imageError: EventEmitter<ErrorEvent> = new EventEmitter();\n\n @HostBinding('class')\n get _cssClass() {\n return [this.themeColor, this.size].filter((cssClass) => !!cssClass);\n }\n\n onImageError($event: ErrorEvent) {\n this.imageError.emit($event);\n }\n}\n","<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n <img\n ngIf=\"imageSrc\"\n [src]=\"imageSrc\"\n [attr.alt]=\"altText\"\n [attr.loading]=\"imageLoading\"\n (error)=\"onImageError($event)\"\n />\n <ng-content ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;IAYY;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACX,CAAC,EALW,UAAU,KAAV,UAAU,GAKrB,EAAA,CAAA,CAAA;MASY,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;AAcW,QAAA,IAAA,CAAA,IAAI,GAAiC,UAAU,CAAC,EAAE;AAI3D,QAAA,IAAA,CAAA,UAAU,GAA6B,IAAI,YAAY,EAAE;AAU1D;AARC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,QAAQ,CAAC;;AAGtE,IAAA,YAAY,CAAC,MAAkB,EAAA;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;;kIAnBnB,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1B5B,+aAYA,EAAA,MAAA,EAAA,CAAA,g9FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDQY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAMX,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAC,YAAY,CAAC,EAAA,QAAA,EACb,cAAc,EAGP,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+aAAA,EAAA,MAAA,EAAA,CAAA,g9FAAA,CAAA,EAAA;8BAGtC,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBAED,UAAU,EAAA,CAAA;sBADT;gBAGD,UAAU,EAAA,CAAA;sBADT;gBAIG,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,OAAO;;;AEvCtB;;AAEG;;;;"}

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

@@ -22,10 +22,10 @@ class BadgeComponent {
         console.warn(KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING);
         this._text = value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: BadgeComponent, isStandalone: true, selector: "kirby-badge", inputs: { text: "text", size: "size" }, host: { properties: { "class": "this.size" } }, hostDirectives: [{ directive: i1.ThemeColorDirective, inputs: ["themeColor", "themeColor"] }], ngImport: i0, template: "<ion-badge>\n  <span *ngIf=\"size === 'sm'\"></span>\n  <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n  <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BadgeComponent, isStandalone: true, selector: "kirby-badge", inputs: { text: "text", size: "size" }, host: { properties: { "class": "this.size" } }, hostDirectives: [{ directive: i1.ThemeColorDirective, inputs: ["themeColor", "themeColor"] }], ngImport: i0, template: "<ion-badge>\n  <span *ngIf=\"size === 'sm'\"></span>\n  <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n  <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: BadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-badge', imports: [CommonModule, IonBadge], hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }], template: "<ion-badge>\n  <span *ngIf=\"size === 'sm'\"></span>\n  <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n  <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"] }]
         }], propDecorators: { text: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-badge.mjs","sources":["../../badge/src/badge.component.ts","../../badge/src/badge.component.html","../../badge/src/kirbydesign-designsystem-badge.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Input } from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { IonBadge } from '@ionic/angular/standalone';\n\nexport type BadgeSize = 'sm' \| 'md';\n\nconst KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING =\n '[Kirby Badge] The `text` property has been deprecated. Please set the text of the Badge between the opening and closing tag.';\n\n@Component({\n selector: 'kirby-badge',\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n imports: [CommonModule, IonBadge],\n hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }],\n})\nexport class BadgeComponent {\n private _text: string;\n get text(): string {\n return this._text;\n }\n /*\n @deprecated The 'text' property has been deprecated.\n * Please set the text of the Badge between the opening and closing tag.\n /\n @Input() set text(value: string) {\n console.warn(KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING);\n this._text = value;\n }\n\n @HostBinding('class')\n @Input()\n size: BadgeSize = 'md';\n}\n","<ion-badge>\n <span ngIf=\"size === 'sm'\"></span>\n <ng-content ngIf=\"!text && size === 'md'\"></ng-content>\n <ng-container ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;;AAOA,MAAM,6CAA6C,GACjD,8HAA8H;MASnH,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;QAuBE,IAAI,CAAA,IAAA,GAAc,IAAI;AACvB;AAfC,IAAA,IAAI,IAAI,GAAA;QACN,OAAO,IAAI,CAAC,KAAK;;AAEnB;;;AAGG;IACH,IAAa,IAAI,CAAC,KAAa,EAAA;AAC7B,QAAA,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC;AAC3D,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;~~iIAXT~~,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,IAAA,EAAA,cAAc,ECjB3B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,+MAKA,EDSY,MAAA,EAAA,CAAA,o0CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,mIAAE,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;~~2FAGrB~~,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,WAGd,CAAC,YAAY,EAAE,QAAQ,CAAC,kBACjB,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAAA,QAAA,EAAA,+MAAA,EAAA,MAAA,EAAA,CAAA,o0CAAA,CAAA,EAAA;8BAW/D,IAAI,EAAA,CAAA;sBAAhB;gBAOD,IAAI,EAAA,CAAA;sBAFH,WAAW;uBAAC,OAAO;;sBACnB;;;AEhCH;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-badge.mjs","sources":["../../badge/src/badge.component.ts","../../badge/src/badge.component.html","../../badge/src/kirbydesign-designsystem-badge.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Input } from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { IonBadge } from '@ionic/angular/standalone';\n\nexport type BadgeSize = 'sm' \| 'md';\n\nconst KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING =\n '[Kirby Badge] The `text` property has been deprecated. Please set the text of the Badge between the opening and closing tag.';\n\n@Component({\n selector: 'kirby-badge',\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n imports: [CommonModule, IonBadge],\n hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }],\n})\nexport class BadgeComponent {\n private _text: string;\n get text(): string {\n return this._text;\n }\n /*\n @deprecated The 'text' property has been deprecated.\n * Please set the text of the Badge between the opening and closing tag.\n /\n @Input() set text(value: string) {\n console.warn(KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING);\n this._text = value;\n }\n\n @HostBinding('class')\n @Input()\n size: BadgeSize = 'md';\n}\n","<ion-badge>\n <span ngIf=\"size === 'sm'\"></span>\n <ng-content ngIf=\"!text && size === 'md'\"></ng-content>\n <ng-container ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;;AAOA,MAAM,6CAA6C,GACjD,8HAA8H;MASnH,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;QAuBE,IAAI,CAAA,IAAA,GAAc,IAAI;AACvB;AAfC,IAAA,IAAI,IAAI,GAAA;QACN,OAAO,IAAI,CAAC,KAAK;;AAEnB;;;AAGG;IACH,IAAa,IAAI,CAAC,KAAa,EAAA;AAC7B,QAAA,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC;AAC3D,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;kIAXT,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,ECjB3B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,+MAKA,EDSY,MAAA,EAAA,CAAA,o0CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,mIAAE,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAGrB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,WAGd,CAAC,YAAY,EAAE,QAAQ,CAAC,kBACjB,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAAA,QAAA,EAAA,+MAAA,EAAA,MAAA,EAAA,CAAA,o0CAAA,CAAA,EAAA;8BAW/D,IAAI,EAAA,CAAA;sBAAhB;gBAOD,IAAI,EAAA,CAAA;sBAFH,WAAW;uBAAC,OAAO;;sBACnB;;;AEhCH;;AAEG;;;;"}

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

@@ -108,10 +108,10 @@ class ButtonComponent {
             event.stopImmediatePropagation();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { listeners: { "keydown.enter": "_onEnterOrSpace($event)", "keydown.space": "_onEnterOrSpace($event)" }, properties: { "class.no-decoration": "this.noDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { listeners: { "keydown.enter": "_onEnterOrSpace($event)", "keydown.space": "_onEnterOrSpace($event)" }, properties: { "class.no-decoration": "this.noDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ imports: [CommonModule], selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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))}@media (hover: hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { attentionLevel: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-button.mjs","sources":["../../button/src/button.component.ts","../../button/src/button.component.html","../../button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n HostListener,\n Input,\n Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport type AttentionLevel = '1' \| '2' \| '3';\n\n@Component({\n imports: [CommonModule],\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit {\n @Input() attentionLevel: AttentionLevel;\n\n @HostBinding('class.no-decoration')\n @Input()\n noDecoration = false;\n\n @HostBinding('class.floating')\n public get isButtonFloating(): boolean {\n return this.isFloating;\n }\n\n @HostBinding('class.icon-only')\n public get isIconOnly(): boolean {\n return !!this.iconElementRef && this.showIconOnly;\n }\n private _isIconLeft = false;\n @HostBinding('class.icon-left')\n public get isIconLeft() {\n return this._isIconLeft && !this.showIconOnly;\n }\n private _isIconRight = false;\n @HostBinding('class.icon-right')\n public get isIconRight() {\n return this._isIconRight && !this.showIconOnly;\n }\n\n @HostBinding('class')\n get _cssClass() {\n const attentionLevel = this.getAttentionLevelCssClass();\n return [this.themeColor, this.size, attentionLevel].filter((cssClass) => !!cssClass);\n }\n\n private getAttentionLevelCssClass() {\n if (this.noDecoration) return;\n const attentionLevelDefault: AttentionLevel = '1';\n return `attention-level${this.attentionLevel \|\| attentionLevelDefault}`;\n }\n\n @Input()\n themeColor: NotificationColor;\n @Input() expand: 'full' \| 'block';\n @Input() isFloating: boolean = false;\n @Input()\n size: ButtonSize \| `${ButtonSize}` = ButtonSize.MD;\n\n private _showIconOnly: boolean = false;\n get showIconOnly() {\n return this._showIconOnly;\n }\n @Input() set showIconOnly(value: boolean) {\n if (value) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(this.iconElementRef?.nativeElement);\n }\n this._showIconOnly = value;\n }\n\n @ContentChild(IconComponent, { read: ElementRef })\n iconElementRef?: ElementRef<HTMLElement>;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n private wrapTextNode(iconElement?: HTMLElement) {\n if (!iconElement) {\n return;\n }\n\n const ifTextNode = (node?: ChildNode): ChildNode \| undefined => {\n return node?.nodeType === Node.TEXT_NODE ? node : undefined;\n };\n\n const textNode = ifTextNode(iconElement.previousSibling) \|\| ifTextNode(iconElement.nextSibling);\n if (textNode) {\n const placement = textNode === iconElement.previousSibling ? 'before' : 'after';\n const textWrapper = this.renderer.createElement('span');\n const parent = textNode.parentNode;\n this.renderer.removeChild(textNode.parentNode, textNode);\n this.renderer.appendChild(textWrapper, textNode);\n if (placement === 'before') {\n this.renderer.insertBefore(parent, textWrapper, iconElement);\n } else if (placement === 'after') {\n this.renderer.appendChild(parent, textWrapper);\n }\n }\n }\n\n ngAfterContentInit(): void {\n const iconElement = this.iconElementRef?.nativeElement;\n\n if (iconElement === undefined) {\n // Nothing to do here when there's no icon:\n return;\n }\n\n // Ensure buttons with icon is always shown as icon only inside the toolbar:\n if (this.elementRef.nativeElement.closest('ion-toolbar')) {\n this._showIconOnly = true;\n }\n\n if (this.showIconOnly) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(iconElement);\n }\n\n const hasText = !!this.elementRef.nativeElement.textContent;\n if (!hasText) {\n // Button doesn't contain any text, make it round:\n this._showIconOnly = true;\n }\n\n if (hasText && !this.showIconOnly) {\n this._isIconLeft =\n this.elementRef.nativeElement.querySelector('.content-layer').firstChild === iconElement;\n this._isIconRight = !this._isIconLeft;\n }\n }\n\n @HostListener('keydown.enter', ['$event'])\n @HostListener('keydown.space', ['$event'])\n _onEnterOrSpace(event: KeyboardEvent) {\n if (this.elementRef.nativeElement.ariaDisabled === 'true') {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n}\n","<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-button.mjs","sources":["../../button/src/button.component.ts","../../button/src/button.component.html","../../button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n HostListener,\n Input,\n Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nexport type AttentionLevel = '1' \| '2' \| '3';\n\n@Component({\n imports: [CommonModule],\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit {\n @Input() attentionLevel: AttentionLevel;\n\n @HostBinding('class.no-decoration')\n @Input()\n noDecoration = false;\n\n @HostBinding('class.floating')\n public get isButtonFloating(): boolean {\n return this.isFloating;\n }\n\n @HostBinding('class.icon-only')\n public get isIconOnly(): boolean {\n return !!this.iconElementRef && this.showIconOnly;\n }\n private _isIconLeft = false;\n @HostBinding('class.icon-left')\n public get isIconLeft() {\n return this._isIconLeft && !this.showIconOnly;\n }\n private _isIconRight = false;\n @HostBinding('class.icon-right')\n public get isIconRight() {\n return this._isIconRight && !this.showIconOnly;\n }\n\n @HostBinding('class')\n get _cssClass() {\n const attentionLevel = this.getAttentionLevelCssClass();\n return [this.themeColor, this.size, attentionLevel].filter((cssClass) => !!cssClass);\n }\n\n private getAttentionLevelCssClass() {\n if (this.noDecoration) return;\n const attentionLevelDefault: AttentionLevel = '1';\n return `attention-level${this.attentionLevel \|\| attentionLevelDefault}`;\n }\n\n @Input()\n themeColor: NotificationColor;\n @Input() expand: 'full' \| 'block';\n @Input() isFloating: boolean = false;\n @Input()\n size: ButtonSize \| `${ButtonSize}` = ButtonSize.MD;\n\n private _showIconOnly: boolean = false;\n get showIconOnly() {\n return this._showIconOnly;\n }\n @Input() set showIconOnly(value: boolean) {\n if (value) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(this.iconElementRef?.nativeElement);\n }\n this._showIconOnly = value;\n }\n\n @ContentChild(IconComponent, { read: ElementRef })\n iconElementRef?: ElementRef<HTMLElement>;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n private wrapTextNode(iconElement?: HTMLElement) {\n if (!iconElement) {\n return;\n }\n\n const ifTextNode = (node?: ChildNode): ChildNode \| undefined => {\n return node?.nodeType === Node.TEXT_NODE ? node : undefined;\n };\n\n const textNode = ifTextNode(iconElement.previousSibling) \|\| ifTextNode(iconElement.nextSibling);\n if (textNode) {\n const placement = textNode === iconElement.previousSibling ? 'before' : 'after';\n const textWrapper = this.renderer.createElement('span');\n const parent = textNode.parentNode;\n this.renderer.removeChild(textNode.parentNode, textNode);\n this.renderer.appendChild(textWrapper, textNode);\n if (placement === 'before') {\n this.renderer.insertBefore(parent, textWrapper, iconElement);\n } else if (placement === 'after') {\n this.renderer.appendChild(parent, textWrapper);\n }\n }\n }\n\n ngAfterContentInit(): void {\n const iconElement = this.iconElementRef?.nativeElement;\n\n if (iconElement === undefined) {\n // Nothing to do here when there's no icon:\n return;\n }\n\n // Ensure buttons with icon is always shown as icon only inside the toolbar:\n if (this.elementRef.nativeElement.closest('ion-toolbar')) {\n this._showIconOnly = true;\n }\n\n if (this.showIconOnly) {\n // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n // we need to wrap it in an element to be able to target and hide it with css:\n this.wrapTextNode(iconElement);\n }\n\n const hasText = !!this.elementRef.nativeElement.textContent;\n if (!hasText) {\n // Button doesn't contain any text, make it round:\n this._showIconOnly = true;\n }\n\n if (hasText && !this.showIconOnly) {\n this._isIconLeft =\n this.elementRef.nativeElement.querySelector('.content-layer').firstChild === iconElement;\n this._isIconRight = !this._isIconLeft;\n }\n }\n\n @HostListener('keydown.enter', ['$event'])\n @HostListener('keydown.space', ['$event'])\n _onEnterOrSpace(event: KeyboardEvent) {\n if (this.elementRef.nativeElement.ariaDisabled === 'true') {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n}\n","<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}