@kirbydesign/designsystem 11.11.3 → 12.0.0-dev-67d5287

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

@@ -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  @if (imageSrc) {\n    <img\n      [src]=\"imageSrc\"\n      [attr.alt]=\"altText\"\n      [attr.loading]=\"imageLoading\"\n      (error)=\"onImageError($event)\"\n    />\n  }\n  @if (!text) {\n    <ng-content select=\"kirby-icon\"></ng-content>\n  }\n  @if (text) {\n    <span class=\"avatar-text\">{{ text }}</span>\n  }\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,GAAA,EAAA,CAAA,CAAA;MAcT,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,IAAA;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;IACtE;AAEA,IAAA,YAAY,CAAC,MAAkB,EAAA;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;IAC9B;kIApBW,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,4cAiBA,EAAA,MAAA,EAAA,CAAA,ivHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDGY,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,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,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,4cAAA,EAAA,MAAA,EAAA,CAAA,ivHAAA,CAAA,EAAA;;sBAG9C;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAEA;;sBAGA,WAAW;uBAAC,OAAO;;;AEvCtB;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-avatar.mjs","names":[],"sources":["../../avatar/src/avatar.component.ts","../../avatar/src/avatar.component.html"],"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  /**\n   * @deprecated The avatar now always has an outline, so this input no longer has any effect.\n   * This input will be removed in a future major version.\n   */\n  @Input() set stroke(_value: boolean) {\n    console.warn(\n      `[Kirby Avatar] The 'stroke' input is deprecated and no longer has any effect.\n        The avatar now always has an outline. This input will be removed in a future major version.`\n    );\n  }\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 }\">\n  @if (imageSrc) {\n    <img\n      [src]=\"imageSrc\"\n      [attr.alt]=\"altText\"\n      [attr.loading]=\"imageLoading\"\n      (error)=\"onImageError($event)\"\n    />\n  }\n  @if (!text) {\n    <ng-content select=\"kirby-icon\"></ng-content>\n  }\n  @if (text) {\n    <span class=\"avatar-text\">{{ text }}</span>\n  }\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n"],"mappings":";;;;AAYA,IAAY;CAAZ,SAAY,YAAU;CACpB,WAAA,QAAA;CACA,WAAA,QAAA;CACA,WAAA,QAAA;CACA,WAAA,QAAA;AACF,EAAA,CALY,eAAA,aAAU,CAAA,EAAA;AActB,IAAa,kBAAb,MAAa,gBAAe;CAP5B,cAAA;EAuBW,KAAA,OAAqC,WAAW;EAIzD,KAAA,aAAuC,IAAI,aAAY;CAUxD;CAtBC,IAAa,OAAO,QAAe;EACjC,QAAQ,KACN;oGAC8F;CAElG;CASA,IACI,YAAS;EACX,OAAO,CAAC,KAAK,YAAY,KAAK,IAAI,CAAC,CAAC,QAAQ,aAAa,CAAC,CAAC,QAAQ;CACrE;CAEA,aAAa,QAAkB;EAC7B,KAAK,WAAW,KAAK,MAAM;CAC7B;CA7BW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAe,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAf;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAe,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,UAAA;IAAA,cAAA;IAAA,SAAA;IAAA,QAAA;IAAA,MAAA;IAAA,SAAA;IAAA,MAAA;IAAA,YAAA;GAAA;GAAA,SAAA,EAAA,YAAA,aAAA;GAAA,MAAA,EAAA,YAAA,EAAA,SAAA,iBAAA,EAAA;GAAA,UAAA;GAAA,UC1B5B;GAiBA,QAAA,CAAA,6zHAAA;GAAA,cAAA,CAAA;IAAA,MAAA;IAAA,MDGY;GAAY,GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA,CAAA,SAAA,SAAA;GAAA,CAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAMX,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAP3B,MAAA;EACU,MAAA,CAAA;GAAA,SAAA,CAAC,YAAY;GAAC,UACb;GAAc,iBAGP,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,6zHAAA;EAAA,CAAA;;;EAG9C,UAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,cAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,SAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAKA,QAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAMA,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,SAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,YAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAEA,YAAA,CAAA,EAAA,MAAA,OAAA,CAAA;;GAGA,MAAA;GAAY,MAAA,CAAA,OAAO"}

package/fesm2022/kirbydesign-designsystem-badge.mjs

@@ -1,43 +1,86 @@
-import * as i0 from '@angular/core';
-import { HostBinding, Input, Component } from '@angular/core';
-import * as i1 from '@kirbydesign/designsystem/shared';
-import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
-import { IonBadge } from '@ionic/angular';
-
-const KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING = '[Kirby Badge] The `text` property has been deprecated. Please set the text of the Badge between the opening and closing tag.';
-class BadgeComponent {
-    constructor() {
-        this.size = 'md';
-    }
-    get text() {
-        return this._text;
-    }
-    /**
-     * @deprecated The 'text' property has been deprecated.
-     * Please set the text of the Badge between the opening and closing tag.
-     */
-    set text(value) {
-        console.warn(KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING);
-        this._text = value;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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  @if (size === 'sm') {\n    <span></span>\n  }\n  @if (!text && size === 'md') {\n    <ng-content></ng-content>\n  }\n  @if (text && size === 'md') {\n    {{ text }}\n  }\n</ion-badge>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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:var(--kirby-badge-font-size, min(14.5px, var(--kirby-font-size-xxs)));display:inline-flex}: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:var(--kirby-border-radius-pill);font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none);--kirby-icon-font-size: 1.6em}:host.success ion-badge{--color: var(--kirby-success-contrast)}:host.success.sm ion-badge{--background: var(--kirby-success-shade)}:host.success.md ion-badge{--background: var(--kirby-success-tint)}:host.warning ion-badge{--color: var(--kirby-warning-contrast)}:host.warning.sm ion-badge{--background: var(--kirby-warning-shade)}:host.warning.md ion-badge{--background: var(--kirby-warning)}:host.danger ion-badge{--color: var(--kirby-text-color-white)}:host.danger.sm ion-badge{--background: var(--kirby-danger)}:host.danger.md ion-badge{--background: var(--kirby-danger-shade)}:host.danger.md ion-badge:has(kirby-icon){--background: var(--kirby-danger)}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:.8em;width:.8em}:host(.md) ion-badge{--padding-end: var(--kirby-badge-padding-inline, .5em);--padding-start: var(--kirby-badge-padding-inline, .5em);--padding-bottom: var(--kirby-badge-padding-block, .3em);--padding-top: var(--kirby-badge-padding-block, .3em);min-width:1.6em;min-height:1.6em}:host(.md):has(kirby-icon) ion-badge{--padding-top: 0px;--padding-start: 0px;height:1.6em;width:1.6em}: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: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: BadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-badge', imports: [IonBadge], hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }], template: "<ion-badge>\n  @if (size === 'sm') {\n    <span></span>\n  }\n  @if (!text && size === 'md') {\n    <ng-content></ng-content>\n  }\n  @if (text && size === 'md') {\n    {{ text }}\n  }\n</ion-badge>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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:var(--kirby-badge-font-size, min(14.5px, var(--kirby-font-size-xxs)));display:inline-flex}: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:var(--kirby-border-radius-pill);font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none);--kirby-icon-font-size: 1.6em}:host.success ion-badge{--color: var(--kirby-success-contrast)}:host.success.sm ion-badge{--background: var(--kirby-success-shade)}:host.success.md ion-badge{--background: var(--kirby-success-tint)}:host.warning ion-badge{--color: var(--kirby-warning-contrast)}:host.warning.sm ion-badge{--background: var(--kirby-warning-shade)}:host.warning.md ion-badge{--background: var(--kirby-warning)}:host.danger ion-badge{--color: var(--kirby-text-color-white)}:host.danger.sm ion-badge{--background: var(--kirby-danger)}:host.danger.md ion-badge{--background: var(--kirby-danger-shade)}:host.danger.md ion-badge:has(kirby-icon){--background: var(--kirby-danger)}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:.8em;width:.8em}:host(.md) ion-badge{--padding-end: var(--kirby-badge-padding-inline, .5em);--padding-start: var(--kirby-badge-padding-inline, .5em);--padding-bottom: var(--kirby-badge-padding-block, .3em);--padding-top: var(--kirby-badge-padding-block, .3em);min-width:1.6em;min-height:1.6em}:host(.md):has(kirby-icon) ion-badge{--padding-top: 0px;--padding-start: 0px;height:1.6em;width:1.6em}: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: [{
-                type: Input
-            }], size: [{
-                type: HostBinding,
-                args: ['class']
-            }, {
-                type: Input
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from "@angular/core";
+import * as i1 from "@kirbydesign/designsystem/shared";
+import { ThemeColorDirective } from "@kirbydesign/designsystem/shared";
+import { IonBadge } from "@ionic/angular";
+const KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING = "[Kirby Badge] The `text` property has been deprecated. Please set the text of the Badge between the opening and closing tag.";
+var BadgeComponent = class BadgeComponent {
+	constructor() {
+		this.size = "md";
+	}
+	get text() {
+		return this._text;
+	}
+	set text(value) {
+		console.warn(KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING);
+		this._text = value;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BadgeComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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  @if (size === 'sm') {\n    <span></span>\n  }\n  @if (!text && size === 'md') {\n    <ng-content></ng-content>\n  }\n  @if (text && size === 'md') {\n    {{ text }}\n  }\n</ion-badge>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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:var(--kirby-badge-font-size, min(14.5px, var(--kirby-font-size-xxs)));display:inline-flex}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-color-fill-raised));--color: var(--kirby-badge-color, var(--kirby-color-content-raised));border:var(--kirby-badge-border-width, 1px) solid var(--kirby-color-border-raised-quiet);box-sizing:border-box;border-radius:var(--kirby-border-radius-pill);font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none);--kirby-icon-font-size: 1.6em}:host.sm ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-color-fill-base-quiet));--color: var(--kirby-badge-color, var(--kirby-color-content-base-quiet));border-color:var(--kirby-color-border-base-quiet)}:host.success.sm ion-badge{--background: var(--kirby-color-fill-success-loud);--color: var(--kirby-color-content-success-loud);border-color:var(--kirby-color-border-success-loud)}:host.success.md ion-badge{--background: var(--kirby-color-fill-success);--color: var(--kirby-color-content-success);border-color:var(--kirby-color-border-success)}:host.warning.sm ion-badge{--background: var(--kirby-color-fill-warning-loud);--color: var(--kirby-color-content-warning-loud);border-color:var(--kirby-color-border-warning-loud)}:host.warning.md ion-badge{--background: var(--kirby-color-fill-warning);--color: var(--kirby-color-content-warning);border-color:var(--kirby-color-border-warning)}:host.danger ion-badge{--background: var(--kirby-color-fill-danger-loud);--color: var(--kirby-color-content-danger-loud);border-color:var(--kirby-color-border-danger-loud)}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:.8em;width:.8em}:host(.md) ion-badge{--padding-end: calc( var(--kirby-badge-padding-inline, .5em) - var(--kirby-badge-border-width, 1px) );--padding-start: calc( var(--kirby-badge-padding-inline, .5em) - var(--kirby-badge-border-width, 1px) );--padding-bottom: calc( var(--kirby-badge-padding-block, .3em) - var(--kirby-badge-border-width, 1px) );--padding-top: calc( var(--kirby-badge-padding-block, .3em) - var(--kirby-badge-border-width, 1px) );min-width:1.6em;min-height:1.6em}:host(.md):has(kirby-icon) ion-badge{--padding-top: 0px;--padding-start: 0px;height:1.6em;width:1.6em}:host(.md):has(kirby-icon) ion-badge ::ng-deep>kirby-icon{margin:calc(-1 * var(--kirby-badge-border-width, 1px))}\n"],
+			dependencies: [{
+				kind: "component",
+				type: IonBadge,
+				selector: "ion-badge",
+				inputs: ["color", "mode"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BadgeComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-badge",
+			imports: [IonBadge],
+			hostDirectives: [{
+				directive: ThemeColorDirective,
+				inputs: ["themeColor"]
+			}],
+			changeDetection: ChangeDetectionStrategy.Eager,
+			template: "<ion-badge>\n  @if (size === 'sm') {\n    <span></span>\n  }\n  @if (!text && size === 'md') {\n    <ng-content></ng-content>\n  }\n  @if (text && size === 'md') {\n    {{ text }}\n  }\n</ion-badge>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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:var(--kirby-badge-font-size, min(14.5px, var(--kirby-font-size-xxs)));display:inline-flex}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-color-fill-raised));--color: var(--kirby-badge-color, var(--kirby-color-content-raised));border:var(--kirby-badge-border-width, 1px) solid var(--kirby-color-border-raised-quiet);box-sizing:border-box;border-radius:var(--kirby-border-radius-pill);font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none);--kirby-icon-font-size: 1.6em}:host.sm ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-color-fill-base-quiet));--color: var(--kirby-badge-color, var(--kirby-color-content-base-quiet));border-color:var(--kirby-color-border-base-quiet)}:host.success.sm ion-badge{--background: var(--kirby-color-fill-success-loud);--color: var(--kirby-color-content-success-loud);border-color:var(--kirby-color-border-success-loud)}:host.success.md ion-badge{--background: var(--kirby-color-fill-success);--color: var(--kirby-color-content-success);border-color:var(--kirby-color-border-success)}:host.warning.sm ion-badge{--background: var(--kirby-color-fill-warning-loud);--color: var(--kirby-color-content-warning-loud);border-color:var(--kirby-color-border-warning-loud)}:host.warning.md ion-badge{--background: var(--kirby-color-fill-warning);--color: var(--kirby-color-content-warning);border-color:var(--kirby-color-border-warning)}:host.danger ion-badge{--background: var(--kirby-color-fill-danger-loud);--color: var(--kirby-color-content-danger-loud);border-color:var(--kirby-color-border-danger-loud)}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:.8em;width:.8em}:host(.md) ion-badge{--padding-end: calc( var(--kirby-badge-padding-inline, .5em) - var(--kirby-badge-border-width, 1px) );--padding-start: calc( var(--kirby-badge-padding-inline, .5em) - var(--kirby-badge-border-width, 1px) );--padding-bottom: calc( var(--kirby-badge-padding-block, .3em) - var(--kirby-badge-border-width, 1px) );--padding-top: calc( var(--kirby-badge-padding-block, .3em) - var(--kirby-badge-border-width, 1px) );min-width:1.6em;min-height:1.6em}:host(.md):has(kirby-icon) ion-badge{--padding-top: 0px;--padding-start: 0px;height:1.6em;width:1.6em}:host(.md):has(kirby-icon) ion-badge ::ng-deep>kirby-icon{margin:calc(-1 * var(--kirby-badge-border-width, 1px))}\n"]
+		}]
+	}],
+	propDecorators: {
+		text: [{ type: Input }],
+		size: [{
+			type: HostBinding,
+			args: ["class"]
+		}, { type: Input }]
+	}
+});
 export { BadgeComponent };
-//# sourceMappingURL=kirbydesign-designsystem-badge.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-badge.mjs.map

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

@@ -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 { Component, HostBinding, Input } from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { IonBadge } from '@ionic/angular';\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: [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  @if (size === 'sm') {\n    <span></span>\n  }\n  @if (!text && size === 'md') {\n    <ng-content></ng-content>\n  }\n  @if (text && size === 'md') {\n    {{ text }}\n  }\n</ion-badge>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,6CAA6C,GACjD,8HAA8H;MASnH,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;QAuBE,IAAA,CAAA,IAAI,GAAc,IAAI;AACvB,IAAA;AAfC,IAAA,IAAI,IAAI,GAAA;QACN,OAAO,IAAI,CAAC,KAAK;IACnB;AACA;;;AAGG;IACH,IAAa,IAAI,CAAC,KAAa,EAAA;AAC7B,QAAA,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC;AAC3D,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;IACpB;kIAZW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAd,cAAc,EAAA,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,EChB3B,0MAWA,EAAA,MAAA,EAAA,CAAA,g/DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAGP,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,WAGd,CAAC,QAAQ,CAAC,EAAA,cAAA,EACH,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAAA,QAAA,EAAA,0MAAA,EAAA,MAAA,EAAA,CAAA,g/DAAA,CAAA,EAAA;;sBAW3E;;sBAKA,WAAW;uBAAC,OAAO;;sBACnB;;;AE/BH;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-badge.mjs","names":[],"sources":["../../badge/src/badge.component.ts","../../badge/src/badge.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { IonBadge } from '@ionic/angular';\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: [IonBadge],\n  hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }],\n  changeDetection: ChangeDetectionStrategy.Eager,\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  @if (size === 'sm') {\n    <span></span>\n  }\n  @if (!text && size === 'md') {\n    <ng-content></ng-content>\n  }\n  @if (text && size === 'md') {\n    {{ text }}\n  }\n</ion-badge>\n"],"mappings":";;;;;AAMA,MAAM,gDACJ;AAUF,IAAa,iBAAb,MAAa,eAAc;CAR3B,cAAA;EAwBE,KAAA,OAAkB;CACnB;CAfC,IAAI,OAAI;EACN,OAAO,KAAK;CACd;CAKA,IAAa,KAAK,OAAa;EAC7B,QAAQ,KAAK,6CAA6C;EAC1D,KAAK,QAAQ;CACf;CAZW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAc,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAd;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAc,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,MAAA;IAAA,MAAA;GAAA;GAAA,MAAA,EAAA,YAAA,EAAA,SAAA,YAAA,EAAA;GAAA,gBAAA,CAAA;IAAA,WAAA,GAAA;IAAA,QAAA,CAAA,cAAA,YAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UCjB3B;GAWA,QAAA,CAAA,uqFAAA;GAAA,cAAA,CAAA;IAAA,MAAA;IAAA,MDEY;IAAQ,UAAA;IAAA,QAAA,CAAA,SAAA,MAAA;GAAA,CAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAIP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAR1B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,SAGd,CAAC,QAAQ;GAAC,gBACH,CAAC;IAAE,WAAW;IAAqB,QAAQ,CAAC,YAAY;GAAC,CAAE;GAAC,iBAC3D,wBAAwB;GAAK,UAAA;GAAA,QAAA,CAAA,uqFAAA;EAAA,CAAA;;;EAW7C,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAKA,MAAA;GAAY,MAAA,CAAA,OAAO;EACnB,GAAA,EAAA,MAAA,MAAA,CAAA"}