@kirbydesign/extensions-angular 4.4.0-rc.0 → 4.4.0

package/assets/spot-illustrations/document.card.dot.circle.large.svg

@@ -0,0 +1,5 @@
+<svg width="96" height="96" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+<path part="background" d="M47.5693 1.47266C55.9916 1.47266 63.8906 3.71244 70.7041 7.62793C70.6084 7.78132 70.5527 7.96309 70.5527 8.15723C70.5531 8.70917 71.0007 9.15723 71.5527 9.15723H73.0527V10.6572C73.0531 11.2092 73.5007 11.6562 74.0527 11.6562C74.6049 11.6562 75.0526 11.2084 75.0527 10.6562V10.4639C86.5826 18.9264 94.0693 32.5742 94.0693 47.9727C94.0689 73.6536 73.2503 94.4727 47.5693 94.4727C35.495 94.4727 24.4958 89.87 16.2295 82.3242C16.8138 82.4824 17.4281 82.5684 18.0625 82.5684H43.8438C44.3957 82.5681 44.8436 82.1203 44.8438 81.5684H46.8047V82.3027C46.805 84.5116 48.5958 86.3027 50.8047 86.3027H53.1748C53.6885 86.3027 54.1115 85.9147 54.168 85.416H58.2158C58.2196 85.6577 58.3252 85.8977 58.5312 86.0791L61.8369 88.9873C62.2508 89.3513 62.9149 89.3422 63.3203 88.9668C63.7253 88.5908 63.7185 87.9903 63.3047 87.626L61.8506 86.3457H71.9648C72.9399 86.3456 73.8332 85.996 74.5273 85.416H75.0049V84.9434C75.6 84.2475 75.9617 83.3455 75.9648 82.3584L76.002 70.2383C76.0085 68.0294 74.2235 66.2325 72.0146 66.2256L69.6768 66.2188C69.1768 66.2172 68.762 66.5834 68.6865 67.0625H64.6279C64.6278 66.8167 64.5231 66.5713 64.3135 66.3867L61.0078 63.4785C60.5938 63.1142 59.9288 63.1232 59.5234 63.499C59.1183 63.875 59.126 64.4755 59.54 64.8398L61.0801 66.1953H57.6924V63.9971C58.1342 63.8936 58.4638 63.4988 58.4639 63.0254V28.9395C58.4639 25.0735 55.3299 21.9395 51.4639 21.9395H18.0625C14.1965 21.9395 11.0625 25.0735 11.0625 28.9395V75.5684C11.0625 76.0386 11.1098 76.4981 11.1982 76.9424C4.86029 68.9956 1.0695 58.9274 1.06934 47.9727C1.06934 22.2914 21.8881 1.47266 47.5693 1.47266ZM70.0654 47.4141C69.5131 47.4141 69.0654 47.8628 69.0654 48.415V49.915H67.5654C67.0131 49.915 66.5654 50.3628 66.5654 50.915C66.5658 51.467 67.0134 51.915 67.5654 51.915H69.0654V53.415C69.0658 53.967 69.5134 54.4141 70.0654 54.4141C70.6176 54.4141 71.0653 53.9662 71.0654 53.4141V51.915H72.5654C73.1175 51.915 73.565 51.467 73.5654 50.915C73.5654 50.3628 73.1177 49.915 72.5654 49.915H71.0654V48.4141C71.0652 47.862 70.6176 47.4141 70.0654 47.4141ZM83.3818 35.9883C82.8296 35.9883 82.3818 36.436 82.3818 36.9883C82.3822 37.5402 82.8298 37.9883 83.3818 37.9883C83.9339 37.9883 84.3814 37.5402 84.3818 36.9883C84.3818 36.436 83.9341 35.9883 83.3818 35.9883ZM69.0811 26.5488L60.0674 27.627C59.5191 27.6927 59.1278 28.191 59.1934 28.7393C59.2592 29.2871 59.7567 29.6785 60.3047 29.6133L69.3193 28.5352C69.8675 28.4694 70.2588 27.971 70.1934 27.4229C70.1277 26.8745 69.6294 26.4832 69.0811 26.5488ZM61.7012 18.6777C61.3323 18.267 60.7 18.233 60.2891 18.6016L57.1006 21.4629C56.6897 21.8317 56.6557 22.464 57.0244 22.875C57.3932 23.2858 58.0255 23.3208 58.4365 22.9521L61.625 20.0898C62.0356 19.7209 62.0698 19.0886 61.7012 18.6777ZM54.3896 10.1875C53.8529 10.0576 53.3126 10.3872 53.1826 10.9238L51.0361 19.7939C50.9064 20.3306 51.2359 20.871 51.7725 21.001C52.309 21.1308 52.8493 20.8011 52.9795 20.2646L55.127 11.3945C55.2568 10.8578 54.9264 10.3174 54.3896 10.1875ZM32.9941 9.80176C32.1657 9.80176 31.4941 10.4733 31.4941 11.3018C31.4943 12.1301 32.1658 12.8018 32.9941 12.8018C33.8225 12.8018 34.494 12.1301 34.4941 11.3018C34.4941 10.4733 33.8226 9.80176 32.9941 9.80176Z" fill="silver"/>
+<path part="highlight" d="M22.7324 34.9482C24.4251 34.9482 25.7979 36.321 25.7979 38.0137C25.7977 39.7062 24.425 41.0781 22.7324 41.0781C21.0401 41.0779 19.6682 39.706 19.668 38.0137C19.668 36.3211 21.0399 34.9484 22.7324 34.9482Z" fill="cadetblue"/>
+<path part="outline" d="M72.0215 66.252C74.2303 66.2589 76.0154 68.0558 76.0088 70.2646L75.9717 82.3848C75.9647 84.5888 74.1757 86.3719 71.9717 86.3721H61.8574L63.3115 87.6523C63.7253 88.0167 63.7322 88.6172 63.3271 88.9932C62.9217 89.3685 62.2577 89.3777 61.8438 89.0137L58.5381 86.1055C58.1244 85.7413 58.117 85.1407 58.5215 84.7646L58.5244 84.7617C58.5718 84.6939 58.6291 84.6294 58.6973 84.5723L61.8984 81.8896C62.3223 81.5349 62.9867 81.5598 63.3818 81.9443C63.7764 82.3291 63.7525 82.9292 63.3291 83.2842L62.0293 84.3721H71.9717C73.0734 84.3718 73.9679 83.4806 73.9717 82.3789L74.0088 70.2588C74.012 69.1544 73.1191 68.2554 72.0146 68.252L69.6768 68.2451C69.1248 68.2432 68.6792 67.7941 68.6807 67.2422C68.6826 66.6901 69.1315 66.2434 69.6836 66.2451L72.0215 66.252ZM59.5303 63.5264C59.9356 63.1505 60.5995 63.1408 61.0137 63.5049L64.3203 66.4131C64.7341 66.7773 64.7407 67.3779 64.3359 67.7539C64.3329 67.7567 64.3292 67.76 64.3262 67.7627C64.2799 67.8275 64.2246 67.8895 64.1592 67.9443L60.958 70.627C60.5342 70.9816 59.8697 70.9576 59.4746 70.5732C59.0798 70.1887 59.1033 69.5886 59.5264 69.2334L60.7344 68.2217H50.8115C49.707 68.2217 48.8115 69.1171 48.8115 70.2217V82.3291C48.8118 83.4334 49.7072 84.329 50.8115 84.3291H53.1816C53.7338 84.3292 54.1816 84.7769 54.1816 85.3291C54.1813 85.8811 53.7337 86.329 53.1816 86.3291H50.8115C48.6026 86.329 46.8118 84.5379 46.8115 82.3291V70.2217C46.8115 68.0126 48.6024 66.2217 50.8115 66.2217H61.0859L59.5459 64.8662C59.1324 64.502 59.1257 63.9023 59.5303 63.5264ZM51.4707 21.9658C55.3367 21.9658 58.4707 25.0998 58.4707 28.9658V63.0518C58.4703 63.6037 58.0227 64.0518 57.4707 64.0518C56.9188 64.0515 56.4711 63.6036 56.4707 63.0518V28.9658C56.4707 26.2044 54.2321 23.9658 51.4707 23.9658H18.0693C15.3079 23.9658 13.0693 26.2044 13.0693 28.9658V75.5947C13.0698 78.3558 15.3082 80.5947 18.0693 80.5947H43.8506C44.4027 80.595 44.8506 81.0426 44.8506 81.5947C44.8501 82.1465 44.4024 82.5945 43.8506 82.5947H18.0693C14.2036 82.5947 11.0698 79.4603 11.0693 75.5947V28.9658C11.0693 25.0998 14.2033 21.9658 18.0693 21.9658H51.4707ZM67.0557 79.3525C67.6868 79.3527 68.1982 79.865 68.1982 80.4961C68.198 81.127 67.6866 81.6385 67.0557 81.6387C66.4246 81.6387 65.9124 81.1271 65.9121 80.4961C65.9121 79.8649 66.4244 79.3525 67.0557 79.3525ZM70.542 79.3525C71.1731 79.3527 71.6846 79.865 71.6846 80.4961C71.6843 81.127 71.1729 81.6385 70.542 81.6387C69.9109 81.6387 69.3987 81.1271 69.3984 80.4961C69.3984 79.8649 69.9108 79.3525 70.542 79.3525ZM57.4717 71.6611C58.0238 71.6613 58.4717 72.1089 58.4717 72.6611C58.4715 73.2131 58.0237 73.661 57.4717 73.6611H51.8936C51.3415 73.6611 50.8938 73.2132 50.8936 72.6611C50.8936 72.1089 51.3413 71.6612 51.8936 71.6611H57.4717ZM22.9463 59.7217C25.1401 59.8328 26.8848 61.6467 26.8848 63.8682L26.8789 64.0811C26.7675 66.2744 24.9544 68.0193 22.7334 68.0195L22.5195 68.0137C20.3966 67.9062 18.6948 66.2039 18.5869 64.0811L18.5811 63.8682C18.5811 61.5752 20.4404 59.7158 22.7334 59.7158L22.9463 59.7217ZM22.7334 61.7158C21.545 61.7158 20.5811 62.6797 20.5811 63.8682C20.5817 65.056 21.5454 66.0195 22.7334 66.0195C23.9212 66.0193 24.8841 65.0559 24.8848 63.8682C24.8848 62.6799 23.9216 61.7161 22.7334 61.7158ZM43.8311 63.0811C44.3831 63.0899 44.8241 63.5446 44.8154 64.0967C44.8064 64.6485 44.3517 65.0886 43.7998 65.0801L30.1982 64.8672C29.6461 64.8585 29.2054 64.4036 29.2139 63.8516C29.2225 63.2994 29.6773 62.8586 30.2295 62.8672L43.8311 63.0811ZM22.9463 46.7949C25.1401 46.906 26.8848 48.72 26.8848 50.9414L26.8789 51.1543C26.7675 53.3476 24.9544 55.0925 22.7334 55.0928L22.5195 55.0869C20.3966 54.9794 18.6948 53.2771 18.5869 51.1543L18.5811 50.9414C18.5811 48.6484 20.4404 46.7891 22.7334 46.7891L22.9463 46.7949ZM70.0732 47.4404C70.6255 47.4404 71.0732 47.8881 71.0732 48.4404V49.9404H72.5732C73.1255 49.9404 73.5732 50.3881 73.5732 50.9404C73.5731 51.4926 73.1254 51.9404 72.5732 51.9404H71.0732V53.4404C71.0731 53.9926 70.6254 54.4404 70.0732 54.4404C69.521 54.4404 69.0734 53.9926 69.0732 53.4404V51.9404H67.5732C67.021 51.9404 66.5734 51.4926 66.5732 50.9404C66.5732 50.3881 67.021 49.9404 67.5732 49.9404H69.0732V48.4404C69.0732 47.8881 69.521 47.4404 70.0732 47.4404ZM22.7334 48.7891C21.545 48.7891 20.5811 49.753 20.5811 50.9414C20.5817 52.1293 21.5454 53.0928 22.7334 53.0928C23.9212 53.0925 24.8841 52.1291 24.8848 50.9414C24.8848 49.7531 23.9216 48.7893 22.7334 48.7891ZM49.2607 49.9404C49.813 49.9404 50.2607 50.3881 50.2607 50.9404C50.2606 51.4926 49.8129 51.9404 49.2607 51.9404H30.2139C29.6617 51.9404 29.214 51.4926 29.2139 50.9404C29.2139 50.3881 29.6616 49.9404 30.2139 49.9404H49.2607ZM22.9463 33.8682C25.1401 33.9793 26.8848 35.7932 26.8848 38.0146L26.8789 38.2275C26.7675 40.4209 24.9544 42.1658 22.7334 42.166L22.5195 42.1602C20.3966 42.0527 18.6948 40.3504 18.5869 38.2275L18.5811 38.0146C18.5811 35.7216 20.4404 33.8623 22.7334 33.8623L22.9463 33.8682ZM22.7334 35.8623C21.545 35.8623 20.5811 36.8262 20.5811 38.0146C20.5817 39.2025 21.5454 40.166 22.7334 40.166C23.9212 40.1658 24.8841 39.2024 24.8848 38.0146C24.8848 36.8264 23.9216 35.8626 22.7334 35.8623ZM49.2607 37.0137C49.813 37.0137 50.2607 37.4614 50.2607 38.0137C50.2606 38.5658 49.8129 39.0137 49.2607 39.0137H30.2139C29.6617 39.0137 29.214 38.5658 29.2139 38.0137C29.2139 37.4614 29.6616 37.0137 30.2139 37.0137H49.2607ZM83.3896 36.0137C83.9419 36.0137 84.3896 36.4614 84.3896 37.0137C84.3895 37.5658 83.9419 38.0137 83.3896 38.0137C82.8374 38.0137 82.3898 37.5658 82.3896 37.0137C82.3896 36.4614 82.8374 36.0137 83.3896 36.0137ZM69.0889 26.5752C69.6372 26.5096 70.1346 26.9009 70.2002 27.4492C70.2657 27.9975 69.8745 28.495 69.3262 28.5605L60.3125 29.6396C59.7643 29.7051 59.2669 29.3128 59.2012 28.7646C59.1358 28.2164 59.527 27.7189 60.0752 27.6533L69.0889 26.5752ZM60.2969 18.6279C60.7079 18.2594 61.3402 18.2932 61.709 18.7041C62.0776 19.1151 62.0427 19.7474 61.6318 20.1162L58.4443 22.9775C58.0334 23.3463 57.4001 23.3122 57.0312 22.9014C56.6628 22.4904 56.6976 21.858 57.1084 21.4893L60.2969 18.6279ZM53.1904 10.9502C53.3204 10.4134 53.8607 10.084 54.3975 10.2139C54.934 10.344 55.2637 10.8843 55.1338 11.4209L52.9873 20.29C52.8573 20.8266 52.3169 21.157 51.7803 21.0273C51.2437 20.8975 50.9134 20.3569 51.043 19.8203L53.1904 10.9502ZM33.001 9.82813C33.8294 9.82813 34.501 10.4997 34.501 11.3281C34.5006 12.1562 33.8292 12.8281 33.001 12.8281C32.1728 12.8281 31.5014 12.1562 31.501 11.3281C31.501 10.4997 32.1725 9.82813 33.001 9.82813ZM74.0596 4.68262C74.6119 4.68262 75.0596 5.13033 75.0596 5.68262V7.18262H76.5596C77.1119 7.18262 77.5596 7.63033 77.5596 8.18262C77.5594 8.73479 77.1118 9.18262 76.5596 9.18262H75.0596V10.6826C75.0594 11.2348 74.6118 11.6826 74.0596 11.6826C73.5074 11.6826 73.0597 11.2348 73.0596 10.6826V9.18262H71.5596C71.0074 9.18262 70.5597 8.73479 70.5596 8.18262C70.5596 7.63033 71.0073 7.18262 71.5596 7.18262H73.0596V5.68262C73.0596 5.13033 73.5073 4.68262 74.0596 4.68262Z" fill="black"/>
+</svg>

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

@@ -89,7 +89,10 @@ class ComboboxComponent {
         if (!this._searchItems) {
             return;
         }
-        this.focusedItem = this._searchItems[0];
+        // only set the focused item of the search result, if the input has value
+        if (this.textInput?.nativeElement?.value) {
+            this.focusedItem = this._searchItems[0];
+        }
     }
     get items() {
         return this._items;
@@ -148,7 +151,7 @@ class ComboboxComponent {
             return;
         }
         this.renderer.setAttribute(element.nativeElement, 'aria-setsize', setsize.toString());
-        this.renderer.setAttribute(element.nativeElement, 'aria-posintset', `${index + 1}`);
+        this.renderer.setAttribute(element.nativeElement, 'aria-posinset', `${index + 1}`);
     }
     /**
      * The direction in which the dropdown should open relative to the input.
@@ -256,6 +259,11 @@ class ComboboxComponent {
          * The text to display when the search returns no results.
          */
         this.noSearchResultsText = 'No results found.';
+        /**
+         * The text announced by screen readers when the selection is cleared.
+         */
+        this.selectionClearedAnnouncement = 'Selection cleared.';
+        this._liveRegionText = '';
         /**
          * The name of the property to use as the display text for each item.
          */
@@ -434,12 +442,15 @@ class ComboboxComponent {
     selectItemByInput(input) {
         this.selectedItem = this.findItemByInput(input);
     }
-    updateSearchResults(event) {
+    onInput(event) {
         if (!this.isOpen) {
             this.open();
         }
         const input = event.target;
-        this.searchItems = input.value ? this.searchFunction(input.value, this.items) : this.items;
+        if (!input.value) {
+            this.clearSelection();
+        }
+        this.updateSearchResults(input.value);
         // Screen readers (VoiceOver/NVDA) may move real browser focus to a list-item button.
         // When the list re-renders after filtering, that button is removed from the DOM and
         // focus falls to `document.body`. Restore it to the input so the user can keep typing
@@ -448,6 +459,25 @@ class ComboboxComponent {
             this.textInput?.nativeElement.focus();
         }
     }
+    clearSelection() {
+        this.selectItem(undefined);
+        // Reset after a short delay so the same message can be announced again on subsequent clears
+        this.announce(this.selectionClearedAnnouncement);
+    }
+    announce(message) {
+        clearTimeout(this._announceTimeout);
+        this._liveRegionText = '';
+        this._announceTimeout = setTimeout(() => {
+            this._liveRegionText = message;
+            this.cdr.markForCheck();
+        }, 100);
+    }
+    updateSearchResults(inputValue) {
+        this.searchItems = inputValue ? this.searchFunction(inputValue, this.items) : this.items;
+        if (inputValue && this.searchItems.length === 0) {
+            this.announce(this.noSearchResultsText);
+        }
+    }
     onPopoverWillHide() {
         this.state = OpenState.closed;
         this.rootElement.nativeElement.focus();
@@ -670,7 +700,7 @@ class ComboboxComponent {
         this.virtualScrollViewport?.scrollToIndex(focusedIndex);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ComboboxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ComboboxComponent, isStandalone: true, selector: "kirby-x-combobox", inputs: { noSearchResultsText: "noSearchResultsText", itemTextProperty: "itemTextProperty", itemHeight: "itemHeight", itemIdProperty: "itemIdProperty", searchFunction: "searchFunction", items: "items", selectedItem: "selectedItem", placeholder: "placeholder", popout: "popout", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size" }, outputs: { hasErrorChange: "hasErrorChange", change: "change" }, host: { listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onTouchStart($event)", "focusout": "onFocusOut()", "keydown.tab": "onTab()", "keydown.escape": "onEscape()", "keydown.enter": "onEnterO($event)", "keydown.arrowUp": "onArrowKeys($event)", "keydown.arrowDown": "onArrowKeys($event)", "keydown.pageUp": "onArrowKeys($event)", "keydown.pageDown": "onArrowKeys($event)", "keydown.home": "onArrowKeys($event)", "keydown.end": "onArrowKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.has-value": "this.hasValue" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ComboboxComponent, isStandalone: true, selector: "kirby-x-combobox", inputs: { noSearchResultsText: "noSearchResultsText", selectionClearedAnnouncement: "selectionClearedAnnouncement", itemTextProperty: "itemTextProperty", itemHeight: "itemHeight", itemIdProperty: "itemIdProperty", searchFunction: "searchFunction", items: "items", selectedItem: "selectedItem", placeholder: "placeholder", popout: "popout", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size" }, outputs: { hasErrorChange: "hasErrorChange", change: "change" }, host: { listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onTouchStart($event)", "focusout": "onFocusOut()", "keydown.tab": "onTab()", "keydown.escape": "onEscape()", "keydown.enter": "onEnterO($event)", "keydown.arrowUp": "onArrowKeys($event)", "keydown.arrowDown": "onArrowKeys($event)", "keydown.pageUp": "onArrowKeys($event)", "keydown.pageDown": "onArrowKeys($event)", "keydown.home": "onArrowKeys($event)", "keydown.end": "onArrowKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.has-value": "this.hasValue" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ComboboxComponent),
@@ -680,7 +710,7 @@ class ComboboxComponent {
                 provide: FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => ComboboxComponent),
             },
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "rootElement", first: true, predicate: ["rootElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "textInput", first: true, predicate: InputComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div (click)=\"onToggle($event)\" #rootElement>\n  <input\n    kirby-input\n    type=\"text\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    [hasError]=\"hasError\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"updateSearchResults($event)\"\n  />\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\" kirby-affix=\"suffix\"></kirby-icon>\n</div>\n\n<kirby-popover\n  [target]=\"rootElement\"\n  [popout]=\"popout\"\n  (click)=\"onPopoverClick()\"\n  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item [attr.aria-live]=\"'polite'\">\n        <p class=\"kirby-item-title no-results\">{{ noSearchResultsText }}</p>\n      </kirby-item>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"combobox-viewport\"\n        role=\"listbox\"\n        minBufferPx=\"1240\"\n        maxBufferPx=\"1620\"\n        [itemSize]=\"itemHeight\"\n        [style.height.px]=\"viewportHeight\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of searchItems\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate || defaultItemTemplate;\n              context: {\n                $implicit: item,\n                selected: item === selectedItem,\n                focused: item === focusedItem,\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-focused=\"focused\">\n  <kirby-item\n    role=\"option\"\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    [class.focused]=\"focused\"\n    [attr.id]=\"getItemId(item)\"\n    [attr.aria-selected]=\"selected\"\n    (click)=\"onItemSelect(item)\"\n  >\n    <p class=\"kirby-item-title\">{{ getItemText(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}@media(hover:hover)and (pointer:fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host div>input[kirby-input]{padding-right:40px}:host div>input[kirby-input]:disabled~kirby-icon{color:var(--kirby-semi-dark-shade)}:host div>kirby-icon{display:flex;align-items:center;position:absolute;top:0;bottom:0;right:12px}:host.has-value>div>input[kirby-input]{text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{display:flex;flex-direction:column;max-height:352px;overflow:hidden;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;max-width:calc(100vw - 32px);min-width:288px}@media(min-width:321px){kirby-card{min-width:343px}}.combobox-viewport{display:block;width:100%}.no-results{color:var(--kirby-text-color-semi-dark)}\n"], dependencies: [{ kind: "component", type: InputComponent, selector: "input[kirby-input]", inputs: ["type", "size", "borderless", "hasError", "autocomplete", "autocorrect", "value", "maxlength", "inputmode"], outputs: ["hasErrorChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: AffixDirective, selector: "[kirby-affix]", inputs: ["kirby-affix"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "rootElement", first: true, predicate: ["rootElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "textInput", first: true, predicate: InputComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<span class=\"kirby-visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ _liveRegionText }}\n</span>\n<div (click)=\"onToggle($event)\" #rootElement>\n  <input\n    kirby-input\n    type=\"text\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    [hasError]=\"hasError\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"onInput($event)\"\n  />\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\" kirby-affix=\"suffix\"></kirby-icon>\n</div>\n\n<kirby-popover\n  [target]=\"rootElement\"\n  [popout]=\"popout\"\n  (click)=\"onPopoverClick()\"\n  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item>\n        <p class=\"kirby-item-title no-results\">{{ noSearchResultsText }}</p>\n      </kirby-item>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"combobox-viewport\"\n        role=\"listbox\"\n        minBufferPx=\"1240\"\n        maxBufferPx=\"1620\"\n        [itemSize]=\"itemHeight\"\n        [style.height.px]=\"viewportHeight\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of searchItems\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate || defaultItemTemplate;\n              context: {\n                $implicit: item,\n                selected: item === selectedItem,\n                focused: item === focusedItem,\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-focused=\"focused\">\n  <kirby-item\n    role=\"option\"\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    [class.focused]=\"focused\"\n    [attr.id]=\"getItemId(item)\"\n    [attr.aria-selected]=\"selected\"\n    (click)=\"onItemSelect(item)\"\n  >\n    <p class=\"kirby-item-title\">{{ getItemText(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n", styles: ["@media(hover:hover)and (pointer:fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host div>input[kirby-input]{padding-right:40px}:host div>input[kirby-input]:disabled~kirby-icon{color:var(--kirby-semi-dark-shade)}:host div>kirby-icon{display:flex;align-items:center;position:absolute;top:0;bottom:0;right:12px}:host.has-value>div>input[kirby-input]{text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{display:flex;flex-direction:column;max-height:352px;overflow:hidden;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;max-width:calc(100vw - 32px);min-width:288px}@media(min-width:321px){kirby-card{min-width:343px}}.combobox-viewport{display:block;width:100%}.no-results{color:var(--kirby-text-color-semi-dark)}\n"], dependencies: [{ kind: "component", type: InputComponent, selector: "input[kirby-input]", inputs: ["type", "size", "borderless", "hasError", "autocomplete", "autocorrect", "value", "maxlength", "inputmode"], outputs: ["hasErrorChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: AffixDirective, selector: "[kirby-affix]", inputs: ["kirby-affix"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -705,9 +735,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                         CdkFixedSizeVirtualScroll,
                         CdkVirtualScrollViewport,
                         CdkVirtualForOf,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div (click)=\"onToggle($event)\" #rootElement>\n  <input\n    kirby-input\n    type=\"text\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    [hasError]=\"hasError\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"updateSearchResults($event)\"\n  />\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\" kirby-affix=\"suffix\"></kirby-icon>\n</div>\n\n<kirby-popover\n  [target]=\"rootElement\"\n  [popout]=\"popout\"\n  (click)=\"onPopoverClick()\"\n  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item [attr.aria-live]=\"'polite'\">\n        <p class=\"kirby-item-title no-results\">{{ noSearchResultsText }}</p>\n      </kirby-item>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"combobox-viewport\"\n        role=\"listbox\"\n        minBufferPx=\"1240\"\n        maxBufferPx=\"1620\"\n        [itemSize]=\"itemHeight\"\n        [style.height.px]=\"viewportHeight\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of searchItems\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate || defaultItemTemplate;\n              context: {\n                $implicit: item,\n                selected: item === selectedItem,\n                focused: item === focusedItem,\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-focused=\"focused\">\n  <kirby-item\n    role=\"option\"\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    [class.focused]=\"focused\"\n    [attr.id]=\"getItemId(item)\"\n    [attr.aria-selected]=\"selected\"\n    (click)=\"onItemSelect(item)\"\n  >\n    <p class=\"kirby-item-title\">{{ getItemText(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}@media(hover:hover)and (pointer:fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host div>input[kirby-input]{padding-right:40px}:host div>input[kirby-input]:disabled~kirby-icon{color:var(--kirby-semi-dark-shade)}:host div>kirby-icon{display:flex;align-items:center;position:absolute;top:0;bottom:0;right:12px}:host.has-value>div>input[kirby-input]{text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{display:flex;flex-direction:column;max-height:352px;overflow:hidden;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;max-width:calc(100vw - 32px);min-width:288px}@media(min-width:321px){kirby-card{min-width:343px}}.combobox-viewport{display:block;width:100%}.no-results{color:var(--kirby-text-color-semi-dark)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"kirby-visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ _liveRegionText }}\n</span>\n<div (click)=\"onToggle($event)\" #rootElement>\n  <input\n    kirby-input\n    type=\"text\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    [hasError]=\"hasError\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"onInput($event)\"\n  />\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\" kirby-affix=\"suffix\"></kirby-icon>\n</div>\n\n<kirby-popover\n  [target]=\"rootElement\"\n  [popout]=\"popout\"\n  (click)=\"onPopoverClick()\"\n  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item>\n        <p class=\"kirby-item-title no-results\">{{ noSearchResultsText }}</p>\n      </kirby-item>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"combobox-viewport\"\n        role=\"listbox\"\n        minBufferPx=\"1240\"\n        maxBufferPx=\"1620\"\n        [itemSize]=\"itemHeight\"\n        [style.height.px]=\"viewportHeight\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of searchItems\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate || defaultItemTemplate;\n              context: {\n                $implicit: item,\n                selected: item === selectedItem,\n                focused: item === focusedItem,\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-focused=\"focused\">\n  <kirby-item\n    role=\"option\"\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    [class.focused]=\"focused\"\n    [attr.id]=\"getItemId(item)\"\n    [attr.aria-selected]=\"selected\"\n    (click)=\"onItemSelect(item)\"\n  >\n    <p class=\"kirby-item-title\">{{ getItemText(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n", styles: ["@media(hover:hover)and (pointer:fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host div>input[kirby-input]{padding-right:40px}:host div>input[kirby-input]:disabled~kirby-icon{color:var(--kirby-semi-dark-shade)}:host div>kirby-icon{display:flex;align-items:center;position:absolute;top:0;bottom:0;right:12px}:host.has-value>div>input[kirby-input]{text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{display:flex;flex-direction:column;max-height:352px;overflow:hidden;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;max-width:calc(100vw - 32px);min-width:288px}@media(min-width:321px){kirby-card{min-width:343px}}.combobox-viewport{display:block;width:100%}.no-results{color:var(--kirby-text-color-semi-dark)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ResizeObserverService }], propDecorators: { noSearchResultsText: [{
                 type: Input
+            }], selectionClearedAnnouncement: [{
+                type: Input
             }], itemTextProperty: [{
                 type: Input
             }], itemHeight: [{

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-extensions-angular-combobox.mjs","sources":["../../combobox/src/combobox.types.ts","../../combobox/src/combobox.component.ts","../../combobox/src/combobox.component.html","../../combobox/src/kirbydesign-extensions-angular-combobox.ts"],"sourcesContent":["export enum OpenState {\n  closed,\n  opening,\n  open,\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  Renderer2,\n  RendererStyleFlags2,\n  TemplateRef,\n  ViewChild,\n  ViewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { UniqueIdGenerator } from '@kirbydesign/designsystem/helpers';\nimport { ItemComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\nimport { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';\nimport { AffixDirective, InputSize } from '@kirbydesign/designsystem/form-field';\nimport {\n  EventListenerDisposeFn,\n  FORM_FIELD_CONTROL,\n  FormFieldControl,\n} from '@kirbydesign/designsystem/types';\nimport { forwardAttributes, ResizeObserverService } from '@kirbydesign/designsystem/shared';\nimport { InputComponent } from '@kirbydesign/designsystem/form-field';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  CdkFixedSizeVirtualScroll,\n  CdkVirtualForOf,\n  CdkVirtualScrollViewport,\n} from '@angular/cdk/scrolling';\nimport { OpenState } from './combobox.types';\n\n@Component({\n  selector: 'kirby-x-combobox',\n  templateUrl: './combobox.component.html',\n  styleUrls: ['./combobox.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ComboboxComponent),\n      multi: true,\n    },\n    {\n      provide: FORM_FIELD_CONTROL,\n      useExisting: forwardRef(() => ComboboxComponent),\n    },\n  ],\n  imports: [\n    InputComponent,\n    NgTemplateOutlet,\n    PopoverComponent,\n    CardComponent,\n    ItemComponent,\n    IconComponent,\n    AffixDirective,\n    CdkFixedSizeVirtualScroll,\n    CdkVirtualScrollViewport,\n    CdkVirtualForOf,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ComboboxComponent\n  implements AfterViewInit, OnDestroy, ControlValueAccessor, FormFieldControl\n{\n  static readonly OPEN_DELAY_IN_MS = 100;\n  private state = OpenState.closed;\n  private _popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  public _listboxId: string = UniqueIdGenerator.scopedTo('kirby-x-combobox').next();\n  public _comboboxId: string = UniqueIdGenerator.scopedTo('kirby-input').next();\n\n  private readonly _defaultSearchFunction = (\n    searchTerm: string,\n    itemsToSearch: unknown[]\n  ): unknown[] => {\n    if (!searchTerm) {\n      return itemsToSearch;\n    }\n\n    const lowerSearchTerm = searchTerm.toLowerCase();\n    return itemsToSearch\n      .filter((item) => this.getItemText(item).toLowerCase().includes(lowerSearchTerm))\n      .sort((a, b) => {\n        const textA = this.getItemText(a).toLowerCase();\n        const textB = this.getItemText(b).toLowerCase();\n\n        const textAStartsWith = textA.startsWith(searchTerm);\n        const textBStartsWith = textB.startsWith(searchTerm);\n        if (textAStartsWith && textBStartsWith) {\n          return this.compareAlphabetically(textA, textB);\n        }\n\n        if (textAStartsWith) {\n          return -1;\n        }\n\n        if (textBStartsWith) {\n          return 1;\n        }\n\n        return this.compareAlphabetically(textA, textB);\n      });\n  };\n\n  private compareAlphabetically(textA: string, textB: string): number {\n    if (textA < textB) {\n      return -1;\n    }\n    if (textA > textB) {\n      return 1;\n    }\n    return 0;\n  }\n\n  /**\n   * The text to display when the search returns no results.\n   */\n  @Input()\n  public noSearchResultsText = 'No results found.';\n\n  /**\n   * The name of the property to use as the display text for each item.\n   */\n  @Input()\n  public itemTextProperty: string = 'text';\n  protected getItemText(item: unknown): string {\n    if (this.isTypeString(item)) {\n      return item as string;\n    }\n\n    if (this.objectHasItemTextProperty(item)) {\n      const objectItem = item as Record<string, unknown>;\n      const textValue: unknown = objectItem[this.itemTextProperty];\n\n      if (typeof textValue === 'string') {\n        return textValue;\n      }\n    }\n    return '';\n  }\n\n  /**\n   * The height of each item in the dropdown, in pixels. This is used to calculate the height of the dropdown based on the number of items.\n   */\n  @Input()\n  public itemHeight: number = 44;\n\n  protected get dropdownMaxHeight(): number {\n    return 8 * this.itemHeight;\n  }\n\n  protected get dropdownMinHeight(): number {\n    return this.itemHeight;\n  }\n\n  protected get viewportHeight(): number {\n    const itemCount = this.searchItems?.length ?? 0;\n\n    if (itemCount === 0) {\n      return this.dropdownMinHeight;\n    }\n\n    return Math.min(\n      this.dropdownMaxHeight,\n      Math.max(this.dropdownMinHeight, itemCount * this.itemHeight)\n    );\n  }\n\n  private isTypeString(item: unknown): boolean {\n    return typeof item === 'string';\n  }\n\n  private objectHasItemTextProperty(item: unknown): boolean {\n    return item != undefined && typeof item === 'object' && this.itemTextProperty in item;\n  }\n\n  private objectHasItemIdProperty(item: unknown): boolean {\n    return item != undefined && typeof item === 'object' && this.itemIdProperty in item;\n  }\n\n  /**\n   * The name of the property to use as the unique identifier for each item.\n   */\n  @Input()\n  public itemIdProperty = 'id';\n  protected getItemId(item: unknown): string {\n    if (this.isTypeString(item)) {\n      return item as string;\n    }\n\n    if (this.objectHasItemIdProperty(item)) {\n      const objectItem = item as Record<string, unknown>;\n      const idValue: unknown = objectItem[this.itemIdProperty];\n\n      if (this.isTypeString(idValue)) {\n        return idValue as string;\n      }\n    }\n\n    console.error(\n      'Each item must have an id property for scroll to work. Ensure that the itemIdProperty input is set correctly, and that each item has a unique id value.'\n    );\n    return '';\n  }\n\n  /**\n   * A function that takes a search term and the list of items, and returns a filtered list of items to display in the dropdown.\n   */\n  @Input()\n  public searchFunction: (searchTerm: string, itemsToSearch: unknown[]) => unknown[] =\n    this._defaultSearchFunction;\n\n  private _searchItems: unknown[] = [];\n  protected get searchItems(): unknown[] {\n    return this._searchItems;\n  }\n  private set searchItems(value: unknown[]) {\n    this._searchItems = value;\n    if (!this._searchItems) {\n      return;\n    }\n\n    this.focusedItem = this._searchItems[0];\n  }\n\n  private _items: unknown[] = [];\n\n  get items(): unknown[] {\n    return this._items;\n  }\n\n  /**\n   * The list of items to display in the dropdown.\n   * @param value\n   */\n  @Input()\n  public set items(value: unknown[]) {\n    this._items = value;\n    this.searchItems = this._items;\n  }\n\n  private _selectedItem: unknown = undefined;\n  get selectedItem(): unknown {\n    return this._selectedItem;\n  }\n\n  /**\n   * The currently selected item.\n   * @param value\n   */\n  @Input()\n  public set selectedItem(value: unknown) {\n    // Allow clearing by setting undefined\n    if (value !== this._selectedItem) {\n      this._selectedItem = value;\n      this.focusedItem = this._selectedItem;\n      // Keep ControlValueAccessor value in sync with the selected data item\n      this.value = this._selectedItem;\n    }\n  }\n\n  // _focusedItem keeps track of which element has focus and will be selected\n  // if it is activated (by pressing ENTER)\n  private _focusedItem: unknown = undefined;\n  public get focusedItem(): unknown {\n    return this._focusedItem;\n  }\n\n  public set focusedItem(item: unknown) {\n    // the focus might not have changed, but where in the list might\n    this.setAriaPosinsetOnElement(item);\n\n    if (this._focusedItem === item) {\n      return;\n    }\n    this._focusedItem = item;\n  }\n\n  private getIndexOfItem(item: unknown): number {\n    return this.searchItems.indexOf(item);\n  }\n\n  private getKirbyElement(item: unknown | undefined): ElementRef<HTMLElement> | undefined {\n    const kirbyItems = this.getKirbyItems();\n    if (!kirbyItems || !item) {\n      return undefined;\n    }\n\n    const itemId = this.getItemId(item);\n    return kirbyItems.find((el) => el.nativeElement.id === itemId);\n  }\n\n  private setAriaPosinsetOnElement(item: unknown) {\n    const element = this.getKirbyElement(item);\n    const index = this.getIndexOfItem(item);\n    const setsize = this.searchItems.length;\n\n    if (!element) {\n      return;\n    }\n\n    this.renderer.setAttribute(element.nativeElement, 'aria-setsize', setsize.toString());\n    this.renderer.setAttribute(element.nativeElement, 'aria-posintset', `${index + 1}`);\n  }\n\n  /**\n   * The placeholder text to display in the input when no item is selected and the input is empty.\n   */\n  @Input()\n  public placeholder = 'Please search...';\n\n  /**\n   * The direction in which the dropdown should open relative to the input.\n   * @param direction\n   */\n  @Input()\n  public set popout(direction: HorizontalDirection | `${HorizontalDirection}`) {\n    this._popout = direction || HorizontalDirection.right;\n  }\n\n  public get popout() {\n    return this._popout;\n  }\n\n  /**\n   * If the combobox needs to expand to full width of its parent container, then use expand.\n   */\n  @Input()\n  public expand?: 'block';\n\n  /**\n   * When `true`, the user cannot interact with the combobox.\n   */\n  @Input()\n  public disabled = false;\n\n  @HostBinding('attr.disabled')\n  public get _isDisabled(): 'disabled' | null {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  /**\n   * Will emit the new value when error changes.\n   */\n  @Output()\n  hasErrorChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n  private _hasError: boolean = false;\n\n  /**\n   * When `true`, the combobox will be styled with error styles.\n   */\n  @Input()\n  get hasError(): boolean {\n    return this._hasError;\n  }\n\n  set hasError(value: boolean) {\n    if (this._hasError !== value) {\n      this._hasError = value;\n      this.hasErrorChange.emit(this._hasError);\n    }\n  }\n\n  /**\n   * The size of the input element.\n   */\n  @Input()\n  public size: InputSize = InputSize.medium;\n\n  // Prevent Ionic blur on scroll\n  @HostBinding('attr.no-blur')\n  public get _noBlurOnScroll(): boolean {\n    return true;\n  }\n\n  /**\n   * Emitted when an item is selected (tap on mobile, click/keypress on web)\n   */\n  @Output()\n  public change: EventEmitter<unknown> = new EventEmitter<unknown>();\n\n  public value: unknown = undefined;\n\n  @HostBinding('class.expand')\n  public get _isBlockLevel() {\n    return this.expand === 'block';\n  }\n\n  @HostBinding('class.is-opening')\n  public get _isOpening(): boolean {\n    return this.state === OpenState.opening;\n  }\n\n  @HostBinding('class.is-open')\n  public get isOpen(): boolean {\n    return this.state === OpenState.open;\n  }\n\n  @HostBinding('class.has-value')\n  public get hasValue(): boolean {\n    return this.selectedItem != null;\n  }\n\n  @ContentChild(ListItemTemplateDirective, { read: TemplateRef })\n  public itemTemplate?: TemplateRef<unknown>;\n\n  @ContentChildren(ListItemTemplateDirective, { read: ElementRef })\n  public slottedItems?: QueryList<ElementRef<HTMLElement>>;\n\n  @ViewChild(CardComponent, { read: ElementRef })\n  public cardElement?: ElementRef<HTMLElement>;\n\n  @ViewChild(PopoverComponent)\n  public popover?: PopoverComponent;\n\n  @ViewChild('rootElement', { static: true, read: ElementRef })\n  public rootElement!: ElementRef<HTMLElement>;\n\n  @ViewChild(InputComponent, { static: true, read: ElementRef })\n  private textInput!: ElementRef<HTMLInputElement>;\n\n  get interactiveElement(): HTMLElement {\n    return this.textInput.nativeElement;\n  }\n\n  @ViewChild(CdkVirtualScrollViewport)\n  private virtualScrollViewport?: CdkVirtualScrollViewport;\n\n  private forwardAriaLabelToCombobox() {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.rootElement.nativeElement\n    );\n  }\n\n  @ViewChildren(ItemComponent, { read: ElementRef })\n  public kirbyItemsDefault?: QueryList<ElementRef<HTMLElement>>;\n\n  _kirbyItemsSlotted?: QueryList<ElementRef<HTMLElement>>;\n  @ContentChildren(ItemComponent, { read: ElementRef })\n  public set kirbyItemsSlotted(kirbyItems: QueryList<ElementRef<HTMLElement>>) {\n    const hasSlottedItems = this.disposeItemClickListeners?.length > 0;\n    if (hasSlottedItems) {\n      this.unlistenAllSlottedItems();\n    }\n\n    kirbyItems.forEach((kirbyItem) => {\n      this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');\n      const disposeClickListener: EventListenerDisposeFn = this.renderer.listen(\n        kirbyItem.nativeElement,\n        'click',\n        () => {\n          const id = kirbyItem.nativeElement.getAttribute('id');\n          const item = this.items.find((it) => this.getItemId(it) === id);\n          if (item) {\n            this.onItemSelect(item);\n          }\n        }\n      );\n\n      this.disposeItemClickListeners.push(disposeClickListener);\n    });\n\n    this._kirbyItemsSlotted = kirbyItems;\n  }\n\n  public get kirbyItemsSlotted(): QueryList<ElementRef<HTMLElement>> | undefined {\n    return this._kirbyItemsSlotted;\n  }\n\n  private disposeItemClickListeners: EventListenerDisposeFn[] = [];\n\n  public constructor(\n    private renderer: Renderer2,\n    private elementRef: ElementRef<HTMLElement>,\n    private cdr: ChangeDetectorRef,\n    private resizeObserverService: ResizeObserverService\n  ) {}\n\n  protected onToggle(event: MouseEvent) {\n    event.stopPropagation();\n    this.textInput?.nativeElement.focus();\n\n    this.toggle();\n  }\n\n  private toggle(): void {\n    if (this.disabled) {\n      return;\n    }\n    this.isOpen ? this.close() : this.open();\n  }\n\n  public ngAfterViewInit() {\n    if (this.expand === 'block') {\n      const { width: initialWidth } = this.elementRef.nativeElement.getBoundingClientRect();\n      this.setPopoverCardStyle('max-width', 'initial');\n      this.setPopoverCardStyle('min-width', 'initial');\n      // Ensure initial width is set even if the resize observer callback also fires initially:\n      this.setPopoverCardStyle('--kirby-card-width', `${initialWidth}px`);\n\n      this.resizeObserverService.observe(this.elementRef, (entry) => {\n        const newWidth = entry.contentRect.width;\n        if (newWidth > 0) {\n          this.setPopoverCardStyle('--kirby-card-width', `${newWidth}px`);\n        }\n      });\n    }\n    this.forwardAriaLabelToCombobox();\n  }\n\n  /* Utility that makes it easier to set styles on card element */\n  private setPopoverCardStyle(style: string, value: string) {\n    this.renderer.setStyle(\n      this.cardElement?.nativeElement,\n      style,\n      value,\n      RendererStyleFlags2.DashCase\n    );\n  }\n\n  public ngOnDestroy(): void {\n    this.unlistenAllSlottedItems();\n    this.unobserveResize();\n  }\n\n  public open(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (!this.isOpen) {\n      this.state = OpenState.opening;\n      setTimeout(() => this.showPopOver(), ComboboxComponent.OPEN_DELAY_IN_MS);\n\n      this.focusedItem = this.selectedItem;\n    }\n  }\n\n  private showPopOver() {\n    if (this.state === OpenState.opening) {\n      this.state = OpenState.open;\n      this.popover?.show();\n      this.scrollToIndexIntoViewWhenOpeningPopup();\n      this.cdr.markForCheck();\n    }\n  }\n\n  public close() {\n    if (this.disabled) {\n      return;\n    }\n    if (this.isOpen) {\n      this.state = OpenState.closed;\n      this.setInputDisplayValue(this.getItemText(this.selectedItem));\n      this.searchItems = this.items;\n      this.popover?.hide();\n    }\n  }\n\n  protected onItemSelect(item: unknown) {\n    // Guard: slotted click listeners should map back to a data item, but be safe.\n    if (item instanceof HTMLElement) return;\n    this.selectItem(item);\n    this.close();\n  }\n\n  private onChange: (value: unknown) => void = () => {\n    /* empty */\n  };\n  private onTouched: () => void = (): void => {\n    /* empty */\n  };\n\n  /**\n   * Sets the select's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param value New value to be written to the model.\n   */\n  public writeValue(value: string): void {\n    this.selectItemByInput(value);\n\n    // When written from outside, reflect selected text in the input\n    this.setInputDisplayValue(this.getItemText(this.value));\n\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: (value: unknown) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * Disables the select. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  public setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  private selectItem(item: unknown): void {\n    if (item != this.selectedItem) {\n      this.selectedItem = item;\n      this.focusedItem = item;\n      this.change.emit(this.value);\n      this.onChange(this.value);\n      this.setInputDisplayValue(this.getItemText(item));\n      this.searchItems = this.items;\n    }\n  }\n\n  private selectItemByInput(input: string): void {\n    this.selectedItem = this.findItemByInput(input);\n  }\n\n  protected updateSearchResults(event: Event): void {\n    if (!this.isOpen) {\n      this.open();\n    }\n\n    const input = event.target as HTMLInputElement;\n    this.searchItems = input.value ? this.searchFunction(input.value, this.items) : this.items;\n\n    // Screen readers (VoiceOver/NVDA) may move real browser focus to a list-item button.\n    // When the list re-renders after filtering, that button is removed from the DOM and\n    // focus falls to `document.body`. Restore it to the input so the user can keep typing\n    // and the focusout handler doesn't mistake the body-focus for a genuine blur-away.\n    if (document.activeElement !== this.textInput?.nativeElement) {\n      this.textInput?.nativeElement.focus();\n    }\n  }\n\n  protected onPopoverWillHide() {\n    this.state = OpenState.closed;\n    this.rootElement.nativeElement.focus();\n    this.onTouched();\n  }\n\n  protected onPopoverClick() {\n    this.close();\n  }\n\n  @HostListener('mousedown', ['$event'])\n  public onMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @HostListener('touchstart', ['$event'])\n  public onTouchStart(event: TouchEvent) {\n    if (this.isOpen) {\n      event.stopPropagation();\n    }\n  }\n\n  @HostListener('focusout')\n  public onFocusOut() {\n    // Defer the check to allow the browser (and screen readers like VoiceOver/NVDA)\n    // to settle focus. `relatedTarget` is often `null` with screen readers, so we\n    // inspect `document.activeElement` after the microtask queue has flushed.\n    setTimeout(() => {\n      const activeElement = document.activeElement as HTMLElement | null;\n      const isOnTriggerButton =\n        activeElement && this.elementRef.nativeElement.contains(activeElement);\n      const isInsidePopover = activeElement && activeElement.closest('kirby-popover');\n\n      if (isOnTriggerButton || isInsidePopover) {\n        // Focus is still within the component — nothing to do.\n        return;\n      }\n\n      // When a screen reader (VoiceOver/NVDA) moves real focus to a list-item button\n      // and the user then types a character, CDK virtual scroll re-renders the list and\n      // removes the focused button from the DOM. The browser then drops focus to\n      // `document.body`. Detect this case: if the popover is still showing and focus is\n      // on the body, it means focus was lost due to DOM removal — restore it to the\n      // input rather than closing the popover.\n      if (this.isOpen && activeElement === document.body) {\n        this.textInput?.nativeElement.focus();\n        return;\n      }\n\n      if (this.isOpen) {\n        this.close();\n      }\n      this.onTouched();\n    }, 0);\n  }\n\n  @HostListener('keydown.tab')\n  public onTab() {\n    if (this.isOpen) {\n      this.selectItem(this.focusedItem);\n      this.close();\n    }\n  }\n\n  @HostListener('keydown.escape')\n  public onEscape() {\n    this.close();\n  }\n\n  @HostListener('keydown.enter', ['$event'])\n  public onEnterO(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.isOpen) {\n      this.selectItem(this.focusedItem);\n    }\n    this.toggle();\n  }\n\n  @HostListener('keydown.arrowUp', ['$event'])\n  @HostListener('keydown.arrowDown', ['$event'])\n  @HostListener('keydown.pageUp', ['$event'])\n  @HostListener('keydown.pageDown', ['$event'])\n  @HostListener('keydown.home', ['$event'])\n  @HostListener('keydown.end', ['$event'])\n  public onArrowKeys(event: Event): void {\n    if (this.disabled) return;\n\n    const keyEvent = event as KeyboardEvent; // safe in this context\n    // Avoid page scroll\n    event.preventDefault();\n\n    if (!this.isOpen) {\n      this.open();\n      if (this.selectedItem) {\n        this.setFocusOnSelectedItem();\n      } else {\n        this.setFocusOnFirstOrLastItem(keyEvent);\n      }\n    } else {\n      this.handleFocusNavigation(keyEvent);\n    }\n  }\n\n  private handleFocusNavigation(keyEvent: KeyboardEvent): void {\n    switch (keyEvent.key) {\n      case 'ArrowDown':\n        this.shiftFocusIndex(1);\n        break;\n      case 'ArrowUp':\n        this.shiftFocusIndex(-1);\n        break;\n      case 'PageDown':\n        this.shiftFocusIndex(10);\n        break;\n      case 'PageUp':\n        this.shiftFocusIndex(-10);\n        break;\n      case 'Home':\n        this.setFocusOnFirstItem();\n        break;\n      case 'End':\n        this.setFocusOnLastItem();\n        break;\n      default:\n        break;\n    }\n  }\n\n  private shiftFocusIndex(numberOfItems: number) {\n    // Handle up/down navigation when open\n    const currentIndex = this.searchItems.indexOf(this.focusedItem);\n    let newIndex;\n\n    if (numberOfItems > 0) {\n      newIndex = Math.min(this.searchItems.length - 1, currentIndex + numberOfItems);\n    } else {\n      newIndex = Math.max(0, currentIndex + numberOfItems);\n    }\n\n    if (newIndex !== currentIndex) {\n      this.focusedItem = this.searchItems[newIndex];\n    }\n    this.scrollFocusedItemIntoViewWhileNavigating();\n  }\n\n  private setFocusOnFirstOrLastItem(keyEvent: KeyboardEvent): void {\n    switch (keyEvent.key) {\n      case 'ArrowDown':\n      case 'PageDown':\n      case 'Home':\n        this.setFocusOnFirstItem();\n        break;\n      case 'ArrowUp':\n      case 'PageUp':\n      case 'End':\n        this.setFocusOnLastItem();\n        break;\n      default:\n        break;\n    }\n  }\n\n  private setFocusOnSelectedItem(): void {\n    if (this.selectedItem) {\n      this.focusedItem = this.selectedItem;\n    }\n  }\n\n  private setFocusOnLastItem(): void {\n    if (this.searchItems.length > 0) {\n      this.focusedItem = this.searchItems[this.searchItems.length - 1];\n    }\n  }\n\n  private setFocusOnFirstItem(): void {\n    if (this.searchItems.length > 0) {\n      this.focusedItem = this.searchItems[0];\n    }\n  }\n\n  private unlistenAllSlottedItems(): void {\n    let disposeClickListener: EventListenerDisposeFn | undefined;\n    while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== undefined) {\n      disposeClickListener();\n    }\n  }\n\n  private unobserveResize() {\n    this.resizeObserverService.unobserve(this.elementRef);\n  }\n\n  /**\n   * Resolve a model/data item based on current `items` by comparing displayed text.\n   * This is used to map an incoming form value or input `selectedItem` to an item\n   * from the list.\n   */\n  private findItemByInput(input: string): unknown {\n    if (!this.items || this.items.length === 0) {\n      return input;\n    }\n\n    return this.items.find((it) => this.getItemText(it) === input) ?? input;\n  }\n\n  private setInputDisplayValue(value: string): void {\n    // We intentionally update the DOM input imperatively (\"hard way\")\n    // to ensure the visible value is cleared/updated immediately.\n    if (this.textInput?.nativeElement) {\n      this.renderer.setProperty(this.textInput.nativeElement, 'value', value);\n    }\n  }\n\n  private scrollFocusedItemIntoViewWhileNavigating(): void {\n    const kirbyItems = this.getKirbyItems();\n    if (!kirbyItems || kirbyItems.length === 0) return;\n\n    if (!this.focusedItem) {\n      return;\n    }\n\n    const id = this.getItemId(this.focusedItem);\n    if (!id) return;\n\n    const match = kirbyItems.toArray().find((el) => {\n      if (el.nativeElement.id === undefined) {\n        console.error(\n          'Each item must have an id attribute for scroll to work. Ensure that the ´[attr.id]´ is set correctly, and that each item has a unique id value.'\n        );\n      }\n      return el.nativeElement.id === id;\n    });\n\n    if (!match) {\n      this.scrollToIndexIntoViewWhenOpeningPopup();\n      return;\n    }\n\n    const scrollIntoView = match.nativeElement.scrollIntoView;\n    if (typeof scrollIntoView === 'function') {\n      scrollIntoView.call(match.nativeElement, { block: 'nearest' });\n    }\n  }\n\n  private getKirbyItems(): QueryList<ElementRef<HTMLElement>> | undefined {\n    return this.kirbyItemsSlotted && this.kirbyItemsSlotted.length\n      ? this.kirbyItemsSlotted\n      : this.kirbyItemsDefault;\n  }\n\n  private scrollToIndexIntoViewWhenOpeningPopup(): void {\n    const focusedIndex = this.searchItems.indexOf(this.focusedItem);\n    if (focusedIndex < 0) return;\n\n    if (focusedIndex === 0) {\n      this.virtualScrollViewport?.setRenderedRange({ start: 0, end: 20 });\n      this.virtualScrollViewport?.checkViewportSize();\n      return;\n    }\n\n    this.virtualScrollViewport?.scrollToIndex(focusedIndex);\n  }\n}\n","<div (click)=\"onToggle($event)\" #rootElement>\n  <input\n    kirby-input\n    type=\"text\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    [hasError]=\"hasError\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"updateSearchResults($event)\"\n  />\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\" kirby-affix=\"suffix\"></kirby-icon>\n</div>\n\n<kirby-popover\n  [target]=\"rootElement\"\n  [popout]=\"popout\"\n  (click)=\"onPopoverClick()\"\n  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item [attr.aria-live]=\"'polite'\">\n        <p class=\"kirby-item-title no-results\">{{ noSearchResultsText }}</p>\n      </kirby-item>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"combobox-viewport\"\n        role=\"listbox\"\n        minBufferPx=\"1240\"\n        maxBufferPx=\"1620\"\n        [itemSize]=\"itemHeight\"\n        [style.height.px]=\"viewportHeight\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of searchItems\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate || defaultItemTemplate;\n              context: {\n                $implicit: item,\n                selected: item === selectedItem,\n                focused: item === focusedItem,\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-focused=\"focused\">\n  <kirby-item\n    role=\"option\"\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    [class.focused]=\"focused\"\n    [attr.id]=\"getItemId(item)\"\n    [attr.aria-selected]=\"selected\"\n    (click)=\"onItemSelect(item)\"\n  >\n    <p class=\"kirby-item-title\">{{ getItemText(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-extensions-angular-combobox.mjs","sources":["../../combobox/src/combobox.types.ts","../../combobox/src/combobox.component.ts","../../combobox/src/combobox.component.html","../../combobox/src/kirbydesign-extensions-angular-combobox.ts"],"sourcesContent":["export enum OpenState {\n  closed,\n  opening,\n  open,\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  Renderer2,\n  RendererStyleFlags2,\n  TemplateRef,\n  ViewChild,\n  ViewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { UniqueIdGenerator } from '@kirbydesign/designsystem/helpers';\nimport { ItemComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\nimport { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';\nimport { AffixDirective, InputSize } from '@kirbydesign/designsystem/form-field';\nimport {\n  EventListenerDisposeFn,\n  FORM_FIELD_CONTROL,\n  FormFieldControl,\n} from '@kirbydesign/designsystem/types';\nimport { forwardAttributes, ResizeObserverService } from '@kirbydesign/designsystem/shared';\nimport { InputComponent } from '@kirbydesign/designsystem/form-field';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  CdkFixedSizeVirtualScroll,\n  CdkVirtualForOf,\n  CdkVirtualScrollViewport,\n} from '@angular/cdk/scrolling';\nimport { OpenState } from './combobox.types';\n\n@Component({\n  selector: 'kirby-x-combobox',\n  templateUrl: './combobox.component.html',\n  styleUrls: ['./combobox.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ComboboxComponent),\n      multi: true,\n    },\n    {\n      provide: FORM_FIELD_CONTROL,\n      useExisting: forwardRef(() => ComboboxComponent),\n    },\n  ],\n  imports: [\n    InputComponent,\n    NgTemplateOutlet,\n    PopoverComponent,\n    CardComponent,\n    ItemComponent,\n    IconComponent,\n    AffixDirective,\n    CdkFixedSizeVirtualScroll,\n    CdkVirtualScrollViewport,\n    CdkVirtualForOf,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ComboboxComponent\n  implements AfterViewInit, OnDestroy, ControlValueAccessor, FormFieldControl\n{\n  static readonly OPEN_DELAY_IN_MS = 100;\n  private state = OpenState.closed;\n  private _popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  public _listboxId: string = UniqueIdGenerator.scopedTo('kirby-x-combobox').next();\n  public _comboboxId: string = UniqueIdGenerator.scopedTo('kirby-input').next();\n\n  private readonly _defaultSearchFunction = (\n    searchTerm: string,\n    itemsToSearch: unknown[]\n  ): unknown[] => {\n    if (!searchTerm) {\n      return itemsToSearch;\n    }\n\n    const lowerSearchTerm = searchTerm.toLowerCase();\n    return itemsToSearch\n      .filter((item) => this.getItemText(item).toLowerCase().includes(lowerSearchTerm))\n      .sort((a, b) => {\n        const textA = this.getItemText(a).toLowerCase();\n        const textB = this.getItemText(b).toLowerCase();\n\n        const textAStartsWith = textA.startsWith(searchTerm);\n        const textBStartsWith = textB.startsWith(searchTerm);\n        if (textAStartsWith && textBStartsWith) {\n          return this.compareAlphabetically(textA, textB);\n        }\n\n        if (textAStartsWith) {\n          return -1;\n        }\n\n        if (textBStartsWith) {\n          return 1;\n        }\n\n        return this.compareAlphabetically(textA, textB);\n      });\n  };\n\n  private compareAlphabetically(textA: string, textB: string): number {\n    if (textA < textB) {\n      return -1;\n    }\n    if (textA > textB) {\n      return 1;\n    }\n    return 0;\n  }\n\n  /**\n   * The text to display when the search returns no results.\n   */\n  @Input()\n  public noSearchResultsText = 'No results found.';\n\n  /**\n   * The text announced by screen readers when the selection is cleared.\n   */\n  @Input()\n  public selectionClearedAnnouncement = 'Selection cleared.';\n\n  public _liveRegionText = '';\n\n  /**\n   * The name of the property to use as the display text for each item.\n   */\n  @Input()\n  public itemTextProperty: string = 'text';\n  protected getItemText(item: unknown): string {\n    if (this.isTypeString(item)) {\n      return item as string;\n    }\n\n    if (this.objectHasItemTextProperty(item)) {\n      const objectItem = item as Record<string, unknown>;\n      const textValue: unknown = objectItem[this.itemTextProperty];\n\n      if (typeof textValue === 'string') {\n        return textValue;\n      }\n    }\n    return '';\n  }\n\n  /**\n   * The height of each item in the dropdown, in pixels. This is used to calculate the height of the dropdown based on the number of items.\n   */\n  @Input()\n  public itemHeight: number = 44;\n\n  protected get dropdownMaxHeight(): number {\n    return 8 * this.itemHeight;\n  }\n\n  protected get dropdownMinHeight(): number {\n    return this.itemHeight;\n  }\n\n  protected get viewportHeight(): number {\n    const itemCount = this.searchItems?.length ?? 0;\n\n    if (itemCount === 0) {\n      return this.dropdownMinHeight;\n    }\n\n    return Math.min(\n      this.dropdownMaxHeight,\n      Math.max(this.dropdownMinHeight, itemCount * this.itemHeight)\n    );\n  }\n\n  private isTypeString(item: unknown): boolean {\n    return typeof item === 'string';\n  }\n\n  private objectHasItemTextProperty(item: unknown): boolean {\n    return item != undefined && typeof item === 'object' && this.itemTextProperty in item;\n  }\n\n  private objectHasItemIdProperty(item: unknown): boolean {\n    return item != undefined && typeof item === 'object' && this.itemIdProperty in item;\n  }\n\n  /**\n   * The name of the property to use as the unique identifier for each item.\n   */\n  @Input()\n  public itemIdProperty = 'id';\n  protected getItemId(item: unknown): string {\n    if (this.isTypeString(item)) {\n      return item as string;\n    }\n\n    if (this.objectHasItemIdProperty(item)) {\n      const objectItem = item as Record<string, unknown>;\n      const idValue: unknown = objectItem[this.itemIdProperty];\n\n      if (this.isTypeString(idValue)) {\n        return idValue as string;\n      }\n    }\n\n    console.error(\n      'Each item must have an id property for scroll to work. Ensure that the itemIdProperty input is set correctly, and that each item has a unique id value.'\n    );\n    return '';\n  }\n\n  /**\n   * A function that takes a search term and the list of items, and returns a filtered list of items to display in the dropdown.\n   */\n  @Input()\n  public searchFunction: (searchTerm: string, itemsToSearch: unknown[]) => unknown[] =\n    this._defaultSearchFunction;\n\n  private _searchItems: unknown[] = [];\n  protected get searchItems(): unknown[] {\n    return this._searchItems;\n  }\n  private set searchItems(value: unknown[]) {\n    this._searchItems = value;\n    if (!this._searchItems) {\n      return;\n    }\n\n    // only set the focused item of the search result, if the input has value\n    if (this.textInput?.nativeElement?.value) {\n      this.focusedItem = this._searchItems[0];\n    }\n  }\n\n  private _items: unknown[] = [];\n\n  get items(): unknown[] {\n    return this._items;\n  }\n\n  /**\n   * The list of items to display in the dropdown.\n   * @param value\n   */\n  @Input()\n  public set items(value: unknown[]) {\n    this._items = value;\n    this.searchItems = this._items;\n  }\n\n  private _selectedItem: unknown = undefined;\n  get selectedItem(): unknown {\n    return this._selectedItem;\n  }\n\n  /**\n   * The currently selected item.\n   * @param value\n   */\n  @Input()\n  public set selectedItem(value: unknown) {\n    // Allow clearing by setting undefined\n    if (value !== this._selectedItem) {\n      this._selectedItem = value;\n      this.focusedItem = this._selectedItem;\n      // Keep ControlValueAccessor value in sync with the selected data item\n      this.value = this._selectedItem;\n    }\n  }\n\n  // _focusedItem keeps track of which element has focus and will be selected\n  // if it is activated (by pressing ENTER)\n  private _focusedItem: unknown = undefined;\n  public get focusedItem(): unknown {\n    return this._focusedItem;\n  }\n\n  public set focusedItem(item: unknown) {\n    // the focus might not have changed, but where in the list might\n    this.setAriaPosinsetOnElement(item);\n\n    if (this._focusedItem === item) {\n      return;\n    }\n    this._focusedItem = item;\n  }\n\n  private getIndexOfItem(item: unknown): number {\n    return this.searchItems.indexOf(item);\n  }\n\n  private getKirbyElement(item: unknown | undefined): ElementRef<HTMLElement> | undefined {\n    const kirbyItems = this.getKirbyItems();\n    if (!kirbyItems || !item) {\n      return undefined;\n    }\n\n    const itemId = this.getItemId(item);\n    return kirbyItems.find((el) => el.nativeElement.id === itemId);\n  }\n\n  private setAriaPosinsetOnElement(item: unknown) {\n    const element = this.getKirbyElement(item);\n    const index = this.getIndexOfItem(item);\n    const setsize = this.searchItems.length;\n\n    if (!element) {\n      return;\n    }\n\n    this.renderer.setAttribute(element.nativeElement, 'aria-setsize', setsize.toString());\n    this.renderer.setAttribute(element.nativeElement, 'aria-posinset', `${index + 1}`);\n  }\n\n  /**\n   * The placeholder text to display in the input when no item is selected and the input is empty.\n   */\n  @Input()\n  public placeholder = 'Please search...';\n\n  /**\n   * The direction in which the dropdown should open relative to the input.\n   * @param direction\n   */\n  @Input()\n  public set popout(direction: HorizontalDirection | `${HorizontalDirection}`) {\n    this._popout = direction || HorizontalDirection.right;\n  }\n\n  public get popout() {\n    return this._popout;\n  }\n\n  /**\n   * If the combobox needs to expand to full width of its parent container, then use expand.\n   */\n  @Input()\n  public expand?: 'block';\n\n  /**\n   * When `true`, the user cannot interact with the combobox.\n   */\n  @Input()\n  public disabled = false;\n\n  @HostBinding('attr.disabled')\n  public get _isDisabled(): 'disabled' | null {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  /**\n   * Will emit the new value when error changes.\n   */\n  @Output()\n  hasErrorChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n  private _hasError: boolean = false;\n\n  /**\n   * When `true`, the combobox will be styled with error styles.\n   */\n  @Input()\n  get hasError(): boolean {\n    return this._hasError;\n  }\n\n  set hasError(value: boolean) {\n    if (this._hasError !== value) {\n      this._hasError = value;\n      this.hasErrorChange.emit(this._hasError);\n    }\n  }\n\n  /**\n   * The size of the input element.\n   */\n  @Input()\n  public size: InputSize = InputSize.medium;\n\n  // Prevent Ionic blur on scroll\n  @HostBinding('attr.no-blur')\n  public get _noBlurOnScroll(): boolean {\n    return true;\n  }\n\n  /**\n   * Emitted when an item is selected (tap on mobile, click/keypress on web)\n   */\n  @Output()\n  public change: EventEmitter<unknown> = new EventEmitter<unknown>();\n\n  public value: unknown = undefined;\n\n  @HostBinding('class.expand')\n  public get _isBlockLevel() {\n    return this.expand === 'block';\n  }\n\n  @HostBinding('class.is-opening')\n  public get _isOpening(): boolean {\n    return this.state === OpenState.opening;\n  }\n\n  @HostBinding('class.is-open')\n  public get isOpen(): boolean {\n    return this.state === OpenState.open;\n  }\n\n  @HostBinding('class.has-value')\n  public get hasValue(): boolean {\n    return this.selectedItem != null;\n  }\n\n  @ContentChild(ListItemTemplateDirective, { read: TemplateRef })\n  public itemTemplate?: TemplateRef<unknown>;\n\n  @ContentChildren(ListItemTemplateDirective, { read: ElementRef })\n  public slottedItems?: QueryList<ElementRef<HTMLElement>>;\n\n  @ViewChild(CardComponent, { read: ElementRef })\n  public cardElement?: ElementRef<HTMLElement>;\n\n  @ViewChild(PopoverComponent)\n  public popover?: PopoverComponent;\n\n  @ViewChild('rootElement', { static: true, read: ElementRef })\n  public rootElement!: ElementRef<HTMLElement>;\n\n  @ViewChild(InputComponent, { static: true, read: ElementRef })\n  private textInput!: ElementRef<HTMLInputElement>;\n\n  get interactiveElement(): HTMLElement {\n    return this.textInput.nativeElement;\n  }\n\n  @ViewChild(CdkVirtualScrollViewport)\n  private virtualScrollViewport?: CdkVirtualScrollViewport;\n\n  private forwardAriaLabelToCombobox() {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.rootElement.nativeElement\n    );\n  }\n\n  @ViewChildren(ItemComponent, { read: ElementRef })\n  public kirbyItemsDefault?: QueryList<ElementRef<HTMLElement>>;\n\n  _kirbyItemsSlotted?: QueryList<ElementRef<HTMLElement>>;\n  @ContentChildren(ItemComponent, { read: ElementRef })\n  public set kirbyItemsSlotted(kirbyItems: QueryList<ElementRef<HTMLElement>>) {\n    const hasSlottedItems = this.disposeItemClickListeners?.length > 0;\n    if (hasSlottedItems) {\n      this.unlistenAllSlottedItems();\n    }\n\n    kirbyItems.forEach((kirbyItem) => {\n      this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');\n      const disposeClickListener: EventListenerDisposeFn = this.renderer.listen(\n        kirbyItem.nativeElement,\n        'click',\n        () => {\n          const id = kirbyItem.nativeElement.getAttribute('id');\n          const item = this.items.find((it) => this.getItemId(it) === id);\n          if (item) {\n            this.onItemSelect(item);\n          }\n        }\n      );\n\n      this.disposeItemClickListeners.push(disposeClickListener);\n    });\n\n    this._kirbyItemsSlotted = kirbyItems;\n  }\n\n  public get kirbyItemsSlotted(): QueryList<ElementRef<HTMLElement>> | undefined {\n    return this._kirbyItemsSlotted;\n  }\n\n  private disposeItemClickListeners: EventListenerDisposeFn[] = [];\n\n  public constructor(\n    private renderer: Renderer2,\n    private elementRef: ElementRef<HTMLElement>,\n    private cdr: ChangeDetectorRef,\n    private resizeObserverService: ResizeObserverService\n  ) {}\n\n  protected onToggle(event: MouseEvent) {\n    event.stopPropagation();\n    this.textInput?.nativeElement.focus();\n\n    this.toggle();\n  }\n\n  private toggle(): void {\n    if (this.disabled) {\n      return;\n    }\n    this.isOpen ? this.close() : this.open();\n  }\n\n  public ngAfterViewInit() {\n    if (this.expand === 'block') {\n      const { width: initialWidth } = this.elementRef.nativeElement.getBoundingClientRect();\n      this.setPopoverCardStyle('max-width', 'initial');\n      this.setPopoverCardStyle('min-width', 'initial');\n      // Ensure initial width is set even if the resize observer callback also fires initially:\n      this.setPopoverCardStyle('--kirby-card-width', `${initialWidth}px`);\n\n      this.resizeObserverService.observe(this.elementRef, (entry) => {\n        const newWidth = entry.contentRect.width;\n        if (newWidth > 0) {\n          this.setPopoverCardStyle('--kirby-card-width', `${newWidth}px`);\n        }\n      });\n    }\n    this.forwardAriaLabelToCombobox();\n  }\n\n  /* Utility that makes it easier to set styles on card element */\n  private setPopoverCardStyle(style: string, value: string) {\n    this.renderer.setStyle(\n      this.cardElement?.nativeElement,\n      style,\n      value,\n      RendererStyleFlags2.DashCase\n    );\n  }\n\n  public ngOnDestroy(): void {\n    this.unlistenAllSlottedItems();\n    this.unobserveResize();\n  }\n\n  public open(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (!this.isOpen) {\n      this.state = OpenState.opening;\n      setTimeout(() => this.showPopOver(), ComboboxComponent.OPEN_DELAY_IN_MS);\n\n      this.focusedItem = this.selectedItem;\n    }\n  }\n\n  private showPopOver() {\n    if (this.state === OpenState.opening) {\n      this.state = OpenState.open;\n      this.popover?.show();\n      this.scrollToIndexIntoViewWhenOpeningPopup();\n      this.cdr.markForCheck();\n    }\n  }\n\n  public close() {\n    if (this.disabled) {\n      return;\n    }\n    if (this.isOpen) {\n      this.state = OpenState.closed;\n      this.setInputDisplayValue(this.getItemText(this.selectedItem));\n      this.searchItems = this.items;\n      this.popover?.hide();\n    }\n  }\n\n  protected onItemSelect(item: unknown) {\n    // Guard: slotted click listeners should map back to a data item, but be safe.\n    if (item instanceof HTMLElement) return;\n    this.selectItem(item);\n    this.close();\n  }\n\n  private onChange: (value: unknown) => void = () => {\n    /* empty */\n  };\n  private onTouched: () => void = (): void => {\n    /* empty */\n  };\n\n  /**\n   * Sets the select's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param value New value to be written to the model.\n   */\n  public writeValue(value: string): void {\n    this.selectItemByInput(value);\n\n    // When written from outside, reflect selected text in the input\n    this.setInputDisplayValue(this.getItemText(this.value));\n\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: (value: unknown) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * Disables the select. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  public setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  private selectItem(item: unknown): void {\n    if (item != this.selectedItem) {\n      this.selectedItem = item;\n      this.focusedItem = item;\n      this.change.emit(this.value);\n      this.onChange(this.value);\n      this.setInputDisplayValue(this.getItemText(item));\n      this.searchItems = this.items;\n    }\n  }\n\n  private selectItemByInput(input: string): void {\n    this.selectedItem = this.findItemByInput(input);\n  }\n\n  protected onInput(event: Event): void {\n    if (!this.isOpen) {\n      this.open();\n    }\n\n    const input = event.target as HTMLInputElement;\n\n    if (!input.value) {\n      this.clearSelection();\n    }\n\n    this.updateSearchResults(input.value);\n\n    // Screen readers (VoiceOver/NVDA) may move real browser focus to a list-item button.\n    // When the list re-renders after filtering, that button is removed from the DOM and\n    // focus falls to `document.body`. Restore it to the input so the user can keep typing\n    // and the focusout handler doesn't mistake the body-focus for a genuine blur-away.\n    if (document.activeElement !== this.textInput?.nativeElement) {\n      this.textInput?.nativeElement.focus();\n    }\n  }\n\n  private clearSelection(): void {\n    this.selectItem(undefined);\n    // Reset after a short delay so the same message can be announced again on subsequent clears\n    this.announce(this.selectionClearedAnnouncement);\n  }\n\n  private _announceTimeout: ReturnType<typeof setTimeout> | undefined;\n  private announce(message: string): void {\n    clearTimeout(this._announceTimeout);\n    this._liveRegionText = '';\n    this._announceTimeout = setTimeout(() => {\n      this._liveRegionText = message;\n      this.cdr.markForCheck();\n    }, 100);\n  }\n\n  private updateSearchResults(inputValue: string): void {\n    this.searchItems = inputValue ? this.searchFunction(inputValue, this.items) : this.items;\n\n    if (inputValue && this.searchItems.length === 0) {\n      this.announce(this.noSearchResultsText);\n    }\n  }\n\n  protected onPopoverWillHide() {\n    this.state = OpenState.closed;\n    this.rootElement.nativeElement.focus();\n    this.onTouched();\n  }\n\n  protected onPopoverClick() {\n    this.close();\n  }\n\n  @HostListener('mousedown', ['$event'])\n  public onMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @HostListener('touchstart', ['$event'])\n  public onTouchStart(event: TouchEvent) {\n    if (this.isOpen) {\n      event.stopPropagation();\n    }\n  }\n\n  @HostListener('focusout')\n  public onFocusOut() {\n    // Defer the check to allow the browser (and screen readers like VoiceOver/NVDA)\n    // to settle focus. `relatedTarget` is often `null` with screen readers, so we\n    // inspect `document.activeElement` after the microtask queue has flushed.\n    setTimeout(() => {\n      const activeElement = document.activeElement as HTMLElement | null;\n      const isOnTriggerButton =\n        activeElement && this.elementRef.nativeElement.contains(activeElement);\n      const isInsidePopover = activeElement && activeElement.closest('kirby-popover');\n\n      if (isOnTriggerButton || isInsidePopover) {\n        // Focus is still within the component — nothing to do.\n        return;\n      }\n\n      // When a screen reader (VoiceOver/NVDA) moves real focus to a list-item button\n      // and the user then types a character, CDK virtual scroll re-renders the list and\n      // removes the focused button from the DOM. The browser then drops focus to\n      // `document.body`. Detect this case: if the popover is still showing and focus is\n      // on the body, it means focus was lost due to DOM removal — restore it to the\n      // input rather than closing the popover.\n      if (this.isOpen && activeElement === document.body) {\n        this.textInput?.nativeElement.focus();\n        return;\n      }\n\n      if (this.isOpen) {\n        this.close();\n      }\n      this.onTouched();\n    }, 0);\n  }\n\n  @HostListener('keydown.tab')\n  public onTab() {\n    if (this.isOpen) {\n      this.selectItem(this.focusedItem);\n      this.close();\n    }\n  }\n\n  @HostListener('keydown.escape')\n  public onEscape() {\n    this.close();\n  }\n\n  @HostListener('keydown.enter', ['$event'])\n  public onEnterO(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.isOpen) {\n      this.selectItem(this.focusedItem);\n    }\n    this.toggle();\n  }\n\n  @HostListener('keydown.arrowUp', ['$event'])\n  @HostListener('keydown.arrowDown', ['$event'])\n  @HostListener('keydown.pageUp', ['$event'])\n  @HostListener('keydown.pageDown', ['$event'])\n  @HostListener('keydown.home', ['$event'])\n  @HostListener('keydown.end', ['$event'])\n  public onArrowKeys(event: Event): void {\n    if (this.disabled) return;\n\n    const keyEvent = event as KeyboardEvent; // safe in this context\n    // Avoid page scroll\n    event.preventDefault();\n\n    if (!this.isOpen) {\n      this.open();\n      if (this.selectedItem) {\n        this.setFocusOnSelectedItem();\n      } else {\n        this.setFocusOnFirstOrLastItem(keyEvent);\n      }\n    } else {\n      this.handleFocusNavigation(keyEvent);\n    }\n  }\n\n  private handleFocusNavigation(keyEvent: KeyboardEvent): void {\n    switch (keyEvent.key) {\n      case 'ArrowDown':\n        this.shiftFocusIndex(1);\n        break;\n      case 'ArrowUp':\n        this.shiftFocusIndex(-1);\n        break;\n      case 'PageDown':\n        this.shiftFocusIndex(10);\n        break;\n      case 'PageUp':\n        this.shiftFocusIndex(-10);\n        break;\n      case 'Home':\n        this.setFocusOnFirstItem();\n        break;\n      case 'End':\n        this.setFocusOnLastItem();\n        break;\n      default:\n        break;\n    }\n  }\n\n  private shiftFocusIndex(numberOfItems: number) {\n    // Handle up/down navigation when open\n    const currentIndex = this.searchItems.indexOf(this.focusedItem);\n    let newIndex;\n\n    if (numberOfItems > 0) {\n      newIndex = Math.min(this.searchItems.length - 1, currentIndex + numberOfItems);\n    } else {\n      newIndex = Math.max(0, currentIndex + numberOfItems);\n    }\n\n    if (newIndex !== currentIndex) {\n      this.focusedItem = this.searchItems[newIndex];\n    }\n    this.scrollFocusedItemIntoViewWhileNavigating();\n  }\n\n  private setFocusOnFirstOrLastItem(keyEvent: KeyboardEvent): void {\n    switch (keyEvent.key) {\n      case 'ArrowDown':\n      case 'PageDown':\n      case 'Home':\n        this.setFocusOnFirstItem();\n        break;\n      case 'ArrowUp':\n      case 'PageUp':\n      case 'End':\n        this.setFocusOnLastItem();\n        break;\n      default:\n        break;\n    }\n  }\n\n  private setFocusOnSelectedItem(): void {\n    if (this.selectedItem) {\n      this.focusedItem = this.selectedItem;\n    }\n  }\n\n  private setFocusOnLastItem(): void {\n    if (this.searchItems.length > 0) {\n      this.focusedItem = this.searchItems[this.searchItems.length - 1];\n    }\n  }\n\n  private setFocusOnFirstItem(): void {\n    if (this.searchItems.length > 0) {\n      this.focusedItem = this.searchItems[0];\n    }\n  }\n\n  private unlistenAllSlottedItems(): void {\n    let disposeClickListener: EventListenerDisposeFn | undefined;\n    while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== undefined) {\n      disposeClickListener();\n    }\n  }\n\n  private unobserveResize() {\n    this.resizeObserverService.unobserve(this.elementRef);\n  }\n\n  /**\n   * Resolve a model/data item based on current `items` by comparing displayed text.\n   * This is used to map an incoming form value or input `selectedItem` to an item\n   * from the list.\n   */\n  private findItemByInput(input: string): unknown {\n    if (!this.items || this.items.length === 0) {\n      return input;\n    }\n\n    return this.items.find((it) => this.getItemText(it) === input) ?? input;\n  }\n\n  private setInputDisplayValue(value: string): void {\n    // We intentionally update the DOM input imperatively (\"hard way\")\n    // to ensure the visible value is cleared/updated immediately.\n    if (this.textInput?.nativeElement) {\n      this.renderer.setProperty(this.textInput.nativeElement, 'value', value);\n    }\n  }\n\n  private scrollFocusedItemIntoViewWhileNavigating(): void {\n    const kirbyItems = this.getKirbyItems();\n    if (!kirbyItems || kirbyItems.length === 0) return;\n\n    if (!this.focusedItem) {\n      return;\n    }\n\n    const id = this.getItemId(this.focusedItem);\n    if (!id) return;\n\n    const match = kirbyItems.toArray().find((el) => {\n      if (el.nativeElement.id === undefined) {\n        console.error(\n          'Each item must have an id attribute for scroll to work. Ensure that the ´[attr.id]´ is set correctly, and that each item has a unique id value.'\n        );\n      }\n      return el.nativeElement.id === id;\n    });\n\n    if (!match) {\n      this.scrollToIndexIntoViewWhenOpeningPopup();\n      return;\n    }\n\n    const scrollIntoView = match.nativeElement.scrollIntoView;\n    if (typeof scrollIntoView === 'function') {\n      scrollIntoView.call(match.nativeElement, { block: 'nearest' });\n    }\n  }\n\n  private getKirbyItems(): QueryList<ElementRef<HTMLElement>> | undefined {\n    return this.kirbyItemsSlotted && this.kirbyItemsSlotted.length\n      ? this.kirbyItemsSlotted\n      : this.kirbyItemsDefault;\n  }\n\n  private scrollToIndexIntoViewWhenOpeningPopup(): void {\n    const focusedIndex = this.searchItems.indexOf(this.focusedItem);\n    if (focusedIndex < 0) return;\n\n    if (focusedIndex === 0) {\n      this.virtualScrollViewport?.setRenderedRange({ start: 0, end: 20 });\n      this.virtualScrollViewport?.checkViewportSize();\n      return;\n    }\n\n    this.virtualScrollViewport?.scrollToIndex(focusedIndex);\n  }\n}\n","<span class=\"kirby-visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ _liveRegionText }}\n</span>\n<div (click)=\"onToggle($event)\" #rootElement>\n  <input\n    kirby-input\n    type=\"text\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    [hasError]=\"hasError\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"onInput($event)\"\n  />\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\" kirby-affix=\"suffix\"></kirby-icon>\n</div>\n\n<kirby-popover\n  [target]=\"rootElement\"\n  [popout]=\"popout\"\n  (click)=\"onPopoverClick()\"\n  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item>\n        <p class=\"kirby-item-title no-results\">{{ noSearchResultsText }}</p>\n      </kirby-item>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"combobox-viewport\"\n        role=\"listbox\"\n        minBufferPx=\"1240\"\n        maxBufferPx=\"1620\"\n        [itemSize]=\"itemHeight\"\n        [style.height.px]=\"viewportHeight\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of searchItems\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate || defaultItemTemplate;\n              context: {\n                $implicit: item,\n                selected: item === selectedItem,\n                focused: item === focusedItem,\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-focused=\"focused\">\n  <kirby-item\n    role=\"option\"\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    [class.focused]=\"focused\"\n    [attr.id]=\"getItemId(item)\"\n    [attr.aria-selected]=\"selected\"\n    (click)=\"onItemSelect(item)\"\n  >\n    <p class=\"kirby-item-title\">{{ getItemText(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -88,11 +88,11 @@ class ImageBannerComponent {
         this.imageError.emit($event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ImageBannerComponent, deps: [{ token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ImageBannerComponent, isStandalone: true, selector: "kirby-x-image-banner", inputs: { title: "title", imagePath: "imagePath", bodyText: "bodyText", showButtonInNarrowView: "showButtonInNarrowView", actionButtonText: "actionButtonText", externalLink: "externalLink", backgroundBlur: "backgroundBlur" }, outputs: { bannerClick: "bannerClick", dismissClick: "dismissClick", imageError: "imageError" }, host: { properties: { "class.show-button-in-narrow-view": "this.showButtonInNarrowView", "class": "this.backgroundBlur" } }, hostDirectives: [{ directive: ImageBannerHeightDirective }], ngImport: i0, template: "<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", 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}@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(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:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;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:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;min-height:180px;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;position:relative}}.main-content{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:14px 0 6px 8px;overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:10px 8px 8px 0}}.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-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}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.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:24px;min-width:24px;margin-bottom:4px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex;margin-bottom:8px}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}button.dismiss{position:absolute;top:16px;right:16px;margin:0}.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(clamp(13px, 1rem, 32px)*1.5 + 2.8572*clamp(12px, .875rem, 28px)) )}@container banner (width >= 600px){.text-content-layout{gap:12px;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:clamp(13px,1rem,32px);font-weight:700;line-height:1.5}@supports (text-box: trim-start text alphabetic){.kirby-text-normal-bold,.title{margin-top:0;text-box:trim-start text alphabetic}}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ImageBannerComponent, isStandalone: true, selector: "kirby-x-image-banner", inputs: { title: "title", imagePath: "imagePath", bodyText: "bodyText", showButtonInNarrowView: "showButtonInNarrowView", actionButtonText: "actionButtonText", externalLink: "externalLink", backgroundBlur: "backgroundBlur" }, outputs: { bannerClick: "bannerClick", dismissClick: "dismissClick", imageError: "imageError" }, host: { properties: { "class.show-button-in-narrow-view": "this.showButtonInNarrowView", "class": "this.backgroundBlur" } }, hostDirectives: [{ directive: ImageBannerHeightDirective }], ngImport: i0, template: "<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    <div class=\"dismiss\">\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      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </div>\n  }\n</kirby-card>\n", styles: [":host{display:block}: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(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:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;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:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}.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;flex-direction:column;justify-content:space-between}@container banner (width < 600px){.main-content{flex-direction:row}}.main-content{min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;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}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.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{height:164px}}.main-content-body{display:flex;flex:1;justify-content:space-between;height:100%}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@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:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.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:24px;min-width:24px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@container banner (width >= 600px){.text-content-layout{gap:12px}}.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:16px;font-weight:700;line-height:24px}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ImageBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-x-image-banner', imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective], hostDirectives: [ImageBannerHeightDirective], template: "<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", 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}@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(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:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;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:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}.main-content-wrapper{width:100%;min-height:180px;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;position:relative}}.main-content{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:14px 0 6px 8px;overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:10px 8px 8px 0}}.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-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}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.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:24px;min-width:24px;margin-bottom:4px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex;margin-bottom:8px}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}button.dismiss{position:absolute;top:16px;right:16px;margin:0}.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(clamp(13px, 1rem, 32px)*1.5 + 2.8572*clamp(12px, .875rem, 28px)) )}@container banner (width >= 600px){.text-content-layout{gap:12px;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:clamp(13px,1rem,32px);font-weight:700;line-height:1.5}@supports (text-box: trim-start text alphabetic){.kirby-text-normal-bold,.title{margin-top:0;text-box:trim-start text alphabetic}}\n"] }]
+            args: [{ selector: 'kirby-x-image-banner', imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective], hostDirectives: [ImageBannerHeightDirective], template: "<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    <div class=\"dismiss\">\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      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </div>\n  }\n</kirby-card>\n", styles: [":host{display:block}: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(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:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;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:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}.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;flex-direction:column;justify-content:space-between}@container banner (width < 600px){.main-content{flex-direction:row}}.main-content{min-height:var(--kirby-x-image-banner-min-height, 84px);box-sizing:border-box;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}@container banner (width >= 600px){.main-content{flex:1;gap:12px;padding:8px 8px 8px 0}}.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{height:164px}}.main-content-body{display:flex;flex:1;justify-content:space-between;height:100%}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@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:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:8px}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:48px}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:16px;align-self:center}.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:24px;min-width:24px}.narrow-view-action:is(a) kirby-icon{font-size:24px}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}.dismiss{position:absolute;top:16px;right:16px;height:fit-content}.dismiss button{margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@container banner (width >= 600px){.text-content-layout{gap:12px}}.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:16px;font-weight:700;line-height:24px}\n"] }]
         }], ctorParameters: () => [{ type: i1.TranslationService }], propDecorators: { title: [{
                 type: Input
             }], imagePath: [{