@kirbydesign/extensions-angular 6.1.0 → 6.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.
|
@@ -2,9 +2,9 @@ import * as i0 from "@angular/core";
|
|
|
2
2
|
import { ChangeDetectionStrategy, Component, Directive, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, inject } from "@angular/core";
|
|
3
3
|
import { ButtonComponent } from "@kirbydesign/designsystem/button";
|
|
4
4
|
import { IconComponent } from "@kirbydesign/designsystem/icon";
|
|
5
|
-
import * as i1 from "@kirbydesign/designsystem/shared";
|
|
6
|
-
import { ResizeObserverService, ThemeColorDirective } from "@kirbydesign/designsystem/shared";
|
|
7
5
|
import { CardComponent } from "@kirbydesign/designsystem/card";
|
|
6
|
+
import * as i1 from "@kirbydesign/designsystem/shared";
|
|
7
|
+
import { ResizeObserverService } from "@kirbydesign/designsystem/shared";
|
|
8
8
|
var ImageBannerHeightDirective = class ImageBannerHeightDirective {
|
|
9
9
|
constructor() {
|
|
10
10
|
this.currentHeight = 0;
|
|
@@ -114,8 +114,8 @@ var ImageBannerComponent = class ImageBannerComponent {
|
|
|
114
114
|
} },
|
|
115
115
|
hostDirectives: [{ directive: ImageBannerHeightDirective }],
|
|
116
116
|
ngImport: i0,
|
|
117
|
-
template: "<kirby-card
|
|
118
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block}:host(.none) .blur-image{display:none}
|
|
117
|
+
template: "<kirby-card>\n <div class=\"blur-image-wrapper\">\n <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <div class=\"main-content-wrapper\">\n <div class=\"main-content-image-wrapper\">\n <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n </div>\n\n <div class=\"main-content\">\n <div class=\"text-content-layout\">\n <div class=\"main-content-header\">\n @if (title) {\n <p class=\"kirby-text-normal-bold\">\n {{ title }}\n </p>\n } @else {\n <div class=\"title kirby-text-normal-bold\">\n <ng-content select=\"[title]\"></ng-content>\n </div>\n }\n </div>\n\n <div class=\"main-content-body\">\n <p class=\"main-content-body-text kirby-text-small\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\n </p>\n </div>\n </div>\n @if (externalLink) {\n <!-- Only one of below anchors is displayed at a time -\n we want different behavior on varying screen widths -->\n <a\n kirby-button\n class=\"kirby-breakout wide-view-action kirby-surface-raised\"\n [attentionLevel]=\"'2'\"\n [href]=\"externalLink\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n\n <a\n kirby-button\n class=\"kirby-breakout narrow-view-action\"\n [href]=\"externalLink\"\n [noDecoration]=\"true\"\n [attentionLevel]=\"'2'\"\n [showIconOnly]=\"true\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n }\n\n @if (!externalLink) {\n <!-- Only one of below buttons is displayed at a time -\n we want different behavior on varying screen widths -->\n <button\n kirby-button\n class=\"kirby-breakout wide-view-action kirby-surface-raised\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"'2'\"\n >\n {{ actionButtonText }}\n </button>\n\n <button\n kirby-button\n class=\"kirby-breakout narrow-view-action kirby-surface-raised\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"'2'\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n >\n <span class=\"kirby-visually-hidden\">\n {{ actionButtonText }}\n </span>\n </button>\n }\n </div>\n </div>\n\n @if (dismissClick.observed) {\n <button\n kirby-button\n size=\"xs\"\n (click)=\"dismissClicked($event)\"\n [attentionLevel]=\"'2'\"\n [noDecoration]=\"backgroundBlur === 'none'\"\n [showIconOnly]=\"true\"\n [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n class=\"dismiss kirby-surface-raised\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n }\n</kirby-card>\n",
|
|
118
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block}:host(.none) .blur-image{display:none}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--kirby-image-banner-color-fill-dark);opacity:var(--kirby-image-banner-color-opacity-dark);z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--kirby-image-banner-color-fill-light);opacity:var(--kirby-image-banner-color-opacity-light);z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:has(.narrow-view-action:is(button):focus-visible){--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-focus)}kirby-card:has(.narrow-view-action:is(button):focus-visible):before{content:\"\";position:absolute;inset:0;border-radius:calc(var(--kirby-border-radius-n) - var(--kirby-stroke-xs));box-shadow:var(--kirby-focus-ring-md-combined-inset);pointer-events:none;z-index:1}:host(.light) kirby-card{--kirby-card-main-color: var(--kirby-image-banner-color-content-light);--kirby-card-color-fill-hover: var(--kirby-image-banner-color-fill-light-hover);--kirby-card-opacity-hover: var(--kirby-image-banner-color-opacity-light-hover);--kirby-card-color-fill-active: var(--kirby-image-banner-color-fill-light-active);--kirby-card-opacity-active: var(--kirby-image-banner-color-opacity-light-active)}:host(.dark) kirby-card{--kirby-card-main-color: var(--kirby-image-banner-color-content-dark);--kirby-card-color-fill-hover: var(--kirby-image-banner-color-fill-dark-hover);--kirby-card-opacity-hover: var(--kirby-image-banner-color-opacity-dark-hover);--kirby-card-color-fill-active: var(--kirby-image-banner-color-fill-dark-active);--kirby-card-opacity-active: var(--kirby-image-banner-color-opacity-dark-active)}.main-content-wrapper{width:100%;min-height:180px;padding:var(--kirby-spacing-xxs);box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:var(--kirby-spacing-s);flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:var(--kirby-border-radius-s)}@container banner (width >= 600px){.main-content-image-wrapper{flex:1;position:relative}}.main-content{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--kirby-spacing-s) - 2px) 0 calc(var(--kirby-spacing-xxs) - 2px) var(--kirby-spacing-xxs);overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}@container banner (width >= 600px){.main-content{flex:1;gap:var(--kirby-spacing-xs);padding:calc(var(--kirby-spacing-xs) - 2px) var(--kirby-spacing-xxs) var(--kirby-spacing-xxs) 0}}.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xl)}}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{position:absolute;inset:0;height:100%}}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{max-width:324px}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:var(--kirby-spacing-xxl)}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.kirby-breakout{position:initial;border-radius:var(--kirby-spacing-s);align-self:center}.kirby-breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:var(--kirby-spacing-m);min-width:var(--kirby-spacing-m);margin-bottom:var(--kirby-spacing-xxxs)}.narrow-view-action:is(a) kirby-icon{font-size:var(--kirby-spacing-m)}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px;opacity:var(--kirby-opacity-0)}:host .narrow-view-action:is(a){--kirby-button-background-color: transparent;--kirby-button-border-color: transparent}:host(.light) .narrow-view-action:is(a){--kirby-button-color: var(--kirby-image-banner-color-content-light)}:host(.dark) .narrow-view-action:is(a){--kirby-button-color: var(--kirby-image-banner-color-content-dark)}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex;margin-bottom:var(--kirby-spacing-xxs)}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}button.dismiss{position:absolute;top:var(--kirby-spacing-s);right:var(--kirby-spacing-s);margin:0}@container banner (width >= 600px){:host(.light) button.dismiss{--kirby-button-background-color: var(--kirby-image-banner-dismiss-color-fill-light);--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-light);--kirby-button-border-color: var(--kirby-image-banner-dismiss-color-border-light)}@media(hover:hover){:host(.light) button.dismiss:hover{--kirby-button-background-color: var( --kirby-image-banner-dismiss-color-fill-light-hover );--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-light-hover);--kirby-button-border-color: var(--kirby-image-banner-dismiss-color-border-light-hover)}}:host(.light) button.dismiss:active{--kirby-button-background-color: var( --kirby-image-banner-dismiss-color-fill-light-active );--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-light-active);--kirby-button-border-color: var( --kirby-image-banner-dismiss-color-border-light-active )}}@container banner (width >= 600px){:host(.dark) button.dismiss{--kirby-button-background-color: var(--kirby-image-banner-dismiss-color-fill-dark);--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-dark);--kirby-button-border-color: var(--kirby-image-banner-dismiss-color-border-dark)}@media(hover:hover){:host(.dark) button.dismiss:hover{--kirby-button-background-color: var( --kirby-image-banner-dismiss-color-fill-dark-hover );--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-dark-hover);--kirby-button-border-color: var(--kirby-image-banner-dismiss-color-border-dark-hover)}}:host(.dark) button.dismiss:active{--kirby-button-background-color: var( --kirby-image-banner-dismiss-color-fill-dark-active );--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-dark-active);--kirby-button-border-color: var( --kirby-image-banner-dismiss-color-border-dark-active )}}@container banner (width < 600px){:host(.none) button.dismiss{--kirby-button-background-color: var(--kirby-color-fill-raised);--kirby-button-color: var(--kirby-color-content-raised);--kirby-button-border-color: var(--kirby-color-border-raised-quiet)}@media(hover:hover){:host(.none) button.dismiss:hover{--kirby-button-background-color: var(--kirby-color-fill-raised-hover);--kirby-button-color: var(--kirby-color-content-raised-hover);--kirby-button-border-color: var(--kirby-color-border-raised-quiet-hover)}}:host(.none) button.dismiss:active{--kirby-button-background-color: var(--kirby-color-fill-raised-active);--kirby-button-color: var(--kirby-color-content-raised-active);--kirby-button-border-color: var(--kirby-color-border-raised-quiet-active)}}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:var(--kirby-x-image-banner-min-height, calc(var(--kirby-font-size-n) * var(--kirby-line-height-n) + 2 * var(--kirby-font-size-s) * var(--kirby-line-height-s)))}@container banner (width >= 600px){.text-content-layout{gap:var(--kirby-spacing-xs);min-height:initial}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-n)}@supports (text-box: trim-start text alphabetic){.kirby-text-normal-bold,.title{margin-top:0;text-box:trim-start text alphabetic}}\n"],
|
|
119
119
|
dependencies: [
|
|
120
120
|
{
|
|
121
121
|
kind: "component",
|
|
@@ -149,12 +149,6 @@ var ImageBannerComponent = class ImageBannerComponent {
|
|
|
149
149
|
type: IconComponent,
|
|
150
150
|
selector: "kirby-icon",
|
|
151
151
|
inputs: ["size", "name"]
|
|
152
|
-
},
|
|
153
|
-
{
|
|
154
|
-
kind: "directive",
|
|
155
|
-
type: ThemeColorDirective,
|
|
156
|
-
selector: "kirby-avatar[themeColor], kirby-card[themeColor], kirby-icon[themeColor], kirby-progress-circle-ring[themeColor], kirby-modal-footer[themeColor], kirby-empty-state[themeColor]",
|
|
157
|
-
inputs: ["themeColor"]
|
|
158
152
|
}
|
|
159
153
|
],
|
|
160
154
|
changeDetection: i0.ChangeDetectionStrategy.Eager
|
|
@@ -173,13 +167,12 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
173
167
|
imports: [
|
|
174
168
|
CardComponent,
|
|
175
169
|
ButtonComponent,
|
|
176
|
-
IconComponent
|
|
177
|
-
ThemeColorDirective
|
|
170
|
+
IconComponent
|
|
178
171
|
],
|
|
179
172
|
hostDirectives: [ImageBannerHeightDirective],
|
|
180
173
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
181
|
-
template: "<kirby-card
|
|
182
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block}:host(.none) .blur-image{display:none}
|
|
174
|
+
template: "<kirby-card>\n <div class=\"blur-image-wrapper\">\n <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <div class=\"main-content-wrapper\">\n <div class=\"main-content-image-wrapper\">\n <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n </div>\n\n <div class=\"main-content\">\n <div class=\"text-content-layout\">\n <div class=\"main-content-header\">\n @if (title) {\n <p class=\"kirby-text-normal-bold\">\n {{ title }}\n </p>\n } @else {\n <div class=\"title kirby-text-normal-bold\">\n <ng-content select=\"[title]\"></ng-content>\n </div>\n }\n </div>\n\n <div class=\"main-content-body\">\n <p class=\"main-content-body-text kirby-text-small\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\n </p>\n </div>\n </div>\n @if (externalLink) {\n <!-- Only one of below anchors is displayed at a time -\n we want different behavior on varying screen widths -->\n <a\n kirby-button\n class=\"kirby-breakout wide-view-action kirby-surface-raised\"\n [attentionLevel]=\"'2'\"\n [href]=\"externalLink\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n\n <a\n kirby-button\n class=\"kirby-breakout narrow-view-action\"\n [href]=\"externalLink\"\n [noDecoration]=\"true\"\n [attentionLevel]=\"'2'\"\n [showIconOnly]=\"true\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n }\n\n @if (!externalLink) {\n <!-- Only one of below buttons is displayed at a time -\n we want different behavior on varying screen widths -->\n <button\n kirby-button\n class=\"kirby-breakout wide-view-action kirby-surface-raised\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"'2'\"\n >\n {{ actionButtonText }}\n </button>\n\n <button\n kirby-button\n class=\"kirby-breakout narrow-view-action kirby-surface-raised\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"'2'\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n >\n <span class=\"kirby-visually-hidden\">\n {{ actionButtonText }}\n </span>\n </button>\n }\n </div>\n </div>\n\n @if (dismissClick.observed) {\n <button\n kirby-button\n size=\"xs\"\n (click)=\"dismissClicked($event)\"\n [attentionLevel]=\"'2'\"\n [noDecoration]=\"backgroundBlur === 'none'\"\n [showIconOnly]=\"true\"\n [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n class=\"dismiss kirby-surface-raised\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n }\n</kirby-card>\n",
|
|
175
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block}:host(.none) .blur-image{display:none}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--kirby-image-banner-color-fill-dark);opacity:var(--kirby-image-banner-color-opacity-dark);z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--kirby-image-banner-color-fill-light);opacity:var(--kirby-image-banner-color-opacity-light);z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:has(.narrow-view-action:is(button):focus-visible){--kirby-card-border: var(--kirby-stroke-xs) solid var(--kirby-color-border-focus)}kirby-card:has(.narrow-view-action:is(button):focus-visible):before{content:\"\";position:absolute;inset:0;border-radius:calc(var(--kirby-border-radius-n) - var(--kirby-stroke-xs));box-shadow:var(--kirby-focus-ring-md-combined-inset);pointer-events:none;z-index:1}:host(.light) kirby-card{--kirby-card-main-color: var(--kirby-image-banner-color-content-light);--kirby-card-color-fill-hover: var(--kirby-image-banner-color-fill-light-hover);--kirby-card-opacity-hover: var(--kirby-image-banner-color-opacity-light-hover);--kirby-card-color-fill-active: var(--kirby-image-banner-color-fill-light-active);--kirby-card-opacity-active: var(--kirby-image-banner-color-opacity-light-active)}:host(.dark) kirby-card{--kirby-card-main-color: var(--kirby-image-banner-color-content-dark);--kirby-card-color-fill-hover: var(--kirby-image-banner-color-fill-dark-hover);--kirby-card-opacity-hover: var(--kirby-image-banner-color-opacity-dark-hover);--kirby-card-color-fill-active: var(--kirby-image-banner-color-fill-dark-active);--kirby-card-opacity-active: var(--kirby-image-banner-color-opacity-dark-active)}.main-content-wrapper{width:100%;min-height:180px;padding:var(--kirby-spacing-xxs);box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:var(--kirby-spacing-s);flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:var(--kirby-border-radius-s)}@container banner (width >= 600px){.main-content-image-wrapper{flex:1;position:relative}}.main-content{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--kirby-spacing-s) - 2px) 0 calc(var(--kirby-spacing-xxs) - 2px) var(--kirby-spacing-xxs);overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}@container banner (width >= 600px){.main-content{flex:1;gap:var(--kirby-spacing-xs);padding:calc(var(--kirby-spacing-xs) - 2px) var(--kirby-spacing-xxs) var(--kirby-spacing-xxs) 0}}.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xl)}}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{position:absolute;inset:0;height:100%}}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{max-width:324px}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:var(--kirby-spacing-xxl)}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.kirby-breakout{position:initial;border-radius:var(--kirby-spacing-s);align-self:center}.kirby-breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:var(--kirby-spacing-m);min-width:var(--kirby-spacing-m);margin-bottom:var(--kirby-spacing-xxxs)}.narrow-view-action:is(a) kirby-icon{font-size:var(--kirby-spacing-m)}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px;opacity:var(--kirby-opacity-0)}:host .narrow-view-action:is(a){--kirby-button-background-color: transparent;--kirby-button-border-color: transparent}:host(.light) .narrow-view-action:is(a){--kirby-button-color: var(--kirby-image-banner-color-content-light)}:host(.dark) .narrow-view-action:is(a){--kirby-button-color: var(--kirby-image-banner-color-content-dark)}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex;margin-bottom:var(--kirby-spacing-xxs)}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}button.dismiss{position:absolute;top:var(--kirby-spacing-s);right:var(--kirby-spacing-s);margin:0}@container banner (width >= 600px){:host(.light) button.dismiss{--kirby-button-background-color: var(--kirby-image-banner-dismiss-color-fill-light);--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-light);--kirby-button-border-color: var(--kirby-image-banner-dismiss-color-border-light)}@media(hover:hover){:host(.light) button.dismiss:hover{--kirby-button-background-color: var( --kirby-image-banner-dismiss-color-fill-light-hover );--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-light-hover);--kirby-button-border-color: var(--kirby-image-banner-dismiss-color-border-light-hover)}}:host(.light) button.dismiss:active{--kirby-button-background-color: var( --kirby-image-banner-dismiss-color-fill-light-active );--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-light-active);--kirby-button-border-color: var( --kirby-image-banner-dismiss-color-border-light-active )}}@container banner (width >= 600px){:host(.dark) button.dismiss{--kirby-button-background-color: var(--kirby-image-banner-dismiss-color-fill-dark);--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-dark);--kirby-button-border-color: var(--kirby-image-banner-dismiss-color-border-dark)}@media(hover:hover){:host(.dark) button.dismiss:hover{--kirby-button-background-color: var( --kirby-image-banner-dismiss-color-fill-dark-hover );--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-dark-hover);--kirby-button-border-color: var(--kirby-image-banner-dismiss-color-border-dark-hover)}}:host(.dark) button.dismiss:active{--kirby-button-background-color: var( --kirby-image-banner-dismiss-color-fill-dark-active );--kirby-button-color: var(--kirby-image-banner-dismiss-color-content-dark-active);--kirby-button-border-color: var( --kirby-image-banner-dismiss-color-border-dark-active )}}@container banner (width < 600px){:host(.none) button.dismiss{--kirby-button-background-color: var(--kirby-color-fill-raised);--kirby-button-color: var(--kirby-color-content-raised);--kirby-button-border-color: var(--kirby-color-border-raised-quiet)}@media(hover:hover){:host(.none) button.dismiss:hover{--kirby-button-background-color: var(--kirby-color-fill-raised-hover);--kirby-button-color: var(--kirby-color-content-raised-hover);--kirby-button-border-color: var(--kirby-color-border-raised-quiet-hover)}}:host(.none) button.dismiss:active{--kirby-button-background-color: var(--kirby-color-fill-raised-active);--kirby-button-color: var(--kirby-color-content-raised-active);--kirby-button-border-color: var(--kirby-color-border-raised-quiet-active)}}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:var(--kirby-x-image-banner-min-height, calc(var(--kirby-font-size-n) * var(--kirby-line-height-n) + 2 * var(--kirby-font-size-s) * var(--kirby-line-height-s)))}@container banner (width >= 600px){.text-content-layout{gap:var(--kirby-spacing-xs);min-height:initial}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-n)}@supports (text-box: trim-start text alphabetic){.kirby-text-normal-bold,.title{margin-top:0;text-box:trim-start text alphabetic}}\n"]
|
|
183
176
|
}]
|
|
184
177
|
}],
|
|
185
178
|
ctorParameters: () => [{ type: i1.TranslationService }],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","names":["i2.ImageBannerHeightDirective"],"sources":["../../image-banner/src/image-banner-height.directive.ts","../../image-banner/src/image-banner.component.ts","../../image-banner/src/image-banner.component.html"],"sourcesContent":["import { Directive, ElementRef, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n/**\n * @Description Temporary directive to ensure correct scroll position behavior on Safari.\n *\n * When navigating between stacked pages, scroll position is not correctly restored on Safari,\n * when the nested kirby-card element uses containment and the host element does not have an explicit height.\n */\n@Directive({\n selector: `[kirbyImageBannerResize]`,\n})\nexport class ImageBannerHeightDirective implements OnInit, OnDestroy {\n private currentHeight: number = 0;\n private host = inject(ElementRef);\n private resizeObserverService = inject(ResizeObserverService);\n private renderer = inject(Renderer2);\n\n ngOnInit() {\n this.resizeObserverService.observe(this.host, (entry) => this.setCardHeightOnHost(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.host);\n }\n\n private setCardHeightOnHost(entry: ResizeObserverEntry) {\n const hostElement = entry.target as HTMLElement;\n const card = hostElement.querySelector('kirby-card');\n const cardHeight = card?.getBoundingClientRect().height;\n\n if (!hostElement || !cardHeight) return;\n if (cardHeight === this.currentHeight) return;\n\n this.currentHeight = cardHeight;\n this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective, TranslationService } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ImageBannerHeightDirective } from './image-banner-height.directive';\n\n@Component({\n selector: 'kirby-x-image-banner',\n imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective],\n hostDirectives: [ImageBannerHeightDirective],\n templateUrl: './image-banner.component.html',\n styleUrl: './image-banner.component.scss',\n changeDetection: ChangeDetectionStrategy.Eager,\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 * Whether the button should be shown in narrow view or not.\n */\n @HostBinding('class.show-button-in-narrow-view')\n @Input()\n showButtonInNarrowView: boolean = false;\n\n /**\n * The text of the button in the content area of the image banner. If left empty, will default to 'Read more' (or equivalent translation for [supported locales](https://cookbook.kirby.design/#/home/localization)).\n */\n @Input() actionButtonText: string | undefined = this.translations.get('readMore');\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 /**\n * If the input imagePath results in an error, it will be reflected in this output.\n */\n @Output()\n imageError = new EventEmitter<ErrorEvent>();\n\n constructor(public translations: TranslationService) {}\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 public onImageError($event: ErrorEvent) {\n this.imageError.emit($event);\n }\n}\n","<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n <div class=\"blur-image-wrapper\">\n <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <div class=\"main-content-wrapper\">\n <div class=\"main-content-image-wrapper\">\n <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n </div>\n\n <div class=\"main-content\">\n <div class=\"text-content-layout\">\n <div class=\"main-content-header\">\n @if (title) {\n <p class=\"kirby-text-normal-bold\">\n {{ title }}\n </p>\n } @else {\n <div class=\"title kirby-text-normal-bold\">\n <ng-content select=\"[title]\"></ng-content>\n </div>\n }\n </div>\n\n <div class=\"main-content-body\">\n <p class=\"main-content-body-text kirby-text-small\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\n </p>\n </div>\n </div>\n @if (externalLink) {\n <!-- Only one of below anchors is displayed at a time -\n we want different behavior on varying screen widths -->\n <a\n kirby-button\n class=\"breakout wide-view-action\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [href]=\"externalLink\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n\n <a\n kirby-button\n class=\"breakout narrow-view-action\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [href]=\"externalLink\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n }\n\n @if (!externalLink) {\n <!-- Only one of below buttons is displayed at a time -\n we want different behavior on varying screen widths -->\n <button\n kirby-button\n class=\"breakout wide-view-action\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n >\n {{ actionButtonText }}\n </button>\n\n <button\n kirby-button\n class=\"breakout narrow-view-action\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n >\n <span class=\"kirby-visually-hidden\">\n {{ actionButtonText }}\n </span>\n </button>\n }\n </div>\n </div>\n\n @if (dismissClick.observed) {\n <button\n kirby-button\n size=\"xs\"\n (click)=\"dismissClicked($event)\"\n [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n [showIconOnly]=\"true\"\n [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n class=\"dismiss\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n }\n</kirby-card>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","names":["i2.ImageBannerHeightDirective"],"sources":["../../image-banner/src/image-banner-height.directive.ts","../../image-banner/src/image-banner.component.ts","../../image-banner/src/image-banner.component.html"],"sourcesContent":["import { Directive, ElementRef, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n/**\n * @Description Temporary directive to ensure correct scroll position behavior on Safari.\n *\n * When navigating between stacked pages, scroll position is not correctly restored on Safari,\n * when the nested kirby-card element uses containment and the host element does not have an explicit height.\n */\n@Directive({\n selector: `[kirbyImageBannerResize]`,\n})\nexport class ImageBannerHeightDirective implements OnInit, OnDestroy {\n private currentHeight: number = 0;\n private host = inject(ElementRef);\n private resizeObserverService = inject(ResizeObserverService);\n private renderer = inject(Renderer2);\n\n ngOnInit() {\n this.resizeObserverService.observe(this.host, (entry) => this.setCardHeightOnHost(entry));\n }\n\n ngOnDestroy() {\n this.resizeObserverService.unobserve(this.host);\n }\n\n private setCardHeightOnHost(entry: ResizeObserverEntry) {\n const hostElement = entry.target as HTMLElement;\n const card = hostElement.querySelector('kirby-card');\n const cardHeight = card?.getBoundingClientRect().height;\n\n if (!hostElement || !cardHeight) return;\n if (cardHeight === this.currentHeight) return;\n\n this.currentHeight = cardHeight;\n this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { TranslationService } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ImageBannerHeightDirective } from './image-banner-height.directive';\n\n@Component({\n selector: 'kirby-x-image-banner',\n imports: [CardComponent, ButtonComponent, IconComponent],\n hostDirectives: [ImageBannerHeightDirective],\n templateUrl: './image-banner.component.html',\n styleUrl: './image-banner.component.scss',\n changeDetection: ChangeDetectionStrategy.Eager,\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 * Whether the button should be shown in narrow view or not.\n */\n @HostBinding('class.show-button-in-narrow-view')\n @Input()\n showButtonInNarrowView: boolean = false;\n\n /**\n * The text of the button in the content area of the image banner. If left empty, will default to 'Read more' (or equivalent translation for [supported locales](https://cookbook.kirby.design/#/home/localization)).\n */\n @Input() actionButtonText: string | undefined = this.translations.get('readMore');\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 /**\n * If the input imagePath results in an error, it will be reflected in this output.\n */\n @Output()\n imageError = new EventEmitter<ErrorEvent>();\n\n constructor(public translations: TranslationService) {}\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 public onImageError($event: ErrorEvent) {\n this.imageError.emit($event);\n }\n}\n","<kirby-card>\n <div class=\"blur-image-wrapper\">\n <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n </div>\n\n <div class=\"main-content-wrapper\">\n <div class=\"main-content-image-wrapper\">\n <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n </div>\n\n <div class=\"main-content\">\n <div class=\"text-content-layout\">\n <div class=\"main-content-header\">\n @if (title) {\n <p class=\"kirby-text-normal-bold\">\n {{ title }}\n </p>\n } @else {\n <div class=\"title kirby-text-normal-bold\">\n <ng-content select=\"[title]\"></ng-content>\n </div>\n }\n </div>\n\n <div class=\"main-content-body\">\n <p class=\"main-content-body-text kirby-text-small\">\n @if (bodyText) {\n {{ bodyText }}\n } @else {\n <ng-content select=\"[bodyText]\"></ng-content>\n }\n </p>\n </div>\n </div>\n @if (externalLink) {\n <!-- Only one of below anchors is displayed at a time -\n we want different behavior on varying screen widths -->\n <a\n kirby-button\n class=\"kirby-breakout wide-view-action kirby-surface-raised\"\n [attentionLevel]=\"'2'\"\n [href]=\"externalLink\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n\n <a\n kirby-button\n class=\"kirby-breakout narrow-view-action\"\n [href]=\"externalLink\"\n [noDecoration]=\"true\"\n [attentionLevel]=\"'2'\"\n [showIconOnly]=\"true\"\n target=\"_blank\"\n size=\"sm\"\n >\n {{ actionButtonText }}\n <kirby-icon name=\"link\"></kirby-icon>\n </a>\n }\n\n @if (!externalLink) {\n <!-- Only one of below buttons is displayed at a time -\n we want different behavior on varying screen widths -->\n <button\n kirby-button\n class=\"kirby-breakout wide-view-action kirby-surface-raised\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"'2'\"\n >\n {{ actionButtonText }}\n </button>\n\n <button\n kirby-button\n class=\"kirby-breakout narrow-view-action kirby-surface-raised\"\n size=\"sm\"\n (click)=\"bannerClicked($event)\"\n [attentionLevel]=\"'2'\"\n [noDecoration]=\"true\"\n [showIconOnly]=\"true\"\n >\n <span class=\"kirby-visually-hidden\">\n {{ actionButtonText }}\n </span>\n </button>\n }\n </div>\n </div>\n\n @if (dismissClick.observed) {\n <button\n kirby-button\n size=\"xs\"\n (click)=\"dismissClicked($event)\"\n [attentionLevel]=\"'2'\"\n [noDecoration]=\"backgroundBlur === 'none'\"\n [showIconOnly]=\"true\"\n [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n class=\"dismiss kirby-surface-raised\"\n >\n <kirby-icon name=\"close\"></kirby-icon>\n </button>\n }\n</kirby-card>\n"],"mappings":"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"}
|