@kirbydesign/designsystem 12.0.0-dev-286cdc0 → 12.0.0-dev-9f721bb
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.
- package/fesm2022/kirbydesign-designsystem-badge.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-badge.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-card.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-icon.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-list.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-spinner.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +2 -2
- package/fesm2022/kirbydesign-designsystem-tabs.mjs.map +1 -1
- package/package.json +2 -2
- package/types/kirbydesign-designsystem-checkbox.d.ts +1 -1
|
@@ -43,7 +43,7 @@ var BadgeComponent = class BadgeComponent {
|
|
|
43
43
|
}],
|
|
44
44
|
ngImport: i0,
|
|
45
45
|
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",
|
|
46
|
-
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, var(--kirby-stroke-xs)) 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
|
|
46
|
+
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, var(--kirby-stroke-xs)) 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-badge-color-fill));--color: var(--kirby-badge-color, var(--kirby-color-content-base-quiet));border-color:var(--kirby-badge-color-border)}: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.sm 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.danger.md ion-badge{--background: var(--kirby-color-fill-danger);--color: var(--kirby-color-content-danger);border-color:var(--kirby-color-border-danger)}: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, var(--kirby-stroke-xs)) );--padding-start: calc( var(--kirby-badge-padding-inline, .5em) - var(--kirby-badge-border-width, var(--kirby-stroke-xs)) );--padding-bottom: calc( var(--kirby-badge-padding-block, .3em) - var(--kirby-badge-border-width, var(--kirby-stroke-xs)) );--padding-top: calc( var(--kirby-badge-padding-block, .3em) - var(--kirby-badge-border-width, var(--kirby-stroke-xs)) );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, var(--kirby-stroke-xs)))}\n"],
|
|
47
47
|
dependencies: [{
|
|
48
48
|
kind: "component",
|
|
49
49
|
type: IonBadge,
|
|
@@ -70,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
70
70
|
}],
|
|
71
71
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
72
72
|
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",
|
|
73
|
-
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, var(--kirby-stroke-xs)) 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
|
|
73
|
+
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, var(--kirby-stroke-xs)) 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-badge-color-fill));--color: var(--kirby-badge-color, var(--kirby-color-content-base-quiet));border-color:var(--kirby-badge-color-border)}: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.sm 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.danger.md ion-badge{--background: var(--kirby-color-fill-danger);--color: var(--kirby-color-content-danger);border-color:var(--kirby-color-border-danger)}: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, var(--kirby-stroke-xs)) );--padding-start: calc( var(--kirby-badge-padding-inline, .5em) - var(--kirby-badge-border-width, var(--kirby-stroke-xs)) );--padding-bottom: calc( var(--kirby-badge-padding-block, .3em) - var(--kirby-badge-border-width, var(--kirby-stroke-xs)) );--padding-top: calc( var(--kirby-badge-padding-block, .3em) - var(--kirby-badge-border-width, var(--kirby-stroke-xs)) );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, var(--kirby-stroke-xs)))}\n"]
|
|
74
74
|
}]
|
|
75
75
|
}],
|
|
76
76
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,k7FAAA;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,k7FAAA;EAAA,CAAA;;;EAW7C,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAKA,MAAA;GAAY,MAAA,CAAA,OAAO;EACnB,GAAA,EAAA,MAAA,MAAA,CAAA"}
|
|
@@ -324,7 +324,7 @@ var CardComponent = class CardComponent {
|
|
|
324
324
|
} },
|
|
325
325
|
ngImport: i0,
|
|
326
326
|
template: "<ng-content select=\"kirby-card-header\"></ng-content>\n<div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n</div>\n<ng-content select=\"kirby-card-footer\"></ng-content>\n",
|
|
327
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{--kirby-card-main-background-color: var(--kirby-color-fill-base);--kirby-card-main-color: var(--kirby-color-content-base);--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-base-quiet);--kirby-card-footer-background-color: var(--kirby-color-fill-base);--kirby-card-footer-color: var(--kirby-color-content-base);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-color-hover: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}:host{border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-card-elevation);color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);border:var(--kirby-card-border);box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:var(--kirby-z-index-default);width:var(--kirby-card-width, auto)}:host.flat,:host.outlined{--kirby-card-elevation: 0 0 transparent}:host.outlined{--kirby-card-main-background-color: transparent;--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-inline:var(--kirby-card-border);border-block-end:var(--kirby-card-border);border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n)}:host[role=button]{cursor:pointer;outline:none}
|
|
327
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{--kirby-card-main-background-color: var(--kirby-color-fill-base);--kirby-card-main-color: var(--kirby-color-content-base);--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-base-quiet);--kirby-card-footer-background-color: var(--kirby-color-fill-base);--kirby-card-footer-color: var(--kirby-color-content-base);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-color-hover: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}:host{border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-card-elevation);color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);border:var(--kirby-card-border);box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:var(--kirby-z-index-default);width:var(--kirby-card-width, auto)}:host.flat,:host.outlined{--kirby-card-elevation: 0 0 transparent}:host.outlined{--kirby-card-main-background-color: transparent;--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-inline:var(--kirby-card-border);border-block-end:var(--kirby-card-border);border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n)}:host[role=button]{--kirby-card-state-layer-opacity: var(--kirby-opacity-0);cursor:pointer;outline:none}:host[role=button]:after{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:calc(var(--kirby-z-index-default) + 1);background-color:var(--kirby-card-main-color);opacity:var(--kirby-card-state-layer-opacity);transition:opacity 80ms linear 0ms}@media(hover:hover){:host[role=button]:hover{--kirby-card-state-layer-opacity: var(--kirby-opacity-5)}}:host[role=button]:active,:host[role=button].interaction-state-active{--kirby-card-state-layer-opacity: var(--kirby-opacity-10)}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-card-elevation),var(--kirby-focus-ring-md-combined-inset);--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-focus)}.content-wrapper ::ng-deep>*{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}.content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: calc(var(--kirby-border-radius-n) - var(--kirby-stroke-xs))}.content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: calc( var(--kirby-border-radius-n) - var(--kirby-stroke-xs) )}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, var(--kirby-spacing-s));padding-bottom:var(--kirby-card-padding-bottom, var(--kirby-spacing-s));padding-inline:var(--kirby-spacing-s)}:host:has(kirby-card-header) .content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: 0}:host:has(kirby-card-footer) .content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: 0}:host(.success:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-success);--kirby-card-main-color: var(--kirby-color-content-success);--kirby-card-main-border-color: var(--kirby-color-border-success)}:host(.warning:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-warning);--kirby-card-main-color: var(--kirby-color-content-warning);--kirby-card-main-border-color: var(--kirby-color-border-warning)}:host(.danger:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-danger);--kirby-card-main-color: var(--kirby-color-content-danger);--kirby-card-main-border-color: var(--kirby-color-border-danger)}\n"],
|
|
328
328
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
329
329
|
});
|
|
330
330
|
}
|
|
@@ -340,7 +340,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
340
340
|
selector: "kirby-card",
|
|
341
341
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
342
342
|
template: "<ng-content select=\"kirby-card-header\"></ng-content>\n<div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n</div>\n<ng-content select=\"kirby-card-footer\"></ng-content>\n",
|
|
343
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{--kirby-card-main-background-color: var(--kirby-color-fill-base);--kirby-card-main-color: var(--kirby-color-content-base);--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-base-quiet);--kirby-card-footer-background-color: var(--kirby-color-fill-base);--kirby-card-footer-color: var(--kirby-color-content-base);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-color-hover: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}:host{border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-card-elevation);color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);border:var(--kirby-card-border);box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:var(--kirby-z-index-default);width:var(--kirby-card-width, auto)}:host.flat,:host.outlined{--kirby-card-elevation: 0 0 transparent}:host.outlined{--kirby-card-main-background-color: transparent;--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-inline:var(--kirby-card-border);border-block-end:var(--kirby-card-border);border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n)}:host[role=button]{cursor:pointer;outline:none}
|
|
343
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{--kirby-card-main-background-color: var(--kirby-color-fill-base);--kirby-card-main-color: var(--kirby-color-content-base);--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-base-quiet);--kirby-card-footer-background-color: var(--kirby-color-fill-base);--kirby-card-footer-color: var(--kirby-color-content-base);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-color-hover: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}:host{border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-card-elevation);color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);border:var(--kirby-card-border);box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:var(--kirby-z-index-default);width:var(--kirby-card-width, auto)}:host.flat,:host.outlined{--kirby-card-elevation: 0 0 transparent}:host.outlined{--kirby-card-main-background-color: transparent;--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-base-silent)}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-inline:var(--kirby-card-border);border-block-end:var(--kirby-card-border);border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n)}:host[role=button]{--kirby-card-state-layer-opacity: var(--kirby-opacity-0);cursor:pointer;outline:none}:host[role=button]:after{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:calc(var(--kirby-z-index-default) + 1);background-color:var(--kirby-card-main-color);opacity:var(--kirby-card-state-layer-opacity);transition:opacity 80ms linear 0ms}@media(hover:hover){:host[role=button]:hover{--kirby-card-state-layer-opacity: var(--kirby-opacity-5)}}:host[role=button]:active,:host[role=button].interaction-state-active{--kirby-card-state-layer-opacity: var(--kirby-opacity-10)}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-card-elevation),var(--kirby-focus-ring-md-combined-inset);--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-focus)}.content-wrapper ::ng-deep>*{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}.content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: calc(var(--kirby-border-radius-n) - var(--kirby-stroke-xs))}.content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: calc( var(--kirby-border-radius-n) - var(--kirby-stroke-xs) )}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, var(--kirby-spacing-s));padding-bottom:var(--kirby-card-padding-bottom, var(--kirby-spacing-s));padding-inline:var(--kirby-spacing-s)}:host:has(kirby-card-header) .content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: 0}:host:has(kirby-card-footer) .content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: 0}:host(.success:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-success);--kirby-card-main-color: var(--kirby-color-content-success);--kirby-card-main-border-color: var(--kirby-color-border-success)}:host(.warning:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-warning);--kirby-card-main-color: var(--kirby-color-content-warning);--kirby-card-main-border-color: var(--kirby-color-border-warning)}:host(.danger:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-danger);--kirby-card-main-color: var(--kirby-color-content-danger);--kirby-card-main-border-color: var(--kirby-color-border-danger)}\n"]
|
|
344
344
|
}]
|
|
345
345
|
}],
|
|
346
346
|
ctorParameters: () => [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-card.mjs","names":[],"sources":["../../card/src/card-footer/card-footer.component.ts","../../card/src/card-footer/card-footer.component.html","../../card/src/card-header/card-header.component.ts","../../card/src/card-header/card-header.component.html","../../card/src/card-as-button/card-as-button.directive.ts","../../card/src/card.component.ts","../../card/src/card.component.html","../../card/src/card.module.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-card-footer',\n templateUrl: './card-footer.component.html',\n styleUrls: ['./card-footer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFooterComponent {\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n}\n","<footer>\n <ng-content></ng-content>\n</footer>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nimport { CardFlagLevel } from '../card-flag-level';\n\n@Component({\n selector: 'kirby-card-header',\n templateUrl: './card-header.component.html',\n styleUrls: ['./card-header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardHeaderComponent {\n @Input() title: string;\n @Input() subtitle: string;\n @Input() isTitleBold: boolean;\n @Input()\n flagged: CardFlagLevel = null;\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n\n @HostBinding('class')\n get _cssClass() {\n return [this.flagged, this.flagged ? 'flagged' : null];\n }\n}\n","@if (title) {\n <p class=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</p>\n}\n@if (subtitle) {\n <p class=\"subtitle\">{{ subtitle }}</p>\n}\n<ng-content></ng-content>\n","import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective {\n @HostBinding('attr.role') role: string = 'button';\n @HostBinding('attr.tabindex') tabindex: number = 0;\n @HostBinding('class.interaction-state-active') _pressed = false;\n\n constructor(private clickableElement: ElementRef) {}\n\n @HostListener('keydown.space', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n _onKeydownHandler(event: KeyboardEvent) {\n if (event.currentTarget !== event.target) return; // Do not handle keydown events for nested elements - let event bubbling take place as normal\n\n this._pressed = true;\n this.clickableElement.nativeElement.click(event);\n /*\n * Prevent default event from firing so the UA wont\n * catch this event and e.g. scroll the page on space,\n * which is the default behavior in major browsers\n */\n\n event.preventDefault();\n }\n\n @HostListener('keyup.space')\n @HostListener('keyup.enter')\n @HostListener('blur')\n _onInactiveHandler() {\n this._pressed = false;\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n inject,\n Input,\n OnDestroy,\n OnInit,\n Renderer2,\n} from '@angular/core';\nimport { ResizeObserverService, ThemeColorDirective } from '@kirbydesign/designsystem/shared';\n\nexport type CardVariant = 'elevated' | 'flat' | 'outlined' | 'base' | 'raised' | 'brand';\n\nconst variantSurfaces: Record<CardVariant, string> = {\n elevated: 'raised',\n flat: 'raised',\n outlined: 'base',\n base: 'base',\n raised: 'raised',\n brand: 'brand',\n};\n\n@Component({\n selector: 'kirby-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class CardComponent implements OnInit, OnDestroy {\n private themeColor = inject(ThemeColorDirective, { optional: true, self: true });\n\n @Input() title: string;\n @Input() subtitle: string;\n\n @HostBinding('style.--kirby-card-background-image')\n _backgroundImage: string;\n\n @Input()\n set backgroundImageUrl(value: string) {\n this._backgroundImage = `url('${value}')`;\n }\n\n @Input()\n hasPadding: boolean;\n\n private sizesSortedByBreakpoint = this.sortSizesByBreakpoint({\n small: 360,\n medium: 720,\n large: 1024,\n });\n\n @Input()\n set sizes(value: { [size: string]: number }) {\n if (typeof value === 'string') {\n console.error(\n 'Sizes property cannot be a string. Please ensure the size property is bound as an expression:\\n[sizes]=\"{...}\"'\n );\n }\n this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);\n }\n\n /**\n * `base`, `raised` and `brand` set the surface directly.\n * `elevated` (default) and `flat` are raised surfaces, `outlined` is a base surface.\n * A `themeColor` takes precedence over the surface of the variant.\n */\n @Input({ transform: (value: CardVariant | null | undefined) => value ?? 'elevated' })\n variant: CardVariant = 'elevated';\n\n @HostBinding('class')\n get hostClasses(): string {\n const surface = this.surface;\n return surface ? `${this.variant} kirby-surface-${surface}` : this.variant;\n }\n\n private get surface(): string | null {\n const theme = this.themeColor;\n if (!theme || theme.isDefault || this.variant === 'outlined') {\n return variantSurfaces[this.variant];\n }\n\n if (theme.isLight || theme.isMedium) return 'base';\n if (theme.isWhite || theme.isSuccess || theme.isWarning || theme.isDanger) return 'raised';\n if (theme.isPrimary || theme.isSecondary || theme.isTertiary || theme.isDark) return 'brand';\n return null;\n }\n\n constructor(\n private elementRef: ElementRef,\n private resizeObserverService: ResizeObserverService,\n private renderer: Renderer2\n ) {}\n\n ngOnInit() {\n this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.elementRef);\n }\n\n private sortSizesByBreakpoint(sizes: { [size: string]: number }): [string, number][] {\n return Object.entries(sizes).sort(this.compareSizesByBreakpoint);\n }\n\n private compareSizesByBreakpoint(a: [string, number], b: [string, number]): number {\n return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;\n }\n\n private handleResize(entry: ResizeObserverEntry) {\n const sizeAttributeName = 'size';\n const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];\n const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];\n if (entry.contentRect.width < smallestBreakpointWidth) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);\n } else {\n this.sizesSortedByBreakpoint.forEach(([size, width]) => {\n if (entry.contentRect.width >= width) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, size);\n }\n });\n }\n }\n}\n","<ng-content select=\"kirby-card-header\"></ng-content>\n<div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n</div>\n<ng-content select=\"kirby-card-footer\"></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from './card.component';\nimport { CardHeaderComponent } from './card-header/card-header.component';\nimport { CardFooterComponent } from './card-footer/card-footer.component';\nimport { CardAsButtonDirective } from './card-as-button/card-as-button.directive';\n\nconst imports = [CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective, ...imports],\n exports: [...imports, ThemeColorDirective],\n})\nexport class CardModule {}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-card.mjs","names":[],"sources":["../../card/src/card-footer/card-footer.component.ts","../../card/src/card-footer/card-footer.component.html","../../card/src/card-header/card-header.component.ts","../../card/src/card-header/card-header.component.html","../../card/src/card-as-button/card-as-button.directive.ts","../../card/src/card.component.ts","../../card/src/card.component.html","../../card/src/card.module.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-card-footer',\n templateUrl: './card-footer.component.html',\n styleUrls: ['./card-footer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFooterComponent {\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n}\n","<footer>\n <ng-content></ng-content>\n</footer>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nimport { CardFlagLevel } from '../card-flag-level';\n\n@Component({\n selector: 'kirby-card-header',\n templateUrl: './card-header.component.html',\n styleUrls: ['./card-header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardHeaderComponent {\n @Input() title: string;\n @Input() subtitle: string;\n @Input() isTitleBold: boolean;\n @Input()\n flagged: CardFlagLevel = null;\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n\n @HostBinding('class')\n get _cssClass() {\n return [this.flagged, this.flagged ? 'flagged' : null];\n }\n}\n","@if (title) {\n <p class=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</p>\n}\n@if (subtitle) {\n <p class=\"subtitle\">{{ subtitle }}</p>\n}\n<ng-content></ng-content>\n","import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective {\n @HostBinding('attr.role') role: string = 'button';\n @HostBinding('attr.tabindex') tabindex: number = 0;\n @HostBinding('class.interaction-state-active') _pressed = false;\n\n constructor(private clickableElement: ElementRef) {}\n\n @HostListener('keydown.space', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n _onKeydownHandler(event: KeyboardEvent) {\n if (event.currentTarget !== event.target) return; // Do not handle keydown events for nested elements - let event bubbling take place as normal\n\n this._pressed = true;\n this.clickableElement.nativeElement.click(event);\n /*\n * Prevent default event from firing so the UA wont\n * catch this event and e.g. scroll the page on space,\n * which is the default behavior in major browsers\n */\n\n event.preventDefault();\n }\n\n @HostListener('keyup.space')\n @HostListener('keyup.enter')\n @HostListener('blur')\n _onInactiveHandler() {\n this._pressed = false;\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n inject,\n Input,\n OnDestroy,\n OnInit,\n Renderer2,\n} from '@angular/core';\nimport { ResizeObserverService, ThemeColorDirective } from '@kirbydesign/designsystem/shared';\n\nexport type CardVariant = 'elevated' | 'flat' | 'outlined' | 'base' | 'raised' | 'brand';\n\nconst variantSurfaces: Record<CardVariant, string> = {\n elevated: 'raised',\n flat: 'raised',\n outlined: 'base',\n base: 'base',\n raised: 'raised',\n brand: 'brand',\n};\n\n@Component({\n selector: 'kirby-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class CardComponent implements OnInit, OnDestroy {\n private themeColor = inject(ThemeColorDirective, { optional: true, self: true });\n\n @Input() title: string;\n @Input() subtitle: string;\n\n @HostBinding('style.--kirby-card-background-image')\n _backgroundImage: string;\n\n @Input()\n set backgroundImageUrl(value: string) {\n this._backgroundImage = `url('${value}')`;\n }\n\n @Input()\n hasPadding: boolean;\n\n private sizesSortedByBreakpoint = this.sortSizesByBreakpoint({\n small: 360,\n medium: 720,\n large: 1024,\n });\n\n @Input()\n set sizes(value: { [size: string]: number }) {\n if (typeof value === 'string') {\n console.error(\n 'Sizes property cannot be a string. Please ensure the size property is bound as an expression:\\n[sizes]=\"{...}\"'\n );\n }\n this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);\n }\n\n /**\n * `base`, `raised` and `brand` set the surface directly.\n * `elevated` (default) and `flat` are raised surfaces, `outlined` is a base surface.\n * A `themeColor` takes precedence over the surface of the variant.\n */\n @Input({ transform: (value: CardVariant | null | undefined) => value ?? 'elevated' })\n variant: CardVariant = 'elevated';\n\n @HostBinding('class')\n get hostClasses(): string {\n const surface = this.surface;\n return surface ? `${this.variant} kirby-surface-${surface}` : this.variant;\n }\n\n private get surface(): string | null {\n const theme = this.themeColor;\n if (!theme || theme.isDefault || this.variant === 'outlined') {\n return variantSurfaces[this.variant];\n }\n\n if (theme.isLight || theme.isMedium) return 'base';\n if (theme.isWhite || theme.isSuccess || theme.isWarning || theme.isDanger) return 'raised';\n if (theme.isPrimary || theme.isSecondary || theme.isTertiary || theme.isDark) return 'brand';\n return null;\n }\n\n constructor(\n private elementRef: ElementRef,\n private resizeObserverService: ResizeObserverService,\n private renderer: Renderer2\n ) {}\n\n ngOnInit() {\n this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.elementRef);\n }\n\n private sortSizesByBreakpoint(sizes: { [size: string]: number }): [string, number][] {\n return Object.entries(sizes).sort(this.compareSizesByBreakpoint);\n }\n\n private compareSizesByBreakpoint(a: [string, number], b: [string, number]): number {\n return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;\n }\n\n private handleResize(entry: ResizeObserverEntry) {\n const sizeAttributeName = 'size';\n const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];\n const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];\n if (entry.contentRect.width < smallestBreakpointWidth) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);\n } else {\n this.sizesSortedByBreakpoint.forEach(([size, width]) => {\n if (entry.contentRect.width >= width) {\n this.renderer.setAttribute(entry.target, sizeAttributeName, size);\n }\n });\n }\n }\n}\n","<ng-content select=\"kirby-card-header\"></ng-content>\n<div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n</div>\n<ng-content select=\"kirby-card-footer\"></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from './card.component';\nimport { CardHeaderComponent } from './card-header/card-header.component';\nimport { CardFooterComponent } from './card-footer/card-footer.component';\nimport { CardAsButtonDirective } from './card-as-button/card-as-button.directive';\n\nconst imports = [CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective, ...imports],\n exports: [...imports, ThemeColorDirective],\n})\nexport class CardModule {}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","names":[],"sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html"],"sourcesContent":["import {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n Input,\n OnInit,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n imports: [IonCheckbox],\n selector: 'kirby-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n IonicElementPartHelper,\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxComponent),\n multi: true,\n },\n ],\n})\nexport class CheckboxComponent\n implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit\n{\n @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n @Input() checked: boolean = false;\n @Input() indeterminate: boolean = false;\n\n private _attentionLevel: '1' | '2' = '2';\n /**\n * @deprecated Attention levels 1 and 2 now look the same, so this input no longer has any effect.\n * This input will be removed in a future major version.\n */\n @Input() set attentionLevel(value: '1' | '2') {\n console.warn(\n `[Kirby Checkbox] The 'attentionLevel' input is deprecated and no longer has any effect.\n Attention levels 1 and 2 now look the same. This input will be removed in a future major version.`\n );\n this._attentionLevel = value;\n }\n get attentionLevel(): '1' | '2' {\n return this._attentionLevel;\n }\n\n @Input()\n text: string;\n\n @HostBinding('class')\n @Input()\n size: 'xs' | 'sm' | 'md' = 'md';\n\n @HostBinding('class.error')\n @Input()\n hasError: boolean = false;\n\n @Input() disabled = false;\n @HostBinding('attr.disabled')\n get _isDisabled() {\n return this.disabled ? 'disabled' : null;\n }\n\n @HostBinding('class.attention-level1') get isAttentionLevel1() {\n return this.attentionLevel === '1';\n }\n @HostBinding('class.attention-level2') get isAttentionLevel2() {\n return this.attentionLevel === '2';\n }\n\n @HostBinding('class.has-hidden-label') _labelText: string;\n\n @Output() checkedChange = new EventEmitter<boolean>();\n\n _justify: 'start' | 'end' | 'space-between' = 'start';\n _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n _hasSlottedContent: boolean;\n\n constructor(\n private element: ElementRef<HTMLElement>,\n private ionicElementPartHelper: IonicElementPartHelper,\n private cdr: ChangeDetectorRef\n ) {}\n\n ngOnInit(): void {\n /**\n * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n * So it has to be done by querying an additional wrapper around the default content slot like this.\n */\n this._hasSlottedContent = this.element.nativeElement\n .querySelector('.default-content')\n .hasChildNodes();\n\n const slot = this.element.nativeElement.getAttribute('slot');\n if (slot === 'end' && this._hasSlottedContent) {\n this._justify = 'space-between';\n this._labelPlacement = 'start';\n }\n }\n\n ngAfterViewInit(): void {\n this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n this.ionicElementPartHelper.setPart(\n 'label-text-wrapper',\n this.ionCheckboxElement,\n '.label-text-wrapper'\n );\n this.ionicElementPartHelper.setPart(\n 'native-wrapper',\n this.ionCheckboxElement,\n '.native-wrapper'\n );\n }\n\n ngAfterContentInit(): void {\n this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n if (!this.text && !this._labelText && !this._hasSlottedContent) {\n // if no label has been set try to find a label in an item and use its text content\n this._labelText = setAccessibleLabel(this.element.nativeElement);\n }\n }\n\n onChecked(checked: boolean): void {\n this.checked = checked;\n this._onChange(this.checked);\n this.checkedChange.emit(this.checked);\n }\n\n onBlur() {\n this._onTouched();\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private _onChange: (value: boolean) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private _onTouched = () => {};\n\n /**\n * Sets the checkbox's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param value New value to be written to the model.\n */\n writeValue(value: boolean): void {\n this.checked = value;\n this.cdr.markForCheck();\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the value changes.\n */\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n\n /**\n * Disables the checkbox. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param isDisabled Sets whether the component is disabled.\n */\n setDisabledState?(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n (ionBlur)=\"onBlur()\"\n [labelPlacement]=\"_labelPlacement\"\n [justify]=\"_justify\"\n>\n @if (_labelText) {\n <span class=\"hidden-label\">{{ _labelText }}</span>\n }\n @if (text) {\n <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n }\n <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n <ng-content></ng-content>\n </span>\n</ion-checkbox>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-checkbox.mjs","names":[],"sources":["../../checkbox/src/checkbox.component.ts","../../checkbox/src/checkbox.component.html"],"sourcesContent":["import {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n Input,\n OnInit,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';\nimport { IonCheckbox } from '@ionic/angular';\nimport { inheritAriaLabelText, setAccessibleLabel } from '@kirbydesign/designsystem/shared';\n\n@Component({\n imports: [IonCheckbox],\n selector: 'kirby-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n IonicElementPartHelper,\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxComponent),\n multi: true,\n },\n ],\n})\nexport class CheckboxComponent\n implements AfterViewInit, ControlValueAccessor, OnInit, AfterContentInit\n{\n @ViewChild(IonCheckbox, { read: ElementRef, static: true })\n private ionCheckboxElement?: ElementRef<HTMLIonCheckboxElement>;\n\n @Input() checked: boolean = false;\n @Input() indeterminate: boolean = false;\n\n private _attentionLevel: '1' | '2' = '2';\n /**\n * @deprecated Since v12.0.0, attention levels 1 and 2 now look the same, so this input no longer has any effect.\n * This input will be removed in a future major version.\n */\n @Input() set attentionLevel(value: '1' | '2') {\n console.warn(\n `[Kirby Checkbox] The 'attentionLevel' input is deprecated and no longer has any effect.\n Attention levels 1 and 2 now look the same. This input will be removed in a future major version.`\n );\n this._attentionLevel = value;\n }\n get attentionLevel(): '1' | '2' {\n return this._attentionLevel;\n }\n\n @Input()\n text: string;\n\n @HostBinding('class')\n @Input()\n size: 'xs' | 'sm' | 'md' = 'md';\n\n @HostBinding('class.error')\n @Input()\n hasError: boolean = false;\n\n @Input() disabled = false;\n @HostBinding('attr.disabled')\n get _isDisabled() {\n return this.disabled ? 'disabled' : null;\n }\n\n @HostBinding('class.attention-level1') get isAttentionLevel1() {\n return this.attentionLevel === '1';\n }\n @HostBinding('class.attention-level2') get isAttentionLevel2() {\n return this.attentionLevel === '2';\n }\n\n @HostBinding('class.has-hidden-label') _labelText: string;\n\n @Output() checkedChange = new EventEmitter<boolean>();\n\n _justify: 'start' | 'end' | 'space-between' = 'start';\n _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';\n _hasSlottedContent: boolean;\n\n constructor(\n private element: ElementRef<HTMLElement>,\n private ionicElementPartHelper: IonicElementPartHelper,\n private cdr: ChangeDetectorRef\n ) {}\n\n ngOnInit(): void {\n /**\n * We cannot query ion-checkbox for slotted content at this point as the slot has not been rendered.\n * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-checkbox is rendered.\n * So it has to be done by querying an additional wrapper around the default content slot like this.\n */\n this._hasSlottedContent = this.element.nativeElement\n .querySelector('.default-content')\n .hasChildNodes();\n\n const slot = this.element.nativeElement.getAttribute('slot');\n if (slot === 'end' && this._hasSlottedContent) {\n this._justify = 'space-between';\n this._labelPlacement = 'start';\n }\n }\n\n ngAfterViewInit(): void {\n this.ionicElementPartHelper.setPart('label', this.ionCheckboxElement, '.checkbox-wrapper');\n this.ionicElementPartHelper.setPart(\n 'label-text-wrapper',\n this.ionCheckboxElement,\n '.label-text-wrapper'\n );\n this.ionicElementPartHelper.setPart(\n 'native-wrapper',\n this.ionCheckboxElement,\n '.native-wrapper'\n );\n }\n\n ngAfterContentInit(): void {\n this._labelText = inheritAriaLabelText(this.element.nativeElement);\n\n if (!this.text && !this._labelText && !this._hasSlottedContent) {\n // if no label has been set try to find a label in an item and use its text content\n this._labelText = setAccessibleLabel(this.element.nativeElement);\n }\n }\n\n onChecked(checked: boolean): void {\n this.checked = checked;\n this._onChange(this.checked);\n this.checkedChange.emit(this.checked);\n }\n\n onBlur() {\n this._onTouched();\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private _onChange: (value: boolean) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private _onTouched = () => {};\n\n /**\n * Sets the checkbox's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param value New value to be written to the model.\n */\n writeValue(value: boolean): void {\n this.checked = value;\n this.cdr.markForCheck();\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the value changes.\n */\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n\n /**\n * Saves a callback function to be invoked when the checkbox is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param fn Callback to be triggered when the component has been touched.\n */\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n\n /**\n * Disables the checkbox. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n *\n * @param isDisabled Sets whether the component is disabled.\n */\n setDisabledState?(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n (ionBlur)=\"onBlur()\"\n [labelPlacement]=\"_labelPlacement\"\n [justify]=\"_justify\"\n>\n @if (_labelText) {\n <span class=\"hidden-label\">{{ _labelText }}</span>\n }\n @if (text) {\n <span [attr.aria-hidden]=\"_labelText ? true : undefined\">{{ text }}</span>\n }\n <span class=\"default-content\" [attr.aria-hidden]=\"_labelText ? true : undefined\">\n <ng-content></ng-content>\n </span>\n</ion-checkbox>\n"],"mappings":";;;;;;;AAoCA,IAAa,oBAAb,MAAa,kBAAiB;CAc5B,IAAa,eAAe,OAAgB;EAC1C,QAAQ,KACN;0GACoG;EAEtG,KAAK,kBAAkB;CACzB;CACA,IAAI,iBAAc;EAChB,OAAO,KAAK;CACd;CAcA,IACI,cAAW;EACb,OAAO,KAAK,WAAW,aAAa;CACtC;CAEA,IAA2C,oBAAiB;EAC1D,OAAO,KAAK,mBAAmB;CACjC;CACA,IAA2C,oBAAiB;EAC1D,OAAO,KAAK,mBAAmB;CACjC;CAUA,YACU,SACA,wBACA,KAAsB;EAFtB,KAAA,UAAA;EACA,KAAA,yBAAA;EACA,KAAA,MAAA;EAtDD,KAAA,UAAmB;EACnB,KAAA,gBAAyB;EAE1B,KAAA,kBAA6B;EAqBrC,KAAA,OAA2B;EAI3B,KAAA,WAAoB;EAEX,KAAA,WAAW;EAeV,KAAA,gBAAgB,IAAI,aAAY;EAE1C,KAAA,WAA8C;EAC9C,KAAA,kBAAyD;EA6DjD,KAAA,kBAA2C,CAAE;EAE7C,KAAA,mBAAkB,CAAE;CAxDzB;CAEH,WAAQ;EAMN,KAAK,qBAAqB,KAAK,QAAQ,cACpC,cAAc,kBAAkB,CAAC,CACjC,cAAa;EAGhB,IADa,KAAK,QAAQ,cAAc,aAAa,MACjD,MAAS,SAAS,KAAK,oBAAoB;GAC7C,KAAK,WAAW;GAChB,KAAK,kBAAkB;EACzB;CACF;CAEA,kBAAe;EACb,KAAK,uBAAuB,QAAQ,SAAS,KAAK,oBAAoB,mBAAmB;EACzF,KAAK,uBAAuB,QAC1B,sBACA,KAAK,oBACL,qBAAqB;EAEvB,KAAK,uBAAuB,QAC1B,kBACA,KAAK,oBACL,iBAAiB;CAErB;CAEA,qBAAkB;EAChB,KAAK,aAAa,qBAAqB,KAAK,QAAQ,aAAa;EAEjE,IAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,cAAc,CAAC,KAAK,oBAE1C,KAAK,aAAa,mBAAmB,KAAK,QAAQ,aAAa;CAEnE;CAEA,UAAU,SAAgB;EACxB,KAAK,UAAU;EACf,KAAK,UAAU,KAAK,OAAO;EAC3B,KAAK,cAAc,KAAK,KAAK,OAAO;CACtC;CAEA,SAAM;EACJ,KAAK,WAAU;CACjB;CAcA,WAAW,OAAc;EACvB,KAAK,UAAU;EACf,KAAK,IAAI,aAAY;CACvB;CASA,iBAAiB,IAAO;EACtB,KAAK,YAAY;CACnB;CASA,kBAAkB,IAAO;EACvB,KAAK,aAAa;CACpB;CAQA,iBAAkB,YAAmB;EACnC,KAAK,WAAW;EAChB,KAAK,IAAI,aAAY;CACvB;CAjKW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAiB,MAAA;IAAA,EAAA,OAAA,GAAA,WAAA;IAAA,EAAA,OAAA,GAAA,uBAAA;IAAA,EAAA,OAAA,GAAA,kBAAA;GAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAjB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAiB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,SAAA;IAAA,eAAA;IAAA,gBAAA;IAAA,MAAA;IAAA,MAAA;IAAA,UAAA;IAAA,UAAA;GAAA;GAAA,SAAA,EAAA,eAAA,gBAAA;GAAA,MAAA,EAAA,YAAA;IAAA,SAAA;IAAA,eAAA;IAAA,iBAAA;IAAA,0BAAA;IAAA,0BAAA;IAAA,0BAAA;GAAA,EAAA;GAAA,WATjB,CACT,wBACA;IACE,SAAS;IACT,aAAa,kBAAiB,kBAAiB;IAC/C,OAAO;GACR,CACF;GAAA,aAAA,CAAA;IAAA,cAAA;IAAA,OAAA;IAAA,WAKU;IAAW,aAAA;IAAA,MAAU;IAAU,QAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UCvC5C;GAoBA,QAAA,CAAA,o2IAAA;GAAA,cAAA,CAAA;IAAA,MAAA;IAAA,MDEY;IAAW,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA,CAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAcV,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAf7B,MAAA;EACU,MAAA,CAAA;GAAA,SAAA,CAAC,WAAW;GAAC,UACZ;GAAgB,iBAGT,wBAAwB;GAAM,WACpC,CACT,wBACA;IACE,SAAS;IACT,aAAa,kBAAgB,kBAAkB;IAC/C,OAAO;GACR,CACF;GAAA,UAAA;GAAA,QAAA,CAAA,o2IAAA;EAAA,CAAA;;;;;;;;;GAKA,MAAA;GAAU,MAAA,CAAA,aAAa;IAAE,MAAM;IAAY,QAAQ;GAAI,CAAE;;EAGzD,SAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,eAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAOA,gBAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAWA,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAGA,MAAA;GAAY,MAAA,CAAA,OAAO;EACnB,GAAA,EAAA,MAAA,MAAA,CAAA;;GAGA,MAAA;GAAY,MAAA,CAAA,aAAa;EACzB,GAAA,EAAA,MAAA,MAAA,CAAA;EAGA,UAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GACA,MAAA;GAAY,MAAA,CAAA,eAAe;;;GAK3B,MAAA;GAAY,MAAA,CAAA,wBAAwB;;;GAGpC,MAAA;GAAY,MAAA,CAAA,wBAAwB;;;GAIpC,MAAA;GAAY,MAAA,CAAA,wBAAwB;;EAEpC,eAAA,CAAA,EAAA,MAAA,OAAA,CAAA"}
|
|
@@ -781,7 +781,7 @@ forgot to configure the custom icon through the 'IconRegistryService'?`);
|
|
|
781
781
|
usesOnChanges: true,
|
|
782
782
|
ngImport: i0,
|
|
783
783
|
template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n",
|
|
784
|
-
styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, var(--kirby-icon-font-size-sm));margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: var(--kirby-icon-font-size-xs)}:host(.sm){--kirby-icon-font-size: var(--kirby-icon-font-size-sm)}:host(.md){--kirby-icon-font-size: var(--kirby-icon-font-size-md)}:host(.lg){--kirby-icon-font-size: var(--kirby-icon-font-size-lg)}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-color-fill-success-loud)}:host(.warning){color:var(--kirby-color-fill-warning-loud)}:host(.danger){color:var(--kirby-color-fill-danger-loud)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-color-
|
|
784
|
+
styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, var(--kirby-icon-font-size-sm));margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: var(--kirby-icon-font-size-xs)}:host(.sm){--kirby-icon-font-size: var(--kirby-icon-font-size-sm)}:host(.md){--kirby-icon-font-size: var(--kirby-icon-font-size-md)}:host(.lg){--kirby-icon-font-size: var(--kirby-icon-font-size-lg)}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-color-fill-success-loud)}:host(.warning){color:var(--kirby-color-fill-warning-loud)}:host(.danger){color:var(--kirby-color-fill-danger-loud)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-color-fill-neutral)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:var(--kirby-spacing-xxs)}:host-context(kirby-item)[slot=end]{margin-inline-start:var(--kirby-spacing-xxs)}:host-context(ion-tab-button){pointer-events:none}\n"],
|
|
785
785
|
dependencies: [{
|
|
786
786
|
kind: "component",
|
|
787
787
|
type: IonIcon,
|
|
@@ -817,7 +817,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
817
817
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
818
818
|
imports: [IonIcon],
|
|
819
819
|
template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n",
|
|
820
|
-
styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, var(--kirby-icon-font-size-sm));margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: var(--kirby-icon-font-size-xs)}:host(.sm){--kirby-icon-font-size: var(--kirby-icon-font-size-sm)}:host(.md){--kirby-icon-font-size: var(--kirby-icon-font-size-md)}:host(.lg){--kirby-icon-font-size: var(--kirby-icon-font-size-lg)}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-color-fill-success-loud)}:host(.warning){color:var(--kirby-color-fill-warning-loud)}:host(.danger){color:var(--kirby-color-fill-danger-loud)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-color-
|
|
820
|
+
styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, var(--kirby-icon-font-size-sm));margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: var(--kirby-icon-font-size-xs)}:host(.sm){--kirby-icon-font-size: var(--kirby-icon-font-size-sm)}:host(.md){--kirby-icon-font-size: var(--kirby-icon-font-size-md)}:host(.lg){--kirby-icon-font-size: var(--kirby-icon-font-size-lg)}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-color-fill-success-loud)}:host(.warning){color:var(--kirby-color-fill-warning-loud)}:host(.danger){color:var(--kirby-color-fill-danger-loud)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-color-fill-neutral)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:var(--kirby-spacing-xxs)}:host-context(kirby-item)[slot=end]{margin-inline-start:var(--kirby-spacing-xxs)}:host-context(ion-tab-button){pointer-events:none}\n"]
|
|
821
821
|
}]
|
|
822
822
|
}],
|
|
823
823
|
ctorParameters: () => [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-icon.mjs","names":[],"sources":["../../icon/src/kirby-icon-settings.ts","../../icon/src/icon-registry.service.ts","../../icon/src/icon.component.ts","../../icon/src/icon.component.html","../../icon/src/icon.module.ts"],"sourcesContent":["import { Icon, IconSettings } from './icon-settings';\n\nconst sortIconsByName = (icons: Icon[]) => {\n const collator = new Intl.Collator('en');\n return icons.sort((a, b) => collator.compare(a.name, b.name));\n};\n\nexport const kirbyIconSettings: IconSettings = {\n icons: sortIconsByName([\n { name: 'accounts-outline', svg: 'accounts-outline.svg' },\n { name: 'accounts', svg: 'accounts.svg' },\n { name: 'add', svg: 'add.svg' },\n { name: 'remove', svg: 'remove.svg' },\n { name: 'unsubscribe', svg: 'unsubscribe.svg' },\n { name: 'arrow-back', svg: 'arrow-back.svg' },\n { name: 'arrow-down', svg: 'arrow-down.svg' },\n { name: 'arrow-more', svg: 'arrow-more.svg' },\n { name: 'arrow-up', svg: 'arrow-up.svg' },\n { name: 'attach', svg: 'attach.svg' },\n { name: 'backspace', svg: 'backspace.svg' },\n { name: 'calendar', svg: 'calendar.svg' },\n { name: 'camera', svg: 'camera.svg' },\n { name: 'car', svg: 'car.svg' },\n { name: 'chainlink', svg: 'chainlink.svg' },\n { name: 'checkbox-outline', svg: 'checkbox-outline.svg' },\n { name: 'checkbox', svg: 'checkbox.svg' },\n { name: 'checkmark-selected', svg: 'checkmark-selected.svg' },\n { name: 'close', svg: 'close.svg' },\n { name: 'cog', svg: 'cog.svg' },\n { name: 'coinstack', svg: 'coinstack.svg' },\n { name: 'contact', svg: 'contact.svg' },\n { name: 'copy', svg: 'copy.svg' },\n { name: 'flag', svg: 'flag.svg' },\n { name: 'edit', svg: 'edit.svg' },\n { name: 'filter', svg: 'filter.svg' },\n { name: 'flash-off', svg: 'flash-off.svg' },\n { name: 'flash', svg: 'flash.svg' },\n { name: 'moneybag', svg: 'moneybag.svg' },\n { name: 'help', svg: 'help.svg' },\n { name: 'home', svg: 'home.svg' },\n { name: 'id-card', svg: 'id-card.svg' },\n { name: 'inbox', svg: 'inbox.svg' },\n { name: 'inbox-outline', svg: 'inbox-outline.svg' },\n { name: 'information', svg: 'information.svg' },\n { name: 'insurance', svg: 'insurance.svg' },\n { name: 'investment', svg: 'investment.svg' },\n { name: 'key', svg: 'key.svg' },\n { name: 'kirby', svg: 'kirby.svg' },\n { name: 'link', svg: 'link.svg' },\n { name: 'log-out', svg: 'log-out.svg' },\n { name: 'menu-outline', svg: 'menu-outline.svg' },\n { name: 'menu', svg: 'menu.svg' },\n { name: 'menu-no-decoration', svg: 'menu-no-decoration.svg' },\n { name: 'megaphone', svg: 'megaphone.svg' },\n { name: 'message-read', svg: 'message-read.svg' },\n { name: 'misc', svg: 'misc.svg' },\n { name: 'more', svg: 'more.svg' },\n { name: 'move', svg: 'move.svg' },\n { name: 'note', svg: 'note.svg' },\n { name: 'note-create', svg: 'note-create.svg' },\n { name: 'payment-card', svg: 'payment-card.svg' },\n { name: 'pension', svg: 'pension.svg' },\n { name: 'person-outline', svg: 'person-outline.svg' },\n { name: 'person', svg: 'person.svg' },\n { name: 'person-blocked', svg: 'person-blocked.svg' },\n { name: 'person-check', svg: 'person-check.svg' },\n { name: 'person-close', svg: 'person-close.svg' },\n { name: 'person-power', svg: 'person-power.svg' },\n { name: 'person-cloud', svg: 'person-cloud.svg' },\n { name: 'person-warning', svg: 'person-warning.svg' },\n { name: 'phone-device-pin', svg: 'phone-device-pin.svg' },\n { name: 'qr', svg: 'QR.svg' },\n { name: 'recurring', svg: 'recurring.svg' },\n { name: 'salary', svg: 'salary.svg' },\n { name: 'search', svg: 'search.svg' },\n { name: 'share', svg: 'share.svg' },\n { name: 'sort', svg: 'sort.svg' },\n { name: 'support', svg: 'support.svg' },\n { name: 'swap', svg: 'swap.svg' },\n { name: 'trash', svg: 'trash.svg' },\n { name: 'foreign-payment', svg: 'foreign-payment.svg' },\n { name: 'clock', svg: 'clock.svg' },\n { name: 'verify', svg: 'verify.svg' },\n { name: 'warning', svg: 'warning.svg' },\n { name: 'write-message', svg: 'write-message.svg' },\n { name: 'reorder', svg: 'reorder.svg' },\n { name: 'accident', svg: 'accident.svg' },\n { name: 'health', svg: 'health.svg' },\n { name: 'illness', svg: 'illness.svg' },\n { name: 'incapacity', svg: 'incapacity.svg' },\n { name: 'life', svg: 'life.svg' },\n { name: 'help-decoration', svg: 'help-decoration.svg' },\n { name: 'information-decoration', svg: 'information-decoration.svg' },\n { name: 'warning-decoration', svg: 'warning-decoration.svg' },\n { name: 'notification', svg: 'notification.svg' },\n { name: 'transfer-ownership', svg: 'transfer-ownership.svg' },\n { name: 'update', svg: 'update.svg' },\n { name: 'user-blocked', svg: 'user-blocked.svg' },\n { name: 'add-bank', svg: 'add-bank.svg' },\n { name: 'participants', svg: 'participants.svg' },\n { name: 'download', svg: 'download.svg' },\n { name: 'globe-transfer', svg: 'globe-transfer.svg' },\n { name: 'banknotes', svg: 'banknotes.svg' },\n { name: 'air-balloon', svg: 'air-balloon.svg' },\n { name: 'piggybank', svg: 'piggybank.svg' },\n { name: 'business', svg: 'business.svg' },\n { name: 'navigation', svg: 'navigation.svg' },\n { name: 'phone-device', svg: 'phone-device.svg' },\n { name: 'upload', svg: 'upload.svg' },\n { name: 'document', svg: 'document.svg' },\n { name: 'chat', svg: 'chat.svg' },\n { name: 'feedback', svg: 'feedback.svg' },\n { name: 'keyboard', svg: 'keyboard.svg' },\n { name: 'lock', svg: 'lock.svg' },\n { name: 'see', svg: 'see.svg' },\n { name: 'overview', svg: 'overview.svg' },\n { name: 'overview-outline', svg: 'overview-outline.svg' },\n { name: 'arrow-down-fill', svg: 'arrow-down-fill.svg' },\n { name: 'arrow-up-fill', svg: 'arrow-up-fill.svg' },\n { name: 'calculator', svg: 'calculator.svg' },\n { name: 'grid', svg: 'grid.svg' },\n { name: 'list', svg: 'list.svg' },\n { name: 'adjust', svg: 'adjust.svg' },\n { name: 'bs-logo', svg: 'bs-logo.svg' },\n { name: 'company', svg: 'company.svg' },\n { name: 'budget', svg: 'budget.svg' },\n { name: 'history', svg: 'history.svg' },\n { name: 'dot', svg: 'dot.svg' },\n { name: 'agreement', svg: 'agreement.svg' },\n { name: 'sunshine', svg: 'sunshine.svg' },\n { name: 'star', svg: 'star.svg' },\n { name: 'star-fill', svg: 'star-fill.svg' },\n { name: 'payment', svg: 'payment.svg' },\n { name: 'revert', svg: 'revert.svg' },\n { name: 'fees', svg: 'fees.svg' },\n { name: 'crossedeye', svg: 'crossedeye.svg' },\n { name: 'common', svg: 'common.svg' },\n { name: 'calendar-start', svg: 'calendar-start.svg' },\n { name: 'calendar-end', svg: 'calendar-end.svg' },\n { name: 'expand', svg: 'expand.svg' },\n { name: 'contract', svg: 'contract.svg' },\n { name: 'house', svg: 'house.svg' },\n { name: 'tractor', svg: 'tractor.svg' },\n { name: 'flower', svg: 'flower.svg' },\n { name: 'basket', svg: 'basket.svg' },\n { name: 'drag-drop', svg: 'drag-drop.svg' },\n { name: 'notification-fill', svg: 'notification-fill.svg' },\n { name: 'expense', svg: 'expense.svg' },\n { name: 'income', svg: 'income.svg' },\n { name: 'top-up', svg: 'top-up.svg' },\n { name: 'signed-document', svg: 'signed-document.svg' },\n { name: 'bank', svg: 'bank.svg' },\n { name: 'balloon', svg: 'balloon.svg' },\n { name: 'scale', svg: 'scale.svg' },\n { name: 'ownership', svg: 'ownership.svg' },\n { name: 'maintenance', svg: 'maintenance.svg' },\n { name: 'blocked', svg: 'blocked.svg' },\n { name: 'checklist', svg: 'checklist.svg' },\n { name: 'collection', svg: 'collection.svg' },\n { name: 'pause', svg: 'pause.svg' },\n { name: 'payment-change', svg: 'payment-change.svg' },\n { name: 'pregnancy', svg: 'pregnancy.svg' },\n { name: 'send', svg: 'send.svg' },\n { name: 'subscription', svg: 'subscription.svg' },\n ]),\n};\n\nexport const defaultIcons = kirbyIconSettings.icons.map((icon) => icon.name);\n","import { Inject, Injectable, InjectionToken } from '@angular/core';\n\nimport { Icon } from './icon-settings';\nimport { kirbyIconSettings } from './kirby-icon-settings';\n\nexport const DEFAULT_BUILT_IN_ICONS_URL = 'assets/kirby/icons/svg/';\n\n/**\n * Token used to configure base URL for path to built-in icons. Default is 'assets/kirby/icons/svg'.\n */\nexport const BUILT_IN_ICONS_URL = new InjectionToken<string>('BUILT_IN_ICONS_URL', {\n factory: () => DEFAULT_BUILT_IN_ICONS_URL,\n});\n\n@Injectable({\n providedIn: 'root',\n})\nexport class IconRegistryService {\n private iconRegistry = new Map<string, string>();\n\n constructor(@Inject(BUILT_IN_ICONS_URL) private builtInIconsUrl: string) {\n this.addDefaultIcons();\n }\n\n public addIcon(iconName: string, svgPath: string): void {\n if (!this.iconRegistry.has(iconName)) {\n this.iconRegistry.set(iconName, svgPath);\n } else {\n console.warn(`Icon with name: \"${iconName}\" already exists`);\n }\n }\n\n public addIcons(icons: Icon[]): void {\n if (!icons) {\n console.error('Icons not defined');\n return;\n }\n icons.forEach((icon) => {\n if (icon.name && icon.svg) this.addIcon(icon.name, icon.svg);\n });\n }\n\n private addDefaultIcons(): void {\n const baseUrl = this.builtInIconsUrl ?? DEFAULT_BUILT_IN_ICONS_URL;\n const baseUrlWithSlash = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/';\n this.addIcons(\n kirbyIconSettings.icons.map((icon) => ({ name: icon.name, svg: baseUrlWithSlash + icon.svg }))\n );\n }\n\n getIcons(): Icon[] {\n return Array.from(this.iconRegistry.keys())\n .map((key) => this.getIcon(key))\n .filter((icon): icon is Icon => !!icon);\n }\n\n getIcon(name: string): Icon | undefined {\n const svg = this.iconRegistry.get(name);\n return svg ? { name, svg } : undefined;\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnChanges,\n Renderer2,\n SimpleChanges,\n} from '@angular/core';\n\nimport { IonIcon } from '@ionic/angular';\nimport { IconRegistryService } from './icon-registry.service';\nimport { Icon } from './icon-settings';\n\nexport enum IconSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\n@Component({\n selector: 'kirby-icon',\n templateUrl: './icon.component.html',\n styleUrls: ['./icon.component.scss'],\n host: { '[class.kirby-icon]': 'true' },\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [IonIcon],\n})\nexport class IconComponent implements OnChanges {\n defaultIcon: Icon = this.iconRegistryService.getIcon('cog');\n private _icon = (this.icon = this.defaultIcon);\n private element: HTMLElement;\n\n @HostBinding('class')\n @Input()\n size?: IconSize | `${IconSize}`;\n\n @Input() name?: string;\n\n get icon(): Icon {\n return this._icon;\n }\n\n set icon(icon: Icon) {\n // If icon are not found, set default icon\n if (!icon && this.name) {\n this.warnAboutMissingIcon();\n\n icon = this.defaultIcon;\n\n // If default icon are not found\n if (!icon) {\n console.warn('Default icon was not found.');\n return;\n }\n }\n\n // Set icon if it's found\n if (icon) {\n this._icon = icon;\n }\n }\n\n private warnAboutMissingIcon(): void {\n console.warn(`Icon with name \"${this.name}\" was not found.\nDo you have a typo in 'name' for a built-in icon or\nforgot to configure the custom icon through the 'IconRegistryService'?`);\n }\n\n constructor(\n private iconRegistryService: IconRegistryService,\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {\n this.element = this.elementRef.nativeElement;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.name && changes.name.currentValue) {\n this.icon = this.iconRegistryService.getIcon(changes.name.currentValue);\n\n // This will always run on first init - and again later if name is changed\n // If name changes a new aria-label might have been added, so we need to check again.\n this.setAriaHiddenIfNoLabel();\n }\n }\n\n private setAriaHiddenIfNoLabel() {\n const existingAriaLabel = this.element.hasAttribute('aria-label');\n if (!existingAriaLabel) {\n this.renderer.setAttribute(this.element, 'aria-hidden', 'true');\n }\n }\n}\n","<ion-icon [src]=\"icon?.svg\"></ion-icon>\n","import { NgModule } from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { IonIcon } from '@ionic/angular';\nimport { IconComponent } from './icon.component';\n\n@NgModule({\n imports: [ThemeColorDirective, IonIcon, IconComponent],\n exports: [IconComponent, ThemeColorDirective],\n})\nexport class IconModule {}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-icon.mjs","names":[],"sources":["../../icon/src/kirby-icon-settings.ts","../../icon/src/icon-registry.service.ts","../../icon/src/icon.component.ts","../../icon/src/icon.component.html","../../icon/src/icon.module.ts"],"sourcesContent":["import { Icon, IconSettings } from './icon-settings';\n\nconst sortIconsByName = (icons: Icon[]) => {\n const collator = new Intl.Collator('en');\n return icons.sort((a, b) => collator.compare(a.name, b.name));\n};\n\nexport const kirbyIconSettings: IconSettings = {\n icons: sortIconsByName([\n { name: 'accounts-outline', svg: 'accounts-outline.svg' },\n { name: 'accounts', svg: 'accounts.svg' },\n { name: 'add', svg: 'add.svg' },\n { name: 'remove', svg: 'remove.svg' },\n { name: 'unsubscribe', svg: 'unsubscribe.svg' },\n { name: 'arrow-back', svg: 'arrow-back.svg' },\n { name: 'arrow-down', svg: 'arrow-down.svg' },\n { name: 'arrow-more', svg: 'arrow-more.svg' },\n { name: 'arrow-up', svg: 'arrow-up.svg' },\n { name: 'attach', svg: 'attach.svg' },\n { name: 'backspace', svg: 'backspace.svg' },\n { name: 'calendar', svg: 'calendar.svg' },\n { name: 'camera', svg: 'camera.svg' },\n { name: 'car', svg: 'car.svg' },\n { name: 'chainlink', svg: 'chainlink.svg' },\n { name: 'checkbox-outline', svg: 'checkbox-outline.svg' },\n { name: 'checkbox', svg: 'checkbox.svg' },\n { name: 'checkmark-selected', svg: 'checkmark-selected.svg' },\n { name: 'close', svg: 'close.svg' },\n { name: 'cog', svg: 'cog.svg' },\n { name: 'coinstack', svg: 'coinstack.svg' },\n { name: 'contact', svg: 'contact.svg' },\n { name: 'copy', svg: 'copy.svg' },\n { name: 'flag', svg: 'flag.svg' },\n { name: 'edit', svg: 'edit.svg' },\n { name: 'filter', svg: 'filter.svg' },\n { name: 'flash-off', svg: 'flash-off.svg' },\n { name: 'flash', svg: 'flash.svg' },\n { name: 'moneybag', svg: 'moneybag.svg' },\n { name: 'help', svg: 'help.svg' },\n { name: 'home', svg: 'home.svg' },\n { name: 'id-card', svg: 'id-card.svg' },\n { name: 'inbox', svg: 'inbox.svg' },\n { name: 'inbox-outline', svg: 'inbox-outline.svg' },\n { name: 'information', svg: 'information.svg' },\n { name: 'insurance', svg: 'insurance.svg' },\n { name: 'investment', svg: 'investment.svg' },\n { name: 'key', svg: 'key.svg' },\n { name: 'kirby', svg: 'kirby.svg' },\n { name: 'link', svg: 'link.svg' },\n { name: 'log-out', svg: 'log-out.svg' },\n { name: 'menu-outline', svg: 'menu-outline.svg' },\n { name: 'menu', svg: 'menu.svg' },\n { name: 'menu-no-decoration', svg: 'menu-no-decoration.svg' },\n { name: 'megaphone', svg: 'megaphone.svg' },\n { name: 'message-read', svg: 'message-read.svg' },\n { name: 'misc', svg: 'misc.svg' },\n { name: 'more', svg: 'more.svg' },\n { name: 'move', svg: 'move.svg' },\n { name: 'note', svg: 'note.svg' },\n { name: 'note-create', svg: 'note-create.svg' },\n { name: 'payment-card', svg: 'payment-card.svg' },\n { name: 'pension', svg: 'pension.svg' },\n { name: 'person-outline', svg: 'person-outline.svg' },\n { name: 'person', svg: 'person.svg' },\n { name: 'person-blocked', svg: 'person-blocked.svg' },\n { name: 'person-check', svg: 'person-check.svg' },\n { name: 'person-close', svg: 'person-close.svg' },\n { name: 'person-power', svg: 'person-power.svg' },\n { name: 'person-cloud', svg: 'person-cloud.svg' },\n { name: 'person-warning', svg: 'person-warning.svg' },\n { name: 'phone-device-pin', svg: 'phone-device-pin.svg' },\n { name: 'qr', svg: 'QR.svg' },\n { name: 'recurring', svg: 'recurring.svg' },\n { name: 'salary', svg: 'salary.svg' },\n { name: 'search', svg: 'search.svg' },\n { name: 'share', svg: 'share.svg' },\n { name: 'sort', svg: 'sort.svg' },\n { name: 'support', svg: 'support.svg' },\n { name: 'swap', svg: 'swap.svg' },\n { name: 'trash', svg: 'trash.svg' },\n { name: 'foreign-payment', svg: 'foreign-payment.svg' },\n { name: 'clock', svg: 'clock.svg' },\n { name: 'verify', svg: 'verify.svg' },\n { name: 'warning', svg: 'warning.svg' },\n { name: 'write-message', svg: 'write-message.svg' },\n { name: 'reorder', svg: 'reorder.svg' },\n { name: 'accident', svg: 'accident.svg' },\n { name: 'health', svg: 'health.svg' },\n { name: 'illness', svg: 'illness.svg' },\n { name: 'incapacity', svg: 'incapacity.svg' },\n { name: 'life', svg: 'life.svg' },\n { name: 'help-decoration', svg: 'help-decoration.svg' },\n { name: 'information-decoration', svg: 'information-decoration.svg' },\n { name: 'warning-decoration', svg: 'warning-decoration.svg' },\n { name: 'notification', svg: 'notification.svg' },\n { name: 'transfer-ownership', svg: 'transfer-ownership.svg' },\n { name: 'update', svg: 'update.svg' },\n { name: 'user-blocked', svg: 'user-blocked.svg' },\n { name: 'add-bank', svg: 'add-bank.svg' },\n { name: 'participants', svg: 'participants.svg' },\n { name: 'download', svg: 'download.svg' },\n { name: 'globe-transfer', svg: 'globe-transfer.svg' },\n { name: 'banknotes', svg: 'banknotes.svg' },\n { name: 'air-balloon', svg: 'air-balloon.svg' },\n { name: 'piggybank', svg: 'piggybank.svg' },\n { name: 'business', svg: 'business.svg' },\n { name: 'navigation', svg: 'navigation.svg' },\n { name: 'phone-device', svg: 'phone-device.svg' },\n { name: 'upload', svg: 'upload.svg' },\n { name: 'document', svg: 'document.svg' },\n { name: 'chat', svg: 'chat.svg' },\n { name: 'feedback', svg: 'feedback.svg' },\n { name: 'keyboard', svg: 'keyboard.svg' },\n { name: 'lock', svg: 'lock.svg' },\n { name: 'see', svg: 'see.svg' },\n { name: 'overview', svg: 'overview.svg' },\n { name: 'overview-outline', svg: 'overview-outline.svg' },\n { name: 'arrow-down-fill', svg: 'arrow-down-fill.svg' },\n { name: 'arrow-up-fill', svg: 'arrow-up-fill.svg' },\n { name: 'calculator', svg: 'calculator.svg' },\n { name: 'grid', svg: 'grid.svg' },\n { name: 'list', svg: 'list.svg' },\n { name: 'adjust', svg: 'adjust.svg' },\n { name: 'bs-logo', svg: 'bs-logo.svg' },\n { name: 'company', svg: 'company.svg' },\n { name: 'budget', svg: 'budget.svg' },\n { name: 'history', svg: 'history.svg' },\n { name: 'dot', svg: 'dot.svg' },\n { name: 'agreement', svg: 'agreement.svg' },\n { name: 'sunshine', svg: 'sunshine.svg' },\n { name: 'star', svg: 'star.svg' },\n { name: 'star-fill', svg: 'star-fill.svg' },\n { name: 'payment', svg: 'payment.svg' },\n { name: 'revert', svg: 'revert.svg' },\n { name: 'fees', svg: 'fees.svg' },\n { name: 'crossedeye', svg: 'crossedeye.svg' },\n { name: 'common', svg: 'common.svg' },\n { name: 'calendar-start', svg: 'calendar-start.svg' },\n { name: 'calendar-end', svg: 'calendar-end.svg' },\n { name: 'expand', svg: 'expand.svg' },\n { name: 'contract', svg: 'contract.svg' },\n { name: 'house', svg: 'house.svg' },\n { name: 'tractor', svg: 'tractor.svg' },\n { name: 'flower', svg: 'flower.svg' },\n { name: 'basket', svg: 'basket.svg' },\n { name: 'drag-drop', svg: 'drag-drop.svg' },\n { name: 'notification-fill', svg: 'notification-fill.svg' },\n { name: 'expense', svg: 'expense.svg' },\n { name: 'income', svg: 'income.svg' },\n { name: 'top-up', svg: 'top-up.svg' },\n { name: 'signed-document', svg: 'signed-document.svg' },\n { name: 'bank', svg: 'bank.svg' },\n { name: 'balloon', svg: 'balloon.svg' },\n { name: 'scale', svg: 'scale.svg' },\n { name: 'ownership', svg: 'ownership.svg' },\n { name: 'maintenance', svg: 'maintenance.svg' },\n { name: 'blocked', svg: 'blocked.svg' },\n { name: 'checklist', svg: 'checklist.svg' },\n { name: 'collection', svg: 'collection.svg' },\n { name: 'pause', svg: 'pause.svg' },\n { name: 'payment-change', svg: 'payment-change.svg' },\n { name: 'pregnancy', svg: 'pregnancy.svg' },\n { name: 'send', svg: 'send.svg' },\n { name: 'subscription', svg: 'subscription.svg' },\n ]),\n};\n\nexport const defaultIcons = kirbyIconSettings.icons.map((icon) => icon.name);\n","import { Inject, Injectable, InjectionToken } from '@angular/core';\n\nimport { Icon } from './icon-settings';\nimport { kirbyIconSettings } from './kirby-icon-settings';\n\nexport const DEFAULT_BUILT_IN_ICONS_URL = 'assets/kirby/icons/svg/';\n\n/**\n * Token used to configure base URL for path to built-in icons. Default is 'assets/kirby/icons/svg'.\n */\nexport const BUILT_IN_ICONS_URL = new InjectionToken<string>('BUILT_IN_ICONS_URL', {\n factory: () => DEFAULT_BUILT_IN_ICONS_URL,\n});\n\n@Injectable({\n providedIn: 'root',\n})\nexport class IconRegistryService {\n private iconRegistry = new Map<string, string>();\n\n constructor(@Inject(BUILT_IN_ICONS_URL) private builtInIconsUrl: string) {\n this.addDefaultIcons();\n }\n\n public addIcon(iconName: string, svgPath: string): void {\n if (!this.iconRegistry.has(iconName)) {\n this.iconRegistry.set(iconName, svgPath);\n } else {\n console.warn(`Icon with name: \"${iconName}\" already exists`);\n }\n }\n\n public addIcons(icons: Icon[]): void {\n if (!icons) {\n console.error('Icons not defined');\n return;\n }\n icons.forEach((icon) => {\n if (icon.name && icon.svg) this.addIcon(icon.name, icon.svg);\n });\n }\n\n private addDefaultIcons(): void {\n const baseUrl = this.builtInIconsUrl ?? DEFAULT_BUILT_IN_ICONS_URL;\n const baseUrlWithSlash = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/';\n this.addIcons(\n kirbyIconSettings.icons.map((icon) => ({ name: icon.name, svg: baseUrlWithSlash + icon.svg }))\n );\n }\n\n getIcons(): Icon[] {\n return Array.from(this.iconRegistry.keys())\n .map((key) => this.getIcon(key))\n .filter((icon): icon is Icon => !!icon);\n }\n\n getIcon(name: string): Icon | undefined {\n const svg = this.iconRegistry.get(name);\n return svg ? { name, svg } : undefined;\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostBinding,\n Input,\n OnChanges,\n Renderer2,\n SimpleChanges,\n} from '@angular/core';\n\nimport { IonIcon } from '@ionic/angular';\nimport { IconRegistryService } from './icon-registry.service';\nimport { Icon } from './icon-settings';\n\nexport enum IconSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\n@Component({\n selector: 'kirby-icon',\n templateUrl: './icon.component.html',\n styleUrls: ['./icon.component.scss'],\n host: { '[class.kirby-icon]': 'true' },\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [IonIcon],\n})\nexport class IconComponent implements OnChanges {\n defaultIcon: Icon = this.iconRegistryService.getIcon('cog');\n private _icon = (this.icon = this.defaultIcon);\n private element: HTMLElement;\n\n @HostBinding('class')\n @Input()\n size?: IconSize | `${IconSize}`;\n\n @Input() name?: string;\n\n get icon(): Icon {\n return this._icon;\n }\n\n set icon(icon: Icon) {\n // If icon are not found, set default icon\n if (!icon && this.name) {\n this.warnAboutMissingIcon();\n\n icon = this.defaultIcon;\n\n // If default icon are not found\n if (!icon) {\n console.warn('Default icon was not found.');\n return;\n }\n }\n\n // Set icon if it's found\n if (icon) {\n this._icon = icon;\n }\n }\n\n private warnAboutMissingIcon(): void {\n console.warn(`Icon with name \"${this.name}\" was not found.\nDo you have a typo in 'name' for a built-in icon or\nforgot to configure the custom icon through the 'IconRegistryService'?`);\n }\n\n constructor(\n private iconRegistryService: IconRegistryService,\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {\n this.element = this.elementRef.nativeElement;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.name && changes.name.currentValue) {\n this.icon = this.iconRegistryService.getIcon(changes.name.currentValue);\n\n // This will always run on first init - and again later if name is changed\n // If name changes a new aria-label might have been added, so we need to check again.\n this.setAriaHiddenIfNoLabel();\n }\n }\n\n private setAriaHiddenIfNoLabel() {\n const existingAriaLabel = this.element.hasAttribute('aria-label');\n if (!existingAriaLabel) {\n this.renderer.setAttribute(this.element, 'aria-hidden', 'true');\n }\n }\n}\n","<ion-icon [src]=\"icon?.svg\"></ion-icon>\n","import { NgModule } from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { IonIcon } from '@ionic/angular';\nimport { IconComponent } from './icon.component';\n\n@NgModule({\n imports: [ThemeColorDirective, IonIcon, IconComponent],\n exports: [IconComponent, ThemeColorDirective],\n})\nexport class IconModule {}\n"],"mappings":"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"}
|