@brickclay-org/ui 0.1.84 → 0.1.86

package/fesm2022/brickclay-org-ui.mjs

@@ -10,9 +10,10 @@ import * as i2$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CdkDragHandle } from '@angular/cdk/drag-drop';
 import * as i2$2 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkScrollable, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import * as i3 from '@angular/cdk/overlay';
+import { OverlayModule, Overlay } from '@angular/cdk/overlay';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { DIALOG_DATA, CdkDialogContainer, Dialog, DialogModule } from '@angular/cdk/dialog';
-import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import { toObservable } from '@angular/core/rxjs-interop';
 
@@ -21,6 +22,8 @@ import { toObservable } from '@angular/core/rxjs-interop';
 const BrickclayIcons = {
     arrowleft: 'assets/icons/chevron-left.svg',
     arrowRight: 'assets/icons/chevron-right.svg',
+    arrowLeftDouble: 'assets/icons/double-chevron-left.svg',
+    arrowRightDouble: 'assets/icons/double-chevron-right.svg',
     calenderIcon: 'assets/icons/custom-calender.svg',
     timerIcon: 'assets/icons/timer.svg',
 };
@@ -4231,9 +4234,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Shared document/window listeners for `bkTooltip`.
+ *
+ * Every directive instance used to declare its own `document:mousedown`,
+ * `window:scroll` and `window:resize` host listeners. On dense screens (the ticket
+ * documents page renders several hundred tooltip hosts) a single click therefore ran
+ * several hundred handlers and — because host listeners mark their view dirty —
+ * forced a full application change-detection pass, which is what made rapid clicking
+ * lock up the page.
+ *
+ * Only a tooltip that is currently visible has anything to do, so tooltips subscribe
+ * while shown and unsubscribe when hidden. The listeners are attached outside the
+ * Angular zone: they only mutate tooltip styles through `Renderer2`, so no change
+ * detection is required.
+ */
+class BkTooltipInteractionService {
+    zone;
+    visibleTooltips = new Set();
+    listenersAttached = false;
+    constructor(zone) {
+        this.zone = zone;
+    }
+    /** Called when a tooltip becomes visible. */
+    register(tooltip) {
+        this.attachListeners();
+        this.visibleTooltips.add(tooltip);
+    }
+    /** Called when a tooltip is hidden or destroyed. */
+    unregister(tooltip) {
+        this.visibleTooltips.delete(tooltip);
+    }
+    attachListeners() {
+        if (this.listenersAttached) {
+            return;
+        }
+        this.listenersAttached = true;
+        this.zone.runOutsideAngular(() => {
+            const hideAll = () => {
+                this.forEachVisible((tooltip) => tooltip.hideOnGlobalInteraction());
+            };
+            document.addEventListener('mousedown', hideAll);
+            document.addEventListener('touchstart', hideAll);
+            window.addEventListener('scroll', () => {
+                this.forEachVisible((tooltip) => tooltip.repositionOnViewportChange());
+            });
+            window.addEventListener('resize', () => {
+                this.forEachVisible((tooltip) => tooltip.repositionOnViewportChange());
+            });
+        });
+    }
+    forEachVisible(action) {
+        if (this.visibleTooltips.size === 0) {
+            return;
+        }
+        // Copy: hiding a tooltip unregisters it while iterating.
+        for (const tooltip of Array.from(this.visibleTooltips)) {
+            action(tooltip);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTooltipInteractionService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTooltipInteractionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTooltipInteractionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
 class BKTooltipDirective {
     el;
     renderer;
+    tooltipInteraction;
     tooltipContent = '';
     tooltipPosition = 'right';
     scrollable = false;
@@ -4245,9 +4316,11 @@ class BKTooltipDirective {
     isHoveringTooltip = false;
     hideTimeout = null;
     tooltipListeners = [];
-    constructor(el, renderer) {
+    isRegisteredWithInteractionService = false;
+    constructor(el, renderer, tooltipInteraction) {
         this.el = el;
         this.renderer = renderer;
+        this.tooltipInteraction = tooltipInteraction;
     }
     ngOnInit() {
         this.createTooltip();
@@ -4262,6 +4335,7 @@ class BKTooltipDirective {
             clearTimeout(this.hideTimeout);
             this.hideTimeout = null;
         }
+        this.unregisterFromInteractionService();
         this.cleanupTooltipListeners();
         this.removeTooltip();
     }
@@ -4314,6 +4388,7 @@ class BKTooltipDirective {
                 opacity: '1',
             });
             this.renderer.setStyle(document.body, 'overflow-x', 'hidden'); // ✅ temporarily lock horizontal scroll
+            this.registerWithInteractionService();
         }
     }
     onMouseLeave() {
@@ -4336,24 +4411,34 @@ class BKTooltipDirective {
     //     this.renderer.removeStyle(document.body, 'overflow-x');
     //   }
     // }
-    // Hide tooltip the instant *any* mousedown happens, not just on this host:
-    // otherwise a tooltip shown by hovering one element (e.g. a "+N" badge)
-    // can still be mid-fade — mouseleave's hide is debounced 100ms and the
-    // fade itself takes 300ms — when a click elsewhere opens something else
-    // (a dropdown panel, another tooltip's host), so the two stack visibly.
-    // Also covers CDK drag-drop, which steals the element before mouseleave fires.
-    onInteract() {
+    /** @see BkTooltipInteractionService — shared document/window listeners */
+    hideOnGlobalInteraction() {
         if (this.hideTimeout) {
             clearTimeout(this.hideTimeout);
             this.hideTimeout = null;
         }
         this.hideTooltipInstant();
     }
-    onWindowChange() {
+    /** @see BkTooltipInteractionService — shared document/window listeners */
+    repositionOnViewportChange() {
         if (this.tooltipElement?.style.visibility === 'visible') {
             this.setTooltipPosition();
         }
     }
+    registerWithInteractionService() {
+        if (this.isRegisteredWithInteractionService) {
+            return;
+        }
+        this.tooltipInteraction.register(this);
+        this.isRegisteredWithInteractionService = true;
+    }
+    unregisterFromInteractionService() {
+        if (!this.isRegisteredWithInteractionService) {
+            return;
+        }
+        this.tooltipInteraction.unregister(this);
+        this.isRegisteredWithInteractionService = false;
+    }
     isTooltipContentEmpty() {
         if (typeof this.tooltipContent === 'string') {
             return !this.tooltipContent.trim();
@@ -4385,6 +4470,7 @@ class BKTooltipDirective {
             this.renderer.removeStyle(document.body, 'overflow-x'); // ✅ restore scroll when tooltip hides
         }
         this.isHoveringTooltip = false;
+        this.unregisterFromInteractionService();
     }
     setupTooltipHoverListeners() {
         if (!this.tooltipElement)
@@ -4405,6 +4491,7 @@ class BKTooltipDirective {
                     visibility: 'visible',
                     opacity: '1',
                 });
+                this.registerWithInteractionService();
             }
         });
         // Add mouseleave listener to tooltip
@@ -4465,9 +4552,7 @@ class BKTooltipDirective {
             position: 'fixed',
             visibility: 'hidden',
             opacity: '0',
-            // Tooltips can originate inside popovers/dropdowns (z-index 10000).
-            // Keep this transient explanatory layer above its owning overlay.
-            zIndex: '11000',
+            zIndex: '9999',
             transition: 'opacity 0.3s ease, visibility 0.3s ease',
             maxWidth: '300px',
             wordBreak: 'normal', // ← only break at spaces
@@ -4690,8 +4775,8 @@ class BKTooltipDirective {
             this.renderer.setStyle(el, prop, value);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BKTooltipDirective, isStandalone: true, selector: "[bkTooltip]", inputs: { tooltipContent: ["bkTooltip", "tooltipContent"], tooltipPosition: ["bkTooltipPosition", "tooltipPosition"], scrollable: ["bkTooltipScrollable", "scrollable"], maxHeight: ["bkTooltipMaxHeight", "maxHeight"], tooltipSize: ["bkTooltipSize", "tooltipSize"], autoHeight: ["bkTooltipAutoHeight", "autoHeight"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "document:mousedown": "onInteract()", "touchstart": "onInteract()", "window:scroll": "onWindowChange()", "window:resize": "onWindowChange()" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: BkTooltipInteractionService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BKTooltipDirective, isStandalone: true, selector: "[bkTooltip]", inputs: { tooltipContent: ["bkTooltip", "tooltipContent"], tooltipPosition: ["bkTooltipPosition", "tooltipPosition"], scrollable: ["bkTooltipScrollable", "scrollable"], maxHeight: ["bkTooltipMaxHeight", "maxHeight"], tooltipSize: ["bkTooltipSize", "tooltipSize"], autoHeight: ["bkTooltipAutoHeight", "autoHeight"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, decorators: [{
             type: Directive,
@@ -4699,7 +4784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     selector: '[bkTooltip]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tooltipContent: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: BkTooltipInteractionService }], propDecorators: { tooltipContent: [{
                 type: Input,
                 args: ['bkTooltip']
             }], tooltipPosition: [{
@@ -4723,18 +4808,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], onMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave']
-            }], onInteract: [{
-                type: HostListener,
-                args: ['document:mousedown']
-            }, {
-                type: HostListener,
-                args: ['touchstart']
-            }], onWindowChange: [{
-                type: HostListener,
-                args: ['window:scroll']
-            }, {
-                type: HostListener,
-                args: ['window:resize']
             }] } });
 
 class BkGrid {
@@ -4750,6 +4823,8 @@ class BkGrid {
     noRecordFoundHeight = '';
     /** Custom illustration for the empty state. Falls back to a built-in SVG when omitted. */
     noRecordImgUrl;
+    /** Show the empty-state illustration above the message. Set false to show the message only. */
+    showNoRecordImg = true;
     noRecordMessage = 'Data may be empty, or try adjusting your filter.';
     /** Static row class or a function that returns a class per row. Row data may also include `class` via TableRows. */
     rows;
@@ -4920,14 +4995,14 @@ class BkGrid {
         });
     }
     get noRecordImagePath() {
-        return this.noRecordImgUrl || './assets/media/logos/no-data-found.jpg';
+        return this.noRecordImgUrl || './assets/icons/no-data-found.jpg';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions", customClass: "customClass", actionIconClass: "actionIconClass", actionClass: "actionClass", showNoRecords: "showNoRecords", noRecordFoundHeight: "noRecordFoundHeight", noRecordImgUrl: "noRecordImgUrl", noRecordMessage: "noRecordMessage", rows: "rows" }, outputs: { change: "change", actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                        [src]=\"icon.url\"\r\n                        class=\"size-4\"\r\n                        [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                        [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                        [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <!-- <bk-icon-button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [size]=\"\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                      (clicked)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\">\r\n                    </bk-icon-button> -->\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              <img\r\n                [src]=\"noRecordImagePath\"\r\n                class=\"mb-3 w-96\"\r\n                alt=\"No data found\"\r\n              />\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >{{ noRecordMessage }}</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass", "customBg", "customBorder", "customText"], outputs: ["clicked"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions", customClass: "customClass", actionIconClass: "actionIconClass", actionClass: "actionClass", showNoRecords: "showNoRecords", noRecordFoundHeight: "noRecordFoundHeight", noRecordImgUrl: "noRecordImgUrl", showNoRecordImg: "showNoRecordImg", noRecordMessage: "noRecordMessage", rows: "rows" }, outputs: { change: "change", actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                        [src]=\"icon.url\"\r\n                        class=\"size-4\"\r\n                        [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                        [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                        [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <!-- <bk-icon-button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [size]=\"\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                      (clicked)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\">\r\n                    </bk-icon-button> -->\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              @if (showNoRecordImg) {\r\n                <img\r\n                  [src]=\"noRecordImagePath\"\r\n                  class=\"mb-3 w-96\"\r\n                  alt=\"No data found\"\r\n                />\r\n              }\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >{{ noRecordMessage }}</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass", "customBg", "customBorder", "customText"], outputs: ["clicked"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-grid', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule, BkBadge, BKTooltipDirective, BkCheckbox, FormsModule], template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                        [src]=\"icon.url\"\r\n                        class=\"size-4\"\r\n                        [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                        [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                        [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <!-- <bk-icon-button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [size]=\"\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                      (clicked)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\">\r\n                    </bk-icon-button> -->\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              <img\r\n                [src]=\"noRecordImagePath\"\r\n                class=\"mb-3 w-96\"\r\n                alt=\"No data found\"\r\n              />\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >{{ noRecordMessage }}</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'bk-grid', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule, BkBadge, BKTooltipDirective, BkCheckbox, FormsModule], template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                        [src]=\"icon.url\"\r\n                        class=\"size-4\"\r\n                        [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                        [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                        [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <!-- <bk-icon-button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [size]=\"\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                      (clicked)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\">\r\n                    </bk-icon-button> -->\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              @if (showNoRecordImg) {\r\n                <img\r\n                  [src]=\"noRecordImagePath\"\r\n                  class=\"mb-3 w-96\"\r\n                  alt=\"No data found\"\r\n                />\r\n              }\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >{{ noRecordMessage }}</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { draggable: [{
                 type: Input
             }], columns: [{
@@ -4948,6 +5023,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], noRecordImgUrl: [{
                 type: Input
+            }], showNoRecordImg: [{
+                type: Input
             }], noRecordMessage: [{
                 type: Input
             }], rows: [{
@@ -5384,10 +5461,21 @@ class BkSelect {
     disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     closeOnSelect = input(true, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : []));
+    /**
+     * When on, the dropdown opens as soon as the control receives keyboard focus
+     * (e.g. tabbing to it) and closes once focus leaves it. Off by default so the
+     * existing click/Enter-to-open behaviour is unchanged.
+     */
+    openOnFocus = input(false, ...(ngDevMode ? [{ debugName: "openOnFocus" }] : []));
     dropdownPosition = input('bottom', ...(ngDevMode ? [{ debugName: "dropdownPosition" }] : []));
     hasError = false;
     errorMessage = '';
-    // 1. NEW INPUT: Toggle append-to-body behavior
+    /**
+     * @deprecated No-op, kept only so existing `[appendToBody]="true"` bindings don't break.
+     * The dropdown now always positions via Angular CDK Overlay, which portals into the shared
+     * `cdk-overlay-container` unconditionally — the exact clipping/stacking escape this input used
+     * to opt into by hand is now the only behaviour there is. Safe to remove from call sites.
+     */
     appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
     // --- Outputs ---
     open = output();
@@ -5404,6 +5492,7 @@ class BkSelect {
     optionsRef;
     controlWrapper;
     dropdownPanel;
+    selectOverlay;
     chipsViewport;
     measureChips;
     measurePlus;
@@ -5417,26 +5506,21 @@ class BkSelect {
     gridDraftOptions = signal([], ...(ngDevMode ? [{ debugName: "gridDraftOptions" }] : []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
     markedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "markedIndex" }] : []));
-    // Side the panel is actually rendered on. Starts from the requested
-    // `dropdownPosition` but is auto-flipped based on available viewport space
-    // (see applyPlacement). Used by both append-to-body and inline modes.
+    // Side the panel actually rendered on, purely for the CSS `[data-position="top"]` margin
+    // tweak — driven by CDK's own (positionChange) rather than a hand-rolled space comparison
+    // (see onPositionChange). The fit/flip decision itself lives entirely in CDK now.
     placement = signal('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : []));
-    // When appendToBody is on we physically relocate the panel to <body> so it
-    // escapes any transformed/overflow ancestor (e.g. an animated dialog, whose
-    // residual transform would otherwise make position:fixed resolve against the
-    // dialog and get clipped). These track the panel's home so we can put it back
-    // before Angular removes it on close.
-    originalPanelParent = null;
-    originalPanelAnchor = null;
-    panelInBody = false;
     // Number of multi-select chips currently rendered before collapsing into "+N".
     // Computed dynamically from the available width (see recomputeVisibleChips()).
     visibleCount = signal(0, ...(ngDevMode ? [{ debugName: "visibleCount" }] : []));
     resizeObserver;
-    dropdownStyle = signal({
-        left: '0px',
-        width: 'auto'
-    }, ...(ngDevMode ? [{ debugName: "dropdownStyle" }] : []));
+    /**
+     * Panel width, kept equal to the control's — matches the old `dropdownStyle().width`
+     * behaviour. Set on open and re-measured by the same ResizeObserver that already tracks
+     * the control for chip recomputation, so a responsive layout keeps the panel in sync while
+     * it's open.
+     */
+    dropdownWidth = signal(null, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
     filteredItems = computed(() => {
         const term = this.searchTerm().toLowerCase();
         const list = this.items();
@@ -5480,105 +5564,59 @@ class BkSelect {
         });
     }
     ngAfterViewInit() {
-        // Recompute visible chips whenever the control is resized (responsive
-        // layouts, manual width changes, container resizes, etc.).
+        // Recompute visible chips — and, while open, the panel width — whenever the control is
+        // resized (responsive layouts, manual width changes, container resizes, etc.).
         if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => this.scheduleRecompute());
+            this.resizeObserver = new ResizeObserver(() => {
+                this.scheduleRecompute();
+                if (this.isOpen())
+                    this.dropdownWidth.set(this.controlWrapper.nativeElement.offsetWidth);
+            });
             if (this.controlWrapper?.nativeElement) {
                 this.resizeObserver.observe(this.controlWrapper.nativeElement);
             }
         }
         this.scheduleRecompute();
-        // Keep the append-to-body (fixed) panel glued to the control while any
-        // ancestor scrolls or the window resizes. Capture phase (`true`) is what
-        // lets us catch scrolling inside nested overflow containers, not just the
-        // window — @HostListener('window:scroll') would miss those.
-        window.addEventListener('scroll', this.reposition, true);
-        window.addEventListener('resize', this.reposition);
     }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
-        window.removeEventListener('scroll', this.reposition, true);
-        window.removeEventListener('resize', this.reposition);
-        // If we're torn down while open, don't leave the relocated panel orphaned in <body>.
-        if (this.panelInBody) {
-            this.dropdownPanel?.nativeElement.remove();
-            this.panelInBody = false;
-        }
-    }
-    // Re-evaluate placement as the page scrolls/resizes. For append-to-body this
-    // recomputes the fixed coordinates so the panel follows the control while it's
-    // visible, and closes once the control is fully scrolled out of view (by the
-    // viewport OR any scroll container such as a modal body). Inline just re-flips.
-    // Bound as an arrow fn so it can be add/removeEventListener'd.
-    reposition = () => {
-        if (!this.isOpen())
-            return;
-        if (this.appendToBody()) {
-            const rect = this.controlWrapper?.nativeElement.getBoundingClientRect();
-            if (rect && this.isControlClipped(rect)) {
-                this.closeDropdown();
-                return;
-            }
-        }
-        this.applyPlacement();
-    };
-    /**
-     * True when the control is fully outside the visible area — either the
-     * viewport or a scrollable/clipping ancestor (e.g. a dialog's scroll body).
-     * Used to close the floating (append-to-body) panel once its anchor is no
-     * longer on screen, instead of leaving it hanging.
-     */
-    isControlClipped(rect) {
-        // Outside the viewport.
-        if (rect.bottom <= 0 || rect.top >= window.innerHeight ||
-            rect.right <= 0 || rect.left >= window.innerWidth) {
-            return true;
-        }
-        // Outside any clipping ancestor.
-        let el = this.controlWrapper?.nativeElement.parentElement;
-        while (el && el !== document.body) {
-            const style = getComputedStyle(el);
-            const clips = /(auto|scroll|hidden|clip|overlay)/;
-            if (clips.test(style.overflowY) || clips.test(style.overflowX)) {
-                const r = el.getBoundingClientRect();
-                if (rect.bottom <= r.top || rect.top >= r.bottom ||
-                    rect.right <= r.left || rect.left >= r.right) {
-                    return true;
-                }
-            }
-            el = el.parentElement;
-        }
-        return false;
+        this.detachOverlayScrollTracking();
     }
     /**
-     * Relocate the panel node to <body> so it truly escapes any transformed or
-     * overflow-clipped ancestor (dialogs, drawers, cards with overflow, etc.).
-     * Setting position:fixed alone is not enough when an ancestor has a transform.
+     * CDK's default `reposition` scroll strategy only reacts to real `document`/`window` scroll —
+     * it has no way to know an app shell might scroll a nested container instead (this one
+     * commonly does — dashboard layouts with a fixed header/sidebar and a scrollable content pane).
+     * A capture-phase listener on `document` still sees scroll events fired on any descendant
+     * scrollable element (scroll doesn't bubble, but capture does) — same trick `bk-custom-calendar`
+     * and the `bk-input` phone dropdown already use. rAF-throttled so a fast scroll doesn't force
+     * layout on every tick.
      */
-    movePanelToBody() {
-        const panel = this.dropdownPanel?.nativeElement;
-        if (!panel || this.panelInBody)
+    overlayScrollRafId = null;
+    onOverlayScroll = () => {
+        if (this.overlayScrollRafId != null)
             return;
-        this.originalPanelParent = panel.parentNode;
-        this.originalPanelAnchor = panel.nextSibling;
-        document.body.appendChild(panel);
-        this.panelInBody = true;
+        this.overlayScrollRafId = requestAnimationFrame(() => {
+            this.overlayScrollRafId = null;
+            this.selectOverlay?.overlayRef?.updatePosition();
+        });
+    };
+    attachOverlayScrollTracking() {
+        document.addEventListener('scroll', this.onOverlayScroll, true);
+        window.addEventListener('resize', this.onOverlayScroll);
     }
-    /**
-     * Return the panel to its original DOM position so Angular's @if can remove
-     * it cleanly on close. Must run before isOpen is set to false.
-     */
-    restorePanel() {
-        const panel = this.dropdownPanel?.nativeElement;
-        if (!panel || !this.panelInBody)
-            return;
-        if (this.originalPanelParent) {
-            this.originalPanelParent.insertBefore(panel, this.originalPanelAnchor);
+    detachOverlayScrollTracking() {
+        document.removeEventListener('scroll', this.onOverlayScroll, true);
+        window.removeEventListener('resize', this.onOverlayScroll);
+        if (this.overlayScrollRafId != null) {
+            cancelAnimationFrame(this.overlayScrollRafId);
+            this.overlayScrollRafId = null;
         }
-        this.panelInBody = false;
-        this.originalPanelParent = null;
-        this.originalPanelAnchor = null;
+    }
+    /** Derives `placement` (for the `[data-position="top"]` CSS margin tweak) from which of
+     *  `selectDropdownPositions` CDK actually applied — replaces the old hand-rolled space
+     *  comparison now that the fit/flip decision itself lives in CDK. */
+    onPositionChange(event) {
+        this.placement.set(event.connectionPair.originY === 'top' ? 'top' : 'bottom');
     }
     scheduleRecompute() {
         // Defer to the next frame so the hidden measurement row has been laid out.
@@ -5720,6 +5758,7 @@ class BkSelect {
     openDropdown() {
         if (this.isOpen())
             return;
+        this.opening = true;
         this.panelReady.set(false);
         // Close previously opened dropdown
         if (BkSelect.activeInstance && BkSelect.activeInstance !== this) {
@@ -5729,37 +5768,64 @@ class BkSelect {
         if (this.usesGridDraft()) {
             this.gridDraftOptions.set([...this.selectedOptions()]);
         }
-        // Decide the initial side before the panel paints (uses an estimated
-        // height; corrected after render in the setTimeout below).
-        this.applyPlacement();
+        // Give Up/Down navigation a defined starting point instead of a stale index
+        // from a previous open: highlight the selected option, or the first option
+        // when nothing is selected, so the very first arrow press has something to
+        // move from and the highlight is visible immediately.
+        this.markedIndex.set(this.initialMarkedIndex());
+        // Keep the panel exactly as wide as the control, same as the old dropdownStyle().width.
+        this.dropdownWidth.set(this.controlWrapper.nativeElement.offsetWidth);
+        this.attachOverlayScrollTracking();
         this.isOpen.set(true);
         this.open.emit();
         this.focus.emit();
         setTimeout(() => {
             if (!this.isOpen())
                 return;
-            // Panel is in the DOM now. In appendToBody mode, relocate it to <body>
-            // so it escapes any transformed/overflow ancestor, then position it.
-            if (this.appendToBody())
-                this.movePanelToBody();
-            // Recompute with the panel's real height so the initial up/down flip is
-            // accurate (openDropdown ran applyPlacement() before the panel existed,
-            // using an estimated height).
-            this.applyPlacement();
+            // Position/flip is now entirely CDK's job (see selectDropdownPositions +
+            // onPositionChange) — nothing to compute here anymore.
             this.panelReady.set(true);
-            if (this.searchable()) {
-                this.searchInput?.nativeElement.focus();
-            }
-            else {
-                this.controlWrapper?.nativeElement.focus();
-            }
+            // The panel is `visibility: hidden` until panelReady flips to true, and
+            // that style is only written to the DOM on the next change-detection
+            // pass — not synchronously with the signal write above. Focusing an
+            // element inside a still-hidden subtree is a no-op (focus falls back to
+            // <body>, so Up/Down never reach the options), so defer the focus one
+            // frame, by which point the panel is actually visible.
+            requestAnimationFrame(() => {
+                if (!this.isOpen()) {
+                    this.opening = false;
+                    return;
+                }
+                // When the search field is visible it is the entry point: focus it so
+                // the user can type immediately, and Up/Down keys navigate the options
+                // from here (the input forwards keydown to onKeyDown). Otherwise keep
+                // keyboard control on the trigger. preventScroll stops the page jumping.
+                // The focusout this triggers (trigger→search) fires synchronously while
+                // `opening` is still true, so onFocusOut ignores it; only after focus
+                // lands do we end the opening window.
+                if (this.searchable()) {
+                    this.searchInput?.nativeElement.focus({ preventScroll: true });
+                }
+                else {
+                    this.controlWrapper?.nativeElement.focus({ preventScroll: true });
+                }
+                // Bring the initially marked option into view so keyboard navigation
+                // starts from something the user can actually see.
+                if (this.markedIndex() >= 0)
+                    this.scrollToMarked();
+                // End the opening window one more frame later. On the very first open the
+                // freshly-rendered field can receive focus a frame late, so its
+                // trigger→search focusout arrives after this rAF — keeping the guard up an
+                // extra frame ensures that focusout is still ignored (no first-open flicker).
+                requestAnimationFrame(() => (this.opening = false));
+            });
         });
     }
     closeDropdown() {
         if (!this.isOpen())
             return;
-        // Put the panel back where Angular expects it before the @if removes it.
-        this.restorePanel();
+        this.opening = false;
+        this.detachOverlayScrollTracking();
         this.isOpen.set(false);
         this.panelReady.set(false);
         this.searchTerm.set('');
@@ -5770,74 +5836,16 @@ class BkSelect {
             BkSelect.activeInstance = null;
         }
     }
-    getTop() {
-        if (this.appendToBody()) {
-            return this.dropdownStyle().top ?? null;
-        }
-        // NOT appendToBody — use the auto-flipped placement, not the raw input.
-        return this.placement() === 'bottom' ? '105%' : null;
-    }
-    getBottom() {
-        if (this.appendToBody()) {
-            return this.dropdownStyle().bottom ?? null;
-        }
-        // NOT appendToBody — use the auto-flipped placement, not the raw input.
-        return this.placement() === 'top' ? 'calc(100% + 4px)' : null;
-    }
     /**
-     * Decides which side the panel should open on (auto-flip) and, for
-     * append-to-body mode, computes the fixed coordinates. Shared by both modes
-     * and re-run on open and on every scroll/resize so the panel snaps to
-     * whichever side has room — honouring `dropdownPosition` when it fits.
+     * Preferred position list handed to CDK, in try-order — honours `dropdownPosition` first,
+     * falling back to the other side only when the preferred one genuinely doesn't fit. Replaces
+     * the old hand-rolled `applyPlacement()` space comparison entirely.
      */
-    applyPlacement() {
-        const control = this.controlWrapper?.nativeElement;
-        if (!control)
-            return;
-        const rect = control.getBoundingClientRect();
-        const gap = 4;
-        // Actual panel height once it's rendered; fall back to a sensible estimate
-        // on the very first open (panel isn't in the DOM yet at that point — a
-        // follow-up call after render corrects it with the real height).
-        const panelHeight = this.dropdownPanel?.nativeElement.offsetHeight || 300;
-        const spaceBelow = window.innerHeight - rect.bottom - gap;
-        const spaceAbove = rect.top - gap;
-        // Honour the requested position when it fits; otherwise flip to wherever
-        // there's more room.
-        const preferred = this.dropdownPosition();
-        let placeTop;
-        if (preferred === 'top') {
-            placeTop = spaceAbove >= panelHeight || spaceAbove > spaceBelow;
-        }
-        else {
-            placeTop = spaceBelow < panelHeight && spaceAbove > spaceBelow;
-        }
-        this.placement.set(placeTop ? 'top' : 'bottom');
-        // Inline (absolute) mode is positioned by CSS relative to the control, so
-        // the placement signal above is all it needs. Only append-to-body needs
-        // explicit fixed coordinates.
-        if (!this.appendToBody())
-            return;
-        if (placeTop) {
-            this.dropdownStyle.set({
-                top: undefined,
-                bottom: `${window.innerHeight - rect.top + gap}px`,
-                left: `${rect.left}px`,
-                width: `${rect.width}px`
-            });
-        }
-        else {
-            this.dropdownStyle.set({
-                top: `${rect.bottom + gap}px`,
-                bottom: undefined,
-                left: `${rect.left}px`,
-                width: `${rect.width}px`
-            });
-        }
+    get selectDropdownPositions() {
+        const bottom = { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 };
+        const top = { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 };
+        return this.dropdownPosition() === 'top' ? [top, bottom] : [bottom, top];
     }
-    // Scroll/resize are handled by the capture-phase listeners wired up in
-    // ngAfterViewInit (see `reposition`), which keep the panel attached to the
-    // control and re-flip it up/down as space allows, instead of closing it.
     // ... (toggleSelectAll, handleSelection, removeOption, handleClear logic same as before) ...
     toggleSelectAll(event) {
         event.stopPropagation();
@@ -5944,6 +5952,43 @@ class BkSelect {
         this.markedIndex.set(0);
         this.search.emit({ term: val, items: this.filteredItems() });
     }
+    /**
+     * Options in the exact order they are rendered (groups flattened). This is the
+     * space Up/Down navigation and the marked-index operate in — using the flat
+     * `filteredItems()` would desync from the on-screen order once grouping
+     * reshuffles rows. For an ungrouped list this equals `filteredItems()`.
+     */
+    flatOptions = computed(() => this.groupedItems().flatMap(group => group.items), ...(ngDevMode ? [{ debugName: "flatOptions" }] : []));
+    /** The option the marker currently sits on, or null. */
+    markedOption = computed(() => {
+        const index = this.markedIndex();
+        const list = this.flatOptions();
+        return index >= 0 && index < list.length ? list[index] : null;
+    }, ...(ngDevMode ? [{ debugName: "markedOption" }] : []));
+    /**
+     * Whether an option carries the keyboard/hover marker. Matched by identity
+     * rather than by row position so two groups can't share a highlight just
+     * because the marked item sits at the same index within each group.
+     */
+    isMarked(item) {
+        return item === this.markedOption();
+    }
+    /** Move the marker to a hovered option by its position in the rendered order. */
+    markOption(item) {
+        this.markedIndex.set(this.flatOptions().indexOf(item));
+    }
+    /**
+     * Rendered-order index that Up/Down navigation starts from when the dropdown
+     * opens: the first already-selected option, or the first option when nothing
+     * is selected. Returns -1 only for an empty list.
+     */
+    initialMarkedIndex() {
+        const list = this.flatOptions();
+        if (!list.length)
+            return -1;
+        const selected = list.findIndex(item => this.isItemSelected(item));
+        return selected >= 0 ? selected : 0;
+    }
     onKeyDown(event) {
         if (!this.isOpen()) {
             if (event.key === 'Enter' || event.key === ' ') {
@@ -5952,7 +5997,7 @@ class BkSelect {
             }
             return;
         }
-        const list = this.filteredItems();
+        const list = this.flatOptions();
         const current = this.markedIndex();
         switch (event.key) {
             case 'Tab':
@@ -6037,22 +6082,108 @@ class BkSelect {
         this.selectedOptions.set(matchedItems);
     }
     el = inject(ElementRef);
-    onClickOutside(e) {
-        const target = e.target;
-        // When appendToBody relocates the panel to <body>, it's no longer inside
-        // the host element — treat clicks within the panel as "inside" too so
-        // interacting with the search box / scrollbar doesn't close it.
-        if (this.el.nativeElement.contains(target))
+    // Click-outside-to-close is now `(overlayOutsideClick)` in the template, driven by CDK's
+    // document-level outside-pointer-event dispatcher — it already excludes clicks on the
+    // cdkOverlayOrigin (the control) by design, so toggleDropdown() stays the sole opener. No
+    // backdrop involved, so it doesn't block page/nested-container scroll like a modal would.
+    onOverlayOutsideClick() {
+        this.closeDropdown();
+    }
+    // Set for the moment a pointer press focuses the control, so openOnFocus can
+    // tell a mouse/touch focus apart from a keyboard (Tab) one. openOnFocus is a
+    // keyboard affordance: clicks open through their own toggle (or the label),
+    // and must not also trigger the focus-open path.
+    pointerFocus = false;
+    // True from the moment openDropdown starts until focus has been handed to the
+    // search field (or trigger). The trigger→search focus move fires a focusout
+    // that must NOT be read as "focus left" — otherwise the panel closes the
+    // instant it opens on a Tab-in (openOnFocus), a visible flicker.
+    opening = false;
+    onPointerDown() {
+        if (!this.openOnFocus())
+            return;
+        this.pointerFocus = true;
+        // Clear on the next tick. The focusin that this press causes runs first
+        // (synchronously), so it still sees the flag; this only guards against a
+        // stale flag when the press produces no focusin (e.g. mousedown that calls
+        // preventDefault), which would otherwise swallow a later real Tab focus.
+        setTimeout(() => (this.pointerFocus = false));
+    }
+    /**
+     * Open when *keyboard* focus arrives from outside the control (tabbing to it).
+     * Pointer-initiated focus is ignored — a click opens via its own toggle, so
+     * this stays a keyboard affordance. Focus moves that originate inside the
+     * control or its panel — the panel handing focus to the search field, or focus
+     * falling back to the trigger as the panel closes — must not (re)open it,
+     * which would otherwise trap the user when tabbing backwards out of it.
+     */
+    onFocusIn(event) {
+        if (!this.openOnFocus())
             return;
-        if (this.dropdownPanel?.nativeElement.contains(target))
+        if (this.pointerFocus)
             return;
-        this.closeDropdown();
+        if (this.disabled() || this.readonly())
+            return;
+        if (this.isFocusInside(event.relatedTarget))
+            return;
+        if (!this.isOpen())
+            this.openDropdown();
+    }
+    /**
+     * Close when focus leaves the control entirely — tabbing away, or focus moving
+     * to any element outside the control and its (possibly body-appended) panel.
+     * Internal focus moves keep it open.
+     */
+    onFocusOut() {
+        if (!this.openOnFocus())
+            return;
+        if (!this.isOpen())
+            return;
+        // The open transition is handing focus from the trigger to the search field;
+        // that focusout is internal, not a departure. Ignore it so the panel doesn't
+        // close the instant it opens on a Tab-in.
+        if (this.opening)
+            return;
+        // A pointer press inside the control is in progress (e.g. clicking an option,
+        // which blurs the search input because the option isn't focusable). That's an
+        // interaction, not a departure — keep the panel open.
+        if (this.pointerFocus)
+            return;
+        // Defer until focus settles, then decide from where it actually landed
+        // (document.activeElement). relatedTarget is unreliable here: some browsers
+        // report it as null for the programmatic focus move that hands focus from the
+        // trigger to the search field on open, which would otherwise close the panel
+        // the instant it opens — a flicker when tabbing in with openOnFocus.
+        setTimeout(() => {
+            if (!this.isOpen())
+                return;
+            if (this.isFocusInside(document.activeElement))
+                return;
+            this.closeDropdown();
+        });
+    }
+    /** True when a node lives inside the control host or its detached panel. */
+    isFocusInside(node) {
+        if (!node)
+            return false;
+        return this.el.nativeElement.contains(node) ||
+            !!this.dropdownPanel?.nativeElement.contains(node);
     }
     openFromLabel(event) {
         event.preventDefault();
         event.stopPropagation();
         if (this.disabled() || this.readonly())
             return;
+        // In openOnFocus mode, opening is reserved for clicking the control itself
+        // or tabbing in — a label click only focuses the control. The focus is
+        // flagged as pointer-driven so openOnFocus doesn't mistake it for a Tab and
+        // auto-open. Without openOnFocus the label keeps its existing behaviour of
+        // opening the dropdown on click.
+        if (this.openOnFocus()) {
+            this.pointerFocus = true;
+            this.controlWrapper.nativeElement.focus();
+            return;
+        }
         this.controlWrapper.nativeElement.focus();
         this.openDropdown();
     }
@@ -6161,23 +6292,23 @@ class BkSelect {
         this.markedIndex.set(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkSelect, isStandalone: true, selector: "bk-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindIcon: { classPropertyName: "bindIcon", publicName: "bindIcon", isSignal: true, isRequired: false, transformFunction: null }, isResponsive: { classPropertyName: "isResponsive", publicName: "isResponsive", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, dropdownView: { classPropertyName: "dropdownView", publicName: "dropdownView", isSignal: true, isRequired: false, transformFunction: null }, gridColumns: { classPropertyName: "gridColumns", publicName: "gridColumns", isSignal: true, isRequired: false, transformFunction: null }, gridVariation: { classPropertyName: "gridVariation", publicName: "gridVariation", isSignal: true, isRequired: false, transformFunction: null }, gridSelectionActions: { classPropertyName: "gridSelectionActions", publicName: "gridSelectionActions", isSignal: true, isRequired: false, transformFunction: null }, gridMinWidth: { classPropertyName: "gridMinWidth", publicName: "gridMinWidth", isSignal: true, isRequired: false, transformFunction: null }, gridMaxHeight: { classPropertyName: "gridMaxHeight", publicName: "gridMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, gridSelectedLabelKeys: { classPropertyName: "gridSelectedLabelKeys", publicName: "gridSelectedLabelKeys", isSignal: true, isRequired: false, transformFunction: null }, gridSelectedLabelSeparator: { classPropertyName: "gridSelectedLabelSeparator", publicName: "gridSelectedLabelSeparator", isSignal: true, isRequired: false, transformFunction: null }, gridApplyText: { classPropertyName: "gridApplyText", publicName: "gridApplyText", isSignal: true, isRequired: false, transformFunction: null }, gridClearText: { classPropertyName: "gridClearText", publicName: "gridClearText", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, avatarKey: { classPropertyName: "avatarKey", publicName: "avatarKey", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, variation: { classPropertyName: "variation", publicName: "variation", isSignal: false, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxLabels: { classPropertyName: "maxLabels", publicName: "maxLabels", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allSelect: { classPropertyName: "allSelect", publicName: "allSelect", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: false, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: false, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", open: "open", close: "close", focus: "focus", blur: "blur", search: "search", clear: "clear", change: "change", scrollToEnd: "scrollToEnd" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkSelect, isStandalone: true, selector: "bk-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindIcon: { classPropertyName: "bindIcon", publicName: "bindIcon", isSignal: true, isRequired: false, transformFunction: null }, isResponsive: { classPropertyName: "isResponsive", publicName: "isResponsive", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, dropdownView: { classPropertyName: "dropdownView", publicName: "dropdownView", isSignal: true, isRequired: false, transformFunction: null }, gridColumns: { classPropertyName: "gridColumns", publicName: "gridColumns", isSignal: true, isRequired: false, transformFunction: null }, gridVariation: { classPropertyName: "gridVariation", publicName: "gridVariation", isSignal: true, isRequired: false, transformFunction: null }, gridSelectionActions: { classPropertyName: "gridSelectionActions", publicName: "gridSelectionActions", isSignal: true, isRequired: false, transformFunction: null }, gridMinWidth: { classPropertyName: "gridMinWidth", publicName: "gridMinWidth", isSignal: true, isRequired: false, transformFunction: null }, gridMaxHeight: { classPropertyName: "gridMaxHeight", publicName: "gridMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, gridSelectedLabelKeys: { classPropertyName: "gridSelectedLabelKeys", publicName: "gridSelectedLabelKeys", isSignal: true, isRequired: false, transformFunction: null }, gridSelectedLabelSeparator: { classPropertyName: "gridSelectedLabelSeparator", publicName: "gridSelectedLabelSeparator", isSignal: true, isRequired: false, transformFunction: null }, gridApplyText: { classPropertyName: "gridApplyText", publicName: "gridApplyText", isSignal: true, isRequired: false, transformFunction: null }, gridClearText: { classPropertyName: "gridClearText", publicName: "gridClearText", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, avatarKey: { classPropertyName: "avatarKey", publicName: "avatarKey", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, variation: { classPropertyName: "variation", publicName: "variation", isSignal: false, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxLabels: { classPropertyName: "maxLabels", publicName: "maxLabels", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allSelect: { classPropertyName: "allSelect", publicName: "allSelect", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: false, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: false, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", open: "open", close: "close", focus: "focus", blur: "blur", search: "search", clear: "clear", change: "change", scrollToEnd: "scrollToEnd" }, host: { listeners: { "pointerdown": "onPointerDown()", "focusin": "onFocusIn($event)", "focusout": "onFocusOut()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkSelect),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }, { propertyName: "chipsViewport", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "measurePlus", first: true, predicate: ["measurePlus"], descendants: true }, { propertyName: "optionsRef", predicate: ["optionsRef"], descendants: true }, { propertyName: "measureChips", predicate: ["measureChip"], descendants: true }], ngImport: i0, template: "<div class=\"bk-select-container\" [ngClass]=\"variation\" [class.bk-grid-view]=\"dropdownView() === 'grid'\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <!-- controlStyle() resolves the tint: the selected option's accent normally,\r\n         a soft red one while hasError. It's a method rather than a computed\r\n         because hasError is a plain @Input, not a signal. -->\r\n    <div\r\n      #controlWrapper\r\n      class=\"bk-select-control\"\r\n      [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n      tabindex=\"0\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [class.bk-focused]=\"isOpen()\"\r\n      [class.bk-disabled]=\"disabled()\"\r\n      [class.bk-filled]=\"!!controlStyle().backgroundColor\"\r\n      [style.backgroundColor]=\"controlStyle().backgroundColor\"\r\n      [style.color]=\"controlStyle().color\"\r\n      [style.borderColor]=\"controlStyle().borderColor\"\r\n      (mousedown)=\"toggleDropdown($event)\"\r\n    >\r\n      <!-- Icon (Always visible if set) -->\r\n      @if (iconSrc) {\r\n        <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"bk-value-container\">\r\n        @if (selectedOptions().length === 0) {\r\n          <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n        @if (multiple() && selectedOptions().length > 0) {\r\n          <div\r\n            #chipsViewport\r\n            class=\"bk-value-chips bk-chips-viewport flex gap-0.5 flex-nowrap overflow-hidden h-[18px]\"\r\n          >\r\n            @for (opt of selectedOptions().slice(0, visibleCount()); track $index) {\r\n              <div class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- One leading visual only: avatar > icon > dot. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                    [bgColor]=\"avatarBgFor(opt)\"\r\n                    [textColor]=\"avatarTextFor(opt)\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\" [style.backgroundColor]=\"accentFor(opt)\"></span>\r\n                }\r\n                <span #badgeTextEl class=\"bk-multi-badge-item-text\" [style.color]=\"optionTextColor(opt)\"\r\n                      [bkTooltip]=\"getTooltipIfEllipsed(badgeTextEl, resolveLabel(opt))\"\r\n                      bkTooltipPosition=\"top\">{{\r\n                  resolveLabel(opt)\r\n                }}</span>\r\n\r\n                <!-- A locked control must not offer a way to drop a value. -->\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            @if (visibleCount() < selectedOptions().length) {\r\n              <div class=\"bk-multi-badge-item\">\r\n                <span\r\n                  class=\"bk-multi-badge-item-text\"\r\n                  bkTooltipPosition=\"top\"\r\n                  [bkTooltip]=\"getRemainingItems()\"\r\n                  [bkTooltipScrollable]=\"true\"\r\n                  bkTooltipMaxHeight=\"240px\"\r\n                  >+{{ selectedOptions().length - visibleCount() }}</span\r\n                >\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Hidden off-screen row used only to measure each chip's natural\r\n               width so we can decide how many fit on a single line. -->\r\n          <div class=\"bk-value-chips bk-chips-measure flex gap-0.5 flex-nowrap\" aria-hidden=\"true\">\r\n            @for (opt of selectedOptions(); track $index) {\r\n              <div #measureChip class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- Must mirror the visible chip exactly \u2014 same leading visual\r\n                     and same precedence \u2014 or the measured width is wrong and\r\n                     \"+N\" collapses at the wrong point. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\"></span>\r\n                }\r\n                <span class=\"bk-multi-badge-item-text\">{{ resolveLabel(opt) }}</span>\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" tabindex=\"-1\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            <div #measurePlus class=\"bk-multi-badge-item\">\r\n              <span class=\"bk-multi-badge-item-text\">+{{ selectedOptions().length }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (!multiple() && selectedOptions().length > 0) {\r\n          <div class=\"flex items-center gap-1.5 min-w-0 w-full\">\r\n            <!-- One leading visual only: avatar > icon > dot.\r\n                 `flex` on the host: bk-avatar's host is display:inline by\r\n                 default, so its inline-flex body sits on a baseline and the\r\n                 host gains descender space \u2014 which knocks the avatar out of\r\n                 vertical centre against the label. -->\r\n            @if (showAvatar()) {\r\n              <bk-avatar\r\n                class=\"shrink-0 flex\"\r\n                size=\"xxsm\"\r\n                [src]=\"resolveAvatarSrc(selectedOptions()[0])\"\r\n                [name]=\"resolveLabel(selectedOptions()[0])\"\r\n                [alt]=\"iconAlt\"\r\n                [bgColor]=\"avatarBgFor(selectedOptions()[0])\"\r\n                [textColor]=\"avatarTextFor(selectedOptions()[0])\"\r\n              ></bk-avatar>\r\n            } @else if (resolveIcon(selectedOptions()[0])) {\r\n              <img [src]=\"resolveIcon(selectedOptions()[0])!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n            } @else if (showDots() && accentFor(selectedOptions()[0])) {\r\n              <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(selectedOptions()[0])\"></span>\r\n            }\r\n            <div #singleValueEl class=\"bk-value-label-single\" [style.color]=\"controlStyle().color ?? resolveColor(selectedOptions()[0])\"\r\n                 [bkTooltip]=\"getTooltipIfEllipsed(singleValueEl, resolveLabel(selectedOptions()[0]))\"\r\n                 bkTooltipPosition=\"top\">\r\n              {{ resolveLabel(selectedOptions()[0]) }}\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"bk-actions\">\r\n        @if (clearable() && selectedOptions().length > 0 && isEditable()) {\r\n          <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <path d=\"m6 9 6 6 6-6\" />\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        #dropdownPanel\r\n        tabindex=\"-1\"\r\n        (keydown)=\"onTabPress($event)\"\r\n        class=\"bk-dropdown-panel\"\r\n        [style.visibility]=\"panelReady() ? 'visible' : 'hidden'\"\r\n        [attr.data-position]=\"placement()\"\r\n        [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n        [style.top]=\"getTop()\"\r\n        [style.bottom]=\"getBottom()\"\r\n        [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n        [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n        [style.zIndex]=\"appendToBody() ? 10000 : null\"\r\n        [class.bk-grouped]=\"groupBy()\"\r\n        [class.bk-grid-panel]=\"dropdownView() === 'grid'\"\r\n        [class.bk-grid-compact]=\"dropdownView() === 'grid' && isGridCompact()\"\r\n      >\r\n        @if (searchable()) {\r\n          <div class=\"bk-dropdown-search mb-1\">\r\n            <div class=\"bk-search-wrapper\">\r\n              <svg\r\n                class=\"text-[#BBBDC5] mr-2\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"20\"\r\n                height=\"20\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              >\r\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n              </svg>\r\n              <input\r\n                #searchInput\r\n                tabindex=\"-1\"\r\n                type=\"text\"\r\n                class=\"bk-search-input\"\r\n                [value]=\"searchTerm()\"\r\n                [placeholder]=\"'Search...'\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (dropdownView() === 'grid') {\r\n          <div\r\n            #optionsListContainer\r\n            class=\"bk-grid-scroll\"\r\n            [class.bk-no-responsive]=\"!isResponsive()\"\r\n            [style.maxHeight]=\"gridMaxHeight()\"\r\n            (scroll)=\"onScroll($event)\"\r\n          >\r\n            <table class=\"bk-select-grid\" [style.minWidth]=\"gridMinWidth()\">\r\n              <thead>\r\n                <tr>\r\n                  @if (multiple()) {\r\n                    <th class=\"bk-grid-checkbox-column\" aria-label=\"Selection\"></th>\r\n                  }\r\n                  @for (column of gridColumns(); track column.key) {\r\n                    <th [ngStyle]=\"gridColumnStyle(column)\">{{ column.label }}</th>\r\n                  }\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                @if (loading()) {\r\n                  <tr><td [attr.colspan]=\"gridColumns().length + (multiple() ? 1 : 0)\" class=\"bk-grid-message\">{{ loadingText() }}</td></tr>\r\n                } @else {\r\n                  @for (item of filteredItems(); track resolveValue(item); let rowIndex = $index) {\r\n                    <tr\r\n                      #optionsRef\r\n                      tabindex=\"-1\"\r\n                      [class.bk-selected]=\"isGridItemSelected(item)\"\r\n                      [class.bk-marked]=\"rowIndex === markedIndex()\"\r\n                      [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                      (click)=\"handleGridSelection(item, $event)\"\r\n                      (mouseenter)=\"onOptionHover(rowIndex)\"\r\n                    >\r\n                      @if (multiple()) {\r\n                        <td class=\"bk-grid-checkbox-column\">\r\n                          <bk-checkbox\r\n                            class=\"pointer-events-none flex\"\r\n                            checkboxClass=\"sm\"\r\n                            [disabled]=\"isItemDisabled(item)\"\r\n                            [ngModel]=\"isGridItemSelected(item)\"\r\n                            [ngModelOptions]=\"{ standalone: true }\"\r\n                          ></bk-checkbox>\r\n                        </td>\r\n                      }\r\n                      @for (column of gridColumns(); track column.key) {\r\n                        <td [ngStyle]=\"gridColumnStyle(column)\">\r\n                          @if (column.type === 'badge') {\r\n                            <bk-badge\r\n                              [label]=\"resolveGridCell(item, column)\"\r\n                              [color]=\"gridBadgeColor(item, column)\"\r\n                              [variant]=\"column.badgeVariant ?? 'Light'\"\r\n                              [size]=\"isGridCompact() ? 'xsm' : 'sm'\"\r\n                            ></bk-badge>\r\n                          } @else {\r\n                            <span class=\"bk-grid-cell-text\">{{ resolveGridCell(item, column) }}</span>\r\n                          }\r\n                        </td>\r\n                      }\r\n                    </tr>\r\n                  }\r\n                  @if (filteredItems().length === 0) {\r\n                    <tr><td [attr.colspan]=\"gridColumns().length + (multiple() ? 1 : 0)\" class=\"bk-grid-message\">{{ notFoundText() }}</td></tr>\r\n                  }\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n          @if (multiple()) {\r\n            <div class=\"bk-grid-footer\">\r\n              <span>{{ gridSelectedCount() }} selected</span>\r\n              @if (gridSelectionActions()) {\r\n              <div class=\"bk-grid-footer-actions\">\r\n                <bk-button variant=\"secondary\" [size]=\"isGridCompact() ? 'xxsm' : 'xsm'\" [label]=\"gridClearText()\" (clicked)=\"clearGridDraft()\"></bk-button>\r\n                <bk-button variant=\"primary\" [size]=\"isGridCompact() ? 'xxsm' : 'xsm'\" [label]=\"gridApplyText()\" (clicked)=\"applyGridDraft()\"></bk-button>\r\n              </div>\r\n              }\r\n            </div>\r\n          }\r\n        } @else {\r\n        <div\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          [class.bk-no-responsive]=\"!isResponsive()\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\r\n          @if (loading()) {\r\n            <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n          } @else {\r\n            @if (allSelect()) {\r\n              @if (multiple() && filteredItems().length > 0) {\r\n                <div\r\n                  class=\"bk-option\"\r\n                  (mousedown)=\"toggleSelectAll($event)\"\r\n                  [class.bk-selected]=\"isAllSelected()\"\r\n                >\r\n                  <div class=\"flex-1 flex items-center gap-2 min-w-0\">\r\n                    <!-- Reflects state only: pointer-events-none lets the row's\r\n                         mousedown own the toggle, so the box can't fire twice.\r\n                         standalone keeps this ngModel out of any parent <form>\r\n                         bk-select is rendered inside. -->\r\n                    <bk-checkbox\r\n                      class=\"pointer-events-none shrink-0 flex\"\r\n                      checkboxClass=\"sm\"\r\n                      [ngModel]=\"isAllSelected()\"\r\n                      [ngModelOptions]=\"{ standalone: true }\"\r\n                    ></bk-checkbox>\r\n                    <span class=\"line-clamp-1\">Select All</span>\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n            @for (group of groupedItems(); track $index) {\r\n              @if (group.group) {\r\n                <div class=\"bk-option-group\">\r\n                  {{ group.group }}\r\n                </div>\r\n              }\r\n\r\n              @for (item of group.items; track $index) {\r\n                <div\r\n                  #optionsRef\r\n                  tabindex=\"-1\"\r\n                  class=\"bk-option\"\r\n                  [class.bk-selected]=\"isItemSelected(item)\"\r\n                  [class.bk-marked]=\"$index === markedIndex()\"\r\n                  [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                  [class.cursor-not-allowed]=\"isItemDisabled(item)\"\r\n                  (click)=\"handleSelection(item, $event)\"\r\n                  (mouseenter)=\"onOptionHover($index)\"\r\n                >\r\n                  <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\r\n                      <!-- One leading visual only: avatar > icon > dot. -->\r\n                      @if (showAvatar()) {\r\n                        <bk-avatar\r\n                          class=\"shrink-0 flex\"\r\n                          size=\"xxsm\"\r\n                          [src]=\"resolveAvatarSrc(item)\"\r\n                          [name]=\"resolveLabel(item)\"\r\n                          [alt]=\"iconAlt\"\r\n                          [bgColor]=\"avatarBgFor(item)\"\r\n                          [textColor]=\"avatarTextFor(item)\"\r\n                        ></bk-avatar>\r\n                      } @else if (resolveIcon(item)) {\r\n                        <img [src]=\"resolveIcon(item)!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n                      } @else if (showDots() && accentFor(item)) {\r\n                        <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(item)\"></span>\r\n                      }\r\n                      <span #optionLabelEl class=\"bk-option-label min-w-0\" [style.color]=\"optionTextColor(item)\"\r\n                            [bkTooltip]=\"getTooltipIfEllipsed(optionLabelEl, resolveLabel(item))\"\r\n                            bkTooltipPosition=\"top\">{{\r\n                        resolveLabel(item)\r\n                      }}</span>\r\n                    </div>\r\n\r\n                    @if (isItemSelected(item)) {\r\n                      <svg\r\n                        class=\"text-[#141414] shrink-0\"\r\n                        width=\"17\"\r\n                        height=\"17\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2.5\"\r\n                      >\r\n                        <polyline points=\"20 6 9 17 4 12\" />\r\n                      </svg>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (filteredItems().length === 0) {\r\n              <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n            }\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply shadow-none z-10;outline:none!important}.bk-select-control.bk-focused:not(.bk-filled){@apply border-[#6B7080];}.bk-select-control.bk-filled{box-shadow:none}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7!important;background-color:#f4f4f6!important;color:#a1a3ae!important}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{border-color:#d11e14!important}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs !leading-[18px];}.bk-chips-viewport{flex:1 1 0%;min-width:0;max-width:100%}.bk-chips-measure{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;white-space:nowrap;z-index:-1}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item.bk-chip-has-avatar{@apply py-0 ps-0.5;max-width:140px}.bk-select-container.bk-grid-view .bk-multi-badge-item{max-width:175px}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[100] overflow-hidden cursor-default p-2.5;}.bk-grid-scroll{@apply overflow-auto -mx-2.5;scrollbar-width:thin;scrollbar-color:#D6D7DC transparent}.bk-grid-scroll::-webkit-scrollbar{width:6px;height:6px}.bk-grid-scroll::-webkit-scrollbar-track{background:transparent}.bk-grid-scroll::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:999px}.bk-grid-scroll::-webkit-scrollbar-thumb:hover{background:#909090}.bk-grid-scroll::-webkit-scrollbar-button{display:none}.bk-dropdown-panel.bk-grid-panel{padding-top:0;padding-bottom:0}.bk-select-grid{@apply w-full border-collapse text-sm text-[#141414];table-layout:fixed}.bk-select-grid th{@apply sticky top-0 z-10 bg-[#F1F1F3] px-4 py-2.5 font-semibold whitespace-nowrap border-b border-[#E3E3E7];}.bk-select-grid td{@apply px-4 py-2.5 border-b border-[#E3E3E7] align-middle;}.bk-select-grid tbody tr{@apply cursor-pointer transition-colors;}.bk-select-grid tbody tr:hover,.bk-select-grid tbody tr.bk-marked{@apply bg-[#F8F8F8];}.bk-select-grid tbody tr.bk-selected{background-color:#f8f8f8}.bk-select-grid tbody tr.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-grid-checkbox-column{width:48px;min-width:48px;@apply !px-4;}.bk-grid-cell-text{@apply block truncate;}.bk-grid-message{@apply !px-4 !py-4 text-center text-gray-400;}.bk-grid-footer{@apply flex items-center justify-between gap-4 px-1 py-2.5 text-xs text-[#6B7080];}.bk-grid-footer-actions{@apply flex items-center gap-2;}.bk-dropdown-panel.bk-grid-compact{padding:0 .5rem}.bk-dropdown-panel.bk-grid-compact .bk-dropdown-search{@apply px-1 pt-1;}.bk-dropdown-panel.bk-grid-compact .bk-search-wrapper{@apply px-2 py-1;}.bk-dropdown-panel.bk-grid-compact .bk-search-input{@apply text-xs;}.bk-dropdown-panel.bk-grid-compact .bk-grid-scroll{@apply -mx-2;}.bk-dropdown-panel.bk-grid-compact .bk-select-grid{@apply text-xs;}.bk-dropdown-panel.bk-grid-compact .bk-select-grid th,.bk-dropdown-panel.bk-grid-compact .bk-select-grid td{@apply px-3 py-1.5;}.bk-dropdown-panel.bk-grid-compact .bk-grid-checkbox-column{width:40px;min-width:40px;@apply !px-3;}.bk-dropdown-panel.bk-grid-compact .bk-grid-footer{@apply gap-3 px-0 py-1.5 text-[11px];}.bk-dropdown-panel.bk-grid-compact .bk-grid-footer-actions{@apply gap-1.5;}@media (max-width: 640px){.bk-grid-scroll{max-width:calc(100vw - 32px)}}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:166px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.bk-options-list.bk-no-responsive{max-height:166px!important}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-option.bk-option-disabled:hover{@apply bg-transparent;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}.bk-option-icon{@apply w-4 h-4 object-contain rounded-sm;}.bk-chip-icon{@apply w-3 h-3 object-contain rounded-sm;}.bk-value-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.bk-chip-dot{@apply inline-block w-1.5 h-1.5 rounded-full shrink-0;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkAvatar, selector: "bk-avatar", inputs: ["src", "alt", "name", "initialsOverride", "tooltipContent", "bgColor", "textColor", "size", "variant", "fallback", "dot", "dotPosition"], outputs: ["imageLoadError"] }, { kind: "component", type: BkButton, selector: "bk-button", inputs: ["variant", "size", "shadow", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass", "customBg", "customBorder", "customText"], outputs: ["clicked"] }] });
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }, { propertyName: "selectOverlay", first: true, predicate: ["selectOverlay"], descendants: true }, { propertyName: "chipsViewport", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "measurePlus", first: true, predicate: ["measurePlus"], descendants: true }, { propertyName: "optionsRef", predicate: ["optionsRef"], descendants: true }, { propertyName: "measureChips", predicate: ["measureChip"], descendants: true }], ngImport: i0, template: "<div class=\"bk-select-container\" [ngClass]=\"variation\" [class.bk-grid-view]=\"dropdownView() === 'grid'\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <!-- controlStyle() resolves the tint: the selected option's accent normally,\r\n         a soft red one while hasError. It's a method rather than a computed\r\n         because hasError is a plain @Input, not a signal. -->\r\n    <div\r\n      #controlWrapper\r\n      cdkOverlayOrigin\r\n      #selectOrigin=\"cdkOverlayOrigin\"\r\n      class=\"bk-select-control\"\r\n      [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n      tabindex=\"0\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [class.bk-focused]=\"isOpen()\"\r\n      [class.bk-disabled]=\"disabled()\"\r\n      [class.bk-filled]=\"!!controlStyle().backgroundColor\"\r\n      [style.backgroundColor]=\"controlStyle().backgroundColor\"\r\n      [style.color]=\"controlStyle().color\"\r\n      [style.borderColor]=\"controlStyle().borderColor\"\r\n      (mousedown)=\"toggleDropdown($event)\"\r\n    >\r\n      <!-- Icon (Always visible if set) -->\r\n      @if (iconSrc) {\r\n        <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"bk-value-container\">\r\n        @if (selectedOptions().length === 0) {\r\n          <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n        @if (multiple() && selectedOptions().length > 0) {\r\n          <div\r\n            #chipsViewport\r\n            class=\"bk-value-chips bk-chips-viewport flex gap-0.5 flex-nowrap overflow-hidden h-[18px]\"\r\n          >\r\n            @for (opt of selectedOptions().slice(0, visibleCount()); track $index) {\r\n              <div class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- One leading visual only: avatar > icon > dot. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                    [bgColor]=\"avatarBgFor(opt)\"\r\n                    [textColor]=\"avatarTextFor(opt)\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\" [style.backgroundColor]=\"accentFor(opt)\"></span>\r\n                }\r\n                <span #badgeTextEl class=\"bk-multi-badge-item-text\" [style.color]=\"optionTextColor(opt)\"\r\n                      [bkTooltip]=\"getTooltipIfEllipsed(badgeTextEl, resolveLabel(opt))\"\r\n                      bkTooltipPosition=\"top\">{{\r\n                  resolveLabel(opt)\r\n                }}</span>\r\n\r\n                <!-- A locked control must not offer a way to drop a value. -->\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            @if (visibleCount() < selectedOptions().length) {\r\n              <div class=\"bk-multi-badge-item\">\r\n                <span\r\n                  class=\"bk-multi-badge-item-text\"\r\n                  bkTooltipPosition=\"top\"\r\n                  [bkTooltip]=\"getRemainingItems()\"\r\n                  [bkTooltipScrollable]=\"true\"\r\n                  bkTooltipMaxHeight=\"240px\"\r\n                  >+{{ selectedOptions().length - visibleCount() }}</span\r\n                >\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Hidden off-screen row used only to measure each chip's natural\r\n               width so we can decide how many fit on a single line. -->\r\n          <div class=\"bk-value-chips bk-chips-measure flex gap-0.5 flex-nowrap\" aria-hidden=\"true\">\r\n            @for (opt of selectedOptions(); track $index) {\r\n              <div #measureChip class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- Must mirror the visible chip exactly \u2014 same leading visual\r\n                     and same precedence \u2014 or the measured width is wrong and\r\n                     \"+N\" collapses at the wrong point. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\"></span>\r\n                }\r\n                <span class=\"bk-multi-badge-item-text\">{{ resolveLabel(opt) }}</span>\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" tabindex=\"-1\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            <div #measurePlus class=\"bk-multi-badge-item\">\r\n              <span class=\"bk-multi-badge-item-text\">+{{ selectedOptions().length }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (!multiple() && selectedOptions().length > 0) {\r\n          <div class=\"flex items-center gap-1.5 min-w-0 w-full\">\r\n            <!-- One leading visual only: avatar > icon > dot.\r\n                 `flex` on the host: bk-avatar's host is display:inline by\r\n                 default, so its inline-flex body sits on a baseline and the\r\n                 host gains descender space \u2014 which knocks the avatar out of\r\n                 vertical centre against the label. -->\r\n            @if (showAvatar()) {\r\n              <bk-avatar\r\n                class=\"shrink-0 flex\"\r\n                size=\"xxsm\"\r\n                [src]=\"resolveAvatarSrc(selectedOptions()[0])\"\r\n                [name]=\"resolveLabel(selectedOptions()[0])\"\r\n                [alt]=\"iconAlt\"\r\n                [bgColor]=\"avatarBgFor(selectedOptions()[0])\"\r\n                [textColor]=\"avatarTextFor(selectedOptions()[0])\"\r\n              ></bk-avatar>\r\n            } @else if (resolveIcon(selectedOptions()[0])) {\r\n              <img [src]=\"resolveIcon(selectedOptions()[0])!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n            } @else if (showDots() && accentFor(selectedOptions()[0])) {\r\n              <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(selectedOptions()[0])\"></span>\r\n            }\r\n            <div #singleValueEl class=\"bk-value-label-single\" [style.color]=\"controlStyle().color ?? resolveColor(selectedOptions()[0])\"\r\n                 [bkTooltip]=\"getTooltipIfEllipsed(singleValueEl, resolveLabel(selectedOptions()[0]))\"\r\n                 bkTooltipPosition=\"top\">\r\n              {{ resolveLabel(selectedOptions()[0]) }}\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"bk-actions\">\r\n        @if (clearable() && selectedOptions().length > 0 && isEditable()) {\r\n          <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <path d=\"m6 9 6 6 6-6\" />\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <!--\r\n      CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n      an inline `position:absolute`/`fixed` div, so it escapes clipping inside dialogs/scroll\r\n      containers and stacks correctly above other CDK-overlay content, regardless of the old\r\n      appendToBody flag (see its @deprecated note). No backdrop \u2014 see onOverlayOutsideClick.\r\n    -->\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      #selectOverlay=\"cdkConnectedOverlay\"\r\n      [cdkConnectedOverlayOrigin]=\"selectOrigin\"\r\n      [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n      [cdkConnectedOverlayPositions]=\"selectDropdownPositions\"\r\n      [cdkConnectedOverlayWidth]=\"dropdownWidth() ?? ''\"\r\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n      (positionChange)=\"onPositionChange($event)\"\r\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n      (detach)=\"closeDropdown()\"\r\n    >\r\n      <div\r\n        #dropdownPanel\r\n        tabindex=\"-1\"\r\n        (keydown)=\"onTabPress($event)\"\r\n        class=\"bk-dropdown-panel\"\r\n        [style.visibility]=\"panelReady() ? 'visible' : 'hidden'\"\r\n        [attr.data-position]=\"placement()\"\r\n        [class.bk-grouped]=\"groupBy()\"\r\n        [class.bk-grid-panel]=\"dropdownView() === 'grid'\"\r\n        [class.bk-grid-compact]=\"dropdownView() === 'grid' && isGridCompact()\"\r\n      >\r\n        @if (searchable()) {\r\n          <div class=\"bk-dropdown-search mb-1\">\r\n            <div class=\"bk-search-wrapper\">\r\n              <svg\r\n                class=\"text-[#BBBDC5] mr-2\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"20\"\r\n                height=\"20\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              >\r\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n              </svg>\r\n              <input\r\n                #searchInput\r\n                tabindex=\"0\"\r\n                type=\"text\"\r\n                class=\"bk-search-input\"\r\n                [value]=\"searchTerm()\"\r\n                [placeholder]=\"'Search...'\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (dropdownView() === 'grid') {\r\n          <div\r\n            #optionsListContainer\r\n            class=\"bk-grid-scroll\"\r\n            [class.bk-no-responsive]=\"!isResponsive()\"\r\n            [style.maxHeight]=\"gridMaxHeight()\"\r\n            (scroll)=\"onScroll($event)\"\r\n          >\r\n            <table class=\"bk-select-grid\" [style.minWidth]=\"gridMinWidth()\">\r\n              <thead>\r\n                <tr>\r\n                  @if (multiple()) {\r\n                    <th class=\"bk-grid-checkbox-column\" aria-label=\"Selection\"></th>\r\n                  }\r\n                  @for (column of gridColumns(); track column.key) {\r\n                    <th [ngStyle]=\"gridColumnStyle(column)\">{{ column.label }}</th>\r\n                  }\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                @if (loading()) {\r\n                  <tr><td [attr.colspan]=\"gridColumns().length + (multiple() ? 1 : 0)\" class=\"bk-grid-message\">{{ loadingText() }}</td></tr>\r\n                } @else {\r\n                  @for (item of filteredItems(); track resolveValue(item); let rowIndex = $index) {\r\n                    <tr\r\n                      #optionsRef\r\n                      tabindex=\"-1\"\r\n                      [class.bk-selected]=\"isGridItemSelected(item)\"\r\n                      [class.bk-marked]=\"rowIndex === markedIndex()\"\r\n                      [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                      (click)=\"handleGridSelection(item, $event)\"\r\n                      (mouseenter)=\"onOptionHover(rowIndex)\"\r\n                    >\r\n                      @if (multiple()) {\r\n                        <td class=\"bk-grid-checkbox-column\">\r\n                          <bk-checkbox\r\n                            class=\"pointer-events-none flex\"\r\n                            checkboxClass=\"sm\"\r\n                            [disabled]=\"isItemDisabled(item)\"\r\n                            [ngModel]=\"isGridItemSelected(item)\"\r\n                            [ngModelOptions]=\"{ standalone: true }\"\r\n                          ></bk-checkbox>\r\n                        </td>\r\n                      }\r\n                      @for (column of gridColumns(); track column.key) {\r\n                        <td [ngStyle]=\"gridColumnStyle(column)\">\r\n                          @if (column.type === 'badge') {\r\n                            <bk-badge\r\n                              [label]=\"resolveGridCell(item, column)\"\r\n                              [color]=\"gridBadgeColor(item, column)\"\r\n                              [variant]=\"column.badgeVariant ?? 'Light'\"\r\n                              [size]=\"isGridCompact() ? 'xsm' : 'sm'\"\r\n                            ></bk-badge>\r\n                          } @else {\r\n                            <span class=\"bk-grid-cell-text\">{{ resolveGridCell(item, column) }}</span>\r\n                          }\r\n                        </td>\r\n                      }\r\n                    </tr>\r\n                  }\r\n                  @if (filteredItems().length === 0) {\r\n                    <tr><td [attr.colspan]=\"gridColumns().length + (multiple() ? 1 : 0)\" class=\"bk-grid-message\">{{ notFoundText() }}</td></tr>\r\n                  }\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n          @if (multiple()) {\r\n            <div class=\"bk-grid-footer\">\r\n              <span>{{ gridSelectedCount() }} selected</span>\r\n              @if (gridSelectionActions()) {\r\n              <div class=\"bk-grid-footer-actions\">\r\n                <bk-button variant=\"secondary\" [size]=\"isGridCompact() ? 'xxsm' : 'xsm'\" [label]=\"gridClearText()\" (clicked)=\"clearGridDraft()\"></bk-button>\r\n                <bk-button variant=\"primary\" [size]=\"isGridCompact() ? 'xxsm' : 'xsm'\" [label]=\"gridApplyText()\" (clicked)=\"applyGridDraft()\"></bk-button>\r\n              </div>\r\n              }\r\n            </div>\r\n          }\r\n        } @else {\r\n        <div\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          [class.bk-no-responsive]=\"!isResponsive()\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\r\n          @if (loading()) {\r\n            <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n          } @else {\r\n            @if (allSelect()) {\r\n              @if (multiple() && filteredItems().length > 0) {\r\n                <div\r\n                  class=\"bk-option\"\r\n                  (mousedown)=\"toggleSelectAll($event)\"\r\n                  [class.bk-selected]=\"isAllSelected()\"\r\n                >\r\n                  <div class=\"flex-1 flex items-center gap-2 min-w-0\">\r\n                    <!-- Reflects state only: pointer-events-none lets the row's\r\n                         mousedown own the toggle, so the box can't fire twice.\r\n                         standalone keeps this ngModel out of any parent <form>\r\n                         bk-select is rendered inside. -->\r\n                    <bk-checkbox\r\n                      class=\"pointer-events-none shrink-0 flex\"\r\n                      checkboxClass=\"sm\"\r\n                      [ngModel]=\"isAllSelected()\"\r\n                      [ngModelOptions]=\"{ standalone: true }\"\r\n                    ></bk-checkbox>\r\n                    <span class=\"line-clamp-1\">Select All</span>\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n            @for (group of groupedItems(); track $index) {\r\n              @if (group.group) {\r\n                <div class=\"bk-option-group\">\r\n                  {{ group.group }}\r\n                </div>\r\n              }\r\n\r\n              @for (item of group.items; track $index) {\r\n                <div\r\n                  #optionsRef\r\n                  tabindex=\"-1\"\r\n                  class=\"bk-option\"\r\n                  [class.bk-selected]=\"isItemSelected(item)\"\r\n                  [class.bk-marked]=\"isMarked(item)\"\r\n                  [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                  [class.cursor-not-allowed]=\"isItemDisabled(item)\"\r\n                  (click)=\"handleSelection(item, $event)\"\r\n                  (mouseenter)=\"markOption(item)\"\r\n                >\r\n                  <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\r\n                      <!-- One leading visual only: avatar > icon > dot. -->\r\n                      @if (showAvatar()) {\r\n                        <bk-avatar\r\n                          class=\"shrink-0 flex\"\r\n                          size=\"xxsm\"\r\n                          [src]=\"resolveAvatarSrc(item)\"\r\n                          [name]=\"resolveLabel(item)\"\r\n                          [alt]=\"iconAlt\"\r\n                          [bgColor]=\"avatarBgFor(item)\"\r\n                          [textColor]=\"avatarTextFor(item)\"\r\n                        ></bk-avatar>\r\n                      } @else if (resolveIcon(item)) {\r\n                        <img [src]=\"resolveIcon(item)!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n                      } @else if (showDots() && accentFor(item)) {\r\n                        <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(item)\"></span>\r\n                      }\r\n                      <span #optionLabelEl class=\"bk-option-label min-w-0\" [style.color]=\"optionTextColor(item)\"\r\n                            [bkTooltip]=\"getTooltipIfEllipsed(optionLabelEl, resolveLabel(item))\"\r\n                            bkTooltipPosition=\"top\">{{\r\n                        resolveLabel(item)\r\n                      }}</span>\r\n                    </div>\r\n\r\n                    @if (isItemSelected(item)) {\r\n                      <svg\r\n                        class=\"text-[#141414] shrink-0\"\r\n                        width=\"17\"\r\n                        height=\"17\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2.5\"\r\n                      >\r\n                        <polyline points=\"20 6 9 17 4 12\" />\r\n                      </svg>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (filteredItems().length === 0) {\r\n              <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n            }\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply shadow-none z-10;outline:none!important}.bk-select-control.bk-focused:not(.bk-filled){@apply border-[#6B7080];}.bk-select-control.bk-filled{box-shadow:none}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7!important;background-color:#f4f4f6!important;color:#a1a3ae!important}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{border-color:#d11e14!important}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs !leading-[18px];}.bk-chips-viewport{flex:1 1 0%;min-width:0;max-width:100%}.bk-chips-measure{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;white-space:nowrap;z-index:-1}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item.bk-chip-has-avatar{@apply py-0 ps-0.5;max-width:140px}.bk-select-container.bk-grid-view .bk-multi-badge-item{max-width:175px}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply static left-auto w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg overflow-hidden cursor-default p-2.5;}.bk-grid-scroll{@apply overflow-auto -mx-2.5;scrollbar-width:thin;scrollbar-color:#D6D7DC transparent}.bk-grid-scroll::-webkit-scrollbar{width:6px;height:6px}.bk-grid-scroll::-webkit-scrollbar-track{background:transparent}.bk-grid-scroll::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:999px}.bk-grid-scroll::-webkit-scrollbar-thumb:hover{background:#909090}.bk-grid-scroll::-webkit-scrollbar-button{display:none}.bk-dropdown-panel.bk-grid-panel{padding-top:0;padding-bottom:0}.bk-select-grid{@apply w-full border-collapse text-sm text-[#141414];table-layout:fixed}.bk-select-grid th{@apply sticky top-0 z-10 bg-[#F1F1F3] px-4 py-2.5 font-semibold whitespace-nowrap border-b border-[#E3E3E7];}.bk-select-grid td{@apply px-4 py-2.5 border-b border-[#E3E3E7] align-middle;}.bk-select-grid tbody tr{@apply cursor-pointer transition-colors;}.bk-select-grid tbody tr:hover,.bk-select-grid tbody tr.bk-marked{@apply bg-[#F8F8F8];}.bk-select-grid tbody tr.bk-selected{background-color:#f8f8f8}.bk-select-grid tbody tr.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-grid-checkbox-column{width:48px;min-width:48px;@apply !px-4;}.bk-grid-cell-text{@apply block truncate;}.bk-grid-message{@apply !px-4 !py-4 text-center text-gray-400;}.bk-grid-footer{@apply flex items-center justify-between gap-4 px-1 py-2.5 text-xs text-[#6B7080];}.bk-grid-footer-actions{@apply flex items-center gap-2;}.bk-dropdown-panel.bk-grid-compact{padding:0 .5rem}.bk-dropdown-panel.bk-grid-compact .bk-dropdown-search{@apply px-1 pt-1;}.bk-dropdown-panel.bk-grid-compact .bk-search-wrapper{@apply px-2 py-1;}.bk-dropdown-panel.bk-grid-compact .bk-search-input{@apply text-xs;}.bk-dropdown-panel.bk-grid-compact .bk-grid-scroll{@apply -mx-2;}.bk-dropdown-panel.bk-grid-compact .bk-select-grid{@apply text-xs;}.bk-dropdown-panel.bk-grid-compact .bk-select-grid th,.bk-dropdown-panel.bk-grid-compact .bk-select-grid td{@apply px-3 py-1.5;}.bk-dropdown-panel.bk-grid-compact .bk-grid-checkbox-column{width:40px;min-width:40px;@apply !px-3;}.bk-dropdown-panel.bk-grid-compact .bk-grid-footer{@apply gap-3 px-0 py-1.5 text-[11px];}.bk-dropdown-panel.bk-grid-compact .bk-grid-footer-actions{@apply gap-1.5;}@media (max-width: 640px){.bk-grid-scroll{max-width:calc(100vw - 32px)}}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:166px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.bk-options-list.bk-no-responsive{max-height:166px!important}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked{@apply bg-[#F1F1F3] rounded-md;}.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option.bk-selected:hover,.bk-option.bk-selected.bk-marked{@apply bg-[#F1F1F3];}.bk-option.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-option.bk-option-disabled:hover{@apply bg-transparent;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}.bk-option-icon{@apply w-4 h-4 object-contain rounded-sm;}.bk-chip-icon{@apply w-3 h-3 object-contain rounded-sm;}.bk-value-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.bk-chip-dot{@apply inline-block w-1.5 h-1.5 rounded-full shrink-0;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkAvatar, selector: "bk-avatar", inputs: ["src", "alt", "name", "initialsOverride", "tooltipContent", "bgColor", "textColor", "size", "variant", "fallback", "dot", "dotPosition"], outputs: ["imageLoadError"] }, { kind: "component", type: BkButton, selector: "bk-button", inputs: ["variant", "size", "shadow", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass", "customBg", "customBorder", "customText"], outputs: ["clicked"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-select', standalone: true, imports: [CommonModule, FormsModule, BKTooltipDirective, BkCheckbox, BkAvatar, BkButton, BkBadge], providers: [
+            args: [{ selector: 'bk-select', standalone: true, imports: [CommonModule, FormsModule, BKTooltipDirective, BkCheckbox, BkAvatar, BkButton, BkBadge, OverlayModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BkSelect),
                             multi: true
                         }
-                    ], template: "<div class=\"bk-select-container\" [ngClass]=\"variation\" [class.bk-grid-view]=\"dropdownView() === 'grid'\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <!-- controlStyle() resolves the tint: the selected option's accent normally,\r\n         a soft red one while hasError. It's a method rather than a computed\r\n         because hasError is a plain @Input, not a signal. -->\r\n    <div\r\n      #controlWrapper\r\n      class=\"bk-select-control\"\r\n      [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n      tabindex=\"0\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [class.bk-focused]=\"isOpen()\"\r\n      [class.bk-disabled]=\"disabled()\"\r\n      [class.bk-filled]=\"!!controlStyle().backgroundColor\"\r\n      [style.backgroundColor]=\"controlStyle().backgroundColor\"\r\n      [style.color]=\"controlStyle().color\"\r\n      [style.borderColor]=\"controlStyle().borderColor\"\r\n      (mousedown)=\"toggleDropdown($event)\"\r\n    >\r\n      <!-- Icon (Always visible if set) -->\r\n      @if (iconSrc) {\r\n        <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"bk-value-container\">\r\n        @if (selectedOptions().length === 0) {\r\n          <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n        @if (multiple() && selectedOptions().length > 0) {\r\n          <div\r\n            #chipsViewport\r\n            class=\"bk-value-chips bk-chips-viewport flex gap-0.5 flex-nowrap overflow-hidden h-[18px]\"\r\n          >\r\n            @for (opt of selectedOptions().slice(0, visibleCount()); track $index) {\r\n              <div class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- One leading visual only: avatar > icon > dot. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                    [bgColor]=\"avatarBgFor(opt)\"\r\n                    [textColor]=\"avatarTextFor(opt)\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\" [style.backgroundColor]=\"accentFor(opt)\"></span>\r\n                }\r\n                <span #badgeTextEl class=\"bk-multi-badge-item-text\" [style.color]=\"optionTextColor(opt)\"\r\n                      [bkTooltip]=\"getTooltipIfEllipsed(badgeTextEl, resolveLabel(opt))\"\r\n                      bkTooltipPosition=\"top\">{{\r\n                  resolveLabel(opt)\r\n                }}</span>\r\n\r\n                <!-- A locked control must not offer a way to drop a value. -->\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            @if (visibleCount() < selectedOptions().length) {\r\n              <div class=\"bk-multi-badge-item\">\r\n                <span\r\n                  class=\"bk-multi-badge-item-text\"\r\n                  bkTooltipPosition=\"top\"\r\n                  [bkTooltip]=\"getRemainingItems()\"\r\n                  [bkTooltipScrollable]=\"true\"\r\n                  bkTooltipMaxHeight=\"240px\"\r\n                  >+{{ selectedOptions().length - visibleCount() }}</span\r\n                >\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Hidden off-screen row used only to measure each chip's natural\r\n               width so we can decide how many fit on a single line. -->\r\n          <div class=\"bk-value-chips bk-chips-measure flex gap-0.5 flex-nowrap\" aria-hidden=\"true\">\r\n            @for (opt of selectedOptions(); track $index) {\r\n              <div #measureChip class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- Must mirror the visible chip exactly \u2014 same leading visual\r\n                     and same precedence \u2014 or the measured width is wrong and\r\n                     \"+N\" collapses at the wrong point. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\"></span>\r\n                }\r\n                <span class=\"bk-multi-badge-item-text\">{{ resolveLabel(opt) }}</span>\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" tabindex=\"-1\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            <div #measurePlus class=\"bk-multi-badge-item\">\r\n              <span class=\"bk-multi-badge-item-text\">+{{ selectedOptions().length }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (!multiple() && selectedOptions().length > 0) {\r\n          <div class=\"flex items-center gap-1.5 min-w-0 w-full\">\r\n            <!-- One leading visual only: avatar > icon > dot.\r\n                 `flex` on the host: bk-avatar's host is display:inline by\r\n                 default, so its inline-flex body sits on a baseline and the\r\n                 host gains descender space \u2014 which knocks the avatar out of\r\n                 vertical centre against the label. -->\r\n            @if (showAvatar()) {\r\n              <bk-avatar\r\n                class=\"shrink-0 flex\"\r\n                size=\"xxsm\"\r\n                [src]=\"resolveAvatarSrc(selectedOptions()[0])\"\r\n                [name]=\"resolveLabel(selectedOptions()[0])\"\r\n                [alt]=\"iconAlt\"\r\n                [bgColor]=\"avatarBgFor(selectedOptions()[0])\"\r\n                [textColor]=\"avatarTextFor(selectedOptions()[0])\"\r\n              ></bk-avatar>\r\n            } @else if (resolveIcon(selectedOptions()[0])) {\r\n              <img [src]=\"resolveIcon(selectedOptions()[0])!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n            } @else if (showDots() && accentFor(selectedOptions()[0])) {\r\n              <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(selectedOptions()[0])\"></span>\r\n            }\r\n            <div #singleValueEl class=\"bk-value-label-single\" [style.color]=\"controlStyle().color ?? resolveColor(selectedOptions()[0])\"\r\n                 [bkTooltip]=\"getTooltipIfEllipsed(singleValueEl, resolveLabel(selectedOptions()[0]))\"\r\n                 bkTooltipPosition=\"top\">\r\n              {{ resolveLabel(selectedOptions()[0]) }}\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"bk-actions\">\r\n        @if (clearable() && selectedOptions().length > 0 && isEditable()) {\r\n          <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <path d=\"m6 9 6 6 6-6\" />\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        #dropdownPanel\r\n        tabindex=\"-1\"\r\n        (keydown)=\"onTabPress($event)\"\r\n        class=\"bk-dropdown-panel\"\r\n        [style.visibility]=\"panelReady() ? 'visible' : 'hidden'\"\r\n        [attr.data-position]=\"placement()\"\r\n        [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n        [style.top]=\"getTop()\"\r\n        [style.bottom]=\"getBottom()\"\r\n        [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n        [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n        [style.zIndex]=\"appendToBody() ? 10000 : null\"\r\n        [class.bk-grouped]=\"groupBy()\"\r\n        [class.bk-grid-panel]=\"dropdownView() === 'grid'\"\r\n        [class.bk-grid-compact]=\"dropdownView() === 'grid' && isGridCompact()\"\r\n      >\r\n        @if (searchable()) {\r\n          <div class=\"bk-dropdown-search mb-1\">\r\n            <div class=\"bk-search-wrapper\">\r\n              <svg\r\n                class=\"text-[#BBBDC5] mr-2\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"20\"\r\n                height=\"20\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              >\r\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n              </svg>\r\n              <input\r\n                #searchInput\r\n                tabindex=\"-1\"\r\n                type=\"text\"\r\n                class=\"bk-search-input\"\r\n                [value]=\"searchTerm()\"\r\n                [placeholder]=\"'Search...'\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (dropdownView() === 'grid') {\r\n          <div\r\n            #optionsListContainer\r\n            class=\"bk-grid-scroll\"\r\n            [class.bk-no-responsive]=\"!isResponsive()\"\r\n            [style.maxHeight]=\"gridMaxHeight()\"\r\n            (scroll)=\"onScroll($event)\"\r\n          >\r\n            <table class=\"bk-select-grid\" [style.minWidth]=\"gridMinWidth()\">\r\n              <thead>\r\n                <tr>\r\n                  @if (multiple()) {\r\n                    <th class=\"bk-grid-checkbox-column\" aria-label=\"Selection\"></th>\r\n                  }\r\n                  @for (column of gridColumns(); track column.key) {\r\n                    <th [ngStyle]=\"gridColumnStyle(column)\">{{ column.label }}</th>\r\n                  }\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                @if (loading()) {\r\n                  <tr><td [attr.colspan]=\"gridColumns().length + (multiple() ? 1 : 0)\" class=\"bk-grid-message\">{{ loadingText() }}</td></tr>\r\n                } @else {\r\n                  @for (item of filteredItems(); track resolveValue(item); let rowIndex = $index) {\r\n                    <tr\r\n                      #optionsRef\r\n                      tabindex=\"-1\"\r\n                      [class.bk-selected]=\"isGridItemSelected(item)\"\r\n                      [class.bk-marked]=\"rowIndex === markedIndex()\"\r\n                      [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                      (click)=\"handleGridSelection(item, $event)\"\r\n                      (mouseenter)=\"onOptionHover(rowIndex)\"\r\n                    >\r\n                      @if (multiple()) {\r\n                        <td class=\"bk-grid-checkbox-column\">\r\n                          <bk-checkbox\r\n                            class=\"pointer-events-none flex\"\r\n                            checkboxClass=\"sm\"\r\n                            [disabled]=\"isItemDisabled(item)\"\r\n                            [ngModel]=\"isGridItemSelected(item)\"\r\n                            [ngModelOptions]=\"{ standalone: true }\"\r\n                          ></bk-checkbox>\r\n                        </td>\r\n                      }\r\n                      @for (column of gridColumns(); track column.key) {\r\n                        <td [ngStyle]=\"gridColumnStyle(column)\">\r\n                          @if (column.type === 'badge') {\r\n                            <bk-badge\r\n                              [label]=\"resolveGridCell(item, column)\"\r\n                              [color]=\"gridBadgeColor(item, column)\"\r\n                              [variant]=\"column.badgeVariant ?? 'Light'\"\r\n                              [size]=\"isGridCompact() ? 'xsm' : 'sm'\"\r\n                            ></bk-badge>\r\n                          } @else {\r\n                            <span class=\"bk-grid-cell-text\">{{ resolveGridCell(item, column) }}</span>\r\n                          }\r\n                        </td>\r\n                      }\r\n                    </tr>\r\n                  }\r\n                  @if (filteredItems().length === 0) {\r\n                    <tr><td [attr.colspan]=\"gridColumns().length + (multiple() ? 1 : 0)\" class=\"bk-grid-message\">{{ notFoundText() }}</td></tr>\r\n                  }\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n          @if (multiple()) {\r\n            <div class=\"bk-grid-footer\">\r\n              <span>{{ gridSelectedCount() }} selected</span>\r\n              @if (gridSelectionActions()) {\r\n              <div class=\"bk-grid-footer-actions\">\r\n                <bk-button variant=\"secondary\" [size]=\"isGridCompact() ? 'xxsm' : 'xsm'\" [label]=\"gridClearText()\" (clicked)=\"clearGridDraft()\"></bk-button>\r\n                <bk-button variant=\"primary\" [size]=\"isGridCompact() ? 'xxsm' : 'xsm'\" [label]=\"gridApplyText()\" (clicked)=\"applyGridDraft()\"></bk-button>\r\n              </div>\r\n              }\r\n            </div>\r\n          }\r\n        } @else {\r\n        <div\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          [class.bk-no-responsive]=\"!isResponsive()\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\r\n          @if (loading()) {\r\n            <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n          } @else {\r\n            @if (allSelect()) {\r\n              @if (multiple() && filteredItems().length > 0) {\r\n                <div\r\n                  class=\"bk-option\"\r\n                  (mousedown)=\"toggleSelectAll($event)\"\r\n                  [class.bk-selected]=\"isAllSelected()\"\r\n                >\r\n                  <div class=\"flex-1 flex items-center gap-2 min-w-0\">\r\n                    <!-- Reflects state only: pointer-events-none lets the row's\r\n                         mousedown own the toggle, so the box can't fire twice.\r\n                         standalone keeps this ngModel out of any parent <form>\r\n                         bk-select is rendered inside. -->\r\n                    <bk-checkbox\r\n                      class=\"pointer-events-none shrink-0 flex\"\r\n                      checkboxClass=\"sm\"\r\n                      [ngModel]=\"isAllSelected()\"\r\n                      [ngModelOptions]=\"{ standalone: true }\"\r\n                    ></bk-checkbox>\r\n                    <span class=\"line-clamp-1\">Select All</span>\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n            @for (group of groupedItems(); track $index) {\r\n              @if (group.group) {\r\n                <div class=\"bk-option-group\">\r\n                  {{ group.group }}\r\n                </div>\r\n              }\r\n\r\n              @for (item of group.items; track $index) {\r\n                <div\r\n                  #optionsRef\r\n                  tabindex=\"-1\"\r\n                  class=\"bk-option\"\r\n                  [class.bk-selected]=\"isItemSelected(item)\"\r\n                  [class.bk-marked]=\"$index === markedIndex()\"\r\n                  [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                  [class.cursor-not-allowed]=\"isItemDisabled(item)\"\r\n                  (click)=\"handleSelection(item, $event)\"\r\n                  (mouseenter)=\"onOptionHover($index)\"\r\n                >\r\n                  <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\r\n                      <!-- One leading visual only: avatar > icon > dot. -->\r\n                      @if (showAvatar()) {\r\n                        <bk-avatar\r\n                          class=\"shrink-0 flex\"\r\n                          size=\"xxsm\"\r\n                          [src]=\"resolveAvatarSrc(item)\"\r\n                          [name]=\"resolveLabel(item)\"\r\n                          [alt]=\"iconAlt\"\r\n                          [bgColor]=\"avatarBgFor(item)\"\r\n                          [textColor]=\"avatarTextFor(item)\"\r\n                        ></bk-avatar>\r\n                      } @else if (resolveIcon(item)) {\r\n                        <img [src]=\"resolveIcon(item)!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n                      } @else if (showDots() && accentFor(item)) {\r\n                        <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(item)\"></span>\r\n                      }\r\n                      <span #optionLabelEl class=\"bk-option-label min-w-0\" [style.color]=\"optionTextColor(item)\"\r\n                            [bkTooltip]=\"getTooltipIfEllipsed(optionLabelEl, resolveLabel(item))\"\r\n                            bkTooltipPosition=\"top\">{{\r\n                        resolveLabel(item)\r\n                      }}</span>\r\n                    </div>\r\n\r\n                    @if (isItemSelected(item)) {\r\n                      <svg\r\n                        class=\"text-[#141414] shrink-0\"\r\n                        width=\"17\"\r\n                        height=\"17\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2.5\"\r\n                      >\r\n                        <polyline points=\"20 6 9 17 4 12\" />\r\n                      </svg>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (filteredItems().length === 0) {\r\n              <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n            }\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply shadow-none z-10;outline:none!important}.bk-select-control.bk-focused:not(.bk-filled){@apply border-[#6B7080];}.bk-select-control.bk-filled{box-shadow:none}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7!important;background-color:#f4f4f6!important;color:#a1a3ae!important}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{border-color:#d11e14!important}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs !leading-[18px];}.bk-chips-viewport{flex:1 1 0%;min-width:0;max-width:100%}.bk-chips-measure{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;white-space:nowrap;z-index:-1}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item.bk-chip-has-avatar{@apply py-0 ps-0.5;max-width:140px}.bk-select-container.bk-grid-view .bk-multi-badge-item{max-width:175px}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[100] overflow-hidden cursor-default p-2.5;}.bk-grid-scroll{@apply overflow-auto -mx-2.5;scrollbar-width:thin;scrollbar-color:#D6D7DC transparent}.bk-grid-scroll::-webkit-scrollbar{width:6px;height:6px}.bk-grid-scroll::-webkit-scrollbar-track{background:transparent}.bk-grid-scroll::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:999px}.bk-grid-scroll::-webkit-scrollbar-thumb:hover{background:#909090}.bk-grid-scroll::-webkit-scrollbar-button{display:none}.bk-dropdown-panel.bk-grid-panel{padding-top:0;padding-bottom:0}.bk-select-grid{@apply w-full border-collapse text-sm text-[#141414];table-layout:fixed}.bk-select-grid th{@apply sticky top-0 z-10 bg-[#F1F1F3] px-4 py-2.5 font-semibold whitespace-nowrap border-b border-[#E3E3E7];}.bk-select-grid td{@apply px-4 py-2.5 border-b border-[#E3E3E7] align-middle;}.bk-select-grid tbody tr{@apply cursor-pointer transition-colors;}.bk-select-grid tbody tr:hover,.bk-select-grid tbody tr.bk-marked{@apply bg-[#F8F8F8];}.bk-select-grid tbody tr.bk-selected{background-color:#f8f8f8}.bk-select-grid tbody tr.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-grid-checkbox-column{width:48px;min-width:48px;@apply !px-4;}.bk-grid-cell-text{@apply block truncate;}.bk-grid-message{@apply !px-4 !py-4 text-center text-gray-400;}.bk-grid-footer{@apply flex items-center justify-between gap-4 px-1 py-2.5 text-xs text-[#6B7080];}.bk-grid-footer-actions{@apply flex items-center gap-2;}.bk-dropdown-panel.bk-grid-compact{padding:0 .5rem}.bk-dropdown-panel.bk-grid-compact .bk-dropdown-search{@apply px-1 pt-1;}.bk-dropdown-panel.bk-grid-compact .bk-search-wrapper{@apply px-2 py-1;}.bk-dropdown-panel.bk-grid-compact .bk-search-input{@apply text-xs;}.bk-dropdown-panel.bk-grid-compact .bk-grid-scroll{@apply -mx-2;}.bk-dropdown-panel.bk-grid-compact .bk-select-grid{@apply text-xs;}.bk-dropdown-panel.bk-grid-compact .bk-select-grid th,.bk-dropdown-panel.bk-grid-compact .bk-select-grid td{@apply px-3 py-1.5;}.bk-dropdown-panel.bk-grid-compact .bk-grid-checkbox-column{width:40px;min-width:40px;@apply !px-3;}.bk-dropdown-panel.bk-grid-compact .bk-grid-footer{@apply gap-3 px-0 py-1.5 text-[11px];}.bk-dropdown-panel.bk-grid-compact .bk-grid-footer-actions{@apply gap-1.5;}@media (max-width: 640px){.bk-grid-scroll{max-width:calc(100vw - 32px)}}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:166px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.bk-options-list.bk-no-responsive{max-height:166px!important}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-option.bk-option-disabled:hover{@apply bg-transparent;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}.bk-option-icon{@apply w-4 h-4 object-contain rounded-sm;}.bk-chip-icon{@apply w-3 h-3 object-contain rounded-sm;}.bk-value-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.bk-chip-dot{@apply inline-block w-1.5 h-1.5 rounded-full shrink-0;}\n"] }]
+                    ], template: "<div class=\"bk-select-container\" [ngClass]=\"variation\" [class.bk-grid-view]=\"dropdownView() === 'grid'\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <!-- controlStyle() resolves the tint: the selected option's accent normally,\r\n         a soft red one while hasError. It's a method rather than a computed\r\n         because hasError is a plain @Input, not a signal. -->\r\n    <div\r\n      #controlWrapper\r\n      cdkOverlayOrigin\r\n      #selectOrigin=\"cdkOverlayOrigin\"\r\n      class=\"bk-select-control\"\r\n      [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n      tabindex=\"0\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [class.bk-focused]=\"isOpen()\"\r\n      [class.bk-disabled]=\"disabled()\"\r\n      [class.bk-filled]=\"!!controlStyle().backgroundColor\"\r\n      [style.backgroundColor]=\"controlStyle().backgroundColor\"\r\n      [style.color]=\"controlStyle().color\"\r\n      [style.borderColor]=\"controlStyle().borderColor\"\r\n      (mousedown)=\"toggleDropdown($event)\"\r\n    >\r\n      <!-- Icon (Always visible if set) -->\r\n      @if (iconSrc) {\r\n        <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"bk-value-container\">\r\n        @if (selectedOptions().length === 0) {\r\n          <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n        @if (multiple() && selectedOptions().length > 0) {\r\n          <div\r\n            #chipsViewport\r\n            class=\"bk-value-chips bk-chips-viewport flex gap-0.5 flex-nowrap overflow-hidden h-[18px]\"\r\n          >\r\n            @for (opt of selectedOptions().slice(0, visibleCount()); track $index) {\r\n              <div class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- One leading visual only: avatar > icon > dot. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                    [bgColor]=\"avatarBgFor(opt)\"\r\n                    [textColor]=\"avatarTextFor(opt)\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\" [style.backgroundColor]=\"accentFor(opt)\"></span>\r\n                }\r\n                <span #badgeTextEl class=\"bk-multi-badge-item-text\" [style.color]=\"optionTextColor(opt)\"\r\n                      [bkTooltip]=\"getTooltipIfEllipsed(badgeTextEl, resolveLabel(opt))\"\r\n                      bkTooltipPosition=\"top\">{{\r\n                  resolveLabel(opt)\r\n                }}</span>\r\n\r\n                <!-- A locked control must not offer a way to drop a value. -->\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            @if (visibleCount() < selectedOptions().length) {\r\n              <div class=\"bk-multi-badge-item\">\r\n                <span\r\n                  class=\"bk-multi-badge-item-text\"\r\n                  bkTooltipPosition=\"top\"\r\n                  [bkTooltip]=\"getRemainingItems()\"\r\n                  [bkTooltipScrollable]=\"true\"\r\n                  bkTooltipMaxHeight=\"240px\"\r\n                  >+{{ selectedOptions().length - visibleCount() }}</span\r\n                >\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Hidden off-screen row used only to measure each chip's natural\r\n               width so we can decide how many fit on a single line. -->\r\n          <div class=\"bk-value-chips bk-chips-measure flex gap-0.5 flex-nowrap\" aria-hidden=\"true\">\r\n            @for (opt of selectedOptions(); track $index) {\r\n              <div #measureChip class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- Must mirror the visible chip exactly \u2014 same leading visual\r\n                     and same precedence \u2014 or the measured width is wrong and\r\n                     \"+N\" collapses at the wrong point. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\"></span>\r\n                }\r\n                <span class=\"bk-multi-badge-item-text\">{{ resolveLabel(opt) }}</span>\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" tabindex=\"-1\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            <div #measurePlus class=\"bk-multi-badge-item\">\r\n              <span class=\"bk-multi-badge-item-text\">+{{ selectedOptions().length }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (!multiple() && selectedOptions().length > 0) {\r\n          <div class=\"flex items-center gap-1.5 min-w-0 w-full\">\r\n            <!-- One leading visual only: avatar > icon > dot.\r\n                 `flex` on the host: bk-avatar's host is display:inline by\r\n                 default, so its inline-flex body sits on a baseline and the\r\n                 host gains descender space \u2014 which knocks the avatar out of\r\n                 vertical centre against the label. -->\r\n            @if (showAvatar()) {\r\n              <bk-avatar\r\n                class=\"shrink-0 flex\"\r\n                size=\"xxsm\"\r\n                [src]=\"resolveAvatarSrc(selectedOptions()[0])\"\r\n                [name]=\"resolveLabel(selectedOptions()[0])\"\r\n                [alt]=\"iconAlt\"\r\n                [bgColor]=\"avatarBgFor(selectedOptions()[0])\"\r\n                [textColor]=\"avatarTextFor(selectedOptions()[0])\"\r\n              ></bk-avatar>\r\n            } @else if (resolveIcon(selectedOptions()[0])) {\r\n              <img [src]=\"resolveIcon(selectedOptions()[0])!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n            } @else if (showDots() && accentFor(selectedOptions()[0])) {\r\n              <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(selectedOptions()[0])\"></span>\r\n            }\r\n            <div #singleValueEl class=\"bk-value-label-single\" [style.color]=\"controlStyle().color ?? resolveColor(selectedOptions()[0])\"\r\n                 [bkTooltip]=\"getTooltipIfEllipsed(singleValueEl, resolveLabel(selectedOptions()[0]))\"\r\n                 bkTooltipPosition=\"top\">\r\n              {{ resolveLabel(selectedOptions()[0]) }}\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"bk-actions\">\r\n        @if (clearable() && selectedOptions().length > 0 && isEditable()) {\r\n          <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <path d=\"m6 9 6 6 6-6\" />\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <!--\r\n      CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n      an inline `position:absolute`/`fixed` div, so it escapes clipping inside dialogs/scroll\r\n      containers and stacks correctly above other CDK-overlay content, regardless of the old\r\n      appendToBody flag (see its @deprecated note). No backdrop \u2014 see onOverlayOutsideClick.\r\n    -->\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      #selectOverlay=\"cdkConnectedOverlay\"\r\n      [cdkConnectedOverlayOrigin]=\"selectOrigin\"\r\n      [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n      [cdkConnectedOverlayPositions]=\"selectDropdownPositions\"\r\n      [cdkConnectedOverlayWidth]=\"dropdownWidth() ?? ''\"\r\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n      (positionChange)=\"onPositionChange($event)\"\r\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n      (detach)=\"closeDropdown()\"\r\n    >\r\n      <div\r\n        #dropdownPanel\r\n        tabindex=\"-1\"\r\n        (keydown)=\"onTabPress($event)\"\r\n        class=\"bk-dropdown-panel\"\r\n        [style.visibility]=\"panelReady() ? 'visible' : 'hidden'\"\r\n        [attr.data-position]=\"placement()\"\r\n        [class.bk-grouped]=\"groupBy()\"\r\n        [class.bk-grid-panel]=\"dropdownView() === 'grid'\"\r\n        [class.bk-grid-compact]=\"dropdownView() === 'grid' && isGridCompact()\"\r\n      >\r\n        @if (searchable()) {\r\n          <div class=\"bk-dropdown-search mb-1\">\r\n            <div class=\"bk-search-wrapper\">\r\n              <svg\r\n                class=\"text-[#BBBDC5] mr-2\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"20\"\r\n                height=\"20\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              >\r\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n              </svg>\r\n              <input\r\n                #searchInput\r\n                tabindex=\"0\"\r\n                type=\"text\"\r\n                class=\"bk-search-input\"\r\n                [value]=\"searchTerm()\"\r\n                [placeholder]=\"'Search...'\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (dropdownView() === 'grid') {\r\n          <div\r\n            #optionsListContainer\r\n            class=\"bk-grid-scroll\"\r\n            [class.bk-no-responsive]=\"!isResponsive()\"\r\n            [style.maxHeight]=\"gridMaxHeight()\"\r\n            (scroll)=\"onScroll($event)\"\r\n          >\r\n            <table class=\"bk-select-grid\" [style.minWidth]=\"gridMinWidth()\">\r\n              <thead>\r\n                <tr>\r\n                  @if (multiple()) {\r\n                    <th class=\"bk-grid-checkbox-column\" aria-label=\"Selection\"></th>\r\n                  }\r\n                  @for (column of gridColumns(); track column.key) {\r\n                    <th [ngStyle]=\"gridColumnStyle(column)\">{{ column.label }}</th>\r\n                  }\r\n                </tr>\r\n              </thead>\r\n              <tbody>\r\n                @if (loading()) {\r\n                  <tr><td [attr.colspan]=\"gridColumns().length + (multiple() ? 1 : 0)\" class=\"bk-grid-message\">{{ loadingText() }}</td></tr>\r\n                } @else {\r\n                  @for (item of filteredItems(); track resolveValue(item); let rowIndex = $index) {\r\n                    <tr\r\n                      #optionsRef\r\n                      tabindex=\"-1\"\r\n                      [class.bk-selected]=\"isGridItemSelected(item)\"\r\n                      [class.bk-marked]=\"rowIndex === markedIndex()\"\r\n                      [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                      (click)=\"handleGridSelection(item, $event)\"\r\n                      (mouseenter)=\"onOptionHover(rowIndex)\"\r\n                    >\r\n                      @if (multiple()) {\r\n                        <td class=\"bk-grid-checkbox-column\">\r\n                          <bk-checkbox\r\n                            class=\"pointer-events-none flex\"\r\n                            checkboxClass=\"sm\"\r\n                            [disabled]=\"isItemDisabled(item)\"\r\n                            [ngModel]=\"isGridItemSelected(item)\"\r\n                            [ngModelOptions]=\"{ standalone: true }\"\r\n                          ></bk-checkbox>\r\n                        </td>\r\n                      }\r\n                      @for (column of gridColumns(); track column.key) {\r\n                        <td [ngStyle]=\"gridColumnStyle(column)\">\r\n                          @if (column.type === 'badge') {\r\n                            <bk-badge\r\n                              [label]=\"resolveGridCell(item, column)\"\r\n                              [color]=\"gridBadgeColor(item, column)\"\r\n                              [variant]=\"column.badgeVariant ?? 'Light'\"\r\n                              [size]=\"isGridCompact() ? 'xsm' : 'sm'\"\r\n                            ></bk-badge>\r\n                          } @else {\r\n                            <span class=\"bk-grid-cell-text\">{{ resolveGridCell(item, column) }}</span>\r\n                          }\r\n                        </td>\r\n                      }\r\n                    </tr>\r\n                  }\r\n                  @if (filteredItems().length === 0) {\r\n                    <tr><td [attr.colspan]=\"gridColumns().length + (multiple() ? 1 : 0)\" class=\"bk-grid-message\">{{ notFoundText() }}</td></tr>\r\n                  }\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n          @if (multiple()) {\r\n            <div class=\"bk-grid-footer\">\r\n              <span>{{ gridSelectedCount() }} selected</span>\r\n              @if (gridSelectionActions()) {\r\n              <div class=\"bk-grid-footer-actions\">\r\n                <bk-button variant=\"secondary\" [size]=\"isGridCompact() ? 'xxsm' : 'xsm'\" [label]=\"gridClearText()\" (clicked)=\"clearGridDraft()\"></bk-button>\r\n                <bk-button variant=\"primary\" [size]=\"isGridCompact() ? 'xxsm' : 'xsm'\" [label]=\"gridApplyText()\" (clicked)=\"applyGridDraft()\"></bk-button>\r\n              </div>\r\n              }\r\n            </div>\r\n          }\r\n        } @else {\r\n        <div\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          [class.bk-no-responsive]=\"!isResponsive()\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\r\n          @if (loading()) {\r\n            <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n          } @else {\r\n            @if (allSelect()) {\r\n              @if (multiple() && filteredItems().length > 0) {\r\n                <div\r\n                  class=\"bk-option\"\r\n                  (mousedown)=\"toggleSelectAll($event)\"\r\n                  [class.bk-selected]=\"isAllSelected()\"\r\n                >\r\n                  <div class=\"flex-1 flex items-center gap-2 min-w-0\">\r\n                    <!-- Reflects state only: pointer-events-none lets the row's\r\n                         mousedown own the toggle, so the box can't fire twice.\r\n                         standalone keeps this ngModel out of any parent <form>\r\n                         bk-select is rendered inside. -->\r\n                    <bk-checkbox\r\n                      class=\"pointer-events-none shrink-0 flex\"\r\n                      checkboxClass=\"sm\"\r\n                      [ngModel]=\"isAllSelected()\"\r\n                      [ngModelOptions]=\"{ standalone: true }\"\r\n                    ></bk-checkbox>\r\n                    <span class=\"line-clamp-1\">Select All</span>\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n            @for (group of groupedItems(); track $index) {\r\n              @if (group.group) {\r\n                <div class=\"bk-option-group\">\r\n                  {{ group.group }}\r\n                </div>\r\n              }\r\n\r\n              @for (item of group.items; track $index) {\r\n                <div\r\n                  #optionsRef\r\n                  tabindex=\"-1\"\r\n                  class=\"bk-option\"\r\n                  [class.bk-selected]=\"isItemSelected(item)\"\r\n                  [class.bk-marked]=\"isMarked(item)\"\r\n                  [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                  [class.cursor-not-allowed]=\"isItemDisabled(item)\"\r\n                  (click)=\"handleSelection(item, $event)\"\r\n                  (mouseenter)=\"markOption(item)\"\r\n                >\r\n                  <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\r\n                      <!-- One leading visual only: avatar > icon > dot. -->\r\n                      @if (showAvatar()) {\r\n                        <bk-avatar\r\n                          class=\"shrink-0 flex\"\r\n                          size=\"xxsm\"\r\n                          [src]=\"resolveAvatarSrc(item)\"\r\n                          [name]=\"resolveLabel(item)\"\r\n                          [alt]=\"iconAlt\"\r\n                          [bgColor]=\"avatarBgFor(item)\"\r\n                          [textColor]=\"avatarTextFor(item)\"\r\n                        ></bk-avatar>\r\n                      } @else if (resolveIcon(item)) {\r\n                        <img [src]=\"resolveIcon(item)!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n                      } @else if (showDots() && accentFor(item)) {\r\n                        <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(item)\"></span>\r\n                      }\r\n                      <span #optionLabelEl class=\"bk-option-label min-w-0\" [style.color]=\"optionTextColor(item)\"\r\n                            [bkTooltip]=\"getTooltipIfEllipsed(optionLabelEl, resolveLabel(item))\"\r\n                            bkTooltipPosition=\"top\">{{\r\n                        resolveLabel(item)\r\n                      }}</span>\r\n                    </div>\r\n\r\n                    @if (isItemSelected(item)) {\r\n                      <svg\r\n                        class=\"text-[#141414] shrink-0\"\r\n                        width=\"17\"\r\n                        height=\"17\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2.5\"\r\n                      >\r\n                        <polyline points=\"20 6 9 17 4 12\" />\r\n                      </svg>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (filteredItems().length === 0) {\r\n              <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n            }\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply shadow-none z-10;outline:none!important}.bk-select-control.bk-focused:not(.bk-filled){@apply border-[#6B7080];}.bk-select-control.bk-filled{box-shadow:none}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7!important;background-color:#f4f4f6!important;color:#a1a3ae!important}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{border-color:#d11e14!important}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs !leading-[18px];}.bk-chips-viewport{flex:1 1 0%;min-width:0;max-width:100%}.bk-chips-measure{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;white-space:nowrap;z-index:-1}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item.bk-chip-has-avatar{@apply py-0 ps-0.5;max-width:140px}.bk-select-container.bk-grid-view .bk-multi-badge-item{max-width:175px}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply static left-auto w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg overflow-hidden cursor-default p-2.5;}.bk-grid-scroll{@apply overflow-auto -mx-2.5;scrollbar-width:thin;scrollbar-color:#D6D7DC transparent}.bk-grid-scroll::-webkit-scrollbar{width:6px;height:6px}.bk-grid-scroll::-webkit-scrollbar-track{background:transparent}.bk-grid-scroll::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:999px}.bk-grid-scroll::-webkit-scrollbar-thumb:hover{background:#909090}.bk-grid-scroll::-webkit-scrollbar-button{display:none}.bk-dropdown-panel.bk-grid-panel{padding-top:0;padding-bottom:0}.bk-select-grid{@apply w-full border-collapse text-sm text-[#141414];table-layout:fixed}.bk-select-grid th{@apply sticky top-0 z-10 bg-[#F1F1F3] px-4 py-2.5 font-semibold whitespace-nowrap border-b border-[#E3E3E7];}.bk-select-grid td{@apply px-4 py-2.5 border-b border-[#E3E3E7] align-middle;}.bk-select-grid tbody tr{@apply cursor-pointer transition-colors;}.bk-select-grid tbody tr:hover,.bk-select-grid tbody tr.bk-marked{@apply bg-[#F8F8F8];}.bk-select-grid tbody tr.bk-selected{background-color:#f8f8f8}.bk-select-grid tbody tr.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-grid-checkbox-column{width:48px;min-width:48px;@apply !px-4;}.bk-grid-cell-text{@apply block truncate;}.bk-grid-message{@apply !px-4 !py-4 text-center text-gray-400;}.bk-grid-footer{@apply flex items-center justify-between gap-4 px-1 py-2.5 text-xs text-[#6B7080];}.bk-grid-footer-actions{@apply flex items-center gap-2;}.bk-dropdown-panel.bk-grid-compact{padding:0 .5rem}.bk-dropdown-panel.bk-grid-compact .bk-dropdown-search{@apply px-1 pt-1;}.bk-dropdown-panel.bk-grid-compact .bk-search-wrapper{@apply px-2 py-1;}.bk-dropdown-panel.bk-grid-compact .bk-search-input{@apply text-xs;}.bk-dropdown-panel.bk-grid-compact .bk-grid-scroll{@apply -mx-2;}.bk-dropdown-panel.bk-grid-compact .bk-select-grid{@apply text-xs;}.bk-dropdown-panel.bk-grid-compact .bk-select-grid th,.bk-dropdown-panel.bk-grid-compact .bk-select-grid td{@apply px-3 py-1.5;}.bk-dropdown-panel.bk-grid-compact .bk-grid-checkbox-column{width:40px;min-width:40px;@apply !px-3;}.bk-dropdown-panel.bk-grid-compact .bk-grid-footer{@apply gap-3 px-0 py-1.5 text-[11px];}.bk-dropdown-panel.bk-grid-compact .bk-grid-footer-actions{@apply gap-1.5;}@media (max-width: 640px){.bk-grid-scroll{max-width:calc(100vw - 32px)}}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:166px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.bk-options-list.bk-no-responsive{max-height:166px!important}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked{@apply bg-[#F1F1F3] rounded-md;}.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option.bk-selected:hover,.bk-option.bk-selected.bk-marked{@apply bg-[#F1F1F3];}.bk-option.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-option.bk-option-disabled:hover{@apply bg-transparent;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}.bk-option-icon{@apply w-4 h-4 object-contain rounded-sm;}.bk-chip-icon{@apply w-3 h-3 object-contain rounded-sm;}.bk-value-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.bk-chip-dot{@apply inline-block w-1.5 h-1.5 rounded-full shrink-0;}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindIcon", required: false }] }], isResponsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResponsive", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllText", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], dropdownView: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownView", required: false }] }], gridColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridColumns", required: false }] }], gridVariation: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridVariation", required: false }] }], gridSelectionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSelectionActions", required: false }] }], gridMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridMinWidth", required: false }] }], gridMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridMaxHeight", required: false }] }], gridSelectedLabelKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSelectedLabelKeys", required: false }] }], gridSelectedLabelSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSelectedLabelSeparator", required: false }] }], gridApplyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridApplyText", required: false }] }], gridClearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridClearText", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatar", required: false }] }], avatarKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarKey", required: false }] }], iconAlt: [{
                 type: Input
             }], label: [{
@@ -6188,7 +6319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], iconSrc: [{
                 type: Input
-            }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabels", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], allSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelect", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], hasError: [{
+            }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabels", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], allSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelect", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], hasError: [{
                 type: Input
             }], errorMessage: [{
                 type: Input
@@ -6207,6 +6338,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], dropdownPanel: [{
                 type: ViewChild,
                 args: ['dropdownPanel']
+            }], selectOverlay: [{
+                type: ViewChild,
+                args: ['selectOverlay']
             }], chipsViewport: [{
                 type: ViewChild,
                 args: ['chipsViewport']
@@ -6216,11 +6350,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], measurePlus: [{
                 type: ViewChild,
                 args: ['measurePlus']
-            }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], onClickOutside: [{
+            }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], onPointerDown: [{
                 type: HostListener,
-                args: ['document:click', ['$event']]
+                args: ['pointerdown']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
             }] } });
 
+/** Default country list used when a consumer does not provide their own via `[countryOptions]`. */
+const DEFAULT_COUNTRY_OPTIONS = [
+    { code: 'US', name: 'US', mask: '(000) 000-0000', prefix: '+1 ', placeholder: '(000) 000-0000' },
+    { code: 'MT', name: 'MT', mask: '(000) 000-0000', prefix: '+356 ', placeholder: '(000) 000-0000' },
+    { code: 'PL', name: 'PL', mask: '(000) 000-0000', prefix: '+48 ', placeholder: '(000) 000-0000' },
+    { code: 'CH', name: 'CH', mask: '(000) 000-0000', prefix: '+41 ', placeholder: '(000) 000-0000' },
+    { code: 'TR', name: 'TR', mask: '(000) 000-0000', prefix: '+90 ', placeholder: '(000) 000-0000' },
+    { code: 'UG', name: 'UG', mask: '(000) 000-0000', prefix: '+256 ', placeholder: '(000) 000-0000' },
+    { code: 'ZM', name: 'ZM', mask: '(000) 000-0000', prefix: '+260 ', placeholder: '(000) 000-0000' }
+];
 class BkInput {
     // =================== Inputs (all your original ones) ===================
     id;
@@ -6252,16 +6402,24 @@ class BkInput {
     currencyDecimals = 2;
     allowNegative = false;
     countryCode = 'US';
-    countryOptions = [
-        { code: 'US', name: 'US', mask: '(000) 000-0000', prefix: '+1 ', placeholder: '(000) 000-0000' },
-        { code: 'MT', name: 'MT', mask: '(000) 000-0000', prefix: '+356 ', placeholder: '(000) 000-0000' },
-        { code: 'PL', name: 'PL', mask: '(000) 000-0000', prefix: '+48 ', placeholder: '(000) 000-0000' },
-        { code: 'CH', name: 'CH', mask: '(000) 000-0000', prefix: '+41 ', placeholder: '(000) 000-0000' },
-        { code: 'TR', name: 'TR', mask: '(000) 000-0000', prefix: '+90 ', placeholder: '(000) 000-0000' },
-        { code: 'UG', name: 'UG', mask: '(000) 000-0000', prefix: '+256 ', placeholder: '(000) 000-0000' },
-        { code: 'ZM', name: 'ZM', mask: '(000) 000-0000', prefix: '+260 ', placeholder: '(000) 000-0000' }
-    ];
-    selectedCountry = this.countryOptions[0];
+    /**
+     * Consumer-supplied country list. When a non-empty list is provided it replaces the
+     * built-in list; when omitted (or given a null/empty value) the DEFAULT_COUNTRY_OPTIONS
+     * are used so the selector always has values to show.
+     */
+    _countryOptions = DEFAULT_COUNTRY_OPTIONS;
+    set countryOptions(value) {
+        this._countryOptions = (value && value.length) ? value : DEFAULT_COUNTRY_OPTIONS;
+        // Keep the selected country valid against the (possibly new/custom) list so the
+        // placeholder, mask and prefix always resolve to a real entry.
+        const match = this._countryOptions.find(c => c.code === this.countryCode);
+        this.selectedCountry = match ?? this._countryOptions[0];
+        this.countryCode = this.selectedCountry?.code ?? this.countryCode;
+    }
+    get countryOptions() {
+        return this._countryOptions;
+    }
+    selectedCountry = DEFAULT_COUNTRY_OPTIONS[0];
     iconOrientation = 'left';
     password = false;
     showPassword = false;
@@ -6272,16 +6430,26 @@ class BkInput {
     maxlength = null;
     minlength = null;
     // =================== ViewChild ===================
-    dropdownRef;
-    selectRef;
     inputField;
     maskDirective;
+    phoneOverlay;
     // =================== Internal State ===================
     isFocused = false;
     inputValue = '';
     isDropdownOpen = false;
     pendingMaskedValue = null;
     isPropagatingViewValue = false;
+    /**
+     * Country dropdown panel, positioned via CDK Overlay instead of an inline absolute-positioned
+     * div. This escapes clipping inside dialogs/scroll containers and stacks correctly above CDK
+     * Overlay-based content (e.g. `bk-dialog`) regardless of Angular version — see the
+     * "Dropdown & Calendar Overlay Strategy" doc. Primary: below the trigger, left-aligned (mirrors
+     * the old `top-full left-0 mt-1`). Fallback: above the trigger when there's no room below.
+     */
+    phoneDropdownPositions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 }
+    ];
     // =================== Output Emitter ===================
     input = new EventEmitter();
     change = new EventEmitter();
@@ -6290,8 +6458,7 @@ class BkInput {
     clicked = new EventEmitter();
     get placeHolderText() {
         if (this.phone) {
-            const country = this.countryOptions.find(c => c.code === this.countryCode);
-            return country?.placeholder || '';
+            return this.selectedCountry?.placeholder || this.placeholder || '';
         }
         if (this.currency && !this.placeholder) {
             return this.currencyDecimals > 0 ? `0.${'0'.repeat(this.currencyDecimals)}` : '0';
@@ -6304,15 +6471,13 @@ class BkInput {
         if (this.currency)
             return `separator.${this.currencyDecimals}`;
         if (this.phone) {
-            const country = this.countryOptions.find(c => c.code === this.countryCode);
-            return country?.mask || '';
+            return this.selectedCountry?.mask || '';
         }
         return '';
     }
     get maskPrefixValue() {
         if (this.phone) {
-            const country = this.countryOptions.find(c => c.code === this.countryCode);
-            return country?.prefix || '';
+            return this.selectedCountry?.prefix || '';
         }
         return '';
     }
@@ -6384,7 +6549,7 @@ class BkInput {
     // =================== Lifecycle ===================
     closeAllDropdownsHandler = () => {
         if (this.phone && this.isDropdownOpen)
-            this.isDropdownOpen = false;
+            this.closeDropdown();
     };
     ngOnInit() {
         if (this.value !== undefined && this.value !== null && this.value !== '') {
@@ -6394,8 +6559,10 @@ class BkInput {
             this.type = 'password';
         if (this.phone) {
             const country = this.countryOptions.find(c => c.code === this.countryCode);
-            if (country)
-                this.selectedCountry = country;
+            // Prefer the matching country; otherwise default to the first available option so the
+            // selector text is always consistent with the (possibly custom) country list.
+            this.selectedCountry = country ?? this.countryOptions[0];
+            this.countryCode = this.selectedCountry?.code ?? this.countryCode;
             document.addEventListener('closeAllPhoneDropdowns', this.closeAllDropdownsHandler);
         }
     }
@@ -6407,18 +6574,7 @@ class BkInput {
     ngOnDestroy() {
         if (this.phone) {
             document.removeEventListener('closeAllPhoneDropdowns', this.closeAllDropdownsHandler);
-        }
-    }
-    // =================== Host Listener ===================
-    onDocumentClick(event) {
-        if (this.phone && this.isDropdownOpen) {
-            const target = event.target;
-            if (this.selectRef?.nativeElement && this.dropdownRef?.nativeElement) {
-                const clickedInside = this.selectRef.nativeElement.contains(target) ||
-                    this.dropdownRef.nativeElement.contains(target);
-                if (!clickedInside)
-                    this.isDropdownOpen = false;
-            }
+            this.detachPhoneOverlayScrollTracking();
         }
     }
     // =================== Event Handlers ===================
@@ -6469,14 +6625,54 @@ class BkInput {
         if (!this.disabled && this.phone) {
             if (!this.isDropdownOpen) {
                 document.dispatchEvent(new CustomEvent('closeAllPhoneDropdowns'));
-                setTimeout(() => (this.isDropdownOpen = true), 0);
+                this.isDropdownOpen = true;
+                this.attachPhoneOverlayScrollTracking();
             }
             else {
-                this.isDropdownOpen = false;
+                this.closeDropdown();
             }
             event?.stopPropagation();
         }
     }
+    /**
+     * Shared close path for the CDK overlay: outside click, the overlay detaching (e.g. on
+     * destroy), and another `bk-input` phone field opening (see closeAllDropdownsHandler).
+     */
+    closeDropdown() {
+        this.isDropdownOpen = false;
+        this.detachPhoneOverlayScrollTracking();
+    }
+    /**
+     * CDK's `reposition` scroll strategy (the default, and what we want — no `block`/`close`
+     * behaviour) only reacts to real `document`/`window` scroll. It has no way to know about an
+     * app shell that scrolls a nested container instead (this one does — see the layout's
+     * `overflow-y-auto` content wrapper), so without this the panel would stay frozen in place
+     * while its trigger scrolls out from under it. A capture-phase listener on `document` still
+     * sees scroll events fired on any descendant scrollable element (scroll doesn't bubble, but
+     * capture does), same trick `bk-custom-calendar` uses for its own popup. rAF-throttled so a
+     * fast scroll doesn't force layout on every tick.
+     */
+    phoneOverlayScrollRafId = null;
+    onPhoneOverlayScroll = () => {
+        if (this.phoneOverlayScrollRafId != null)
+            return;
+        this.phoneOverlayScrollRafId = requestAnimationFrame(() => {
+            this.phoneOverlayScrollRafId = null;
+            this.phoneOverlay?.overlayRef?.updatePosition();
+        });
+    };
+    attachPhoneOverlayScrollTracking() {
+        document.addEventListener('scroll', this.onPhoneOverlayScroll, true);
+        window.addEventListener('resize', this.onPhoneOverlayScroll);
+    }
+    detachPhoneOverlayScrollTracking() {
+        document.removeEventListener('scroll', this.onPhoneOverlayScroll, true);
+        window.removeEventListener('resize', this.onPhoneOverlayScroll);
+        if (this.phoneOverlayScrollRafId != null) {
+            cancelAnimationFrame(this.phoneOverlayScrollRafId);
+            this.phoneOverlayScrollRafId = null;
+        }
+    }
     selectCountry(country) {
         const oldCountry = this.selectedCountry;
         this.selectedCountry = country;
@@ -6554,25 +6750,25 @@ class BkInput {
         this.pendingMaskedValue = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkInput, isStandalone: true, selector: "bk-input", inputs: { id: "id", name: "name", mask: "mask", dropSpecialCharacters: "dropSpecialCharacters", autoComplete: "autoComplete", label: "label", placeholder: "placeholder", hint: "hint", required: "required", type: "type", size: "size", value: "value", hasError: "hasError", showErrorIcon: "showErrorIcon", errorMessage: "errorMessage", disabled: "disabled", tabIndex: "tabIndex", readOnly: "readOnly", autoCapitalize: "autoCapitalize", inputMode: "inputMode", iconSrc: "iconSrc", iconAlt: "iconAlt", showIcon: "showIcon", phone: "phone", currency: "currency", currencyDecimals: "currencyDecimals", allowNegative: "allowNegative", countryCode: "countryCode", countryOptions: "countryOptions", iconOrientation: "iconOrientation", password: "password", showPassword: "showPassword", pattern: "pattern", max: "max", min: "min", step: "step", maxlength: "maxlength", minlength: "minlength" }, outputs: { input: "input", change: "change", focus: "focus", blur: "blur", clicked: "clicked" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkInput, isStandalone: true, selector: "bk-input", inputs: { id: "id", name: "name", mask: "mask", dropSpecialCharacters: "dropSpecialCharacters", autoComplete: "autoComplete", label: "label", placeholder: "placeholder", hint: "hint", required: "required", type: "type", size: "size", value: "value", hasError: "hasError", showErrorIcon: "showErrorIcon", errorMessage: "errorMessage", disabled: "disabled", tabIndex: "tabIndex", readOnly: "readOnly", autoCapitalize: "autoCapitalize", inputMode: "inputMode", iconSrc: "iconSrc", iconAlt: "iconAlt", showIcon: "showIcon", phone: "phone", currency: "currency", currencyDecimals: "currencyDecimals", allowNegative: "allowNegative", countryCode: "countryCode", countryOptions: "countryOptions", iconOrientation: "iconOrientation", password: "password", showPassword: "showPassword", pattern: "pattern", max: "max", min: "min", step: "step", maxlength: "maxlength", minlength: "minlength" }, outputs: { input: "input", change: "change", focus: "focus", blur: "blur", clicked: "clicked" }, providers: [
             provideNgxMask(),
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkInput),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "maskDirective", first: true, predicate: NgxMaskDirective, descendants: true }], ngImport: i0, template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div #selectRef class=\"input-phone-selector\" [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n    }\r\n\r\n    @if(phone && isDropdownOpen){\r\n      <div #dropdownRef class=\"input-phone-dropdown\" (click)=\"$event.stopPropagation()\">\r\n        <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country); $event.stopPropagation()\">\r\n          {{ country.name }}\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"input-currency-icon\" [ngClass]=\"{\r\n        'input-currency-icon--default': inputState === 'default',\r\n        'input-currency-icon--focused': inputState === 'focused',\r\n        'input-currency-icon--filled': inputState === 'filled',\r\n        'input-currency-icon--error': inputState === 'error',\r\n        'input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--currency{@apply pl-[3.5rem];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-currency-icon img{@apply w-5 h-5;}.input-currency-icon--default{@apply border-[#E3E3E7];}.input-currency-icon--focused{@apply border-[#6B7080];}.input-currency-icon--filled{@apply border-[#E3E3E7];}.input-currency-icon--error{@apply border-[#E7000B];}.input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--currency{@apply pl-9;}.input-container--sm .input-currency-icon{@apply w-8;}.input-container--sm .input-currency-icon img{@apply w-4 h-4;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "maskDirective", first: true, predicate: NgxMaskDirective, descendants: true }, { propertyName: "phoneOverlay", first: true, predicate: ["phoneOverlay"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"input-currency-icon\" [ngClass]=\"{\r\n        'input-currency-icon--default': inputState === 'default',\r\n        'input-currency-icon--focused': inputState === 'focused',\r\n        'input-currency-icon--filled': inputState === 'filled',\r\n        'input-currency-icon--error': inputState === 'error',\r\n        'input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--currency{@apply pl-[3.5rem];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-currency-icon img{@apply w-5 h-5;}.input-currency-icon--default{@apply border-[#E3E3E7];}.input-currency-icon--focused{@apply border-[#6B7080];}.input-currency-icon--filled{@apply border-[#E3E3E7];}.input-currency-icon--error{@apply border-[#E7000B];}.input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--currency{@apply pl-9;}.input-container--sm .input-currency-icon{@apply w-8;}.input-container--sm .input-currency-icon img{@apply w-4 h-4;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-input', imports: [CommonModule, NgxMaskDirective, FormsModule], standalone: true, providers: [
+            args: [{ selector: 'bk-input', imports: [CommonModule, NgxMaskDirective, FormsModule, OverlayModule], standalone: true, providers: [
                         provideNgxMask(),
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BkInput),
                             multi: true
                         }
-                    ], template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div #selectRef class=\"input-phone-selector\" [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n    }\r\n\r\n    @if(phone && isDropdownOpen){\r\n      <div #dropdownRef class=\"input-phone-dropdown\" (click)=\"$event.stopPropagation()\">\r\n        <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country); $event.stopPropagation()\">\r\n          {{ country.name }}\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"input-currency-icon\" [ngClass]=\"{\r\n        'input-currency-icon--default': inputState === 'default',\r\n        'input-currency-icon--focused': inputState === 'focused',\r\n        'input-currency-icon--filled': inputState === 'filled',\r\n        'input-currency-icon--error': inputState === 'error',\r\n        'input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--currency{@apply pl-[3.5rem];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-currency-icon img{@apply w-5 h-5;}.input-currency-icon--default{@apply border-[#E3E3E7];}.input-currency-icon--focused{@apply border-[#6B7080];}.input-currency-icon--filled{@apply border-[#E3E3E7];}.input-currency-icon--error{@apply border-[#E7000B];}.input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--currency{@apply pl-9;}.input-container--sm .input-currency-icon{@apply w-8;}.input-container--sm .input-currency-icon img{@apply w-4 h-4;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
+                    ], template: "<div class=\"input-container\" [class.input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'input-field--url': type === 'url',\r\n          'input-field--phone': phone,\r\n          'input-field--currency': currency,\r\n          'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'input-field--password': password,\r\n          'input-field--default': inputState === 'default',\r\n          'input-field--focused': inputState === 'focused',\r\n          'input-field--filled': inputState === 'filled',\r\n          'input-field--error': inputState === 'error',\r\n          'input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"input-currency-icon\" [ngClass]=\"{\r\n        'input-currency-icon--default': inputState === 'default',\r\n        'input-currency-icon--focused': inputState === 'focused',\r\n        'input-currency-icon--filled': inputState === 'filled',\r\n        'input-currency-icon--error': inputState === 'error',\r\n        'input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--currency{@apply pl-[3.5rem];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-currency-icon img{@apply w-5 h-5;}.input-currency-icon--default{@apply border-[#E3E3E7];}.input-currency-icon--focused{@apply border-[#6B7080];}.input-currency-icon--filled{@apply border-[#E3E3E7];}.input-currency-icon--error{@apply border-[#E7000B];}.input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}.input-container ::-webkit-scrollbar{width:4px}.input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.input-container--sm .input-label{@apply text-xs;}.input-container--sm .input-hint,.input-container--sm .input-error{@apply text-[11px];}.input-container--sm .input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.input-container--sm .input-field--icon,.input-container--sm .input-field--icon-left{@apply pl-8;}.input-container--sm .input-field--icon-right,.input-container--sm .input-field--password{@apply pr-8;}.input-container--sm .input-field--phone,.input-container--sm .input-field--url{@apply pl-16;}.input-container--sm .input-field--currency{@apply pl-9;}.input-container--sm .input-currency-icon{@apply w-8;}.input-container--sm .input-currency-icon img{@apply w-4 h-4;}.input-container--sm .input-field--icon.input-field--url,.input-container--sm .input-field--phone.input-field--icon{@apply pl-24;}.input-container--sm .input-search-icon{@apply w-4 h-4;}.input-container--sm .input-search-icon--left{@apply left-2;}.input-container--sm .input-search-icon--right{@apply right-2;}.input-container--sm .input-password-toggle{@apply right-2 w-4 h-4;}.input-container--sm .input-password-icon{@apply w-4 h-4;}.input-container--sm .input-phone-selector{@apply px-2;}.input-container--sm .input-phone-selector-text{@apply text-[11px];}.input-container--sm .input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.input-container--sm .input-phone-dropdown{@apply w-[68px] mt-0.5;}.input-container--sm .input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.input-container--sm .input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -6649,18 +6845,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], minlength: [{
                 type: Input
-            }], dropdownRef: [{
-                type: ViewChild,
-                args: ['dropdownRef']
-            }], selectRef: [{
-                type: ViewChild,
-                args: ['selectRef']
             }], inputField: [{
                 type: ViewChild,
                 args: ['inputField']
             }], maskDirective: [{
                 type: ViewChild,
                 args: [NgxMaskDirective]
+            }], phoneOverlay: [{
+                type: ViewChild,
+                args: ['phoneOverlay']
             }], input: [{
                 type: Output
             }], change: [{
@@ -6671,9 +6864,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }], clicked: [{
                 type: Output
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }] } });
 
 class BkInputChips {
@@ -8613,7 +8803,12 @@ class BkHierarchicalSelect {
     /** Search placeholder. */
     searchPlaceholder = input('Search', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
     searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
-    /** When true, dropdown is positioned fixed and sized to the trigger (use inside modals/popups). */
+    /**
+     * @deprecated No-op, kept only so existing `[appendToBody]="true"` bindings don't break.
+     * The dropdown now always positions via Angular CDK Overlay, which portals into the shared
+     * `cdk-overlay-container` unconditionally — the exact clipping/stacking escape this input used
+     * to opt into by hand is now the only behaviour there is. Safe to remove from call sites.
+     */
     appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
     /** Open above or below the trigger (also used when appendToBody is true for fixed coordinates). */
     dropdownPosition = input('bottom', ...(ngDevMode ? [{ debugName: "dropdownPosition" }] : []));
@@ -8644,16 +8839,23 @@ class BkHierarchicalSelect {
     searchInput;
     controlWrapper;
     dropdownPanel;
+    optionsListContainer;
+    optionEls;
+    hierarchicalOverlay;
+    /** Index of the keyboard-highlighted option within the current level (`filteredItems`). */
+    markedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "markedIndex" }] : []));
     el = inject(ElementRef);
-    // Side the panel is actually rendered on. Starts from the requested
-    // `dropdownPosition` but is auto-flipped based on available viewport space.
+    // Side the panel actually rendered on, purely for the CSS `[data-position]` inset styling —
+    // driven by CDK's own (positionChange) rather than a hand-rolled space comparison (see
+    // onPositionChange). The fit/flip decision itself lives entirely in CDK now.
     placement = signal('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : []));
-    // When appendToBody is on we physically relocate the panel to <body> so it
-    // escapes any transformed/overflow ancestor (e.g. an animated dialog). These
-    // track its home so we can put it back before Angular removes it on close.
-    originalPanelParent = null;
-    originalPanelAnchor = null;
-    panelInBody = false;
+    /**
+     * Panel width, kept equal to the control's — matches the old `dropdownStyle().width`
+     * behaviour. Set on open and re-measured by a ResizeObserver on the control while open, so a
+     * responsive layout keeps the panel in sync.
+     */
+    dropdownWidth = signal(null, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
+    resizeObserver;
     constructor() {
         effect(() => {
             const list = this.items();
@@ -8667,101 +8869,188 @@ class BkHierarchicalSelect {
         });
     }
     ngAfterViewInit() {
-        // Keep the panel glued to the control while any ancestor scrolls or the
-        // window resizes. Capture phase (`true`) catches scrolling inside nested
-        // overflow containers (e.g. a modal body), not just the window.
-        window.addEventListener('scroll', this.reposition, true);
-        window.addEventListener('resize', this.reposition);
+        // Keep the panel width in sync with the control's while open (responsive layouts, manual
+        // width changes, container resizes, etc.) — matches the old dropdownStyle().width upkeep.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                if (this.isOpen())
+                    this.dropdownWidth.set(this.controlWrapper.nativeElement.offsetWidth);
+            });
+            if (this.controlWrapper?.nativeElement) {
+                this.resizeObserver.observe(this.controlWrapper.nativeElement);
+            }
+        }
     }
     ngOnDestroy() {
-        window.removeEventListener('scroll', this.reposition, true);
-        window.removeEventListener('resize', this.reposition);
-        // If we're torn down while open, don't leave the relocated panel orphaned in <body>.
-        if (this.panelInBody) {
-            this.dropdownPanel?.nativeElement.remove();
-            this.panelInBody = false;
-        }
-    }
-    // Re-evaluate placement as the page scrolls/resizes. For append-to-body this
-    // recomputes the fixed coordinates so the panel follows the control while it's
-    // visible, and closes once the control is fully scrolled out of view (viewport
-    // OR any scroll container such as a modal body). Inline just re-flips up/down.
-    reposition = () => {
-        if (!this.isOpen())
+        this.resizeObserver?.disconnect();
+        this.detachOverlayScrollTracking();
+    }
+    /**
+     * CDK's default `reposition` scroll strategy only reacts to real `document`/`window` scroll —
+     * it has no way to know an app shell might scroll a nested container instead (this one
+     * commonly does — dashboard layouts with a fixed header/sidebar and a scrollable content pane).
+     * A capture-phase listener on `document` still sees scroll events fired on any descendant
+     * scrollable element (scroll doesn't bubble, but capture does) — same trick `bk-custom-calendar`,
+     * `bk-input`'s phone dropdown, and `bk-select` already use. rAF-throttled so a fast scroll
+     * doesn't force layout on every tick.
+     */
+    overlayScrollRafId = null;
+    onOverlayScroll = () => {
+        if (this.overlayScrollRafId != null)
             return;
-        if (this.appendToBody()) {
-            const rect = this.controlWrapper?.nativeElement.getBoundingClientRect();
-            if (rect && this.isControlClipped(rect)) {
-                this.closeDropdown();
+        this.overlayScrollRafId = requestAnimationFrame(() => {
+            this.overlayScrollRafId = null;
+            this.hierarchicalOverlay?.overlayRef?.updatePosition();
+        });
+    };
+    attachOverlayScrollTracking() {
+        document.addEventListener('scroll', this.onOverlayScroll, true);
+        window.addEventListener('resize', this.onOverlayScroll);
+    }
+    detachOverlayScrollTracking() {
+        document.removeEventListener('scroll', this.onOverlayScroll, true);
+        window.removeEventListener('resize', this.onOverlayScroll);
+        if (this.overlayScrollRafId != null) {
+            cancelAnimationFrame(this.overlayScrollRafId);
+            this.overlayScrollRafId = null;
+        }
+    }
+    /** Derives `placement` (for the `[data-position]` inset CSS) from which of
+     *  `hierarchicalDropdownPositions` CDK actually applied — replaces the old hand-rolled space
+     *  comparison now that the fit/flip decision itself lives in CDK. */
+    onPositionChange(event) {
+        this.placement.set(event.connectionPair.originY === 'top' ? 'top' : 'bottom');
+    }
+    /** Runs after the panel has rendered: reset the level highlight + focus. Position/flip is
+     *  entirely CDK's job now (see hierarchicalDropdownPositions + onPositionChange). */
+    afterOpenInit() {
+        this.resetMarked();
+        // Scroll the highlighted option into view WHILE the panel is still hidden, so
+        // it's revealed already in place instead of appearing at the top and then
+        // visibly jumping to the selection. The panel is only `visibility: hidden`
+        // (not display:none), so it's laid out and offsets are already valid.
+        this.scrollMarkedIntoView();
+        this.panelReady.set(true);
+        // panelReady's `visibility: visible` only reaches the DOM on the next
+        // change-detection pass, and focusing a still-hidden subtree is a no-op, so
+        // defer the focus one frame — by which point the panel is actually visible.
+        requestAnimationFrame(() => {
+            if (!this.isOpen())
                 return;
+            // Focus the search field when present so typing works and Up/Down navigate
+            // from there; otherwise keep keyboard focus on the trigger so the arrow
+            // keys still reach onKeyDown.
+            if (this.searchable()) {
+                this.searchInput?.nativeElement?.focus({ preventScroll: true });
             }
-        }
-        this.applyPlacement();
-    };
+            else {
+                this.controlWrapper?.nativeElement?.focus({ preventScroll: true });
+            }
+        });
+    }
     /**
-     * True when the control is fully outside the visible area — either the
-     * viewport or a scrollable/clipping ancestor (e.g. a dialog's scroll body).
+     * Set the keyboard highlight for the level now on screen: the selected node if
+     * it's in this level, otherwise the first option. -1 when the level is empty,
+     * which keeps nothing highlighted.
      */
-    isControlClipped(rect) {
-        if (rect.bottom <= 0 || rect.top >= window.innerHeight ||
-            rect.right <= 0 || rect.left >= window.innerWidth) {
-            return true;
-        }
-        let el = this.controlWrapper?.nativeElement.parentElement;
-        while (el && el !== document.body) {
-            const style = getComputedStyle(el);
-            const clips = /(auto|scroll|hidden|clip|overlay)/;
-            if (clips.test(style.overflowY) || clips.test(style.overflowX)) {
-                const r = el.getBoundingClientRect();
-                if (rect.bottom <= r.top || rect.top >= r.bottom ||
-                    rect.right <= r.left || rect.left >= r.right) {
-                    return true;
-                }
-            }
-            el = el.parentElement;
+    resetMarked() {
+        const list = this.filteredItems();
+        if (!list.length) {
+            this.markedIndex.set(-1);
+            return;
         }
-        return false;
+        const selectedIdx = list.findIndex((node) => this.isSelected(node));
+        this.markedIndex.set(selectedIdx >= 0 ? selectedIdx : 0);
     }
     /**
-     * Relocate the panel node to <body> so it truly escapes any transformed or
-     * overflow-clipped ancestor (dialogs, drawers, overflow cards, etc.).
+     * Keyboard navigation. Up/Down move the highlight within the current level;
+     * Right (or Enter on a parent) drills into children; Left goes back a level;
+     * Enter on a leaf selects it; Escape/Tab close.
      */
-    movePanelToBody() {
-        const panel = this.dropdownPanel?.nativeElement;
-        if (!panel || this.panelInBody)
+    onKeyDown(event) {
+        if (!this.isOpen()) {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.openDropdown();
+            }
             return;
-        this.originalPanelParent = panel.parentNode;
-        this.originalPanelAnchor = panel.nextSibling;
-        document.body.appendChild(panel);
-        this.panelInBody = true;
+        }
+        const list = this.filteredItems();
+        const current = this.markedIndex();
+        const marked = current >= 0 ? list[current] : undefined;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (current < list.length - 1) {
+                    this.markedIndex.set(current + 1);
+                    this.scrollToMarked();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (current > 0) {
+                    this.markedIndex.set(current - 1);
+                    this.scrollToMarked();
+                }
+                break;
+            case 'ArrowRight':
+                // Drill into a parent's children without selecting it.
+                if (marked && this.hasChildren(marked) && !marked.disabled) {
+                    event.preventDefault();
+                    this.enterNode(marked);
+                }
+                break;
+            case 'ArrowLeft':
+                if (this.showBack()) {
+                    event.preventDefault();
+                    this.goBack();
+                }
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (marked)
+                    this.selectItem(marked);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.closeDropdown();
+                break;
+            case 'Tab':
+                this.closeDropdown();
+                break;
+        }
+    }
+    /** Sync the highlight to a hovered option so mouse and keyboard agree. */
+    markOption(index) {
+        this.markedIndex.set(index);
     }
-    /** Return the panel to its original DOM position before Angular removes it. */
-    restorePanel() {
-        const panel = this.dropdownPanel?.nativeElement;
-        if (!panel || !this.panelInBody)
+    /** Scroll the highlighted option into view within the options list (immediate). */
+    scrollMarkedIntoView() {
+        const container = this.optionsListContainer?.nativeElement;
+        const els = this.optionEls?.toArray();
+        const index = this.markedIndex();
+        if (!container || !els || !els[index])
             return;
-        if (this.originalPanelParent) {
-            this.originalPanelParent.insertBefore(panel, this.originalPanelAnchor);
+        const el = els[index].nativeElement;
+        if (el.offsetTop < container.scrollTop) {
+            container.scrollTop = el.offsetTop;
+        }
+        else if (el.offsetTop + el.clientHeight > container.scrollTop + container.clientHeight) {
+            container.scrollTop = el.offsetTop + el.clientHeight - container.clientHeight;
         }
-        this.panelInBody = false;
-        this.originalPanelParent = null;
-        this.originalPanelAnchor = null;
     }
-    /** Runs after the panel has rendered: relocate (append mode) + position + focus. */
-    afterOpenInit() {
-        if (this.appendToBody())
-            this.movePanelToBody();
-        this.applyPlacement();
-        this.panelReady.set(true);
-        this.searchInput?.nativeElement?.focus();
+    /** Defer a scroll to the marked option (after a keyboard move re-lays the row). */
+    scrollToMarked() {
+        setTimeout(() => this.scrollMarkedIntoView());
+    }
+    /** Navigate into a node's children and reset the highlight for the new level. */
+    enterNode(node) {
+        this.breadcrumb.update((stack) => [...stack, node]);
+        this.resetMarked();
     }
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     /** Hidden until its real height has been measured and final placement applied. */
     panelReady = signal(false, ...(ngDevMode ? [{ debugName: "panelReady" }] : []));
-    dropdownStyle = signal({
-        left: '0px',
-        width: 'auto',
-    }, ...(ngDevMode ? [{ debugName: "dropdownStyle" }] : []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
     /** Breadcrumb stack: each entry is the parent node we navigated into. */
     breadcrumb = signal([], ...(ngDevMode ? [{ debugName: "breadcrumb" }] : []));
@@ -8938,6 +9227,8 @@ class BkHierarchicalSelect {
         }
     }
     openDropdown() {
+        if (this.isOpen())
+            return;
         this.panelReady.set(false);
         if (this.restrictKey() != null) {
             const restrictKey = this.restrictKey();
@@ -8964,12 +9255,7 @@ class BkHierarchicalSelect {
             else {
                 this.breadcrumb.set([]);
             }
-            // Decide the initial side before the panel paints (estimated height;
-            // corrected after render in afterOpenInit).
-            this.applyPlacement();
-            this.isOpen.set(true);
-            this.searchTerm.set('');
-            setTimeout(() => this.afterOpenInit(), 0);
+            this.openPanel();
             return;
         }
         const sel = this.selected();
@@ -8980,73 +9266,31 @@ class BkHierarchicalSelect {
         else {
             this.breadcrumb.set([]);
         }
-        this.applyPlacement();
+        this.openPanel();
+    }
+    /** Shared tail of openDropdown(): keep the panel exactly as wide as the control (matches the
+     *  old dropdownStyle().width), start scroll tracking, and flip on. Position/flip itself is
+     *  entirely CDK's job — see hierarchicalDropdownPositions + onPositionChange. */
+    openPanel() {
+        this.dropdownWidth.set(this.controlWrapper.nativeElement.offsetWidth);
+        this.attachOverlayScrollTracking();
         this.isOpen.set(true);
         this.searchTerm.set('');
         setTimeout(() => this.afterOpenInit(), 0);
     }
     /**
-     * Decides which side the panel opens on (auto-flip) and, for append-to-body
-     * mode, computes the fixed coordinates. Re-run on open and on scroll/resize so
-     * the panel snaps to whichever side has room — honouring `dropdownPosition`
-     * when it fits. Inline mode is positioned by CSS via the `placement` signal.
+     * Preferred position list handed to CDK, in try-order — honours `dropdownPosition` first,
+     * falling back to the other side only when the preferred one genuinely doesn't fit. Replaces
+     * the old hand-rolled `applyPlacement()` space comparison entirely.
      */
-    applyPlacement() {
-        const el = this.controlWrapper?.nativeElement;
-        if (!el)
-            return;
-        const rect = el.getBoundingClientRect();
-        const gap = 4;
-        const panelHeight = this.dropdownPanel?.nativeElement.offsetHeight || 300;
-        const spaceBelow = window.innerHeight - rect.bottom - gap;
-        const spaceAbove = rect.top - gap;
-        const preferred = this.dropdownPosition();
-        let placeTop;
-        if (preferred === 'top') {
-            placeTop = spaceAbove >= panelHeight || spaceAbove > spaceBelow;
-        }
-        else {
-            placeTop = spaceBelow < panelHeight && spaceAbove > spaceBelow;
-        }
-        this.placement.set(placeTop ? 'top' : 'bottom');
-        // Inline mode uses CSS (data-position) — the placement signal is enough.
-        if (!this.appendToBody())
-            return;
-        if (placeTop) {
-            this.dropdownStyle.set({
-                top: undefined,
-                bottom: `${window.innerHeight - rect.top + gap}px`,
-                left: `${rect.left}px`,
-                width: `${rect.width}px`,
-            });
-        }
-        else {
-            this.dropdownStyle.set({
-                top: `${rect.bottom + gap}px`,
-                bottom: undefined,
-                left: `${rect.left}px`,
-                width: `${rect.width}px`,
-            });
-        }
-    }
-    /** Fixed positioning when appendToBody; inset placement uses CSS + .hierarchical-select-field. */
-    getTop() {
-        if (!this.appendToBody())
-            return null;
-        return this.dropdownStyle().top ?? null;
+    get hierarchicalDropdownPositions() {
+        const bottom = { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 };
+        const top = { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 };
+        return this.dropdownPosition() === 'top' ? [top, bottom] : [bottom, top];
     }
-    getBottom() {
-        if (!this.appendToBody())
-            return null;
-        return this.dropdownStyle().bottom ?? null;
-    }
-    // Scroll/resize are handled by the capture-phase listeners in ngAfterViewInit
-    // (see `reposition`): they keep the panel attached, re-flip it, and only close
-    // it once the control scrolls fully out of view.
     closeDropdown() {
         const wasOpen = this.isOpen();
-        // Put the panel back where Angular expects it before the @if removes it.
-        this.restorePanel();
+        this.detachOverlayScrollTracking();
         this.isOpen.set(false);
         this.panelReady.set(false);
         this.searchTerm.set('');
@@ -9060,19 +9304,24 @@ class BkHierarchicalSelect {
         if (stack.length === 0)
             return;
         this.breadcrumb.set(stack.slice(0, -1));
+        this.resetMarked();
     }
     onSearchInput(event) {
         const value = event.target.value;
         this.searchTerm.set(value);
+        this.resetMarked();
     }
     selectItem(node, event) {
         event?.stopPropagation();
+        // Don't let the row's mousedown blur the search input — keep focus on it so
+        // keyboard (Up/Down/Enter) navigation still works after a mouse click.
+        event?.preventDefault();
         if (node.disabled)
             return;
         // A parent row always navigates. When parents are selectable, that happens
         // through the row's checkbox instead (see `toggleParentSelection`).
         if (this.hasChildren(node)) {
-            this.breadcrumb.update((stack) => [...stack, node]);
+            this.enterNode(node);
             return;
         }
         this.selected.set(node);
@@ -9120,14 +9369,11 @@ class BkHierarchicalSelect {
         this.controlWrapper?.nativeElement?.focus();
         this.openDropdown();
     }
-    onClickOutside(e) {
-        const target = e.target;
-        // When appendToBody relocates the panel to <body>, it's no longer inside the
-        // host element — treat clicks within the panel as "inside" too.
-        if (this.el.nativeElement.contains(target))
-            return;
-        if (this.dropdownPanel?.nativeElement.contains(target))
-            return;
+    // Click-outside-to-close is now `(overlayOutsideClick)` in the template, driven by CDK's
+    // document-level outside-pointer-event dispatcher — it already excludes clicks on the
+    // cdkOverlayOrigin (the control) by design, so toggleDropdown() stays the sole opener. No
+    // backdrop involved, so it doesn't block page/nested-container scroll like a modal would.
+    onOverlayOutsideClick() {
         this.closeDropdown();
     }
     // --- ControlValueAccessor ---
@@ -9172,23 +9418,23 @@ class BkHierarchicalSelect {
         this.clear.emit(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkHierarchicalSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkHierarchicalSelect, isStandalone: true, selector: "bk-hierarchical-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, clearTooltip: { classPropertyName: "clearTooltip", publicName: "clearTooltip", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowParentSelection: { classPropertyName: "allowParentSelection", publicName: "allowParentSelection", isSignal: true, isRequired: false, transformFunction: null }, backToMainText: { classPropertyName: "backToMainText", publicName: "backToMainText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, inheritColor: { classPropertyName: "inheritColor", publicName: "inheritColor", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, restrictKey: { classPropertyName: "restrictKey", publicName: "restrictKey", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", clear: "clear" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkHierarchicalSelect, isStandalone: true, selector: "bk-hierarchical-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, clearTooltip: { classPropertyName: "clearTooltip", publicName: "clearTooltip", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowParentSelection: { classPropertyName: "allowParentSelection", publicName: "allowParentSelection", isSignal: true, isRequired: false, transformFunction: null }, backToMainText: { classPropertyName: "backToMainText", publicName: "backToMainText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, inheritColor: { classPropertyName: "inheritColor", publicName: "inheritColor", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, restrictKey: { classPropertyName: "restrictKey", publicName: "restrictKey", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", clear: "clear" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkHierarchicalSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], ngImport: i0, template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <!-- With showDots on, the control is tinted by the selected node's accent.\r\n         An errored control drops the tint entirely and goes neutral, so the red\r\n         border reads as an error rather than competing with the accent. -->\r\n    <div\r\n      #controlWrapper\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      [class.filled]=\"!hasError() && !!controlAppearance().backgroundColor\"\r\n      [style.backgroundColor]=\"hasError() ? null : controlAppearance().backgroundColor\"\r\n      [style.color]=\"hasError() ? null : controlAppearance().color\"\r\n      [style.borderColor]=\"hasError() ? null : controlAppearance().borderColor\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <!-- Single row: the container is flex-wrap and the label is w-full, so\r\n               a bare sibling dot would push the label onto a second line. -->\r\n          <div class=\"hierarchical-value-row\">\r\n          @if (showDots() && accentFor(selected()!)) {\r\n            <span class=\"hierarchical-dot\" [style.backgroundColor]=\"accentFor(selected()!)\"></span>\r\n          }\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"controlAppearance().color ?? resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\" [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                 stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"hierarchical-arrow\" [class.open]=\"isOpen()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m6 9 6 6 6-6\"/>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"hierarchical-dropdown-panel\"\r\n      [style.visibility]=\"panelReady() ? 'visible' : 'hidden'\"\r\n      [attr.data-position]=\"placement()\"\r\n      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"appendToBody() ? getTop() : null\"\r\n      [style.bottom]=\"appendToBody() ? getBottom() : null\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (click)=\"goBack(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            [class.disabled-item]=\"item.disabled\"\r\n            [class.cursor-not-allowed]=\"item.disabled\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <!-- Grouped so the row's justify-between still has exactly two\r\n                 children (body + trailing chevron/tick). -->\r\n            <div class=\"hierarchical-option-body\">\r\n              @if (allowParentSelection()) {\r\n                @if (hasChildren(item)) {\r\n                  <!-- Only nodes with children get a box \u2014 a leaf is already\r\n                       selected by clicking its row. It owns its own mousedown so\r\n                       the row still navigates; the box itself is inert\r\n                       (pointer-events-none) so it can't toggle twice. standalone\r\n                       keeps this ngModel out of any parent <form> the select is\r\n                       rendered inside. -->\r\n                  <span\r\n                    class=\"hierarchical-option-checkbox\"\r\n                    role=\"button\"\r\n                    [attr.aria-label]=\"'Select ' + getLabel(item)\"\r\n                    (mousedown)=\"toggleParentSelection(item, $event)\">\r\n                    <bk-checkbox\r\n                      class=\"pointer-events-none shrink-0 flex\"\r\n                      checkboxClass=\"sm\"\r\n                      [disabled]=\"!!item.disabled\"\r\n                      [ngModel]=\"isSelected(item)\"\r\n                      [ngModelOptions]=\"{ standalone: true }\"\r\n                    ></bk-checkbox>\r\n                  </span>\r\n                } @else {\r\n                  <!-- Holds the checkbox column open so leaf labels line up with\r\n                       the parents' above them. -->\r\n                  <span class=\"hierarchical-option-checkbox-spacer\" aria-hidden=\"true\"></span>\r\n                }\r\n              }\r\n              @if (showDots() && accentFor(item)) {\r\n                <span class=\"hierarchical-dot\" [style.backgroundColor]=\"accentFor(item)\"></span>\r\n              }\r\n              <span\r\n                #optLabel\r\n                class=\"hierarchical-option-label\"\r\n                [style.color]=\"optionTextColor(item)\"\r\n                [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            </div>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply cursor-not-allowed;background-color:#f4f4f6!important;border-color:#e3e3e7!important;color:#a1a3ae!important}.hierarchical-select-control.disabled .hierarchical-placeholder{@apply text-gray-400;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-row{@apply flex items-center gap-1.5 w-full min-w-0;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.hierarchical-option-body{@apply flex items-center gap-2 min-w-0 flex-1;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.hierarchical-dropdown-panel[data-position=bottom]{top:calc(100% + 4px);bottom:auto}.hierarchical-dropdown-panel[data-position=top]{bottom:calc(100% + 4px);top:auto}.hierarchical-dropdown-panel-fixed{z-index:10050}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option.disabled-item{@apply opacity-50 cursor-not-allowed;}.hierarchical-option.disabled-item:hover{@apply bg-transparent;}.hierarchical-option:hover{@apply bg-[#f9f9f9];}.hierarchical-option.selected{@apply bg-[#f7f7f7];}.hierarchical-option.selected.disabled-item{@apply bg-transparent;}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-checkbox{@apply flex-shrink-0 flex items-center cursor-pointer;}.hierarchical-option-checkbox-spacer{@apply flex-shrink-0 w-4;}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{border-color:#d11e14!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }] });
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "hierarchicalOverlay", first: true, predicate: ["hierarchicalOverlay"], descendants: true }, { propertyName: "optionEls", predicate: ["optionRef"], descendants: true }], ngImport: i0, template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <!-- With showDots on, the control is tinted by the selected node's accent.\r\n         An errored control drops the tint entirely and goes neutral, so the red\r\n         border reads as an error rather than competing with the accent. -->\r\n    <div\r\n      #controlWrapper\r\n      cdkOverlayOrigin\r\n      #hierarchicalOrigin=\"cdkOverlayOrigin\"\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      [class.filled]=\"!hasError() && !!controlAppearance().backgroundColor\"\r\n      [style.backgroundColor]=\"hasError() ? null : controlAppearance().backgroundColor\"\r\n      [style.color]=\"hasError() ? null : controlAppearance().color\"\r\n      [style.borderColor]=\"hasError() ? null : controlAppearance().borderColor\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <!-- Single row: the container is flex-wrap and the label is w-full, so\r\n               a bare sibling dot would push the label onto a second line. -->\r\n          <div class=\"hierarchical-value-row\">\r\n          @if (showDots() && accentFor(selected()!)) {\r\n            <span class=\"hierarchical-dot\" [style.backgroundColor]=\"accentFor(selected()!)\"></span>\r\n          }\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"controlAppearance().color ?? resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\" [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                 stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"hierarchical-arrow\" [class.open]=\"isOpen()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m6 9 6 6 6-6\"/>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <!--\r\n      CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n      an inline `position:absolute`/`fixed` div, so it escapes clipping inside dialogs/scroll\r\n      containers and stacks correctly above other CDK-overlay content, regardless of the old\r\n      appendToBody flag (see its @deprecated note). No backdrop \u2014 see onOverlayOutsideClick.\r\n    -->\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      #hierarchicalOverlay=\"cdkConnectedOverlay\"\r\n      [cdkConnectedOverlayOrigin]=\"hierarchicalOrigin\"\r\n      [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n      [cdkConnectedOverlayPositions]=\"hierarchicalDropdownPositions\"\r\n      [cdkConnectedOverlayWidth]=\"dropdownWidth() ?? ''\"\r\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n      (positionChange)=\"onPositionChange($event)\"\r\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n      (detach)=\"closeDropdown()\"\r\n    >\r\n    <div\r\n      #dropdownPanel\r\n      class=\"hierarchical-dropdown-panel\"\r\n      [style.visibility]=\"panelReady() ? 'visible' : 'hidden'\"\r\n      [attr.data-position]=\"placement()\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (keydown)=\"onKeyDown($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (mousedown)=\"goBack(); $event.preventDefault(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div #optionsListContainer class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            #optionRef\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            [class.marked]=\"$index === markedIndex()\"\r\n            [class.disabled-item]=\"item.disabled\"\r\n            [class.cursor-not-allowed]=\"item.disabled\"\r\n            (mouseenter)=\"markOption($index)\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <!-- Grouped so the row's justify-between still has exactly two\r\n                 children (body + trailing chevron/tick). -->\r\n            <div class=\"hierarchical-option-body\">\r\n              @if (allowParentSelection()) {\r\n                @if (hasChildren(item)) {\r\n                  <!-- Only nodes with children get a box \u2014 a leaf is already\r\n                       selected by clicking its row. It owns its own mousedown so\r\n                       the row still navigates; the box itself is inert\r\n                       (pointer-events-none) so it can't toggle twice. standalone\r\n                       keeps this ngModel out of any parent <form> the select is\r\n                       rendered inside. -->\r\n                  <span\r\n                    class=\"hierarchical-option-checkbox\"\r\n                    role=\"button\"\r\n                    [attr.aria-label]=\"'Select ' + getLabel(item)\"\r\n                    (mousedown)=\"toggleParentSelection(item, $event)\">\r\n                    <bk-checkbox\r\n                      class=\"pointer-events-none shrink-0 flex\"\r\n                      checkboxClass=\"sm\"\r\n                      [disabled]=\"!!item.disabled\"\r\n                      [ngModel]=\"isSelected(item)\"\r\n                      [ngModelOptions]=\"{ standalone: true }\"\r\n                    ></bk-checkbox>\r\n                  </span>\r\n                } @else {\r\n                  <!-- Holds the checkbox column open so leaf labels line up with\r\n                       the parents' above them. -->\r\n                  <span class=\"hierarchical-option-checkbox-spacer\" aria-hidden=\"true\"></span>\r\n                }\r\n              }\r\n              @if (showDots() && accentFor(item)) {\r\n                <span class=\"hierarchical-dot\" [style.backgroundColor]=\"accentFor(item)\"></span>\r\n              }\r\n              <span\r\n                #optLabel\r\n                class=\"hierarchical-option-label\"\r\n                [style.color]=\"optionTextColor(item)\"\r\n                [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            </div>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply cursor-not-allowed;background-color:#f4f4f6!important;border-color:#e3e3e7!important;color:#a1a3ae!important}.hierarchical-select-control.disabled .hierarchical-placeholder{@apply text-gray-400;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-row{@apply flex items-center gap-1.5 w-full min-w-0;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.hierarchical-option-body{@apply flex items-center gap-2 min-w-0 flex-1;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply static left-auto w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg overflow-hidden cursor-default p-2.5;}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option.disabled-item{@apply opacity-50 cursor-not-allowed;}.hierarchical-option.disabled-item:hover{@apply bg-transparent;}.hierarchical-option:hover,.hierarchical-option.marked{@apply bg-[#F1F1F3];}.hierarchical-option.marked.disabled-item{@apply bg-transparent;}.hierarchical-option.selected{@apply bg-[#F8F8F8];}.hierarchical-option.selected:hover,.hierarchical-option.selected.marked{@apply bg-[#F1F1F3];}.hierarchical-option.selected.disabled-item{@apply bg-transparent;}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-checkbox{@apply flex-shrink-0 flex items-center cursor-pointer;}.hierarchical-option-checkbox-spacer{@apply flex-shrink-0 w-4;}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{border-color:#d11e14!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkHierarchicalSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-hierarchical-select', standalone: true, imports: [CommonModule, FormsModule, BKTooltipDirective, BkCheckbox], providers: [
+            args: [{ selector: 'bk-hierarchical-select', standalone: true, imports: [CommonModule, FormsModule, BKTooltipDirective, BkCheckbox, OverlayModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BkHierarchicalSelect),
                             multi: true,
                         },
-                    ], template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <!-- With showDots on, the control is tinted by the selected node's accent.\r\n         An errored control drops the tint entirely and goes neutral, so the red\r\n         border reads as an error rather than competing with the accent. -->\r\n    <div\r\n      #controlWrapper\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      [class.filled]=\"!hasError() && !!controlAppearance().backgroundColor\"\r\n      [style.backgroundColor]=\"hasError() ? null : controlAppearance().backgroundColor\"\r\n      [style.color]=\"hasError() ? null : controlAppearance().color\"\r\n      [style.borderColor]=\"hasError() ? null : controlAppearance().borderColor\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <!-- Single row: the container is flex-wrap and the label is w-full, so\r\n               a bare sibling dot would push the label onto a second line. -->\r\n          <div class=\"hierarchical-value-row\">\r\n          @if (showDots() && accentFor(selected()!)) {\r\n            <span class=\"hierarchical-dot\" [style.backgroundColor]=\"accentFor(selected()!)\"></span>\r\n          }\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"controlAppearance().color ?? resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\" [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                 stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"hierarchical-arrow\" [class.open]=\"isOpen()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m6 9 6 6 6-6\"/>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"hierarchical-dropdown-panel\"\r\n      [style.visibility]=\"panelReady() ? 'visible' : 'hidden'\"\r\n      [attr.data-position]=\"placement()\"\r\n      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"appendToBody() ? getTop() : null\"\r\n      [style.bottom]=\"appendToBody() ? getBottom() : null\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (click)=\"goBack(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            [class.disabled-item]=\"item.disabled\"\r\n            [class.cursor-not-allowed]=\"item.disabled\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <!-- Grouped so the row's justify-between still has exactly two\r\n                 children (body + trailing chevron/tick). -->\r\n            <div class=\"hierarchical-option-body\">\r\n              @if (allowParentSelection()) {\r\n                @if (hasChildren(item)) {\r\n                  <!-- Only nodes with children get a box \u2014 a leaf is already\r\n                       selected by clicking its row. It owns its own mousedown so\r\n                       the row still navigates; the box itself is inert\r\n                       (pointer-events-none) so it can't toggle twice. standalone\r\n                       keeps this ngModel out of any parent <form> the select is\r\n                       rendered inside. -->\r\n                  <span\r\n                    class=\"hierarchical-option-checkbox\"\r\n                    role=\"button\"\r\n                    [attr.aria-label]=\"'Select ' + getLabel(item)\"\r\n                    (mousedown)=\"toggleParentSelection(item, $event)\">\r\n                    <bk-checkbox\r\n                      class=\"pointer-events-none shrink-0 flex\"\r\n                      checkboxClass=\"sm\"\r\n                      [disabled]=\"!!item.disabled\"\r\n                      [ngModel]=\"isSelected(item)\"\r\n                      [ngModelOptions]=\"{ standalone: true }\"\r\n                    ></bk-checkbox>\r\n                  </span>\r\n                } @else {\r\n                  <!-- Holds the checkbox column open so leaf labels line up with\r\n                       the parents' above them. -->\r\n                  <span class=\"hierarchical-option-checkbox-spacer\" aria-hidden=\"true\"></span>\r\n                }\r\n              }\r\n              @if (showDots() && accentFor(item)) {\r\n                <span class=\"hierarchical-dot\" [style.backgroundColor]=\"accentFor(item)\"></span>\r\n              }\r\n              <span\r\n                #optLabel\r\n                class=\"hierarchical-option-label\"\r\n                [style.color]=\"optionTextColor(item)\"\r\n                [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            </div>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply cursor-not-allowed;background-color:#f4f4f6!important;border-color:#e3e3e7!important;color:#a1a3ae!important}.hierarchical-select-control.disabled .hierarchical-placeholder{@apply text-gray-400;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-row{@apply flex items-center gap-1.5 w-full min-w-0;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.hierarchical-option-body{@apply flex items-center gap-2 min-w-0 flex-1;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.hierarchical-dropdown-panel[data-position=bottom]{top:calc(100% + 4px);bottom:auto}.hierarchical-dropdown-panel[data-position=top]{bottom:calc(100% + 4px);top:auto}.hierarchical-dropdown-panel-fixed{z-index:10050}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option.disabled-item{@apply opacity-50 cursor-not-allowed;}.hierarchical-option.disabled-item:hover{@apply bg-transparent;}.hierarchical-option:hover{@apply bg-[#f9f9f9];}.hierarchical-option.selected{@apply bg-[#f7f7f7];}.hierarchical-option.selected.disabled-item{@apply bg-transparent;}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-checkbox{@apply flex-shrink-0 flex items-center cursor-pointer;}.hierarchical-option-checkbox-spacer{@apply flex-shrink-0 w-4;}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{border-color:#d11e14!important}\n"] }]
+                    ], template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <!-- With showDots on, the control is tinted by the selected node's accent.\r\n         An errored control drops the tint entirely and goes neutral, so the red\r\n         border reads as an error rather than competing with the accent. -->\r\n    <div\r\n      #controlWrapper\r\n      cdkOverlayOrigin\r\n      #hierarchicalOrigin=\"cdkOverlayOrigin\"\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      [class.filled]=\"!hasError() && !!controlAppearance().backgroundColor\"\r\n      [style.backgroundColor]=\"hasError() ? null : controlAppearance().backgroundColor\"\r\n      [style.color]=\"hasError() ? null : controlAppearance().color\"\r\n      [style.borderColor]=\"hasError() ? null : controlAppearance().borderColor\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <!-- Single row: the container is flex-wrap and the label is w-full, so\r\n               a bare sibling dot would push the label onto a second line. -->\r\n          <div class=\"hierarchical-value-row\">\r\n          @if (showDots() && accentFor(selected()!)) {\r\n            <span class=\"hierarchical-dot\" [style.backgroundColor]=\"accentFor(selected()!)\"></span>\r\n          }\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"controlAppearance().color ?? resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\" [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                 stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"hierarchical-arrow\" [class.open]=\"isOpen()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m6 9 6 6 6-6\"/>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <!--\r\n      CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n      an inline `position:absolute`/`fixed` div, so it escapes clipping inside dialogs/scroll\r\n      containers and stacks correctly above other CDK-overlay content, regardless of the old\r\n      appendToBody flag (see its @deprecated note). No backdrop \u2014 see onOverlayOutsideClick.\r\n    -->\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      #hierarchicalOverlay=\"cdkConnectedOverlay\"\r\n      [cdkConnectedOverlayOrigin]=\"hierarchicalOrigin\"\r\n      [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n      [cdkConnectedOverlayPositions]=\"hierarchicalDropdownPositions\"\r\n      [cdkConnectedOverlayWidth]=\"dropdownWidth() ?? ''\"\r\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n      (positionChange)=\"onPositionChange($event)\"\r\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n      (detach)=\"closeDropdown()\"\r\n    >\r\n    <div\r\n      #dropdownPanel\r\n      class=\"hierarchical-dropdown-panel\"\r\n      [style.visibility]=\"panelReady() ? 'visible' : 'hidden'\"\r\n      [attr.data-position]=\"placement()\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (keydown)=\"onKeyDown($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (mousedown)=\"goBack(); $event.preventDefault(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div #optionsListContainer class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            #optionRef\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            [class.marked]=\"$index === markedIndex()\"\r\n            [class.disabled-item]=\"item.disabled\"\r\n            [class.cursor-not-allowed]=\"item.disabled\"\r\n            (mouseenter)=\"markOption($index)\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <!-- Grouped so the row's justify-between still has exactly two\r\n                 children (body + trailing chevron/tick). -->\r\n            <div class=\"hierarchical-option-body\">\r\n              @if (allowParentSelection()) {\r\n                @if (hasChildren(item)) {\r\n                  <!-- Only nodes with children get a box \u2014 a leaf is already\r\n                       selected by clicking its row. It owns its own mousedown so\r\n                       the row still navigates; the box itself is inert\r\n                       (pointer-events-none) so it can't toggle twice. standalone\r\n                       keeps this ngModel out of any parent <form> the select is\r\n                       rendered inside. -->\r\n                  <span\r\n                    class=\"hierarchical-option-checkbox\"\r\n                    role=\"button\"\r\n                    [attr.aria-label]=\"'Select ' + getLabel(item)\"\r\n                    (mousedown)=\"toggleParentSelection(item, $event)\">\r\n                    <bk-checkbox\r\n                      class=\"pointer-events-none shrink-0 flex\"\r\n                      checkboxClass=\"sm\"\r\n                      [disabled]=\"!!item.disabled\"\r\n                      [ngModel]=\"isSelected(item)\"\r\n                      [ngModelOptions]=\"{ standalone: true }\"\r\n                    ></bk-checkbox>\r\n                  </span>\r\n                } @else {\r\n                  <!-- Holds the checkbox column open so leaf labels line up with\r\n                       the parents' above them. -->\r\n                  <span class=\"hierarchical-option-checkbox-spacer\" aria-hidden=\"true\"></span>\r\n                }\r\n              }\r\n              @if (showDots() && accentFor(item)) {\r\n                <span class=\"hierarchical-dot\" [style.backgroundColor]=\"accentFor(item)\"></span>\r\n              }\r\n              <span\r\n                #optLabel\r\n                class=\"hierarchical-option-label\"\r\n                [style.color]=\"optionTextColor(item)\"\r\n                [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            </div>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply cursor-not-allowed;background-color:#f4f4f6!important;border-color:#e3e3e7!important;color:#a1a3ae!important}.hierarchical-select-control.disabled .hierarchical-placeholder{@apply text-gray-400;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-row{@apply flex items-center gap-1.5 w-full min-w-0;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.hierarchical-option-body{@apply flex items-center gap-2 min-w-0 flex-1;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply static left-auto w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg overflow-hidden cursor-default p-2.5;}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option.disabled-item{@apply opacity-50 cursor-not-allowed;}.hierarchical-option.disabled-item:hover{@apply bg-transparent;}.hierarchical-option:hover,.hierarchical-option.marked{@apply bg-[#F1F1F3];}.hierarchical-option.marked.disabled-item{@apply bg-transparent;}.hierarchical-option.selected{@apply bg-[#F8F8F8];}.hierarchical-option.selected:hover,.hierarchical-option.selected.marked{@apply bg-[#F1F1F3];}.hierarchical-option.selected.disabled-item{@apply bg-transparent;}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-checkbox{@apply flex-shrink-0 flex items-center cursor-pointer;}.hierarchical-option-checkbox-spacer{@apply flex-shrink-0 w-4;}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{border-color:#d11e14!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], clearTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTooltip", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], iconAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlt", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowParentSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowParentSelection", required: false }] }], backToMainText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backToMainText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], inheritColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritColor", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], restrictKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "restrictKey", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], clear: [{ type: i0.Output, args: ["clear"] }], searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
@@ -9198,9 +9444,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], dropdownPanel: [{
                 type: ViewChild,
                 args: ['dropdownPanel']
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
+            }], optionsListContainer: [{
+                type: ViewChild,
+                args: ['optionsListContainer']
+            }], optionEls: [{
+                type: ViewChildren,
+                args: ['optionRef']
+            }], hierarchicalOverlay: [{
+                type: ViewChild,
+                args: ['hierarchicalOverlay']
             }] } });
 
 // ─── Service ─────────────────────────────────────────────────────────────────
@@ -10000,7 +10252,7 @@ class BkPagination {
         return this.getPageCount();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPagination, isStandalone: true, selector: "bk-pagination", inputs: { pageSize: "pageSize", total: "total", activePage: "activePage", showPageSize: "showPageSize", showRecordsText: "showRecordsText", showPageCount: "showPageCount", customClass: "customClass" }, outputs: { changePageSize: "changePageSize", pageChanged: "pageChanged", activePageChange: "activePageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1 {{ customClass }}\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n    @if (!pageSizeHidden) {\r\n    <div class=\"flex gap-3 items-center pagination\">\r\n      @if (showPageSizeLabel) {\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n      }\r\n      @if (showPageSizeInput) {\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          [variation]=\"'sm'\"\r\n          [isResponsive]=\"false\"\r\n          class=\"!min-w-[90px] lg:!min-w-[131px]\"\r\n          >\r\n        </bk-select>\r\n      }\r\n    </div>\r\n    }\r\n\r\n    <!-- showing entries -->\r\n    @if (showRecordsText) {\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n    }\r\n\r\n    <!-- Pagination main -->\r\n    <!-- With 2+ top-level blocks visible, the parent row's justify-between already\r\n         pins this to the end on its own; customClass on the row (e.g. \"justify-end\")\r\n         controls arrangement among those blocks.\r\n         Hidden down to just this one, there's nothing left for the row to distribute\r\n         against, so it grows to fill the row (flex-1) instead \u2014 letting customClass\r\n         act here on its own two children (page count text vs. the page-number list)\r\n         via e.g. \"justify-between\" or \"justify-around\". -->\r\n    <nav\r\n      class=\"flex gap-1.5 items-center {{ customClass }}\"\r\n      [class.flex-1]=\"pageSizeHidden && !showRecordsText\"\r\n    >\r\n\r\n      @if (showPageCount) {\r\n      <!-- Page count -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n      }\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate()\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkSelect, selector: "bk-select", inputs: ["items", "bindLabel", "bindValue", "bindIcon", "isResponsive", "placeholder", "notFoundText", "loadingText", "clearAllText", "groupBy", "colorKey", "dropdownView", "gridColumns", "gridVariation", "gridSelectionActions", "gridMinWidth", "gridMaxHeight", "gridSelectedLabelKeys", "gridSelectedLabelSeparator", "gridApplyText", "gridClearText", "showDots", "showAvatar", "avatarKey", "iconAlt", "label", "required", "variation", "iconSrc", "multiple", "maxLabels", "searchable", "allSelect", "clearable", "readonly", "disabled", "loading", "closeOnSelect", "dropdownPosition", "hasError", "errorMessage", "appendToBody", "compareWith"], outputs: ["disabledChange", "open", "close", "focus", "blur", "search", "clear", "change", "scrollToEnd"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPagination, isStandalone: true, selector: "bk-pagination", inputs: { pageSize: "pageSize", total: "total", activePage: "activePage", showPageSize: "showPageSize", showRecordsText: "showRecordsText", showPageCount: "showPageCount", customClass: "customClass" }, outputs: { changePageSize: "changePageSize", pageChanged: "pageChanged", activePageChange: "activePageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1 {{ customClass }}\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n    @if (!pageSizeHidden) {\r\n    <div class=\"flex gap-3 items-center pagination\">\r\n      @if (showPageSizeLabel) {\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n      }\r\n      @if (showPageSizeInput) {\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          [variation]=\"'sm'\"\r\n          [isResponsive]=\"false\"\r\n          class=\"!min-w-[90px] lg:!min-w-[131px]\"\r\n          >\r\n        </bk-select>\r\n      }\r\n    </div>\r\n    }\r\n\r\n    <!-- showing entries -->\r\n    @if (showRecordsText) {\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n    }\r\n\r\n    <!-- Pagination main -->\r\n    <!-- With 2+ top-level blocks visible, the parent row's justify-between already\r\n         pins this to the end on its own; customClass on the row (e.g. \"justify-end\")\r\n         controls arrangement among those blocks.\r\n         Hidden down to just this one, there's nothing left for the row to distribute\r\n         against, so it grows to fill the row (flex-1) instead \u2014 letting customClass\r\n         act here on its own two children (page count text vs. the page-number list)\r\n         via e.g. \"justify-between\" or \"justify-around\". -->\r\n    <nav\r\n      class=\"flex gap-1.5 items-center {{ customClass }}\"\r\n      [class.flex-1]=\"pageSizeHidden && !showRecordsText\"\r\n    >\r\n\r\n      @if (showPageCount) {\r\n      <!-- Page count -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n      }\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate()\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkSelect, selector: "bk-select", inputs: ["items", "bindLabel", "bindValue", "bindIcon", "isResponsive", "placeholder", "notFoundText", "loadingText", "clearAllText", "groupBy", "colorKey", "dropdownView", "gridColumns", "gridVariation", "gridSelectionActions", "gridMinWidth", "gridMaxHeight", "gridSelectedLabelKeys", "gridSelectedLabelSeparator", "gridApplyText", "gridClearText", "showDots", "showAvatar", "avatarKey", "iconAlt", "label", "required", "variation", "iconSrc", "multiple", "maxLabels", "searchable", "allSelect", "clearable", "readonly", "disabled", "loading", "closeOnSelect", "openOnFocus", "dropdownPosition", "hasError", "errorMessage", "appendToBody", "compareWith"], outputs: ["disabledChange", "open", "close", "focus", "blur", "search", "clear", "change", "scrollToEnd"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPagination, decorators: [{
             type: Component,
@@ -10284,6 +10536,8 @@ class BkMenu {
      * already sets it apart from the page.
      */
     submenuBackground = false;
+    /** Emit parent clicks as selections as well as toggling their inline submenu. */
+    emitParentClick = false;
     /** Id of the currently selected leaf item. Two-way bindable. */
     activeItemId = '';
     /** Tint item icons: dark by default, white on the active (dark) row. */
@@ -10482,6 +10736,11 @@ class BkMenu {
         if (this.hasChildren(item)) {
             if (!this.isPopup) {
                 this.toggle(item, siblings);
+                if (this.emitParentClick) {
+                    this.activeItemId = item.id;
+                    this.activeItemIdChange.emit(item.id);
+                    this.itemClick.emit(item);
+                }
                 return;
             }
             if (this.trigger !== 'click')
@@ -10505,13 +10764,10 @@ class BkMenu {
     }
     // Pop-up mode: open a parent's fly-out on hover (and close its siblings).
     onItemEnter(item, siblings, event, level, parent) {
-        if (!this.isPopup || item.disabled || !this.hasChildren(item))
-            return;
-        // Click mode still follows the pointer once a panel at this level is open,
-        // the way a native menubar does — hovering a sibling switches without a
-        // second click. With nothing open, hover does nothing.
-        if (this.trigger === 'click'
-            && !siblings.some(sibling => sibling.id !== item.id && this.isOpen(sibling)))
+        // Hover only opens/switches fly-outs in hover mode. In click mode every
+        // open and switch must come from a real click, so hover does nothing —
+        // even while a sibling's panel is already open.
+        if (!this.isHoverTrigger || item.disabled || !this.hasChildren(item))
             return;
         // Re-entering after crossing the gap: keep what's already up rather than
         // tearing it down and re-placing it.
@@ -10664,7 +10920,7 @@ class BkMenu {
             this.closeAll();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkMenu, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkMenu, isStandalone: true, selector: "bk-menu", inputs: { items: "items", orientation: "orientation", submenuMode: "submenuMode", trigger: "trigger", size: "size", hoverCloseDelay: "hoverCloseDelay", singleOpen: "singleOpen", submenuBackground: "submenuBackground", activeItemId: "activeItemId", tintIcons: "tintIcons", maxHeight: "maxHeight" }, outputs: { activeItemIdChange: "activeItemIdChange", itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" } }, usesOnChanges: true, ngImport: i0, template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--compact]=\"isCompact\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul\r\n    class=\"bk-menu__list\"\r\n    [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n    [style.maxHeight]=\"maxHeightStyle\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0, parent: null }\">\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level,\r\n     level = depth, parent = the item they hang off (null at the top). -->\r\n<ng-template #itemTpl let-items let-level=\"level\" let-parent=\"parent\">\r\n  @for (item of items; track item.id; let i = $index) {\r\n    @if (isGroupStart(items, i)) {\r\n      <li\r\n        class=\"bk-menu__group-title bk-menu__group-title--section\"\r\n        [class.bk-menu__group-title--divider]=\"i > 0\"\r\n        [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n        role=\"presentation\">\r\n        {{ item.groupLabel }}\r\n      </li>\r\n    }\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items, $event, level, parent)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event, level, parent)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\" (mouseenter)=\"onLabelEnter($event)\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"chevronDir(item, level) === 'right'\"\r\n            [class.bk-menu__chevron--left]=\"chevronDir(item, level) === 'left'\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--bg]=\"submenuBackground && !isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--placing]=\"isPlacing(item)\"\r\n          [class.bk-menu__submenu--side-right]=\"submenuSide(item) === 'right'\"\r\n          [class.bk-menu__submenu--side-left]=\"submenuSide(item) === 'left'\"\r\n          [class.bk-menu__submenu--side-down]=\"submenuSide(item) === 'down'\"\r\n          [class.bk-menu__submenu--side-up]=\"submenuSide(item) === 'up'\"\r\n          [style.top.px]=\"popupTop(item)\"\r\n          [style.left.px]=\"popupLeft(item)\"\r\n          [style.maxWidth]=\"popupMaxWidth(item)\"\r\n          [style.maxHeight]=\"popupMaxHeight(item)\"\r\n          role=\"menu\"\r\n          [attr.aria-label]=\"item.childrenLabel || item.label\">\r\n          @if (item.childrenLabel) {\r\n            <li\r\n              class=\"bk-menu__group-title\"\r\n              [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n              (mouseenter)=\"onLabelEnter($event)\"\r\n              role=\"presentation\">\r\n              {{ item.childrenLabel }}\r\n            </li>\r\n          }\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl;\r\n              context: { $implicit: item.children, level: level + 1, parent: item }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-submenu-bg: #f8f8f8;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;--menu-font-size: 14px;--menu-tracking: -.28px;--menu-pad-y: 10px;--menu-submenu-pad-y: 8px;--menu-pad-x: 12px;--menu-gap: 8px;--menu-icon-size: 16px;--menu-chevron-size: 16px;--menu-group-font-size: 11px;--menu-title-outdent: 8px;--menu-popup-pad: 4px;--menu-popup-pad-y: 8px;--menu-popup-item-pad-x: 16px;--menu-popup-min-w: 200px;--menu-popup-max-w: 280px;@apply block w-full max-w-full font-medium bg-[var(--menu-bg)] text-[color:var(--menu-text)] border border-[var(--menu-border)] rounded-[var(--menu-radius)] overflow-hidden;font-size:var(--menu-font-size);letter-spacing:var(--menu-tracking)}.bk-menu--compact{--menu-radius: 6px;--menu-font-size: 12px;--menu-tracking: -.24px;--menu-pad-y: 6px;--menu-submenu-pad-y: 4px;--menu-pad-x: 8px;--menu-gap: 6px;--menu-icon-size: 14px;--menu-chevron-size: 14px;--menu-group-font-size: 10px;--menu-title-outdent: 6px;--menu-popup-pad: 3px;--menu-popup-pad-y: 6px;--menu-popup-item-pad-x: 14px;--menu-popup-min-w: 160px;--menu-popup-max-w: 240px}.bk-menu__list,.bk-menu__submenu{@apply list-none m-0 p-0;}.bk-menu__list--scroll{@apply overflow-auto;}.bk-menu--horizontal>.bk-menu__list{@apply flex flex-row items-stretch overflow-x-auto;}.bk-menu__item{@apply relative;}.bk-menu__button{@apply flex items-center w-full m-0 border-0 bg-transparent text-inherit text-left cursor-pointer whitespace-nowrap transition-colors duration-100;font:inherit;letter-spacing:inherit;gap:var(--menu-gap);padding:var(--menu-pad-y) var(--menu-pad-x)}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{@apply w-auto;}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-t-[var(--menu-radius)];}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-b-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-l-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-r-[var(--menu-radius)];}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){@apply bg-[var(--menu-hover-bg)] text-[color:var(--menu-hover-text)];}.bk-menu__button--active{@apply bg-[var(--menu-active-bg)] text-[color:var(--menu-active-text)];}.bk-menu__button--disabled,.bk-menu__button:disabled{@apply opacity-[var(--menu-disabled)] cursor-not-allowed;}.bk-menu__submenu .bk-menu__button{@apply text-[color:var(--menu-subtext)] font-normal;padding-top:var(--menu-submenu-pad-y);padding-bottom:var(--menu-submenu-pad-y)}.bk-menu__submenu--popup .bk-menu__button{padding-left:var(--menu-popup-item-pad-x);padding-right:var(--menu-popup-item-pad-x)}.bk-menu__submenu .bk-menu__button--active{@apply text-[color:var(--menu-active-text)];}.bk-menu__group-title{@apply font-semibold uppercase tracking-wider text-[color:var(--menu-subtext)] whitespace-nowrap overflow-hidden text-ellipsis select-none;font-size:var(--menu-group-font-size);padding:var(--menu-pad-y) var(--menu-pad-x) calc(var(--menu-pad-y) / 2);padding-left:calc(var(--menu-pad-x) - var(--menu-title-outdent))}.bk-menu__submenu--popup>.bk-menu__group-title{margin-left:calc(var(--menu-popup-pad) * -1);margin-right:calc(var(--menu-popup-pad) * -1);padding-left:calc(var(--menu-popup-item-pad-x) - var(--menu-title-outdent) + var(--menu-popup-pad) + 2px);padding-right:calc(var(--menu-popup-item-pad-x) + var(--menu-popup-pad) + 2px)}.bk-menu__group-title--section{@apply mb-0 tracking-wide;padding-top:calc(var(--menu-pad-y) * 1.25)}.bk-menu__group-title--divider{@apply border-t border-[var(--menu-border)];margin-top:calc(var(--menu-pad-y) / 2)}.bk-menu__icon{@apply shrink-0 object-contain;width:var(--menu-icon-size);height:var(--menu-icon-size)}.bk-menu--tint .bk-menu__icon{@apply [filter:brightness(0)_saturate(0)];}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{@apply [filter:brightness(0)_invert(1)];}.bk-menu__label{@apply flex-auto min-w-0 overflow-hidden text-ellipsis;}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{@apply flex-none overflow-visible;}.bk-menu__chevron{@apply shrink-0 opacity-80 transition-transform duration-[.18s];width:var(--menu-chevron-size);height:var(--menu-chevron-size)}.bk-menu__chevron--open{@apply rotate-180;}.bk-menu__chevron--right{@apply -rotate-90;}.bk-menu__chevron--left{@apply rotate-90;}.bk-menu__submenu--inline{@apply overflow-hidden max-h-0 transition-[max-height] duration-200;}.bk-menu__submenu--inline.bk-menu__submenu--open{@apply max-h-[1000px];}.bk-menu__submenu--inline.bk-menu__submenu--bg{background-color:var(--menu-submenu-bg)}.bk-menu__submenu--popup{@apply fixed z-[1000] max-h-[100vh-16px] overflow-y-auto overflow-x-hidden bg-[var(--menu-bg)] border border-[var(--menu-border)] rounded-xl shadow-[var(--menu-shadow)] hidden;padding:var(--menu-popup-pad-y) var(--menu-popup-pad);min-width:var(--menu-popup-min-w);max-width:var(--menu-popup-max-w)}.bk-menu__submenu--popup.bk-menu__submenu--open{@apply block;}.bk-menu__submenu--placing{@apply opacity-0 pointer-events-none;}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{@apply overflow-x-auto;-webkit-overflow-scrolling:touch}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkMenu, isStandalone: true, selector: "bk-menu", inputs: { items: "items", orientation: "orientation", submenuMode: "submenuMode", trigger: "trigger", size: "size", hoverCloseDelay: "hoverCloseDelay", singleOpen: "singleOpen", submenuBackground: "submenuBackground", emitParentClick: "emitParentClick", activeItemId: "activeItemId", tintIcons: "tintIcons", maxHeight: "maxHeight" }, outputs: { activeItemIdChange: "activeItemIdChange", itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" } }, usesOnChanges: true, ngImport: i0, template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--compact]=\"isCompact\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul\r\n    class=\"bk-menu__list\"\r\n    [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n    [style.maxHeight]=\"maxHeightStyle\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0, parent: null }\">\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level,\r\n     level = depth, parent = the item they hang off (null at the top). -->\r\n<ng-template #itemTpl let-items let-level=\"level\" let-parent=\"parent\">\r\n  @for (item of items; track item.id; let i = $index) {\r\n    @if (isGroupStart(items, i)) {\r\n      <li\r\n        class=\"bk-menu__group-title bk-menu__group-title--section\"\r\n        [class.bk-menu__group-title--divider]=\"i > 0\"\r\n        [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n        role=\"presentation\">\r\n        {{ item.groupLabel }}\r\n      </li>\r\n    }\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items, $event, level, parent)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event, level, parent)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\" (mouseenter)=\"onLabelEnter($event)\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"chevronDir(item, level) === 'right'\"\r\n            [class.bk-menu__chevron--left]=\"chevronDir(item, level) === 'left'\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--bg]=\"submenuBackground && !isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--placing]=\"isPlacing(item)\"\r\n          [class.bk-menu__submenu--side-right]=\"submenuSide(item) === 'right'\"\r\n          [class.bk-menu__submenu--side-left]=\"submenuSide(item) === 'left'\"\r\n          [class.bk-menu__submenu--side-down]=\"submenuSide(item) === 'down'\"\r\n          [class.bk-menu__submenu--side-up]=\"submenuSide(item) === 'up'\"\r\n          [style.top.px]=\"popupTop(item)\"\r\n          [style.left.px]=\"popupLeft(item)\"\r\n          [style.maxWidth]=\"popupMaxWidth(item)\"\r\n          [style.maxHeight]=\"popupMaxHeight(item)\"\r\n          role=\"menu\"\r\n          [attr.aria-label]=\"item.childrenLabel || item.label\">\r\n          @if (item.childrenLabel) {\r\n            <li\r\n              class=\"bk-menu__group-title\"\r\n              [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n              (mouseenter)=\"onLabelEnter($event)\"\r\n              role=\"presentation\">\r\n              {{ item.childrenLabel }}\r\n            </li>\r\n          }\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl;\r\n              context: { $implicit: item.children, level: level + 1, parent: item }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-submenu-bg: #f8f8f8;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;--menu-font-size: 14px;--menu-tracking: -.28px;--menu-pad-y: 10px;--menu-submenu-pad-y: 8px;--menu-pad-x: 12px;--menu-gap: 8px;--menu-icon-size: 16px;--menu-chevron-size: 16px;--menu-group-font-size: 11px;--menu-title-outdent: 8px;--menu-popup-pad: 4px;--menu-popup-pad-y: 8px;--menu-popup-item-pad-x: 16px;--menu-popup-min-w: 200px;--menu-popup-max-w: 280px;@apply block w-full max-w-full font-medium bg-[var(--menu-bg)] text-[color:var(--menu-text)] border border-[var(--menu-border)] rounded-[var(--menu-radius)] overflow-hidden;font-size:var(--menu-font-size);letter-spacing:var(--menu-tracking)}.bk-menu--compact{--menu-radius: 6px;--menu-font-size: 12px;--menu-tracking: -.24px;--menu-pad-y: 6px;--menu-submenu-pad-y: 4px;--menu-pad-x: 8px;--menu-gap: 6px;--menu-icon-size: 14px;--menu-chevron-size: 14px;--menu-group-font-size: 10px;--menu-title-outdent: 6px;--menu-popup-pad: 3px;--menu-popup-pad-y: 6px;--menu-popup-item-pad-x: 14px;--menu-popup-min-w: 160px;--menu-popup-max-w: 240px}.bk-menu__list,.bk-menu__submenu{@apply list-none m-0 p-0;}.bk-menu__list--scroll{@apply overflow-auto;}.bk-menu--horizontal>.bk-menu__list{@apply flex flex-row items-stretch overflow-x-auto;}.bk-menu__item{@apply relative;}.bk-menu__button{@apply flex items-center w-full m-0 border-0 bg-transparent text-inherit text-left cursor-pointer whitespace-nowrap transition-colors duration-100;font:inherit;letter-spacing:inherit;gap:var(--menu-gap);padding:var(--menu-pad-y) var(--menu-pad-x)}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{@apply w-auto;}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-t-[var(--menu-radius)];}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-b-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-l-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-r-[var(--menu-radius)];}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){@apply bg-[var(--menu-hover-bg)] text-[color:var(--menu-hover-text)];}.bk-menu__button--active{@apply bg-[var(--menu-active-bg)] text-[color:var(--menu-active-text)];}.bk-menu__button--disabled,.bk-menu__button:disabled{@apply opacity-[var(--menu-disabled)] cursor-not-allowed;}.bk-menu__submenu .bk-menu__button{@apply text-[color:var(--menu-subtext)] font-normal;padding-top:var(--menu-submenu-pad-y);padding-bottom:var(--menu-submenu-pad-y)}.bk-menu__submenu--popup .bk-menu__button{padding-left:var(--menu-popup-item-pad-x);padding-right:var(--menu-popup-item-pad-x)}.bk-menu__submenu .bk-menu__button--active{@apply text-[color:var(--menu-active-text)];}.bk-menu__group-title{@apply font-semibold uppercase tracking-wider text-[color:var(--menu-subtext)] whitespace-nowrap overflow-hidden text-ellipsis select-none;font-size:var(--menu-group-font-size);padding:var(--menu-pad-y) var(--menu-pad-x) calc(var(--menu-pad-y) / 2);padding-left:calc(var(--menu-pad-x) - var(--menu-title-outdent))}.bk-menu__submenu--popup>.bk-menu__group-title{margin-left:calc(var(--menu-popup-pad) * -1);margin-right:calc(var(--menu-popup-pad) * -1);padding-left:calc(var(--menu-popup-item-pad-x) - var(--menu-title-outdent) + var(--menu-popup-pad) + 2px);padding-right:calc(var(--menu-popup-item-pad-x) + var(--menu-popup-pad) + 2px)}.bk-menu__group-title--section{@apply mb-0 tracking-wide;padding-top:calc(var(--menu-pad-y) * 1.25)}.bk-menu__group-title--divider{@apply border-t border-[var(--menu-border)];margin-top:calc(var(--menu-pad-y) / 2)}.bk-menu__icon{@apply shrink-0 object-contain;width:var(--menu-icon-size);height:var(--menu-icon-size)}.bk-menu--tint .bk-menu__icon{@apply [filter:brightness(0)_saturate(0)];}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{@apply [filter:brightness(0)_invert(1)];}.bk-menu__label{@apply flex-auto min-w-0 overflow-hidden text-ellipsis;}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{@apply flex-none overflow-visible;}.bk-menu__chevron{@apply shrink-0 opacity-80 transition-transform duration-[.18s];width:var(--menu-chevron-size);height:var(--menu-chevron-size)}.bk-menu__chevron--open{@apply rotate-180;}.bk-menu__chevron--right{@apply -rotate-90;}.bk-menu__chevron--left{@apply rotate-90;}.bk-menu__submenu--inline{@apply overflow-hidden max-h-0 transition-[max-height] duration-200;}.bk-menu__submenu--inline.bk-menu__submenu--open{@apply max-h-[1000px];}.bk-menu__submenu--inline.bk-menu__submenu--bg{background-color:var(--menu-submenu-bg)}.bk-menu__submenu--popup{@apply fixed z-[1000] max-h-[100vh-16px] overflow-y-auto overflow-x-hidden bg-[var(--menu-bg)] border border-[var(--menu-border)] rounded-xl shadow-[var(--menu-shadow)] hidden;padding:var(--menu-popup-pad-y) var(--menu-popup-pad);min-width:var(--menu-popup-min-w);max-width:var(--menu-popup-max-w)}.bk-menu__submenu--popup.bk-menu__submenu--open{@apply block;}.bk-menu__submenu--placing{@apply opacity-0 pointer-events-none;}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{@apply overflow-x-auto;-webkit-overflow-scrolling:touch}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkMenu, decorators: [{
             type: Component,
@@ -10685,6 +10941,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], submenuBackground: [{
                 type: Input
+            }], emitParentClick: [{
+                type: Input
             }], activeItemId: [{
                 type: Input
             }], tintIcons: [{
@@ -10707,11 +10965,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 /* =========================================================================
-   Placement maths for bk-popover: turns an anchor rectangle plus a requested
-   placement into viewport coordinates for the panel and its arrow.
+   Placement vocabulary for bk-popover, plus the one piece of maths CDK's
+   connected-overlay strategy doesn't do for us: keeping the arrow centred on
+   the *trigger* rather than the panel.
 
-   Kept free of the DOM so the rules stay readable and testable — the component
-   measures, this decides.
+   Flip/push/viewport-clamping used to live here by hand (see git history for
+   computePopoverPosition) — Angular CDK Overlay owns all of that now. What's
+   left is DOM-free by design, so the rules stay readable and testable.
    ========================================================================= */
 /** Every placement, in the order a placement picker should show them. */
 const POPOVER_PLACEMENTS = [
@@ -10720,7 +10980,9 @@ const POPOVER_PLACEMENTS = [
     'bottom-left', 'bottom', 'bottom-right',
     'left-top', 'left', 'left-bottom'
 ];
-const OPPOSITE = {
+/** The side CDK should try when the requested one doesn't fit — only ever the direct
+ *  opposite, never a diagonal, so the alignment word stays meaningful after a flip. */
+const OPPOSITE_SIDE = {
     top: 'bottom',
     bottom: 'top',
     left: 'right',
@@ -10759,81 +11021,12 @@ function joinPlacement(side, align) {
         return side;
     return `${side}-${ALIGN_EDGES[side][align]}`;
 }
+/** min wins when the range is inverted (arrow limit wider than the panel itself on a very
+ *  narrow/maxWidth-constrained panel), which keeps the arrow at the panel's leading edge
+ *  rather than pushing it past the trailing one. */
 function clamp(value, min, max) {
-    // min wins when the range is inverted (panel larger than the viewport), which
-    // keeps the panel's leading edge on screen rather than its trailing one.
     return Math.max(min, Math.min(value, max));
 }
-/** Does the panel clear the viewport edge on this side of the anchor? */
-function fitsOnSide(side, anchor, panel, { offset, viewportPadding: pad, viewport }) {
-    switch (side) {
-        case 'top':
-            return anchor.top - offset - panel.height >= pad;
-        case 'bottom':
-            return anchor.top + anchor.height + offset + panel.height <= viewport.height - pad;
-        case 'left':
-            return anchor.left - offset - panel.width >= pad;
-        case 'right':
-            return anchor.left + anchor.width + offset + panel.width <= viewport.width - pad;
-    }
-}
-/** Leading edge of the panel along the cross axis, before any clamping. */
-function alignedStart(align, anchorStart, anchorSize, panelSize) {
-    switch (align) {
-        case 'start':
-            return anchorStart;
-        case 'end':
-            return anchorStart + anchorSize - panelSize;
-        case 'center':
-            return anchorStart + anchorSize / 2 - panelSize / 2;
-    }
-}
-/**
- * Places the panel against the anchor, then keeps it on screen in two ways:
- *
- * - flip: a panel with no room on the requested side moves to the opposite one,
- *   but only if it actually fits there — flipping into a second bad fit just
- *   trades one clipped edge for another.
- * - shift: the panel slides along its cross axis to stay inside the viewport.
- *   The arrow is measured against the *anchor*, not the panel, so it keeps
- *   pointing at the trigger however far the panel had to slide.
- */
-function computePopoverPosition(anchor, panel, placement, options) {
-    const { offset, viewportPadding: pad, arrowSize, flip, viewport } = options;
-    let { side, align } = splitPlacement(placement);
-    if (flip && !fitsOnSide(side, anchor, panel, options) && fitsOnSide(OPPOSITE[side], anchor, panel, options)) {
-        side = OPPOSITE[side];
-    }
-    const vertical = side === 'top' || side === 'bottom';
-    let top;
-    let left;
-    if (vertical) {
-        top = side === 'top'
-            ? anchor.top - panel.height - offset
-            : anchor.top + anchor.height + offset;
-        left = clamp(alignedStart(align, anchor.left, anchor.width, panel.width), pad, viewport.width - panel.width - pad);
-    }
-    else {
-        left = side === 'left'
-            ? anchor.left - panel.width - offset
-            : anchor.left + anchor.width + offset;
-        top = clamp(alignedStart(align, anchor.top, anchor.height, panel.height), pad, viewport.height - panel.height - pad);
-    }
-    const anchorCentre = vertical
-        ? anchor.left + anchor.width / 2
-        : anchor.top + anchor.height / 2;
-    const panelStart = vertical ? left : top;
-    const panelSize = vertical ? panel.width : panel.height;
-    const arrowLimit = arrowSize / 2 + ARROW_CORNER_GAP;
-    return {
-        top,
-        left,
-        side,
-        align,
-        placement: joinPlacement(side, align),
-        arrowOffset: clamp(anchorCentre - panelStart, arrowLimit, panelSize - arrowLimit)
-    };
-}
 
 /** Edge length of the arrow square. Mirrored by --bk-popover-arrow in popover.css. */
 const ARROW_SIZE = 10;
@@ -10869,11 +11062,36 @@ class BkPopover {
     openDelay = input(80, ...(ngDevMode ? [{ debugName: "openDelay" }] : []));
     closeDelay = input(150, ...(ngDevMode ? [{ debugName: "closeDelay" }] : []));
     maxWidth = input('280px', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+    /**
+     * Fixed panel width, e.g. `'320px'`. Unset by default, so the panel sizes to its content
+     * (capped by `maxWidth`) as before. Set this when the content's natural width shouldn't drive
+     * layout — a form, a fixed-column list — so the panel doesn't reflow between opens as content
+     * changes.
+     *
+     * Overrides `maxWidth` entirely while set — a plain CSS `max-width` would otherwise silently
+     * cap a `width` larger than it (280px default), which is never what setting an exact width was
+     * asking for. Raise `maxWidth` too only if you want *both* a starting width and a cap it can
+     * still grow past for some other reason (e.g. a responsive breakpoint override elsewhere).
+     */
+    width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : []));
     panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
     /**
-     * Relocate the panel to <body> while open. `position: fixed` alone resolves
-     * against a transformed ancestor rather than the viewport, so a popover
-     * inside an animated dialog or a transformed card needs this to escape.
+     * The max-width actually applied to the panel: whichever of `width`/`maxWidth` is in effect,
+     * additionally capped to the viewport so the panel can never extend past the screen edge — an
+     * oversized `width` (or a placement CDK could only push so far before running out of room)
+     * shrinks to fit instead of overflowing. Mirrors the old hand-rolled positioner's clamp(), which
+     * guaranteed the panel stayed fully on-screen; a bare CSS `max-width` alone doesn't provide that
+     * once the requested size is close to (or exceeds) the viewport itself.
+     */
+    effectiveMaxWidth = computed(() => {
+        const requested = this.width() ?? this.maxWidth();
+        return `min(${requested}, calc(100vw - 16px))`;
+    }, ...(ngDevMode ? [{ debugName: "effectiveMaxWidth" }] : []));
+    /**
+     * @deprecated No-op, kept only so existing `[appendToBody]="true"` bindings don't break.
+     * The panel now always positions via Angular CDK Overlay, which portals into the shared
+     * `cdk-overlay-container` unconditionally — the exact clipping/stacking escape this input used
+     * to opt into by hand is now the only behaviour there is. Safe to remove from call sites.
      */
     appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
     opened = output();
@@ -10881,50 +11099,73 @@ class BkPopover {
     openChange = output();
     anchorRef;
     panelRef;
+    popoverOverlay;
     static activeInstance = null;
-    host = inject(ElementRef);
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    /**
-     * Null until the panel has been measured. The template keeps the panel
-     * hidden while it is null: the first frame exists only to measure, and
-     * showing it at 0,0 first would flash it in the corner.
-     */
-    position = signal(null, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /** True once CDK has positioned the panel at least once since open() — the template keeps
+     *  the panel hidden until then, so the first frame (only there to be measured) never flashes
+     *  in the corner. */
+    panelReady = signal(false, ...(ngDevMode ? [{ debugName: "panelReady" }] : []));
+    /** Placement actually applied, once known — null before the first (positionChange) fires
+     *  (or once closed), in which case activePlacement()/side() fall back to the requested one. */
+    resolvedPlacement = signal(null, ...(ngDevMode ? [{ debugName: "resolvedPlacement" }] : []));
     /** Where the panel actually is, once positioned — may differ from `placement`. */
-    activePlacement = computed(() => this.position()?.placement ?? this.placement(), ...(ngDevMode ? [{ debugName: "activePlacement" }] : []));
+    activePlacement = computed(() => this.resolvedPlacement() ?? this.placement(), ...(ngDevMode ? [{ debugName: "activePlacement" }] : []));
     /** Side the panel sits on. Drives which edge the arrow hangs off (see CSS). */
-    side = computed(() => this.position()?.side ?? splitPlacement(this.placement()).side, ...(ngDevMode ? [{ debugName: "side" }] : []));
+    side = computed(() => splitPlacement(this.activePlacement()).side, ...(ngDevMode ? [{ debugName: "side" }] : []));
+    /** Distance from the panel's leading edge to the arrow's centre, along the panel's cross
+     *  axis — null until measured. Recomputed from the *actual rendered rects*, not derived from
+     *  CDK's position strategy, so it's correct however CDK had to push/clamp the panel. */
+    arrowOffsetPx = signal(null, ...(ngDevMode ? [{ debugName: "arrowOffsetPx" }] : []));
+    /** Arrow offset along the panel's cross axis — x on top/bottom, y on left/right. */
+    arrowLeft = computed(() => {
+        const px = this.arrowOffsetPx();
+        if (px == null)
+            return null;
+        const s = this.side();
+        return s === 'top' || s === 'bottom' ? px : null;
+    }, ...(ngDevMode ? [{ debugName: "arrowLeft" }] : []));
+    arrowTop = computed(() => {
+        const px = this.arrowOffsetPx();
+        if (px == null)
+            return null;
+        const s = this.side();
+        return s === 'left' || s === 'right' ? px : null;
+    }, ...(ngDevMode ? [{ debugName: "arrowTop" }] : []));
+    /**
+     * Requested position first, its opposite side as a fallback when `flip` allows it — CDK tries
+     * these in order and only falls to the second when the first genuinely doesn't fit. Push (on
+     * by default) then keeps whichever one it lands on inside the viewport, matching the old
+     * hand-rolled shift-along-the-edge behaviour. Each entry is tagged with the side/align it came
+     * from (see positionMeta) so onPositionChange can read back which one CDK actually used.
+     *
+     * A stable field, computed once per open() — not a template-bound getter. A getter re-runs on
+     * every change-detection pass (several times before CDK ever reads it), reassigning
+     * `positionMeta` with fresh object references each time; onPositionChange would then be matching
+     * against an array CDK was never actually given.
+     */
+    popoverPositions = [];
+    positionMeta = [];
+    computePositions() {
+        const { side, align } = splitPlacement(this.placement());
+        const entries = [
+            { pos: toConnectedPosition(side, align, this.offset()), side, align }
+        ];
+        if (this.flip()) {
+            const oppositeSide = OPPOSITE_SIDE[side];
+            entries.push({ pos: toConnectedPosition(oppositeSide, align, this.offset()), side: oppositeSide, align });
+        }
+        this.positionMeta = entries;
+        this.popoverPositions = entries.map(e => e.pos);
+    }
     openTimer = null;
     closeTimer = null;
     pointerInPanel = false;
     resizeObserver;
-    // Panel's home in the DOM, so appendToBody can put it back before Angular's
-    // @if removes it.
-    originalPanelParent = null;
-    originalPanelAnchor = null;
-    panelInBody = false;
-    ngAfterViewInit() {
-        // Capture phase catches scrolling inside nested overflow containers, which
-        // a window:scroll listener would miss entirely.
-        window.addEventListener('scroll', this.reposition, true);
-        window.addEventListener('resize', this.reposition);
-        // Content can change size while open (async data, an expanding section),
-        // which moves every edge the panel is aligned against.
-        if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => this.measure());
-        }
-    }
     ngOnDestroy() {
         this.clearTimers();
         this.resizeObserver?.disconnect();
-        document.removeEventListener('click', this.onDocumentClick);
-        window.removeEventListener('scroll', this.reposition, true);
-        window.removeEventListener('resize', this.reposition);
-        // Don't leave a relocated panel orphaned in <body> if we're torn down open.
-        if (this.panelInBody) {
-            this.panelRef?.nativeElement.remove();
-            this.panelInBody = false;
-        }
+        this.detachOverlayScrollTracking();
         if (BkPopover.activeInstance === this)
             BkPopover.activeInstance = null;
     }
@@ -10938,36 +11179,28 @@ class BkPopover {
         }
         BkPopover.activeInstance = this;
         this.clearTimers();
-        this.position.set(null);
+        this.panelReady.set(false);
+        this.resolvedPlacement.set(null);
+        this.arrowOffsetPx.set(null);
+        this.computePositions();
         this.isOpen.set(true);
         this.opened.emit();
         this.openChange.emit(true);
-        // The panel doesn't exist until Angular renders it, and it can't be
-        // measured before it does — so position on the next tick.
-        setTimeout(() => {
-            if (!this.isOpen())
-                return;
-            if (this.appendToBody())
-                this.movePanelToBody();
-            this.measure();
-            if (this.panelRef)
-                this.resizeObserver?.observe(this.panelRef.nativeElement);
-            // Attached here, not on the host, so the very click that opened the panel
-            // has finished bubbling first — otherwise a popover opened by anything
-            // outside its own trigger (a toolbar button calling open()) would be shut
-            // again by its own opening click.
-            document.addEventListener('click', this.onDocumentClick);
-        });
+        this.attachOverlayScrollTracking();
     }
     close() {
         if (!this.isOpen())
             return;
         this.clearTimers();
+        this.detachOverlayScrollTracking();
+        // Disconnect rather than leave it observing a panel CDK is about to detach — a fresh
+        // observer is (re)created lazily in onPositionChange on the next open.
         this.resizeObserver?.disconnect();
-        document.removeEventListener('click', this.onDocumentClick);
-        this.restorePanel();
+        this.resizeObserver = undefined;
         this.isOpen.set(false);
-        this.position.set(null);
+        this.panelReady.set(false);
+        this.resolvedPlacement.set(null);
+        this.arrowOffsetPx.set(null);
         this.pointerInPanel = false;
         this.closed.emit();
         this.openChange.emit(false);
@@ -11007,78 +11240,107 @@ class BkPopover {
         this.pointerInPanel = false;
         this.scheduleClose();
     }
-    /** Only attached while open — see open(). Arrow fn so it can be removed. */
-    onDocumentClick = (event) => {
+    /**
+     * Click-outside-to-close, driven by CDK's document-level outside-pointer-event dispatcher —
+     * it already excludes clicks on the cdkOverlayOrigin (the anchor) by design, so onAnchorClick()
+     * stays the sole opener/toggler. No backdrop involved, so it doesn't block page/nested-scroll-
+     * container scroll the way a modal's would (see the phone-dropdown writeup for why that matters).
+     */
+    onOverlayOutsideClick() {
         if (this.trigger() !== 'click' || !this.closeOnClickOutside())
             return;
-        const target = event.target;
-        if (this.host.nativeElement.contains(target))
-            return;
-        // appendToBody moves the panel out of the host, so clicking inside it would
-        // otherwise read as an outside click.
-        if (this.panelRef?.nativeElement.contains(target))
-            return;
         this.close();
-    };
+    }
     onEscape() {
         if (this.isOpen() && this.closeOnEscape())
             this.close();
     }
     // --- Positioning ---
-    reposition = () => {
-        if (this.isOpen())
-            this.measure();
+    /**
+     * CDK's default `reposition` scroll strategy only reacts to real `document`/`window` scroll —
+     * it has no way to know an app shell might scroll a nested container instead (this one
+     * commonly does — dashboard layouts with a fixed header/sidebar and a scrollable content pane).
+     * A capture-phase listener on `document` still sees scroll events fired on any descendant
+     * scrollable element (scroll doesn't bubble, but capture does) — same trick `bk-select` and the
+     * `bk-input` phone dropdown already use. Also recomputes the arrow, since `updatePosition()`
+     * sliding the panel along the same side doesn't necessarily fire (positionChange) — that only
+     * fires when the *side* changes, not every pixel of a push/slide. rAF-throttled so a fast
+     * scroll doesn't force layout on every tick.
+     */
+    overlayScrollRafId = null;
+    onOverlayScroll = () => {
+        if (this.overlayScrollRafId != null)
+            return;
+        this.overlayScrollRafId = requestAnimationFrame(() => {
+            this.overlayScrollRafId = null;
+            this.popoverOverlay?.overlayRef?.updatePosition();
+            if (this.panelReady())
+                this.arrowOffsetPx.set(this.computeArrowOffset(this.side()));
+        });
     };
-    /** Measures the anchor and panel, then hands the maths to the utility. */
-    measure() {
+    attachOverlayScrollTracking() {
+        document.addEventListener('scroll', this.onOverlayScroll, true);
+        window.addEventListener('resize', this.onOverlayScroll);
+    }
+    detachOverlayScrollTracking() {
+        document.removeEventListener('scroll', this.onOverlayScroll, true);
+        window.removeEventListener('resize', this.onOverlayScroll);
+        if (this.overlayScrollRafId != null) {
+            cancelAnimationFrame(this.overlayScrollRafId);
+            this.overlayScrollRafId = null;
+        }
+    }
+    /**
+     * Fires whenever CDK (re)applies a position, including the first one after open. Reads back
+     * which of `popoverPositions`' tagged entries CDK actually used — matched by field value
+     * (positionsEqual), not object reference: CDK's position strategy reconstructs its own
+     * ConnectedPosition objects internally, so `event.connectionPair` is never `===` to the object
+     * we handed it even when it's the exact same logical position. Recomputes the arrow from the
+     * real rendered rects, and — on the very first call — starts observing the panel for
+     * content-size changes and reveals it.
+     */
+    onPositionChange(event) {
+        const match = this.positionMeta.find(e => positionsEqual(e.pos, event.connectionPair));
+        const side = match?.side ?? splitPlacement(this.placement()).side;
+        const align = match?.align ?? splitPlacement(this.placement()).align;
+        this.resolvedPlacement.set(joinPlacement(side, align));
+        this.arrowOffsetPx.set(this.computeArrowOffset(side));
+        this.panelReady.set(true);
+        // Content can change size while open (async data, an expanding section), which moves every
+        // edge the panel is aligned against — re-run CDK's own positioning, then ours, when it does.
+        // observe() on an already-observed target is a harmless no-op, so no "have we done this
+        // already" guard is needed here.
+        if (typeof ResizeObserver !== 'undefined' && this.panelRef) {
+            if (!this.resizeObserver) {
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.popoverOverlay?.overlayRef?.updatePosition();
+                    if (this.panelReady())
+                        this.arrowOffsetPx.set(this.computeArrowOffset(this.side()));
+                });
+            }
+            this.resizeObserver.observe(this.panelRef.nativeElement);
+        }
+    }
+    /**
+     * Arrow offset along the panel's cross axis, measured from the actual rendered anchor/panel
+     * rects rather than reverse-engineered from CDK's position strategy — correct however far CDK
+     * had to push/clamp the panel to stay on screen.
+     */
+    computeArrowOffset(side) {
         const anchor = this.anchorRef?.nativeElement;
         const panel = this.panelRef?.nativeElement;
         if (!anchor || !panel)
-            return;
+            return 0;
         const anchorRect = anchor.getBoundingClientRect();
-        this.position.set(computePopoverPosition({
-            top: anchorRect.top,
-            left: anchorRect.left,
-            width: anchorRect.width,
-            height: anchorRect.height
-        }, { width: panel.offsetWidth, height: panel.offsetHeight }, this.placement(), {
-            offset: this.offset(),
-            viewportPadding: 8,
-            arrowSize: ARROW_SIZE,
-            flip: this.flip(),
-            viewport: { width: window.innerWidth, height: window.innerHeight }
-        }));
-    }
-    /** Arrow offset along the panel's cross axis — x on top/bottom, y on left/right. */
-    arrowLeft = computed(() => {
-        const pos = this.position();
-        if (!pos)
-            return null;
-        return pos.side === 'top' || pos.side === 'bottom' ? pos.arrowOffset : null;
-    }, ...(ngDevMode ? [{ debugName: "arrowLeft" }] : []));
-    arrowTop = computed(() => {
-        const pos = this.position();
-        if (!pos)
-            return null;
-        return pos.side === 'left' || pos.side === 'right' ? pos.arrowOffset : null;
-    }, ...(ngDevMode ? [{ debugName: "arrowTop" }] : []));
-    movePanelToBody() {
-        const panel = this.panelRef?.nativeElement;
-        if (!panel || this.panelInBody)
-            return;
-        this.originalPanelParent = panel.parentNode;
-        this.originalPanelAnchor = panel.nextSibling;
-        document.body.appendChild(panel);
-        this.panelInBody = true;
-    }
-    restorePanel() {
-        const panel = this.panelRef?.nativeElement;
-        if (!panel || !this.panelInBody)
-            return;
-        this.originalPanelParent?.insertBefore(panel, this.originalPanelAnchor);
-        this.panelInBody = false;
-        this.originalPanelParent = null;
-        this.originalPanelAnchor = null;
+        const panelRect = panel.getBoundingClientRect();
+        const vertical = side === 'top' || side === 'bottom';
+        const anchorCentre = vertical
+            ? anchorRect.left + anchorRect.width / 2
+            : anchorRect.top + anchorRect.height / 2;
+        const panelStart = vertical ? panelRect.left : panelRect.top;
+        const panelSize = vertical ? panelRect.width : panelRect.height;
+        const arrowLimit = ARROW_SIZE / 2 + ARROW_CORNER_GAP;
+        return clamp(anchorCentre - panelStart, arrowLimit, panelSize - arrowLimit);
     }
     // --- Timers ---
     scheduleClose() {
@@ -11105,27 +11367,65 @@ class BkPopover {
         this.cancelClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPopover, isStandalone: true, selector: "bk-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.title": "null" } }, viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchor"], descendants: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true }], exportAs: ["bkPopover"], ngImport: i0, template: "<!-- The anchor wraps the projected trigger so the popover has an element to\r\n     measure and to listen on, whatever the consumer passes in. -->\r\n<span\r\n  #anchor\r\n  class=\"bk-popover-anchor\"\r\n  (click)=\"onAnchorClick()\"\r\n  (mouseenter)=\"onAnchorEnter()\"\r\n  (mouseleave)=\"onAnchorLeave()\"\r\n>\r\n  <ng-content select=\"[bkPopoverTrigger]\"></ng-content>\r\n</span>\r\n\r\n@if (isOpen()) {\r\n  <!-- Hidden until position() lands: the first frame exists only so the panel\r\n       can be measured, and painting it at 0,0 first flashes it in the corner. -->\r\n  <div\r\n    #panel\r\n    class=\"bk-popover-panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    role=\"dialog\"\r\n    [attr.data-side]=\"side()\"\r\n    [style.top.px]=\"position()?.top\"\r\n    [style.left.px]=\"position()?.left\"\r\n    [style.maxWidth]=\"maxWidth()\"\r\n    [class.bk-popover-ready]=\"!!position()\"\r\n    (mouseenter)=\"onPanelEnter()\"\r\n    (mouseleave)=\"onPanelLeave()\"\r\n  >\r\n    @if (showArrow()) {\r\n      <!-- A rotated square, not a border triangle: it inherits the panel's\r\n           background and border, so the tip matches the panel on every side.\r\n           Sits above the panel's own border, hiding the segment it crosses. -->\r\n      <span\r\n        class=\"bk-popover-arrow\"\r\n        [style.left.px]=\"arrowLeft()\"\r\n        [style.top.px]=\"arrowTop()\"\r\n      ></span>\r\n    }\r\n\r\n    @if (title()) {\r\n      <div class=\"bk-popover-header\">\r\n        <span class=\"bk-popover-title\">{{ title() }}</span>\r\n        @if (closable()) {\r\n          <button type=\"button\" class=\"bk-popover-close\" aria-label=\"Close\" (click)=\"close()\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"bk-popover-body\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{@apply inline-flex;}.bk-popover-anchor{@apply inline-flex;}.bk-popover-panel{@apply fixed z-[10000] bg-white border border-[#E3E3E7] rounded-lg p-3 cursor-default;box-shadow:0 12px 24px -6px #1018281f,0 4px 8px -4px #1018280f;visibility:hidden;opacity:0}.bk-popover-panel.bk-popover-ready{visibility:visible;opacity:1;transition:opacity .12s ease-out}.bk-popover-arrow{@apply absolute block w-2.5 h-2.5 bg-white border border-[#E3E3E7];}.bk-popover-panel[data-side=top] .bk-popover-arrow{bottom:-5px;border-top:none;border-left:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=bottom] .bk-popover-arrow{top:-5px;border-bottom:none;border-right:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=left] .bk-popover-arrow{right:-5px;border-bottom:none;border-left:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-panel[data-side=right] .bk-popover-arrow{left:-5px;border-top:none;border-right:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-header{@apply flex items-start justify-between gap-3 mb-1;}.bk-popover-title{@apply text-sm font-semibold text-[#141414];}.bk-popover-close{@apply shrink-0 text-gray-400 hover:text-[#141414] cursor-pointer -me-1 -mt-0.5;}.bk-popover-body{@apply text-sm font-normal text-[#6B7080];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPopover, isStandalone: true, selector: "bk-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.title": "null" } }, viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchor"], descendants: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true }, { propertyName: "popoverOverlay", first: true, predicate: ["popoverOverlay"], descendants: true }], exportAs: ["bkPopover"], ngImport: i0, template: "<!-- The anchor wraps the projected trigger so the popover has an element to\r\n     measure and to listen on, whatever the consumer passes in. -->\r\n<span\r\n  #anchor\r\n  cdkOverlayOrigin\r\n  #popoverOrigin=\"cdkOverlayOrigin\"\r\n  class=\"bk-popover-anchor\"\r\n  (click)=\"onAnchorClick()\"\r\n  (mouseenter)=\"onAnchorEnter()\"\r\n  (mouseleave)=\"onAnchorLeave()\"\r\n>\r\n  <ng-content select=\"[bkPopoverTrigger]\"></ng-content>\r\n</span>\r\n\r\n<!--\r\n  CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of an\r\n  inline `position:fixed` div, so it escapes clipping inside dialogs/scroll containers and\r\n  stacks correctly above other CDK-overlay content, regardless of the old appendToBody flag (see\r\n  its @deprecated note). No backdrop \u2014 see onOverlayOutsideClick.\r\n-->\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  #popoverOverlay=\"cdkConnectedOverlay\"\r\n  [cdkConnectedOverlayOrigin]=\"popoverOrigin\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n  [cdkConnectedOverlayPositions]=\"popoverPositions\"\r\n  [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n  (positionChange)=\"onPositionChange($event)\"\r\n  (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n  (detach)=\"close()\"\r\n>\r\n  <!-- Hidden until panelReady(): the first frame exists only so CDK/we can measure it, and\r\n       painting it at its initial position first flashes it in the corner. -->\r\n  <div\r\n    #panel\r\n    class=\"bk-popover-panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    role=\"dialog\"\r\n    [attr.data-side]=\"side()\"\r\n    [style.width]=\"width()\"\r\n    [style.maxWidth]=\"effectiveMaxWidth()\"\r\n    [class.bk-popover-ready]=\"panelReady()\"\r\n    (mouseenter)=\"onPanelEnter()\"\r\n    (mouseleave)=\"onPanelLeave()\"\r\n  >\r\n    @if (showArrow()) {\r\n      <!-- A rotated square, not a border triangle: it inherits the panel's\r\n           background and border, so the tip matches the panel on every side.\r\n           Sits above the panel's own border, hiding the segment it crosses. -->\r\n      <span\r\n        class=\"bk-popover-arrow\"\r\n        [style.left.px]=\"arrowLeft()\"\r\n        [style.top.px]=\"arrowTop()\"\r\n      ></span>\r\n    }\r\n\r\n    @if (title()) {\r\n      <div class=\"bk-popover-header\">\r\n        <span class=\"bk-popover-title\">{{ title() }}</span>\r\n        @if (closable()) {\r\n          <button type=\"button\" class=\"bk-popover-close\" aria-label=\"Close\" (click)=\"close()\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"bk-popover-body\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{@apply inline-flex;}.bk-popover-anchor{@apply inline-flex;}.bk-popover-panel{@apply static z-[10000] bg-white border border-[#E3E3E7] rounded-lg p-3 cursor-default;box-shadow:0 12px 24px -6px #1018281f,0 4px 8px -4px #1018280f;visibility:hidden;opacity:0}.bk-popover-panel.bk-popover-ready{visibility:visible;opacity:1;transition:opacity .12s ease-out}.bk-popover-arrow{@apply absolute block w-2.5 h-2.5 bg-white border border-[#E3E3E7];}.bk-popover-panel[data-side=top] .bk-popover-arrow{bottom:-5px;border-top:none;border-left:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=bottom] .bk-popover-arrow{top:-5px;border-bottom:none;border-right:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=left] .bk-popover-arrow{right:-5px;border-bottom:none;border-left:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-panel[data-side=right] .bk-popover-arrow{left:-5px;border-top:none;border-right:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-header{@apply flex items-start justify-between gap-3 mb-1;}.bk-popover-title{@apply text-sm font-semibold text-[#141414];}.bk-popover-close{@apply shrink-0 text-gray-400 hover:text-[#141414] cursor-pointer -me-1 -mt-0.5;}.bk-popover-body{@apply text-sm font-normal text-[#6B7080];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPopover, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-popover', standalone: true, exportAs: 'bkPopover', imports: [CommonModule], host: {
+            args: [{ selector: 'bk-popover', standalone: true, exportAs: 'bkPopover', imports: [CommonModule, OverlayModule], host: {
                         // A static `title="…"` lands on the input *and* stays on the host as a real
                         // HTML attribute, which the browser would render as its own native tooltip
                         // over the trigger. Stripping it here means the input can keep the obvious
                         // name without consumers having to remember to bind it.
                         '[attr.title]': 'null'
-                    }, template: "<!-- The anchor wraps the projected trigger so the popover has an element to\r\n     measure and to listen on, whatever the consumer passes in. -->\r\n<span\r\n  #anchor\r\n  class=\"bk-popover-anchor\"\r\n  (click)=\"onAnchorClick()\"\r\n  (mouseenter)=\"onAnchorEnter()\"\r\n  (mouseleave)=\"onAnchorLeave()\"\r\n>\r\n  <ng-content select=\"[bkPopoverTrigger]\"></ng-content>\r\n</span>\r\n\r\n@if (isOpen()) {\r\n  <!-- Hidden until position() lands: the first frame exists only so the panel\r\n       can be measured, and painting it at 0,0 first flashes it in the corner. -->\r\n  <div\r\n    #panel\r\n    class=\"bk-popover-panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    role=\"dialog\"\r\n    [attr.data-side]=\"side()\"\r\n    [style.top.px]=\"position()?.top\"\r\n    [style.left.px]=\"position()?.left\"\r\n    [style.maxWidth]=\"maxWidth()\"\r\n    [class.bk-popover-ready]=\"!!position()\"\r\n    (mouseenter)=\"onPanelEnter()\"\r\n    (mouseleave)=\"onPanelLeave()\"\r\n  >\r\n    @if (showArrow()) {\r\n      <!-- A rotated square, not a border triangle: it inherits the panel's\r\n           background and border, so the tip matches the panel on every side.\r\n           Sits above the panel's own border, hiding the segment it crosses. -->\r\n      <span\r\n        class=\"bk-popover-arrow\"\r\n        [style.left.px]=\"arrowLeft()\"\r\n        [style.top.px]=\"arrowTop()\"\r\n      ></span>\r\n    }\r\n\r\n    @if (title()) {\r\n      <div class=\"bk-popover-header\">\r\n        <span class=\"bk-popover-title\">{{ title() }}</span>\r\n        @if (closable()) {\r\n          <button type=\"button\" class=\"bk-popover-close\" aria-label=\"Close\" (click)=\"close()\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"bk-popover-body\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{@apply inline-flex;}.bk-popover-anchor{@apply inline-flex;}.bk-popover-panel{@apply fixed z-[10000] bg-white border border-[#E3E3E7] rounded-lg p-3 cursor-default;box-shadow:0 12px 24px -6px #1018281f,0 4px 8px -4px #1018280f;visibility:hidden;opacity:0}.bk-popover-panel.bk-popover-ready{visibility:visible;opacity:1;transition:opacity .12s ease-out}.bk-popover-arrow{@apply absolute block w-2.5 h-2.5 bg-white border border-[#E3E3E7];}.bk-popover-panel[data-side=top] .bk-popover-arrow{bottom:-5px;border-top:none;border-left:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=bottom] .bk-popover-arrow{top:-5px;border-bottom:none;border-right:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=left] .bk-popover-arrow{right:-5px;border-bottom:none;border-left:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-panel[data-side=right] .bk-popover-arrow{left:-5px;border-top:none;border-right:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-header{@apply flex items-start justify-between gap-3 mb-1;}.bk-popover-title{@apply text-sm font-semibold text-[#141414];}.bk-popover-close{@apply shrink-0 text-gray-400 hover:text-[#141414] cursor-pointer -me-1 -mt-0.5;}.bk-popover-body{@apply text-sm font-normal text-[#6B7080];}\n"] }]
-        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], anchorRef: [{
+                    }, template: "<!-- The anchor wraps the projected trigger so the popover has an element to\r\n     measure and to listen on, whatever the consumer passes in. -->\r\n<span\r\n  #anchor\r\n  cdkOverlayOrigin\r\n  #popoverOrigin=\"cdkOverlayOrigin\"\r\n  class=\"bk-popover-anchor\"\r\n  (click)=\"onAnchorClick()\"\r\n  (mouseenter)=\"onAnchorEnter()\"\r\n  (mouseleave)=\"onAnchorLeave()\"\r\n>\r\n  <ng-content select=\"[bkPopoverTrigger]\"></ng-content>\r\n</span>\r\n\r\n<!--\r\n  CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of an\r\n  inline `position:fixed` div, so it escapes clipping inside dialogs/scroll containers and\r\n  stacks correctly above other CDK-overlay content, regardless of the old appendToBody flag (see\r\n  its @deprecated note). No backdrop \u2014 see onOverlayOutsideClick.\r\n-->\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  #popoverOverlay=\"cdkConnectedOverlay\"\r\n  [cdkConnectedOverlayOrigin]=\"popoverOrigin\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n  [cdkConnectedOverlayPositions]=\"popoverPositions\"\r\n  [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n  (positionChange)=\"onPositionChange($event)\"\r\n  (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n  (detach)=\"close()\"\r\n>\r\n  <!-- Hidden until panelReady(): the first frame exists only so CDK/we can measure it, and\r\n       painting it at its initial position first flashes it in the corner. -->\r\n  <div\r\n    #panel\r\n    class=\"bk-popover-panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    role=\"dialog\"\r\n    [attr.data-side]=\"side()\"\r\n    [style.width]=\"width()\"\r\n    [style.maxWidth]=\"effectiveMaxWidth()\"\r\n    [class.bk-popover-ready]=\"panelReady()\"\r\n    (mouseenter)=\"onPanelEnter()\"\r\n    (mouseleave)=\"onPanelLeave()\"\r\n  >\r\n    @if (showArrow()) {\r\n      <!-- A rotated square, not a border triangle: it inherits the panel's\r\n           background and border, so the tip matches the panel on every side.\r\n           Sits above the panel's own border, hiding the segment it crosses. -->\r\n      <span\r\n        class=\"bk-popover-arrow\"\r\n        [style.left.px]=\"arrowLeft()\"\r\n        [style.top.px]=\"arrowTop()\"\r\n      ></span>\r\n    }\r\n\r\n    @if (title()) {\r\n      <div class=\"bk-popover-header\">\r\n        <span class=\"bk-popover-title\">{{ title() }}</span>\r\n        @if (closable()) {\r\n          <button type=\"button\" class=\"bk-popover-close\" aria-label=\"Close\" (click)=\"close()\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"bk-popover-body\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{@apply inline-flex;}.bk-popover-anchor{@apply inline-flex;}.bk-popover-panel{@apply static z-[10000] bg-white border border-[#E3E3E7] rounded-lg p-3 cursor-default;box-shadow:0 12px 24px -6px #1018281f,0 4px 8px -4px #1018280f;visibility:hidden;opacity:0}.bk-popover-panel.bk-popover-ready{visibility:visible;opacity:1;transition:opacity .12s ease-out}.bk-popover-arrow{@apply absolute block w-2.5 h-2.5 bg-white border border-[#E3E3E7];}.bk-popover-panel[data-side=top] .bk-popover-arrow{bottom:-5px;border-top:none;border-left:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=bottom] .bk-popover-arrow{top:-5px;border-bottom:none;border-right:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=left] .bk-popover-arrow{right:-5px;border-bottom:none;border-left:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-panel[data-side=right] .bk-popover-arrow{left:-5px;border-top:none;border-right:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-header{@apply flex items-start justify-between gap-3 mb-1;}.bk-popover-title{@apply text-sm font-semibold text-[#141414];}.bk-popover-close{@apply shrink-0 text-gray-400 hover:text-[#141414] cursor-pointer -me-1 -mt-0.5;}.bk-popover-body{@apply text-sm font-normal text-[#6B7080];}\n"] }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], anchorRef: [{
                 type: ViewChild,
                 args: ['anchor']
             }], panelRef: [{
                 type: ViewChild,
                 args: ['panel']
+            }], popoverOverlay: [{
+                type: ViewChild,
+                args: ['popoverOverlay']
             }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }] } });
+/** CDK's vertical axis speaks `top`/`bottom`/`center`, not `start`/`end` — unlike the
+ *  horizontal axis, it isn't RTL-mirrored, so there's no `start`/`end` to flip. */
+function alignToVertical(align) {
+    if (align === 'start')
+        return 'top';
+    if (align === 'end')
+        return 'bottom';
+    return 'center';
+}
+/** One side+align combination, translated into CDK's connected-position language. */
+function toConnectedPosition(side, align, offsetPx) {
+    if (side === 'top' || side === 'bottom') {
+        return {
+            originX: align, overlayX: align,
+            originY: side === 'top' ? 'top' : 'bottom',
+            overlayY: side === 'top' ? 'bottom' : 'top',
+            offsetY: side === 'top' ? -offsetPx : offsetPx
+        };
+    }
+    const vertical = alignToVertical(align);
+    return {
+        originY: vertical, overlayY: vertical,
+        originX: side === 'left' ? 'start' : 'end',
+        overlayX: side === 'left' ? 'end' : 'start',
+        offsetX: side === 'left' ? -offsetPx : offsetPx
+    };
+}
+/** Field-by-field equality for ConnectedPosition — CDK does not preserve object identity for
+ *  positions passed via cdkConnectedOverlayPositions, so `event.connectionPair` must be matched
+ *  by value against the entries we handed it, never by `===`. */
+function positionsEqual(a, b) {
+    return a.originX === b.originX && a.originY === b.originY &&
+        a.overlayX === b.overlayX && a.overlayY === b.overlayY &&
+        (a.offsetX ?? 0) === (b.offsetX ?? 0) && (a.offsetY ?? 0) === (b.offsetY ?? 0);
+}
 
 /**
  * A stacked ("avatar list") group. Renders a set of overlapping `bk-avatar`s and
@@ -12117,7 +12417,7 @@ class BkTh extends BkCellBase {
         popover?.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTh, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTh, isStandalone: true, selector: "th[bk-th]", inputs: { columnKeyInput: { classPropertyName: "columnKeyInput", publicName: "columnKey", isSignal: true, isRequired: false, transformFunction: null }, widthInput: { classPropertyName: "widthInput", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, sortDirections: { classPropertyName: "sortDirections", publicName: "sortDirections", isSignal: true, isRequired: false, transformFunction: null }, sortPriorityInput: { classPropertyName: "sortPriorityInput", publicName: "sortPriority", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, filterMultiple: { classPropertyName: "filterMultiple", publicName: "filterMultiple", isSignal: true, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortOrder: "sortOrderChange", checked: "checkedChange" }, host: { properties: { "class.bk-th-sortable": "showSort()", "class.bk-cell-selection": "checkbox()", "class.bk-cell-sticky": "isSticky", "class.bk-cell-sticky-left": "left() !== false", "class.bk-cell-sticky-right": "right() !== false", "class.bk-cell-ellipsis": "ellipsis()", "class.bk-cell-break-word": "breakWord()", "class.bk-th-align-right": "align() === 'right'", "class.bk-th-align-center": "align() === 'center'", "style.left": "stickyLeft()", "style.right": "stickyRight()", "style.width": "widthInput()", "style.text-align": "align()" }, classAttribute: "bk-th" }, usesInheritance: true, ngImport: i0, template: "@if (checkbox()) {\r\n  <!-- Selection column: checkbox, plus a caret when custom selections exist. -->\r\n  <div class=\"bk-th-selection\">\r\n    <bk-checkbox\r\n      checkboxClass=\"sm\"\r\n      [ngModel]=\"checked()\"\r\n      (ngModelChange)=\"onCheckedChange($event)\"\r\n      [disabled]=\"disabled()\"\r\n      [class.bk-checkbox-indeterminate]=\"indeterminate() && !checked()\"\r\n    ></bk-checkbox>\r\n\r\n    @if (selections().length) {\r\n      <!-- appendToBody: see the filter popover below \u2014 same containment problem. -->\r\n      <bk-popover\r\n        #selectionPop=\"bkPopover\"\r\n        trigger=\"click\"\r\n        placement=\"bottom-left\"\r\n        [showArrow]=\"false\"\r\n        [appendToBody]=\"true\"\r\n      >\r\n        <button type=\"button\" bkPopoverTrigger class=\"bk-th-selection-caret\" aria-label=\"Selection options\">\r\n          <svg width=\"8\" height=\"5\" viewBox=\"0 0 8 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M4 4.25c-.175 0-.292-.058-.408-.175L.675 1.158a.664.664 0 0 1 0-.817.664.664 0 0 1 .817 0L4 2.85 6.508.341a.664.664 0 0 1 .817 0 .664.664 0 0 1 0 .817L4.408 4.075C4.292 4.192 4.175 4.25 4 4.25Z\"\r\n              fill=\"#78829D\"\r\n            />\r\n          </svg>\r\n        </button>\r\n\r\n        <ul class=\"bk-table-menu\">\r\n          @for (selection of selections(); track selection.text) {\r\n            <li>\r\n              <button type=\"button\" class=\"bk-table-menu-item\" (click)=\"runSelection(selection, selectionPop)\">\r\n                {{ selection.text }}\r\n              </button>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </bk-popover>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"bk-th-content\" [class.bk-th-clickable]=\"showSort()\">\r\n    <!--\r\n      Only the label triggers sorting. The filter icon sits outside this span so\r\n      opening the menu doesn't also flip the sort order.\r\n    -->\r\n    <span class=\"bk-th-label\" (click)=\"onSortClick()\">\r\n      <ng-content></ng-content>\r\n\r\n      @if (showSort()) {\r\n        <span\r\n          class=\"bk-sort-icon\"\r\n          [class.bk-sort-asc]=\"sortOrder() === 'ascend'\"\r\n          [class.bk-sort-desc]=\"sortOrder() === 'descend'\"\r\n        ></span>\r\n      }\r\n\r\n      @if (showSort() && sortPriority !== null && sortOrder() !== null) {\r\n        <!-- Rank badge: without it, multi-sort gives no clue which column wins. -->\r\n        <span class=\"bk-sort-priority\">{{ sortPriority }}</span>\r\n      }\r\n    </span>\r\n\r\n    @if (showFilter()) {\r\n      <!--\r\n        appendToBody is not optional here. The panel is `position: fixed`, and a\r\n        table puts two things in its way: the header cell is inside\r\n        `.bk-table-container`, which scrolls, and any transformed ancestor would\r\n        turn the panel's viewport coordinates into cell-relative ones. Relocating\r\n        it to <body> is the only placement that survives both.\r\n      -->\r\n      <bk-popover\r\n        #filterPop=\"bkPopover\"\r\n        trigger=\"click\"\r\n        placement=\"bottom-right\"\r\n        [showArrow]=\"false\"\r\n        panelClass=\"bk-filter-popover\"\r\n        [appendToBody]=\"true\"\r\n        (opened)=\"onFilterMenuOpen()\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          bkPopoverTrigger\r\n          class=\"bk-filter-trigger\"\r\n          [class.bk-filter-active]=\"isFiltered()\"\r\n          aria-label=\"Filter column\"\r\n        >\r\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M1.5 2.5h13L9.5 8.2v4.6l-3 1.7V8.2L1.5 2.5Z\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"1.3\"\r\n              stroke-linejoin=\"round\"\r\n              [attr.fill]=\"isFiltered() ? 'currentColor' : 'none'\"\r\n            />\r\n          </svg>\r\n        </button>\r\n\r\n        <div class=\"bk-filter-menu\">\r\n          <ul class=\"bk-filter-list\">\r\n            @for (option of filters(); track option.value) {\r\n              <li class=\"bk-filter-option\">\r\n                @if (filterMultiple()) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [label]=\"option.text\"\r\n                    [ngModel]=\"isPending(option.value)\"\r\n                    (ngModelChange)=\"toggleFilterOption(option.value, $event)\"\r\n                  ></bk-checkbox>\r\n                } @else {\r\n                  <bk-radio-button\r\n                    [label]=\"option.text\"\r\n                    [value]=\"option.value\"\r\n                    [ngModel]=\"singleFilter\"\r\n                    (ngModelChange)=\"singleFilter = $event\"\r\n                  ></bk-radio-button>\r\n                }\r\n              </li>\r\n            }\r\n          </ul>\r\n\r\n          <div class=\"bk-filter-actions\">\r\n            <button type=\"button\" class=\"bk-filter-btn bk-filter-btn-link\" (click)=\"resetFilter(filterPop)\">\r\n              Reset\r\n            </button>\r\n            <button type=\"button\" class=\"bk-filter-btn bk-filter-btn-primary\" (click)=\"applyFilter(filterPop)\">\r\n              OK\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </bk-popover>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkRadioButton, selector: "bk-radio-button", inputs: ["radioClass", "label", "labelClass", "value", "uncheckedValue", "allowDeselect", "disabled", "variant"], outputs: ["change"] }, { kind: "component", type: BkPopover, selector: "bk-popover", inputs: ["placement", "trigger", "title", "closable", "disabled", "showArrow", "offset", "flip", "closeOnClickOutside", "closeOnEscape", "openDelay", "closeDelay", "maxWidth", "panelClass", "appendToBody"], outputs: ["opened", "closed", "openChange"], exportAs: ["bkPopover"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTh, isStandalone: true, selector: "th[bk-th]", inputs: { columnKeyInput: { classPropertyName: "columnKeyInput", publicName: "columnKey", isSignal: true, isRequired: false, transformFunction: null }, widthInput: { classPropertyName: "widthInput", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, sortDirections: { classPropertyName: "sortDirections", publicName: "sortDirections", isSignal: true, isRequired: false, transformFunction: null }, sortPriorityInput: { classPropertyName: "sortPriorityInput", publicName: "sortPriority", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, filterMultiple: { classPropertyName: "filterMultiple", publicName: "filterMultiple", isSignal: true, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortOrder: "sortOrderChange", checked: "checkedChange" }, host: { properties: { "class.bk-th-sortable": "showSort()", "class.bk-cell-selection": "checkbox()", "class.bk-cell-sticky": "isSticky", "class.bk-cell-sticky-left": "left() !== false", "class.bk-cell-sticky-right": "right() !== false", "class.bk-cell-ellipsis": "ellipsis()", "class.bk-cell-break-word": "breakWord()", "class.bk-th-align-right": "align() === 'right'", "class.bk-th-align-center": "align() === 'center'", "style.left": "stickyLeft()", "style.right": "stickyRight()", "style.width": "widthInput()", "style.text-align": "align()" }, classAttribute: "bk-th" }, usesInheritance: true, ngImport: i0, template: "@if (checkbox()) {\r\n  <!-- Selection column: checkbox, plus a caret when custom selections exist. -->\r\n  <div class=\"bk-th-selection\">\r\n    <bk-checkbox\r\n      checkboxClass=\"sm\"\r\n      [ngModel]=\"checked()\"\r\n      (ngModelChange)=\"onCheckedChange($event)\"\r\n      [disabled]=\"disabled()\"\r\n      [class.bk-checkbox-indeterminate]=\"indeterminate() && !checked()\"\r\n    ></bk-checkbox>\r\n\r\n    @if (selections().length) {\r\n      <!-- appendToBody: see the filter popover below \u2014 same containment problem. -->\r\n      <bk-popover\r\n        #selectionPop=\"bkPopover\"\r\n        trigger=\"click\"\r\n        placement=\"bottom-left\"\r\n        [showArrow]=\"false\"\r\n        [appendToBody]=\"true\"\r\n      >\r\n        <button type=\"button\" bkPopoverTrigger class=\"bk-th-selection-caret\" aria-label=\"Selection options\">\r\n          <svg width=\"8\" height=\"5\" viewBox=\"0 0 8 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M4 4.25c-.175 0-.292-.058-.408-.175L.675 1.158a.664.664 0 0 1 0-.817.664.664 0 0 1 .817 0L4 2.85 6.508.341a.664.664 0 0 1 .817 0 .664.664 0 0 1 0 .817L4.408 4.075C4.292 4.192 4.175 4.25 4 4.25Z\"\r\n              fill=\"#78829D\"\r\n            />\r\n          </svg>\r\n        </button>\r\n\r\n        <ul class=\"bk-table-menu\">\r\n          @for (selection of selections(); track selection.text) {\r\n            <li>\r\n              <button type=\"button\" class=\"bk-table-menu-item\" (click)=\"runSelection(selection, selectionPop)\">\r\n                {{ selection.text }}\r\n              </button>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </bk-popover>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"bk-th-content\" [class.bk-th-clickable]=\"showSort()\">\r\n    <!--\r\n      Only the label triggers sorting. The filter icon sits outside this span so\r\n      opening the menu doesn't also flip the sort order.\r\n    -->\r\n    <span class=\"bk-th-label\" (click)=\"onSortClick()\">\r\n      <ng-content></ng-content>\r\n\r\n      @if (showSort()) {\r\n        <span\r\n          class=\"bk-sort-icon\"\r\n          [class.bk-sort-asc]=\"sortOrder() === 'ascend'\"\r\n          [class.bk-sort-desc]=\"sortOrder() === 'descend'\"\r\n        ></span>\r\n      }\r\n\r\n      @if (showSort() && sortPriority !== null && sortOrder() !== null) {\r\n        <!-- Rank badge: without it, multi-sort gives no clue which column wins. -->\r\n        <span class=\"bk-sort-priority\">{{ sortPriority }}</span>\r\n      }\r\n    </span>\r\n\r\n    @if (showFilter()) {\r\n      <!--\r\n        appendToBody is not optional here. The panel is `position: fixed`, and a\r\n        table puts two things in its way: the header cell is inside\r\n        `.bk-table-container`, which scrolls, and any transformed ancestor would\r\n        turn the panel's viewport coordinates into cell-relative ones. Relocating\r\n        it to <body> is the only placement that survives both.\r\n      -->\r\n      <bk-popover\r\n        #filterPop=\"bkPopover\"\r\n        trigger=\"click\"\r\n        placement=\"bottom-right\"\r\n        [showArrow]=\"false\"\r\n        panelClass=\"bk-filter-popover\"\r\n        [appendToBody]=\"true\"\r\n        (opened)=\"onFilterMenuOpen()\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          bkPopoverTrigger\r\n          class=\"bk-filter-trigger\"\r\n          [class.bk-filter-active]=\"isFiltered()\"\r\n          aria-label=\"Filter column\"\r\n        >\r\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M1.5 2.5h13L9.5 8.2v4.6l-3 1.7V8.2L1.5 2.5Z\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"1.3\"\r\n              stroke-linejoin=\"round\"\r\n              [attr.fill]=\"isFiltered() ? 'currentColor' : 'none'\"\r\n            />\r\n          </svg>\r\n        </button>\r\n\r\n        <div class=\"bk-filter-menu\">\r\n          <ul class=\"bk-filter-list\">\r\n            @for (option of filters(); track option.value) {\r\n              <li class=\"bk-filter-option\">\r\n                @if (filterMultiple()) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [label]=\"option.text\"\r\n                    [ngModel]=\"isPending(option.value)\"\r\n                    (ngModelChange)=\"toggleFilterOption(option.value, $event)\"\r\n                  ></bk-checkbox>\r\n                } @else {\r\n                  <bk-radio-button\r\n                    [label]=\"option.text\"\r\n                    [value]=\"option.value\"\r\n                    [ngModel]=\"singleFilter\"\r\n                    (ngModelChange)=\"singleFilter = $event\"\r\n                  ></bk-radio-button>\r\n                }\r\n              </li>\r\n            }\r\n          </ul>\r\n\r\n          <div class=\"bk-filter-actions\">\r\n            <button type=\"button\" class=\"bk-filter-btn bk-filter-btn-link\" (click)=\"resetFilter(filterPop)\">\r\n              Reset\r\n            </button>\r\n            <button type=\"button\" class=\"bk-filter-btn bk-filter-btn-primary\" (click)=\"applyFilter(filterPop)\">\r\n              OK\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </bk-popover>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkRadioButton, selector: "bk-radio-button", inputs: ["radioClass", "label", "labelClass", "value", "uncheckedValue", "allowDeselect", "disabled", "variant"], outputs: ["change"] }, { kind: "component", type: BkPopover, selector: "bk-popover", inputs: ["placement", "trigger", "title", "closable", "disabled", "showArrow", "offset", "flip", "closeOnClickOutside", "closeOnEscape", "openDelay", "closeDelay", "maxWidth", "width", "panelClass", "appendToBody"], outputs: ["opened", "closed", "openChange"], exportAs: ["bkPopover"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTh, decorators: [{
             type: Component,
@@ -12770,5 +13070,5 @@ const BK_TABLE = [
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BK_TABLE, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkBreadcrumb, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDragHandle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTable, BkTableDrag, BkTableFooter, BkTableSummary, BkTableTitle, BkTabs, BkTd, BkTextarea, BkTh, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkTrExpand, BkTreeDrag, BkValidator, BkVirtualScroll, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, NEUTRAL_APPEARANCE, POPOVER_PLACEMENTS, computePopoverPosition, containsBkTreeNode, deriveAppearance, flattenBkTreeData, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, moveBkTreeNode, normalizeBkTableSize, parseColor, splitPlacement };
+export { ARROW_CORNER_GAP, BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BK_TABLE, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkBreadcrumb, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDragHandle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTable, BkTableDrag, BkTableFooter, BkTableSummary, BkTableTitle, BkTabs, BkTd, BkTextarea, BkTh, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkTooltipInteractionService, BkTrExpand, BkTreeDrag, BkValidator, BkVirtualScroll, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, DEFAULT_COUNTRY_OPTIONS, NEUTRAL_APPEARANCE, OPPOSITE_SIDE, POPOVER_PLACEMENTS, clamp, containsBkTreeNode, deriveAppearance, flattenBkTreeData, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, moveBkTreeNode, normalizeBkTableSize, parseColor, splitPlacement };
 //# sourceMappingURL=brickclay-org-ui.mjs.map