@kirbydesign/extensions-angular 1.0.0

package/README.md

@@ -0,0 +1,47 @@
+# Kirby Extensions Angular
+The Kirby Extensions library is a collection of design guidelines and components that build on top of the core Kirby Design library.
+The components follow the Kirby Design guidelines, but they differ from the core components by being more product-specific. 
+This means that components in this library are shared across one or more products, and might not be universally useful to the whole ecosystem.
+Though some components can also become core-candidates and graduate once they are battle-tested and initial experimentation is over.
+
+Extensions allow for quicker iteration and less focus on generalising behavior, while the test and especially documentation burden is also significantly lower.
+
+Components in this library are developed and maintained by product teams, with support from [Team Kirby](https://github.com/kirbydesign/designsystem/blob/develop/.github/SUPPORT.md#team-kirby).
+
+## Using Kirby Extensions
+
+> [!IMPORTANT]  
+> Kirby Extensions uses designsystem components from the `@kirbydesign/designsystem` package.
+> See [guidelines for installing @kirbydesign/designsystem](https://github.com/kirbydesign/designsystem/?tab=readme-ov-file#installation) before continuing below.
+
+1. install the package through npm: `npm i @kirbydesign/extensions-angular`
+2. import components directly from their specific entry points, and import them into your Angular module or standalone component:
+
+```ts
+import { ImageBannerComponent } from '@kirbydesign/extensions-angular/image-banner';
+
+@Component({
+  selector: 'my-component'
+  standalone: true
+  imports: [ImageBannerComponent],
+})
+export class MyComponent {}
+
+// OR
+
+@NgModule({
+  imports: [ImageBannerComponent],
+})
+export class MyModule {}
+```
+
+## Contributing
+A comprehensive description of contributing fixes, features or components can be found in the [Extensions Contribution Guidelines](https://github.com/kirbydesign/designsystem/blob/develop/libs/extensions/angular/CONTRIBUTING.md).
+
+### Quickstart
+1. clone the `kirbydesign/designsystem` repo locally
+2. run `npm i` to install dependencies
+3. run `npx nx dev extensions-angular` to launch Storybook and build the local component libraries in watch-mode, so any changes you make will be reflected in Storybook
+    1. if you are contributing to the documentation and do not need to modify any libraries, you can run Storybook directly with `npx nx storybook extensions-angular`
+4. if you are contributing a feature or a bug fix, add it and follow [the guidelines for updating docs and testing components](https://github.com/kirbydesign/designsystem/blob/develop/libs/extensions/angular/CONTRIBUTING.md#documenting-components)
+5. if you are contributing a component, follow [the steps for creating a new component](https://github.com/kirbydesign/designsystem/blob/develop/libs/extensions/angular/CONTRIBUTING.md#creating-a-new-component)

package/esm2022/image-banner/image-banner.component.mjs

@@ -0,0 +1,62 @@
+import { CommonModule, NgClass } from '@angular/common';
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { CardModule } from '@kirbydesign/designsystem/card';
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import { IconModule } from '@kirbydesign/designsystem/icon';
+import * as i0 from "@angular/core";
+import * as i1 from "@kirbydesign/designsystem/card";
+import * as i2 from "@kirbydesign/designsystem/shared";
+import * as i3 from "@kirbydesign/designsystem/icon";
+import * as i4 from "@angular/common";
+export class ImageBannerComponent {
+    constructor() {
+        /**
+         * The blur-effect used for the background.
+         */
+        this.backgroundBlur = 'dark';
+        /**
+         * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.
+         */
+        this.bannerClick = new EventEmitter();
+        /**
+         * If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.
+         */
+        this.dismissClick = new EventEmitter();
+    }
+    bannerClicked(event) {
+        const eventTarget = event.target;
+        const dismissButtonClicked = eventTarget.closest('.dismiss');
+        if (dismissButtonClicked)
+            return;
+        this.bannerClick.emit(event);
+    }
+    dismissClicked(event) {
+        this.dismissClick.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ImageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: ImageBannerComponent, isStandalone: true, selector: "kirby-x-image-banner", inputs: { title: "title", imagePath: "imagePath", bodyText: "bodyText", actionButtonText: "actionButtonText", externalLink: "externalLink", backgroundBlur: "backgroundBlur" }, outputs: { bannerClick: "bannerClick", dismissClick: "dismissClick" }, host: { properties: { "class": "this.backgroundBlur" } }, ngImport: i0, template: "<kirby-card *ngIf=\"externalLink\" [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\">\n  <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<kirby-card\n  *ngIf=\"!externalLink\"\n  [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\"\n  (click)=\"bannerClicked($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<ng-template #sharedCardContent>\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <!-- When an external link is supplied, this anchor tag expands and fills the entire banner so users can click anywhere or focus the banner -->\n  <a *ngIf=\"externalLink\" class=\"main-content-anchor\" [href]=\"externalLink\" target=\"_blank\"></a>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"main-content-header\">\n        <p class=\"kirby-text-normal-bold\">\n          {{ title }}\n        </p>\n      </div>\n\n      <div class=\"main-content-body\">\n        <div class=\"main-content-body-text\">\n          <span class=\"kirby-text-small\">\n            {{ bodyText }}\n          </span>\n        </div>\n\n        <ng-container *ngIf=\"externalLink\">\n          <!-- On large screens we also show a button-like anchor tag in addition to the entire banner anchor -->\n          <a\n            kirby-button\n            class=\"main-content-body-action-text\"\n            [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n            [showIconOnly]=\"!actionButtonText\"\n            [href]=\"externalLink\"\n            target=\"_blank\"\n            size=\"sm\"\n          >\n            {{ actionButtonText }}\n            <kirby-icon name=\"link\"></kirby-icon>\n          </a>\n\n          <div class=\"main-content-body-action-link\">\n            <kirby-icon name=\"link\"></kirby-icon>\n          </div>\n        </ng-container>\n\n        <button\n          class=\"main-content-body-action-text\"\n          kirby-button\n          *ngIf=\"actionButtonText && !externalLink\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"dismiss\" *ngIf=\"dismissClick.observed\">\n    <button\n      kirby-button\n      (click)=\"dismissClicked($event)\"\n      [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n      [showIconOnly]=\"true\"\n      size=\"xs\"\n    >\n      <kirby-icon name=\"close\"></kirby-icon>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host(.none) .blur-image{display:none}@media (max-width: 631px){:host(.none) .dismiss{--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)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(60px) brightness(.8)}:host(.light) .blur-image{filter:blur(60px) brightness(1.3)}.blur-image-wrapper{position:absolute;inset:-180px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@media (min-width: 632px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@media (min-width: 632px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;min-height:84px;box-sizing:border-box;flex-direction:column;padding:12px 0 8px 8px;overflow:hidden}@media (min-width: 632px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-anchor{position:absolute;inset:0}.main-content-header{margin-right:40px}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@media (min-width: 632px){.main-content-image{height:164px}}.main-content-body{display:flex;justify-content:space-between;gap:16px;height:100%}@media (min-width: 632px){.main-content-body{flex-direction:column;max-width:324px}}@media (min-width: 632px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:block;overflow:hidden;max-height:40px}@media (min-width: 632px){.main-content-body-text{padding-inline-end:48px;max-height:64px}}.main-content-body-action-text{display:none}@media (min-width: 632px){.main-content-body-action-text{align-self:start;display:inline-flex;margin:0}}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "directive", type: i1.CardAsButtonDirective, selector: "kirby-card[click]" }, { kind: "directive", type: i2.ThemeColorDirective, selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]", inputs: ["themeColor"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ImageBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kirby-x-image-banner', standalone: true, imports: [CardModule, ButtonComponent, IconModule, NgClass, CommonModule], template: "<kirby-card *ngIf=\"externalLink\" [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\">\n  <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<kirby-card\n  *ngIf=\"!externalLink\"\n  [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\"\n  (click)=\"bannerClicked($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<ng-template #sharedCardContent>\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <!-- When an external link is supplied, this anchor tag expands and fills the entire banner so users can click anywhere or focus the banner -->\n  <a *ngIf=\"externalLink\" class=\"main-content-anchor\" [href]=\"externalLink\" target=\"_blank\"></a>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"main-content-header\">\n        <p class=\"kirby-text-normal-bold\">\n          {{ title }}\n        </p>\n      </div>\n\n      <div class=\"main-content-body\">\n        <div class=\"main-content-body-text\">\n          <span class=\"kirby-text-small\">\n            {{ bodyText }}\n          </span>\n        </div>\n\n        <ng-container *ngIf=\"externalLink\">\n          <!-- On large screens we also show a button-like anchor tag in addition to the entire banner anchor -->\n          <a\n            kirby-button\n            class=\"main-content-body-action-text\"\n            [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n            [showIconOnly]=\"!actionButtonText\"\n            [href]=\"externalLink\"\n            target=\"_blank\"\n            size=\"sm\"\n          >\n            {{ actionButtonText }}\n            <kirby-icon name=\"link\"></kirby-icon>\n          </a>\n\n          <div class=\"main-content-body-action-link\">\n            <kirby-icon name=\"link\"></kirby-icon>\n          </div>\n        </ng-container>\n\n        <button\n          class=\"main-content-body-action-text\"\n          kirby-button\n          *ngIf=\"actionButtonText && !externalLink\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"dismiss\" *ngIf=\"dismissClick.observed\">\n    <button\n      kirby-button\n      (click)=\"dismissClicked($event)\"\n      [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n      [showIconOnly]=\"true\"\n      size=\"xs\"\n    >\n      <kirby-icon name=\"close\"></kirby-icon>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host(.none) .blur-image{display:none}@media (max-width: 631px){:host(.none) .dismiss{--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)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(60px) brightness(.8)}:host(.light) .blur-image{filter:blur(60px) brightness(1.3)}.blur-image-wrapper{position:absolute;inset:-180px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@media (min-width: 632px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@media (min-width: 632px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;min-height:84px;box-sizing:border-box;flex-direction:column;padding:12px 0 8px 8px;overflow:hidden}@media (min-width: 632px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-anchor{position:absolute;inset:0}.main-content-header{margin-right:40px}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@media (min-width: 632px){.main-content-image{height:164px}}.main-content-body{display:flex;justify-content:space-between;gap:16px;height:100%}@media (min-width: 632px){.main-content-body{flex-direction:column;max-width:324px}}@media (min-width: 632px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:block;overflow:hidden;max-height:40px}@media (min-width: 632px){.main-content-body-text{padding-inline-end:48px;max-height:64px}}.main-content-body-action-text{display:none}@media (min-width: 632px){.main-content-body-action-text{align-self:start;display:inline-flex;margin:0}}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], imagePath: [{
+                type: Input
+            }], bodyText: [{
+                type: Input
+            }], actionButtonText: [{
+                type: Input
+            }], externalLink: [{
+                type: Input
+            }], backgroundBlur: [{
+                type: HostBinding,
+                args: ['class']
+            }, {
+                type: Input
+            }], bannerClick: [{
+                type: Output
+            }], dismissClick: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2ltYWdlLWJhbm5lci9zcmMvaW1hZ2UtYmFubmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL2ltYWdlLWJhbm5lci9zcmMvaW1hZ2UtYmFubmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDcEYsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzVELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNuRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7Ozs7OztBQVM1RCxNQUFNLE9BQU8sb0JBQW9CO0lBUGpDO1FBaUNFOztXQUVHO1FBR0gsbUJBQWMsR0FBOEIsTUFBTSxDQUFDO1FBRW5EOztXQUVHO1FBQ08sZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO1FBRWxEOztXQUVHO1FBQ08saUJBQVksR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO0tBWXBEO0lBVlEsYUFBYSxDQUFDLEtBQVk7UUFDL0IsTUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFDLE1BQXFCLENBQUM7UUFDaEQsTUFBTSxvQkFBb0IsR0FBRyxXQUFXLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQzdELElBQUksb0JBQW9CO1lBQUUsT0FBTztRQUNqQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMvQixDQUFDO0lBRU0sY0FBYyxDQUFDLEtBQVk7UUFDaEMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDaEMsQ0FBQzs4R0FwRFUsb0JBQW9CO2tHQUFwQixvQkFBb0IsaVlDYmpDLDJ2RkFvRkEsbXJFRDNFWSxVQUFVLHlsQkFBRSxlQUFlLCtNQUFFLFVBQVUsK0hBQVcsWUFBWTs7MkZBSTdELG9CQUFvQjtrQkFQaEMsU0FBUzsrQkFDRSxzQkFBc0IsY0FDcEIsSUFBSSxXQUNQLENBQUMsVUFBVSxFQUFFLGVBQWUsRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLFlBQVksQ0FBQzs4QkFRaEUsS0FBSztzQkFBYixLQUFLO2dCQUtHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBS0csWUFBWTtzQkFBcEIsS0FBSztnQkFPTixjQUFjO3NCQUZiLFdBQVc7dUJBQUMsT0FBTzs7c0JBQ25CLEtBQUs7Z0JBTUksV0FBVztzQkFBcEIsTUFBTTtnQkFLRyxZQUFZO3NCQUFyQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlLCBOZ0NsYXNzIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2FyZE1vZHVsZSB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0vY2FyZCc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICdAa2lyYnlkZXNpZ24vZGVzaWduc3lzdGVtL2J1dHRvbic7XG5pbXBvcnQgeyBJY29uTW9kdWxlIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9pY29uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2lyYnkteC1pbWFnZS1iYW5uZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ2FyZE1vZHVsZSwgQnV0dG9uQ29tcG9uZW50LCBJY29uTW9kdWxlLCBOZ0NsYXNzLCBDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vaW1hZ2UtYmFubmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2ltYWdlLWJhbm5lci5jb21wb25lbnQuc2NzcycsXG59KVxuZXhwb3J0IGNsYXNzIEltYWdlQmFubmVyQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFRoZSB0aXRsZSBwbGFjZWQgaW5zaWRlIHRoZSBpbWFnZSBiYW5uZXJzIGhlYWRlci5cbiAgICovXG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFRoZSBpbWFnZSBzaG93biBvbiB0aGUgYmFubmVyLCBhbmQgdXNlZCBmb3IgdGhlIGJhY2tncm91bmQgYmx1ciBlZmZlY3QuXG4gICAqL1xuICBASW5wdXQoKSBpbWFnZVBhdGg6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogVGhlIGJvZHkgdGV4dCBwbGFjZWQgYmVsb3cgdGhlIHRpdGxlLlxuICAgKi9cbiAgQElucHV0KCkgYm9keVRleHQ6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogVGhlIHRleHQgb2YgdGhlIGJ1dHRvbiBpbiB0aGUgY29udGVudCBhcmVhIG9mIHRoZSBpbWFnZSBiYW5uZXIuXG4gICAqL1xuICBASW5wdXQoKSBhY3Rpb25CdXR0b25UZXh0OiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFdoZW4gYW4gZXh0ZXJuYWwgbGluayBpcyBzdXBwbGllZCB0aGUgZW50aXJlIGJhbm5lciB3aWxsIGJlIGFuIGFuY2hvci10YWcgYW5kIG5hdmlnYXRlIHdoZW4gYWN0aXZhdGVkLlxuICAgKi9cbiAgQElucHV0KCkgZXh0ZXJuYWxMaW5rOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFRoZSBibHVyLWVmZmVjdCB1c2VkIGZvciB0aGUgYmFja2dyb3VuZC5cbiAgICovXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBASW5wdXQoKVxuICBiYWNrZ3JvdW5kQmx1cjogJ2RhcmsnIHwgJ2xpZ2h0JyB8ICdub25lJyA9ICdkYXJrJztcblxuICAvKipcbiAgICogRW1pdHRlZCBldmVyeSB0aW1lIHRoZSBiYW5uZXIgaXMgYWN0aXZhdGVkLiBUaGUgZW50aXJlIGJhbm5lciBpcyBpbnRlcmFjdGl2ZSwgYW5kIHdpbGwgYmUgYWN0aXZhdGVkIGJ5IGNsaWNrIGFuZCBrZXlib2FyZCBpbnRlcmFjdGlvbi5cbiAgICovXG4gIEBPdXRwdXQoKSBiYW5uZXJDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG5cbiAgLyoqXG4gICAqIElmIHN1YnNjcmliZWQgdG8sIGEgZGlzbWlzcyBidXR0b24gd2lsbCBiZSBzaG93bi4gRW1pdHRlZCBldmVyeSB0aW1lIHRoZSBkaXNtaXNzIGJ1dHRvbiBpcyBhY3RpdmF0ZWQgYnkgY2xpY2sgYW5kIGtleWJvYXJkIGludGVyYWN0aW9uLlxuICAgKi9cbiAgQE91dHB1dCgpIGRpc21pc3NDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG5cbiAgcHVibGljIGJhbm5lckNsaWNrZWQoZXZlbnQ6IEV2ZW50KSB7XG4gICAgY29uc3QgZXZlbnRUYXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XG4gICAgY29uc3QgZGlzbWlzc0J1dHRvbkNsaWNrZWQgPSBldmVudFRhcmdldC5jbG9zZXN0KCcuZGlzbWlzcycpO1xuICAgIGlmIChkaXNtaXNzQnV0dG9uQ2xpY2tlZCkgcmV0dXJuO1xuICAgIHRoaXMuYmFubmVyQ2xpY2suZW1pdChldmVudCk7XG4gIH1cblxuICBwdWJsaWMgZGlzbWlzc0NsaWNrZWQoZXZlbnQ6IEV2ZW50KSB7XG4gICAgdGhpcy5kaXNtaXNzQ2xpY2suZW1pdChldmVudCk7XG4gIH1cbn1cbiIsIjxraXJieS1jYXJkICpuZ0lmPVwiZXh0ZXJuYWxMaW5rXCIgW3RoZW1lQ29sb3JdPVwiYmFja2dyb3VuZEJsdXIgPT09ICdub25lJyA/ICd3aGl0ZScgOiAnZGFyaydcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInNoYXJlZENhcmRDb250ZW50XCI+PC9uZy1jb250YWluZXI+XG48L2tpcmJ5LWNhcmQ+XG5cbjxraXJieS1jYXJkXG4gICpuZ0lmPVwiIWV4dGVybmFsTGlua1wiXG4gIFt0aGVtZUNvbG9yXT1cImJhY2tncm91bmRCbHVyID09PSAnbm9uZScgPyAnd2hpdGUnIDogJ2RhcmsnXCJcbiAgKGNsaWNrKT1cImJhbm5lckNsaWNrZWQoJGV2ZW50KVwiXG4+XG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzaGFyZWRDYXJkQ29udGVudFwiPjwvbmctY29udGFpbmVyPlxuPC9raXJieS1jYXJkPlxuXG48bmctdGVtcGxhdGUgI3NoYXJlZENhcmRDb250ZW50PlxuICA8ZGl2IGNsYXNzPVwiYmx1ci1pbWFnZS13cmFwcGVyXCI+XG4gICAgPGltZyBjbGFzcz1cImJsdXItaW1hZ2VcIiBbc3JjXT1cImltYWdlUGF0aFwiIGFsdD1cIlwiIC8+XG4gIDwvZGl2PlxuXG4gIDwhLS0gV2hlbiBhbiBleHRlcm5hbCBsaW5rIGlzIHN1cHBsaWVkLCB0aGlzIGFuY2hvciB0YWcgZXhwYW5kcyBhbmQgZmlsbHMgdGhlIGVudGlyZSBiYW5uZXIgc28gdXNlcnMgY2FuIGNsaWNrIGFueXdoZXJlIG9yIGZvY3VzIHRoZSBiYW5uZXIgLS0+XG4gIDxhICpuZ0lmPVwiZXh0ZXJuYWxMaW5rXCIgY2xhc3M9XCJtYWluLWNvbnRlbnQtYW5jaG9yXCIgW2hyZWZdPVwiZXh0ZXJuYWxMaW5rXCIgdGFyZ2V0PVwiX2JsYW5rXCI+PC9hPlxuXG4gIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnQtd3JhcHBlclwiPlxuICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnQtaW1hZ2Utd3JhcHBlclwiPlxuICAgICAgPGltZyBjbGFzcz1cIm1haW4tY29udGVudC1pbWFnZVwiIFtzcmNdPVwiaW1hZ2VQYXRoXCIgYWx0PVwiXCIgLz5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnRcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnQtaGVhZGVyXCI+XG4gICAgICAgIDxwIGNsYXNzPVwia2lyYnktdGV4dC1ub3JtYWwtYm9sZFwiPlxuICAgICAgICAgIHt7IHRpdGxlIH19XG4gICAgICAgIDwvcD5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2IGNsYXNzPVwibWFpbi1jb250ZW50LWJvZHlcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1haW4tY29udGVudC1ib2R5LXRleHRcIj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImtpcmJ5LXRleHQtc21hbGxcIj5cbiAgICAgICAgICAgIHt7IGJvZHlUZXh0IH19XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZXh0ZXJuYWxMaW5rXCI+XG4gICAgICAgICAgPCEtLSBPbiBsYXJnZSBzY3JlZW5zIHdlIGFsc28gc2hvdyBhIGJ1dHRvbi1saWtlIGFuY2hvciB0YWcgaW4gYWRkaXRpb24gdG8gdGhlIGVudGlyZSBiYW5uZXIgYW5jaG9yIC0tPlxuICAgICAgICAgIDxhXG4gICAgICAgICAgICBraXJieS1idXR0b25cbiAgICAgICAgICAgIGNsYXNzPVwibWFpbi1jb250ZW50LWJvZHktYWN0aW9uLXRleHRcIlxuICAgICAgICAgICAgW2F0dGVudGlvbkxldmVsXT1cImJhY2tncm91bmRCbHVyID09PSAnbm9uZScgPyAnMycgOiAnMidcIlxuICAgICAgICAgICAgW3Nob3dJY29uT25seV09XCIhYWN0aW9uQnV0dG9uVGV4dFwiXG4gICAgICAgICAgICBbaHJlZl09XCJleHRlcm5hbExpbmtcIlxuICAgICAgICAgICAgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgICAgICAgIHNpemU9XCJzbVwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAge3sgYWN0aW9uQnV0dG9uVGV4dCB9fVxuICAgICAgICAgICAgPGtpcmJ5LWljb24gbmFtZT1cImxpbmtcIj48L2tpcmJ5LWljb24+XG4gICAgICAgICAgPC9hPlxuXG4gICAgICAgICAgPGRpdiBjbGFzcz1cIm1haW4tY29udGVudC1ib2R5LWFjdGlvbi1saW5rXCI+XG4gICAgICAgICAgICA8a2lyYnktaWNvbiBuYW1lPVwibGlua1wiPjwva2lyYnktaWNvbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgIGNsYXNzPVwibWFpbi1jb250ZW50LWJvZHktYWN0aW9uLXRleHRcIlxuICAgICAgICAgIGtpcmJ5LWJ1dHRvblxuICAgICAgICAgICpuZ0lmPVwiYWN0aW9uQnV0dG9uVGV4dCAmJiAhZXh0ZXJuYWxMaW5rXCJcbiAgICAgICAgICBbYXR0ZW50aW9uTGV2ZWxdPVwiYmFja2dyb3VuZEJsdXIgPT09ICdub25lJyA/ICczJyA6ICcyJ1wiXG4gICAgICAgICAgc2l6ZT1cInNtXCJcbiAgICAgICAgPlxuICAgICAgICAgIHt7IGFjdGlvbkJ1dHRvblRleHQgfX1cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPGRpdiBjbGFzcz1cImRpc21pc3NcIiAqbmdJZj1cImRpc21pc3NDbGljay5vYnNlcnZlZFwiPlxuICAgIDxidXR0b25cbiAgICAgIGtpcmJ5LWJ1dHRvblxuICAgICAgKGNsaWNrKT1cImRpc21pc3NDbGlja2VkKCRldmVudClcIlxuICAgICAgW2F0dGVudGlvbkxldmVsXT1cImJhY2tncm91bmRCbHVyID09PSAnbm9uZScgPyAnMycgOiAnMidcIlxuICAgICAgW3Nob3dJY29uT25seV09XCJ0cnVlXCJcbiAgICAgIHNpemU9XCJ4c1wiXG4gICAgPlxuICAgICAgPGtpcmJ5LWljb24gbmFtZT1cImNsb3NlXCI+PC9raXJieS1pY29uPlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=

package/esm2022/image-banner/index.mjs

@@ -0,0 +1,2 @@
+export { ImageBannerComponent } from './image-banner.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9pbWFnZS1iYW5uZXIvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLDBCQUEwQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgSW1hZ2VCYW5uZXJDb21wb25lbnQgfSBmcm9tICcuL2ltYWdlLWJhbm5lci5jb21wb25lbnQnO1xuIl19

package/esm2022/image-banner/kirbydesign-extensions-angular-image-banner.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2lyYnlkZXNpZ24tZXh0ZW5zaW9ucy1hbmd1bGFyLWltYWdlLWJhbm5lci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2ltYWdlLWJhbm5lci9zcmMva2lyYnlkZXNpZ24tZXh0ZW5zaW9ucy1hbmd1bGFyLWltYWdlLWJhbm5lci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==

package/esm2022/index.mjs

@@ -0,0 +1,5 @@
+//  All components should be imported through their individual entry-points.
+// This file and empty export is needed to satisfy ng_packagr.
+// This workaround is inspired by Material Design https://github.com/angular/components/blob/main/src/material/index.ts
+export default {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSw0RUFBNEU7QUFDNUUsOERBQThEO0FBQzlELHVIQUF1SDtBQUN2SCxlQUFlLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vICBBbGwgY29tcG9uZW50cyBzaG91bGQgYmUgaW1wb3J0ZWQgdGhyb3VnaCB0aGVpciBpbmRpdmlkdWFsIGVudHJ5LXBvaW50cy5cbi8vIFRoaXMgZmlsZSBhbmQgZW1wdHkgZXhwb3J0IGlzIG5lZWRlZCB0byBzYXRpc2Z5IG5nX3BhY2thZ3IuXG4vLyBUaGlzIHdvcmthcm91bmQgaXMgaW5zcGlyZWQgYnkgTWF0ZXJpYWwgRGVzaWduIGh0dHBzOi8vZ2l0aHViLmNvbS9hbmd1bGFyL2NvbXBvbmVudHMvYmxvYi9tYWluL3NyYy9tYXRlcmlhbC9pbmRleC50c1xuZXhwb3J0IGRlZmF1bHQge307XG4iXX0=

package/esm2022/kirbydesign-extensions-angular.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2lyYnlkZXNpZ24tZXh0ZW5zaW9ucy1hbmd1bGFyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4va2lyYnlkZXNpZ24tZXh0ZW5zaW9ucy1hbmd1bGFyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19

package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs

@@ -0,0 +1,69 @@
+import * as i4 from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, HostBinding, Output } from '@angular/core';
+import * as i1 from '@kirbydesign/designsystem/card';
+import { CardModule } from '@kirbydesign/designsystem/card';
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import * as i3 from '@kirbydesign/designsystem/icon';
+import { IconModule } from '@kirbydesign/designsystem/icon';
+import * as i2 from '@kirbydesign/designsystem/shared';
+
+class ImageBannerComponent {
+    constructor() {
+        /**
+         * The blur-effect used for the background.
+         */
+        this.backgroundBlur = 'dark';
+        /**
+         * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.
+         */
+        this.bannerClick = new EventEmitter();
+        /**
+         * If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.
+         */
+        this.dismissClick = new EventEmitter();
+    }
+    bannerClicked(event) {
+        const eventTarget = event.target;
+        const dismissButtonClicked = eventTarget.closest('.dismiss');
+        if (dismissButtonClicked)
+            return;
+        this.bannerClick.emit(event);
+    }
+    dismissClicked(event) {
+        this.dismissClick.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ImageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: ImageBannerComponent, isStandalone: true, selector: "kirby-x-image-banner", inputs: { title: "title", imagePath: "imagePath", bodyText: "bodyText", actionButtonText: "actionButtonText", externalLink: "externalLink", backgroundBlur: "backgroundBlur" }, outputs: { bannerClick: "bannerClick", dismissClick: "dismissClick" }, host: { properties: { "class": "this.backgroundBlur" } }, ngImport: i0, template: "<kirby-card *ngIf=\"externalLink\" [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\">\n  <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<kirby-card\n  *ngIf=\"!externalLink\"\n  [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\"\n  (click)=\"bannerClicked($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<ng-template #sharedCardContent>\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <!-- When an external link is supplied, this anchor tag expands and fills the entire banner so users can click anywhere or focus the banner -->\n  <a *ngIf=\"externalLink\" class=\"main-content-anchor\" [href]=\"externalLink\" target=\"_blank\"></a>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"main-content-header\">\n        <p class=\"kirby-text-normal-bold\">\n          {{ title }}\n        </p>\n      </div>\n\n      <div class=\"main-content-body\">\n        <div class=\"main-content-body-text\">\n          <span class=\"kirby-text-small\">\n            {{ bodyText }}\n          </span>\n        </div>\n\n        <ng-container *ngIf=\"externalLink\">\n          <!-- On large screens we also show a button-like anchor tag in addition to the entire banner anchor -->\n          <a\n            kirby-button\n            class=\"main-content-body-action-text\"\n            [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n            [showIconOnly]=\"!actionButtonText\"\n            [href]=\"externalLink\"\n            target=\"_blank\"\n            size=\"sm\"\n          >\n            {{ actionButtonText }}\n            <kirby-icon name=\"link\"></kirby-icon>\n          </a>\n\n          <div class=\"main-content-body-action-link\">\n            <kirby-icon name=\"link\"></kirby-icon>\n          </div>\n        </ng-container>\n\n        <button\n          class=\"main-content-body-action-text\"\n          kirby-button\n          *ngIf=\"actionButtonText && !externalLink\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"dismiss\" *ngIf=\"dismissClick.observed\">\n    <button\n      kirby-button\n      (click)=\"dismissClicked($event)\"\n      [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n      [showIconOnly]=\"true\"\n      size=\"xs\"\n    >\n      <kirby-icon name=\"close\"></kirby-icon>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host(.none) .blur-image{display:none}@media (max-width: 631px){:host(.none) .dismiss{--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)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(60px) brightness(.8)}:host(.light) .blur-image{filter:blur(60px) brightness(1.3)}.blur-image-wrapper{position:absolute;inset:-180px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@media (min-width: 632px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@media (min-width: 632px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;min-height:84px;box-sizing:border-box;flex-direction:column;padding:12px 0 8px 8px;overflow:hidden}@media (min-width: 632px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-anchor{position:absolute;inset:0}.main-content-header{margin-right:40px}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@media (min-width: 632px){.main-content-image{height:164px}}.main-content-body{display:flex;justify-content:space-between;gap:16px;height:100%}@media (min-width: 632px){.main-content-body{flex-direction:column;max-width:324px}}@media (min-width: 632px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:block;overflow:hidden;max-height:40px}@media (min-width: 632px){.main-content-body-text{padding-inline-end:48px;max-height:64px}}.main-content-body-action-text{display:none}@media (min-width: 632px){.main-content-body-action-text{align-self:start;display:inline-flex;margin:0}}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "directive", type: i1.CardAsButtonDirective, selector: "kirby-card[click]" }, { kind: "directive", type: i2.ThemeColorDirective, selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]", inputs: ["themeColor"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ImageBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kirby-x-image-banner', standalone: true, imports: [CardModule, ButtonComponent, IconModule, NgClass, CommonModule], template: "<kirby-card *ngIf=\"externalLink\" [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\">\n  <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<kirby-card\n  *ngIf=\"!externalLink\"\n  [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\"\n  (click)=\"bannerClicked($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<ng-template #sharedCardContent>\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <!-- When an external link is supplied, this anchor tag expands and fills the entire banner so users can click anywhere or focus the banner -->\n  <a *ngIf=\"externalLink\" class=\"main-content-anchor\" [href]=\"externalLink\" target=\"_blank\"></a>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"main-content-header\">\n        <p class=\"kirby-text-normal-bold\">\n          {{ title }}\n        </p>\n      </div>\n\n      <div class=\"main-content-body\">\n        <div class=\"main-content-body-text\">\n          <span class=\"kirby-text-small\">\n            {{ bodyText }}\n          </span>\n        </div>\n\n        <ng-container *ngIf=\"externalLink\">\n          <!-- On large screens we also show a button-like anchor tag in addition to the entire banner anchor -->\n          <a\n            kirby-button\n            class=\"main-content-body-action-text\"\n            [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n            [showIconOnly]=\"!actionButtonText\"\n            [href]=\"externalLink\"\n            target=\"_blank\"\n            size=\"sm\"\n          >\n            {{ actionButtonText }}\n            <kirby-icon name=\"link\"></kirby-icon>\n          </a>\n\n          <div class=\"main-content-body-action-link\">\n            <kirby-icon name=\"link\"></kirby-icon>\n          </div>\n        </ng-container>\n\n        <button\n          class=\"main-content-body-action-text\"\n          kirby-button\n          *ngIf=\"actionButtonText && !externalLink\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"dismiss\" *ngIf=\"dismissClick.observed\">\n    <button\n      kirby-button\n      (click)=\"dismissClicked($event)\"\n      [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n      [showIconOnly]=\"true\"\n      size=\"xs\"\n    >\n      <kirby-icon name=\"close\"></kirby-icon>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host(.none) .blur-image{display:none}@media (max-width: 631px){:host(.none) .dismiss{--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)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(60px) brightness(.8)}:host(.light) .blur-image{filter:blur(60px) brightness(1.3)}.blur-image-wrapper{position:absolute;inset:-180px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.main-content-wrapper{width:100%;padding:8px;box-sizing:border-box;display:flex;flex-direction:column}@media (min-width: 632px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@media (min-width: 632px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;min-height:84px;box-sizing:border-box;flex-direction:column;padding:12px 0 8px 8px;overflow:hidden}@media (min-width: 632px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-anchor{position:absolute;inset:0}.main-content-header{margin-right:40px}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@media (min-width: 632px){.main-content-image{height:164px}}.main-content-body{display:flex;justify-content:space-between;gap:16px;height:100%}@media (min-width: 632px){.main-content-body{flex-direction:column;max-width:324px}}@media (min-width: 632px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:block;overflow:hidden;max-height:40px}@media (min-width: 632px){.main-content-body-text{padding-inline-end:48px;max-height:64px}}.main-content-body-action-text{display:none}@media (min-width: 632px){.main-content-body-action-text{align-self:start;display:inline-flex;margin:0}}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], imagePath: [{
+                type: Input
+            }], bodyText: [{
+                type: Input
+            }], actionButtonText: [{
+                type: Input
+            }], externalLink: [{
+                type: Input
+            }], backgroundBlur: [{
+                type: HostBinding,
+                args: ['class']
+            }, {
+                type: Input
+            }], bannerClick: [{
+                type: Output
+            }], dismissClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ImageBannerComponent };
+//# sourceMappingURL=kirbydesign-extensions-angular-image-banner.mjs.map

package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","sources":["../../image-banner/src/image-banner.component.ts","../../image-banner/src/image-banner.component.html","../../image-banner/src/kirbydesign-extensions-angular-image-banner.ts"],"sourcesContent":["import { CommonModule, NgClass } from '@angular/common';\nimport { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { CardModule } from '@kirbydesign/designsystem/card';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\n\n@Component({\n  selector: 'kirby-x-image-banner',\n  standalone: true,\n  imports: [CardModule, ButtonComponent, IconModule, NgClass, CommonModule],\n  templateUrl: './image-banner.component.html',\n  styleUrl: './image-banner.component.scss',\n})\nexport class ImageBannerComponent {\n  /**\n   * The title placed inside the image banners header.\n   */\n  @Input() title: string | undefined;\n\n  /**\n   * The image shown on the banner, and used for the background blur effect.\n   */\n  @Input() imagePath: string | undefined;\n\n  /**\n   * The body text placed below the title.\n   */\n  @Input() bodyText: string | undefined;\n\n  /**\n   * The text of the button in the content area of the image banner.\n   */\n  @Input() actionButtonText: string | undefined;\n\n  /**\n   * When an external link is supplied the entire banner will be an anchor-tag and navigate when activated.\n   */\n  @Input() externalLink: string | undefined;\n\n  /**\n   * The blur-effect used for the background.\n   */\n  @HostBinding('class')\n  @Input()\n  backgroundBlur: 'dark' | 'light' | 'none' = 'dark';\n\n  /**\n   * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.\n   */\n  @Output() bannerClick = new EventEmitter<Event>();\n\n  /**\n   * If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.\n   */\n  @Output() dismissClick = new EventEmitter<Event>();\n\n  public bannerClicked(event: Event) {\n    const eventTarget = event.target as HTMLElement;\n    const dismissButtonClicked = eventTarget.closest('.dismiss');\n    if (dismissButtonClicked) return;\n    this.bannerClick.emit(event);\n  }\n\n  public dismissClicked(event: Event) {\n    this.dismissClick.emit(event);\n  }\n}\n","<kirby-card *ngIf=\"externalLink\" [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\">\n  <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<kirby-card\n  *ngIf=\"!externalLink\"\n  [themeColor]=\"backgroundBlur === 'none' ? 'white' : 'dark'\"\n  (click)=\"bannerClicked($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"sharedCardContent\"></ng-container>\n</kirby-card>\n\n<ng-template #sharedCardContent>\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <!-- When an external link is supplied, this anchor tag expands and fills the entire banner so users can click anywhere or focus the banner -->\n  <a *ngIf=\"externalLink\" class=\"main-content-anchor\" [href]=\"externalLink\" target=\"_blank\"></a>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"main-content-header\">\n        <p class=\"kirby-text-normal-bold\">\n          {{ title }}\n        </p>\n      </div>\n\n      <div class=\"main-content-body\">\n        <div class=\"main-content-body-text\">\n          <span class=\"kirby-text-small\">\n            {{ bodyText }}\n          </span>\n        </div>\n\n        <ng-container *ngIf=\"externalLink\">\n          <!-- On large screens we also show a button-like anchor tag in addition to the entire banner anchor -->\n          <a\n            kirby-button\n            class=\"main-content-body-action-text\"\n            [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n            [showIconOnly]=\"!actionButtonText\"\n            [href]=\"externalLink\"\n            target=\"_blank\"\n            size=\"sm\"\n          >\n            {{ actionButtonText }}\n            <kirby-icon name=\"link\"></kirby-icon>\n          </a>\n\n          <div class=\"main-content-body-action-link\">\n            <kirby-icon name=\"link\"></kirby-icon>\n          </div>\n        </ng-container>\n\n        <button\n          class=\"main-content-body-action-text\"\n          kirby-button\n          *ngIf=\"actionButtonText && !externalLink\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"dismiss\" *ngIf=\"dismissClick.observed\">\n    <button\n      kirby-button\n      (click)=\"dismissClicked($event)\"\n      [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n      [showIconOnly]=\"true\"\n      size=\"xs\"\n    >\n      <kirby-icon name=\"close\"></kirby-icon>\n    </button>\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;MAaa,oBAAoB,CAAA;AAPjC,IAAA,WAAA,GAAA;AAiCE;;AAEG;QAGH,IAAc,CAAA,cAAA,GAA8B,MAAM,CAAC;AAEnD;;AAEG;AACO,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAS,CAAC;AAElD;;AAEG;AACO,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAS,CAAC;AAYpD,KAAA;AAVQ,IAAA,aAAa,CAAC,KAAY,EAAA;AAC/B,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB,CAAC;QAChD,MAAM,oBAAoB,GAAG,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAC7D,QAAA,IAAI,oBAAoB;YAAE,OAAO;AACjC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC9B;AAEM,IAAA,cAAc,CAAC,KAAY,EAAA;AAChC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC/B;8GApDU,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECbjC,2vFAoFA,ED3EY,MAAA,EAAA,CAAA,4nEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,UAAU,ylBAAE,eAAe,EAAA,QAAA,EAAA,2DAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,EAAA,cAAA,EAAA,YAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,UAAU,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAW,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAI7D,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAPhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,EACpB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,CAAC,EAAA,QAAA,EAAA,2vFAAA,EAAA,MAAA,EAAA,CAAA,4nEAAA,CAAA,EAAA,CAAA;8BAQhE,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAKG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBAKG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAKG,gBAAgB,EAAA,CAAA;sBAAxB,KAAK;gBAKG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBAON,cAAc,EAAA,CAAA;sBAFb,WAAW;uBAAC,OAAO,CAAA;;sBACnB,KAAK;gBAMI,WAAW,EAAA,CAAA;sBAApB,MAAM;gBAKG,YAAY,EAAA,CAAA;sBAArB,MAAM;;;AEtDT;;AAEG;;;;"}

package/fesm2022/kirbydesign-extensions-angular.mjs

@@ -0,0 +1,9 @@
+//  All components should be imported through their individual entry-points.
+// This file and empty export is needed to satisfy ng_packagr.
+// This workaround is inspired by Material Design https://github.com/angular/components/blob/main/src/material/index.ts
+var index = {};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=kirbydesign-extensions-angular.mjs.map

package/fesm2022/kirbydesign-extensions-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kirbydesign-extensions-angular.mjs","sources":["../../index.ts","../../kirbydesign-extensions-angular.ts"],"sourcesContent":["//  All components should be imported through their individual entry-points.\n// This file and empty export is needed to satisfy ng_packagr.\n// This workaround is inspired by Material Design https://github.com/angular/components/blob/main/src/material/index.ts\nexport default {};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA,YAAe,EAAE;;ACHjB;;AAEG"}

package/image-banner/image-banner.component.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ImageBannerComponent {
+    /**
+     * The title placed inside the image banners header.
+     */
+    title: string | undefined;
+    /**
+     * The image shown on the banner, and used for the background blur effect.
+     */
+    imagePath: string | undefined;
+    /**
+     * The body text placed below the title.
+     */
+    bodyText: string | undefined;
+    /**
+     * The text of the button in the content area of the image banner.
+     */
+    actionButtonText: string | undefined;
+    /**
+     * When an external link is supplied the entire banner will be an anchor-tag and navigate when activated.
+     */
+    externalLink: string | undefined;
+    /**
+     * The blur-effect used for the background.
+     */
+    backgroundBlur: 'dark' | 'light' | 'none';
+    /**
+     * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.
+     */
+    bannerClick: EventEmitter<Event>;
+    /**
+     * If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.
+     */
+    dismissClick: EventEmitter<Event>;
+    bannerClicked(event: Event): void;
+    dismissClicked(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImageBannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageBannerComponent, "kirby-x-image-banner", never, { "title": { "alias": "title"; "required": false; }; "imagePath": { "alias": "imagePath"; "required": false; }; "bodyText": { "alias": "bodyText"; "required": false; }; "actionButtonText": { "alias": "actionButtonText"; "required": false; }; "externalLink": { "alias": "externalLink"; "required": false; }; "backgroundBlur": { "alias": "backgroundBlur"; "required": false; }; }, { "bannerClick": "bannerClick"; "dismissClick": "dismissClick"; }, never, never, true, never>;
+}

package/image-banner/index.d.ts

@@ -0,0 +1 @@
+export { ImageBannerComponent } from './image-banner.component';

package/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@kirbydesign/extensions-angular",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
+    "@kirbydesign/designsystem": "^10.0.0",
+    "rxjs": "~7.8.0",
+    "zone.js": "~0.14.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/kirbydesign-extensions-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/kirbydesign-extensions-angular.mjs",
+      "esm": "./esm2022/kirbydesign-extensions-angular.mjs",
+      "default": "./fesm2022/kirbydesign-extensions-angular.mjs"
+    },
+    "./image-banner": {
+      "types": "./image-banner/index.d.ts",
+      "esm2022": "./esm2022/image-banner/kirbydesign-extensions-angular-image-banner.mjs",
+      "esm": "./esm2022/image-banner/kirbydesign-extensions-angular-image-banner.mjs",
+      "default": "./fesm2022/kirbydesign-extensions-angular-image-banner.mjs"
+    }
+  }
+}