@kirbydesign/extensions-angular 1.0.0 → 1.2.0
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/README.md +3 -4
- package/esm2022/image-banner/image-banner.component.mjs +5 -5
- package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs +4 -4
- package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs.map +1 -1
- package/image-banner/image-banner.component.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
# Kirby Extensions Angular
|
|
2
2
|
The Kirby Extensions library is a collection of design guidelines and components that build on top of the core Kirby Design library.
|
|
3
|
-
The components follow the Kirby Design guidelines, but they differ from the core components by being
|
|
4
|
-
This means that components in this library
|
|
5
|
-
Though some components can also become core-candidates and graduate once they are battle-tested and initial experimentation is over.
|
|
3
|
+
The components follow the Kirby Design guidelines, but they differ from the core components by being built by the community, often with specific product-needs or requirements in mind.
|
|
4
|
+
This means that components in this library might not be universally useful to everyone, though some components can also become core-candidates and graduate once they are battle-tested and initial experimentation is over.
|
|
6
5
|
|
|
7
6
|
Extensions allow for quicker iteration and less focus on generalising behavior, while the test and especially documentation burden is also significantly lower.
|
|
8
7
|
|
|
9
|
-
Components in this library are developed and maintained by
|
|
8
|
+
Components in this library are developed and maintained by the community, with support from [Team Kirby](https://github.com/kirbydesign/designsystem/blob/develop/.github/SUPPORT.md#team-kirby).
|
|
10
9
|
|
|
11
10
|
## Using Kirby Extensions
|
|
12
11
|
|
|
@@ -33,12 +33,12 @@ export class ImageBannerComponent {
|
|
|
33
33
|
dismissClicked(event) {
|
|
34
34
|
this.dismissClick.emit(event);
|
|
35
35
|
}
|
|
36
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
37
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
36
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: ImageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
37
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", 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 header-text\">\n @if (title) {\n {{ title }}\n } @else {\n <ng-content select=\"[title]\"></ng-content>\n }\n </p>\n </div>\n\n <div class=\"main-content-body\">\n <div class=\"main-content-body-text\">\n <span class=\"kirby-text-small body-text\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\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{display:block;container-name:banner;container-type:inline-size}:host(.none) .blur-image{display:none}@container banner (width < 600px){: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}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;flex-direction:column;padding:12px 0 8px 8px;overflow:hidden}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}.main-content:has(.header-text:empty):has(.body-text:empty){padding-block-start:0}.main-content:has(.body-text:empty):has(.header-text:empty){padding-block-end:0}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-anchor{position:absolute;inset:0}.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}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;justify-content:space-between;gap:16px;height:100%}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:block;overflow:hidden;max-height:40px;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px;max-height:64px}}.main-content-body-action-text{display:none}@container banner (width >= 600px){.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"] }] }); }
|
|
38
38
|
}
|
|
39
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
39
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: ImageBannerComponent, decorators: [{
|
|
40
40
|
type: Component,
|
|
41
|
-
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}@
|
|
41
|
+
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 header-text\">\n @if (title) {\n {{ title }}\n } @else {\n <ng-content select=\"[title]\"></ng-content>\n }\n </p>\n </div>\n\n <div class=\"main-content-body\">\n <div class=\"main-content-body-text\">\n <span class=\"kirby-text-small body-text\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\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{display:block;container-name:banner;container-type:inline-size}:host(.none) .blur-image{display:none}@container banner (width < 600px){: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}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;flex-direction:column;padding:12px 0 8px 8px;overflow:hidden}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}.main-content:has(.header-text:empty):has(.body-text:empty){padding-block-start:0}.main-content:has(.body-text:empty):has(.header-text:empty){padding-block-end:0}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-anchor{position:absolute;inset:0}.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}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;justify-content:space-between;gap:16px;height:100%}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:block;overflow:hidden;max-height:40px;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px;max-height:64px}}.main-content-body-action-text{display:none}@container banner (width >= 600px){.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"] }]
|
|
42
42
|
}], propDecorators: { title: [{
|
|
43
43
|
type: Input
|
|
44
44
|
}], imagePath: [{
|
|
@@ -59,4 +59,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
|
|
|
59
59
|
}], dismissClick: [{
|
|
60
60
|
type: Output
|
|
61
61
|
}] } });
|
|
62
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2ltYWdlLWJhbm5lci9zcmMvaW1hZ2UtYmFubmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL2ltYWdlLWJhbm5lci9zcmMvaW1hZ2UtYmFubmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDcEYsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzVELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNuRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7Ozs7OztBQVM1RCxNQUFNLE9BQU8sb0JBQW9CO0lBUGpDO1FBaUNFOztXQUVHO1FBR0gsbUJBQWMsR0FBOEIsTUFBTSxDQUFDO1FBRW5EOztXQUVHO1FBQ08sZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO1FBRWxEOztXQUVHO1FBQ08saUJBQVksR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO0tBWXBEO0lBVlEsYUFBYSxDQUFDLEtBQVk7UUFDL0IsTUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFDLE1BQXFCLENBQUM7UUFDaEQsTUFBTSxvQkFBb0IsR0FBRyxXQUFXLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQzdELElBQUksb0JBQW9CO1lBQUUsT0FBTztRQUNqQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMvQixDQUFDO0lBRU0sY0FBYyxDQUFDLEtBQVk7UUFDaEMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDaEMsQ0FBQzsrR0FwRFUsb0JBQW9CO21HQUFwQixvQkFBb0IsaVlDYmpDLDZnR0E0RkEsMHZGRG5GWSxVQUFVLHlsQkFBRSxlQUFlLCtNQUFFLFVBQVUsK0hBQVcsWUFBWTs7NEZBSTdELG9CQUFvQjtrQkFQaEMsU0FBUzsrQkFDRSxzQkFBc0IsY0FDcEIsSUFBSSxXQUNQLENBQUMsVUFBVSxFQUFFLGVBQWUsRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLFlBQVksQ0FBQzs4QkFRaEUsS0FBSztzQkFBYixLQUFLO2dCQUtHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFLRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBS0csWUFBWTtzQkFBcEIsS0FBSztnQkFPTixjQUFjO3NCQUZiLFdBQVc7dUJBQUMsT0FBTzs7c0JBQ25CLEtBQUs7Z0JBTUksV0FBVztzQkFBcEIsTUFBTTtnQkFLRyxZQUFZO3NCQUFyQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlLCBOZ0NsYXNzIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2FyZE1vZHVsZSB9IGZyb20gJ0BraXJieWRlc2lnbi9kZXNpZ25zeXN0ZW0vY2FyZCc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICdAa2lyYnlkZXNpZ24vZGVzaWduc3lzdGVtL2J1dHRvbic7XG5pbXBvcnQgeyBJY29uTW9kdWxlIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9pY29uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2lyYnkteC1pbWFnZS1iYW5uZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ2FyZE1vZHVsZSwgQnV0dG9uQ29tcG9uZW50LCBJY29uTW9kdWxlLCBOZ0NsYXNzLCBDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vaW1hZ2UtYmFubmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2ltYWdlLWJhbm5lci5jb21wb25lbnQuc2NzcycsXG59KVxuZXhwb3J0IGNsYXNzIEltYWdlQmFubmVyQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFRoZSB0aXRsZSBwbGFjZWQgaW5zaWRlIHRoZSBpbWFnZSBiYW5uZXJzIGhlYWRlci5cbiAgICovXG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFRoZSBpbWFnZSBzaG93biBvbiB0aGUgYmFubmVyLCBhbmQgdXNlZCBmb3IgdGhlIGJhY2tncm91bmQgYmx1ciBlZmZlY3QuXG4gICAqL1xuICBASW5wdXQoKSBpbWFnZVBhdGg6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogVGhlIGJvZHkgdGV4dCBwbGFjZWQgYmVsb3cgdGhlIHRpdGxlLlxuICAgKi9cbiAgQElucHV0KCkgYm9keVRleHQ6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogVGhlIHRleHQgb2YgdGhlIGJ1dHRvbiBpbiB0aGUgY29udGVudCBhcmVhIG9mIHRoZSBpbWFnZSBiYW5uZXIuXG4gICAqL1xuICBASW5wdXQoKSBhY3Rpb25CdXR0b25UZXh0OiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFdoZW4gYW4gZXh0ZXJuYWwgbGluayBpcyBzdXBwbGllZCB0aGUgZW50aXJlIGJhbm5lciB3aWxsIGJlIGFuIGFuY2hvci10YWcgYW5kIG5hdmlnYXRlIHdoZW4gYWN0aXZhdGVkLlxuICAgKi9cbiAgQElucHV0KCkgZXh0ZXJuYWxMaW5rOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFRoZSBibHVyLWVmZmVjdCB1c2VkIGZvciB0aGUgYmFja2dyb3VuZC5cbiAgICovXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBASW5wdXQoKVxuICBiYWNrZ3JvdW5kQmx1cjogJ2RhcmsnIHwgJ2xpZ2h0JyB8ICdub25lJyA9ICdkYXJrJztcblxuICAvKipcbiAgICogRW1pdHRlZCBldmVyeSB0aW1lIHRoZSBiYW5uZXIgaXMgYWN0aXZhdGVkLiBUaGUgZW50aXJlIGJhbm5lciBpcyBpbnRlcmFjdGl2ZSwgYW5kIHdpbGwgYmUgYWN0aXZhdGVkIGJ5IGNsaWNrIGFuZCBrZXlib2FyZCBpbnRlcmFjdGlvbi5cbiAgICovXG4gIEBPdXRwdXQoKSBiYW5uZXJDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG5cbiAgLyoqXG4gICAqIElmIHN1YnNjcmliZWQgdG8sIGEgZGlzbWlzcyBidXR0b24gd2lsbCBiZSBzaG93bi4gRW1pdHRlZCBldmVyeSB0aW1lIHRoZSBkaXNtaXNzIGJ1dHRvbiBpcyBhY3RpdmF0ZWQgYnkgY2xpY2sgYW5kIGtleWJvYXJkIGludGVyYWN0aW9uLlxuICAgKi9cbiAgQE91dHB1dCgpIGRpc21pc3NDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG5cbiAgcHVibGljIGJhbm5lckNsaWNrZWQoZXZlbnQ6IEV2ZW50KSB7XG4gICAgY29uc3QgZXZlbnRUYXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XG4gICAgY29uc3QgZGlzbWlzc0J1dHRvbkNsaWNrZWQgPSBldmVudFRhcmdldC5jbG9zZXN0KCcuZGlzbWlzcycpO1xuICAgIGlmIChkaXNtaXNzQnV0dG9uQ2xpY2tlZCkgcmV0dXJuO1xuICAgIHRoaXMuYmFubmVyQ2xpY2suZW1pdChldmVudCk7XG4gIH1cblxuICBwdWJsaWMgZGlzbWlzc0NsaWNrZWQoZXZlbnQ6IEV2ZW50KSB7XG4gICAgdGhpcy5kaXNtaXNzQ2xpY2suZW1pdChldmVudCk7XG4gIH1cbn1cbiIsIjxraXJieS1jYXJkICpuZ0lmPVwiZXh0ZXJuYWxMaW5rXCIgW3RoZW1lQ29sb3JdPVwiYmFja2dyb3VuZEJsdXIgPT09ICdub25lJyA/ICd3aGl0ZScgOiAnZGFyaydcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInNoYXJlZENhcmRDb250ZW50XCI+PC9uZy1jb250YWluZXI+XG48L2tpcmJ5LWNhcmQ+XG5cbjxraXJieS1jYXJkXG4gICpuZ0lmPVwiIWV4dGVybmFsTGlua1wiXG4gIFt0aGVtZUNvbG9yXT1cImJhY2tncm91bmRCbHVyID09PSAnbm9uZScgPyAnd2hpdGUnIDogJ2RhcmsnXCJcbiAgKGNsaWNrKT1cImJhbm5lckNsaWNrZWQoJGV2ZW50KVwiXG4+XG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzaGFyZWRDYXJkQ29udGVudFwiPjwvbmctY29udGFpbmVyPlxuPC9raXJieS1jYXJkPlxuXG48bmctdGVtcGxhdGUgI3NoYXJlZENhcmRDb250ZW50PlxuICA8ZGl2IGNsYXNzPVwiYmx1ci1pbWFnZS13cmFwcGVyXCI+XG4gICAgPGltZyBjbGFzcz1cImJsdXItaW1hZ2VcIiBbc3JjXT1cImltYWdlUGF0aFwiIGFsdD1cIlwiIC8+XG4gIDwvZGl2PlxuXG4gIDwhLS0gV2hlbiBhbiBleHRlcm5hbCBsaW5rIGlzIHN1cHBsaWVkLCB0aGlzIGFuY2hvciB0YWcgZXhwYW5kcyBhbmQgZmlsbHMgdGhlIGVudGlyZSBiYW5uZXIgc28gdXNlcnMgY2FuIGNsaWNrIGFueXdoZXJlIG9yIGZvY3VzIHRoZSBiYW5uZXIgLS0+XG4gIDxhICpuZ0lmPVwiZXh0ZXJuYWxMaW5rXCIgY2xhc3M9XCJtYWluLWNvbnRlbnQtYW5jaG9yXCIgW2hyZWZdPVwiZXh0ZXJuYWxMaW5rXCIgdGFyZ2V0PVwiX2JsYW5rXCI+PC9hPlxuXG4gIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnQtd3JhcHBlclwiPlxuICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnQtaW1hZ2Utd3JhcHBlclwiPlxuICAgICAgPGltZyBjbGFzcz1cIm1haW4tY29udGVudC1pbWFnZVwiIFtzcmNdPVwiaW1hZ2VQYXRoXCIgYWx0PVwiXCIgLz5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnRcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnQtaGVhZGVyXCI+XG4gICAgICAgIDxwIGNsYXNzPVwia2lyYnktdGV4dC1ub3JtYWwtYm9sZCBoZWFkZXItdGV4dFwiPlxuICAgICAgICAgIEBpZiAodGl0bGUpIHtcbiAgICAgICAgICAgIHt7IHRpdGxlIH19XG4gICAgICAgICAgfSBAZWxzZSB7XG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbdGl0bGVdXCI+PC9uZy1jb250ZW50PlxuICAgICAgICAgIH1cbiAgICAgICAgPC9wPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnQtYm9keVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwibWFpbi1jb250ZW50LWJvZHktdGV4dFwiPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwia2lyYnktdGV4dC1zbWFsbCBib2R5LXRleHRcIj5cbiAgICAgICAgICAgIEBpZiAoYm9keVRleHQpIHtcbiAgICAgICAgICAgICAge3sgYm9keVRleHQgfX1cbiAgICAgICAgICAgIH0gQGVsc2Uge1xuICAgICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbYm9keVRleHRdXCI+PC9uZy1jb250ZW50PlxuICAgICAgICAgICAgfVxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImV4dGVybmFsTGlua1wiPlxuICAgICAgICAgIDwhLS0gT24gbGFyZ2Ugc2NyZWVucyB3ZSBhbHNvIHNob3cgYSBidXR0b24tbGlrZSBhbmNob3IgdGFnIGluIGFkZGl0aW9uIHRvIHRoZSBlbnRpcmUgYmFubmVyIGFuY2hvciAtLT5cbiAgICAgICAgICA8YVxuICAgICAgICAgICAga2lyYnktYnV0dG9uXG4gICAgICAgICAgICBjbGFzcz1cIm1haW4tY29udGVudC1ib2R5LWFjdGlvbi10ZXh0XCJcbiAgICAgICAgICAgIFthdHRlbnRpb25MZXZlbF09XCJiYWNrZ3JvdW5kQmx1ciA9PT0gJ25vbmUnID8gJzMnIDogJzInXCJcbiAgICAgICAgICAgIFtzaG93SWNvbk9ubHldPVwiIWFjdGlvbkJ1dHRvblRleHRcIlxuICAgICAgICAgICAgW2hyZWZdPVwiZXh0ZXJuYWxMaW5rXCJcbiAgICAgICAgICAgIHRhcmdldD1cIl9ibGFua1wiXG4gICAgICAgICAgICBzaXplPVwic21cIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIHt7IGFjdGlvbkJ1dHRvblRleHQgfX1cbiAgICAgICAgICAgIDxraXJieS1pY29uIG5hbWU9XCJsaW5rXCI+PC9raXJieS1pY29uPlxuICAgICAgICAgIDwvYT5cblxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJtYWluLWNvbnRlbnQtYm9keS1hY3Rpb24tbGlua1wiPlxuICAgICAgICAgICAgPGtpcmJ5LWljb24gbmFtZT1cImxpbmtcIj48L2tpcmJ5LWljb24+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICBjbGFzcz1cIm1haW4tY29udGVudC1ib2R5LWFjdGlvbi10ZXh0XCJcbiAgICAgICAgICBraXJieS1idXR0b25cbiAgICAgICAgICAqbmdJZj1cImFjdGlvbkJ1dHRvblRleHQgJiYgIWV4dGVybmFsTGlua1wiXG4gICAgICAgICAgW2F0dGVudGlvbkxldmVsXT1cImJhY2tncm91bmRCbHVyID09PSAnbm9uZScgPyAnMycgOiAnMidcIlxuICAgICAgICAgIHNpemU9XCJzbVwiXG4gICAgICAgID5cbiAgICAgICAgICB7eyBhY3Rpb25CdXR0b25UZXh0IH19XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXYgY2xhc3M9XCJkaXNtaXNzXCIgKm5nSWY9XCJkaXNtaXNzQ2xpY2sub2JzZXJ2ZWRcIj5cbiAgICA8YnV0dG9uXG4gICAgICBraXJieS1idXR0b25cbiAgICAgIChjbGljayk9XCJkaXNtaXNzQ2xpY2tlZCgkZXZlbnQpXCJcbiAgICAgIFthdHRlbnRpb25MZXZlbF09XCJiYWNrZ3JvdW5kQmx1ciA9PT0gJ25vbmUnID8gJzMnIDogJzInXCJcbiAgICAgIFtzaG93SWNvbk9ubHldPVwidHJ1ZVwiXG4gICAgICBzaXplPVwieHNcIlxuICAgID5cbiAgICAgIDxraXJieS1pY29uIG5hbWU9XCJjbG9zZVwiPjwva2lyYnktaWNvbj5cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19
|
|
@@ -34,12 +34,12 @@ class ImageBannerComponent {
|
|
|
34
34
|
dismissClicked(event) {
|
|
35
35
|
this.dismissClick.emit(event);
|
|
36
36
|
}
|
|
37
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
38
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
37
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: ImageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", 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 header-text\">\n @if (title) {\n {{ title }}\n } @else {\n <ng-content select=\"[title]\"></ng-content>\n }\n </p>\n </div>\n\n <div class=\"main-content-body\">\n <div class=\"main-content-body-text\">\n <span class=\"kirby-text-small body-text\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\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{display:block;container-name:banner;container-type:inline-size}:host(.none) .blur-image{display:none}@container banner (width < 600px){: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}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;flex-direction:column;padding:12px 0 8px 8px;overflow:hidden}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}.main-content:has(.header-text:empty):has(.body-text:empty){padding-block-start:0}.main-content:has(.body-text:empty):has(.header-text:empty){padding-block-end:0}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-anchor{position:absolute;inset:0}.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}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;justify-content:space-between;gap:16px;height:100%}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:block;overflow:hidden;max-height:40px;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px;max-height:64px}}.main-content-body-action-text{display:none}@container banner (width >= 600px){.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"] }] }); }
|
|
39
39
|
}
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: ImageBannerComponent, decorators: [{
|
|
41
41
|
type: Component,
|
|
42
|
-
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}@
|
|
42
|
+
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 header-text\">\n @if (title) {\n {{ title }}\n } @else {\n <ng-content select=\"[title]\"></ng-content>\n }\n </p>\n </div>\n\n <div class=\"main-content-body\">\n <div class=\"main-content-body-text\">\n <span class=\"kirby-text-small body-text\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\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{display:block;container-name:banner;container-type:inline-size}:host(.none) .blur-image{display:none}@container banner (width < 600px){: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}@container banner (width >= 600px){.main-content-wrapper{gap:16px;flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:8px}@container banner (width >= 600px){.main-content-image-wrapper{flex:1}}.main-content{display:flex;min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;flex-direction:column;padding:12px 0 8px 8px;overflow:hidden}.main-content .main-content-header{padding-inline-end:8px}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:40px}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:40px}.main-content:has(.header-text:empty):has(.body-text:empty){padding-block-start:0}.main-content:has(.body-text:empty):has(.header-text:empty){padding-block-end:0}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.main-content-anchor{position:absolute;inset:0}.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}@container banner (width >= 600px){.main-content-image{height:164px}}.main-content-body{display:flex;justify-content:space-between;gap:16px;height:100%}@container banner (width >= 600px){.main-content-body{flex-direction:column;max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:block;overflow:hidden;max-height:40px;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px;max-height:64px}}.main-content-body-action-text{display:none}@container banner (width >= 600px){.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"] }]
|
|
43
43
|
}], propDecorators: { title: [{
|
|
44
44
|
type: Input
|
|
45
45
|
}], imagePath: [{
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 header-text\">\n @if (title) {\n {{ title }}\n } @else {\n <ng-content select=\"[title]\"></ng-content>\n }\n </p>\n </div>\n\n <div class=\"main-content-body\">\n <div class=\"main-content-body-text\">\n <span class=\"kirby-text-small body-text\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\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;+GApDU,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAApB,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,6gGA4FA,EDnFY,MAAA,EAAA,CAAA,msFAAA,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;;4FAI7D,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,6gGAAA,EAAA,MAAA,EAAA,CAAA,msFAAA,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;;;;"}
|
|
@@ -36,5 +36,5 @@ export declare class ImageBannerComponent {
|
|
|
36
36
|
bannerClicked(event: Event): void;
|
|
37
37
|
dismissClicked(event: Event): void;
|
|
38
38
|
static ɵfac: i0.ɵɵFactoryDeclaration<ImageBannerComponent, never>;
|
|
39
|
-
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,
|
|
39
|
+
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, ["[title]", "[bodyText]"], true, never>;
|
|
40
40
|
}
|