@brickclay-org/ui 0.1.77 → 0.1.78

package/fesm2022/brickclay-org-ui.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, forwardRef, HostListener, ViewChild, Input, Output, Injectable, NgModule, ViewEncapsulation, Optional, Self, Directive, ChangeDetectionStrategy, input, model, output, signal, computed, effect, inject, ElementRef, ViewChildren, InjectionToken, createComponent } from '@angular/core';
+import { Component, EventEmitter, forwardRef, HostListener, ViewChild, Input, Output, Injectable, NgModule, ViewEncapsulation, Optional, Self, Directive, ChangeDetectionStrategy, input, model, output, signal, computed, effect, inject, ElementRef, ViewChildren, InjectionToken, createComponent, NgZone, ContentChild } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, NgClass } from '@angular/common';
+import { CommonModule, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import moment from 'moment';
 import { Subject, filter } from 'rxjs';
 import * as i2$1 from '@angular/cdk/drag-drop';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$1 from '@angular/cdk/scrolling';
-import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
+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 { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { DIALOG_DATA, CdkDialogContainer, Dialog, DialogModule } from '@angular/cdk/dialog';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
@@ -4276,10 +4276,18 @@ class BKTooltipDirective {
     //     this.renderer.removeStyle(document.body, 'overflow-x');
     //   }
     // }
-    // Hide tooltip on mousedown so it doesn't stick during CDK drag-drop
-    // (CDK drag steals the element before mouseleave can fire)
+    // 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() {
-        this.hideTooltip();
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+        this.hideTooltipInstant();
     }
     onWindowChange() {
         if (this.tooltipElement?.style.visibility === 'visible') {
@@ -4295,6 +4303,19 @@ class BKTooltipDirective {
         }
         return true;
     }
+    /** Snap-hide with no fade: used when something else (a dropdown panel, another
+     *  tooltip) is opening right now, so the two never visibly overlap mid-fade. */
+    hideTooltipInstant() {
+        if (this.tooltipElement) {
+            this.renderer.setStyle(this.tooltipElement, 'transition', 'none');
+            this.hideTooltip();
+            requestAnimationFrame(() => {
+                if (this.tooltipElement)
+                    this.renderer.removeStyle(this.tooltipElement, 'transition');
+            });
+        }
+        this.isHoveringTooltip = false;
+    }
     hideTooltip() {
         if (this.tooltipElement) {
             this.setStyle(this.tooltipElement, {
@@ -4608,7 +4629,7 @@ class BKTooltipDirective {
         });
     }
     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()", "mousedown": "onInteract()", "touchstart": "onInteract()", "window:scroll": "onWindowChange()", "window:resize": "onWindowChange()" } }, usesOnChanges: true, ngImport: i0 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, decorators: [{
             type: Directive,
@@ -4642,7 +4663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['mouseleave']
             }], onInteract: [{
                 type: HostListener,
-                args: ['mousedown']
+                args: ['document:mousedown']
             }, {
                 type: HostListener,
                 args: ['touchstart']
@@ -4665,6 +4686,9 @@ class BkGrid {
     actionClass = '';
     showNoRecords = false;
     noRecordFoundHeight = '';
+    /** Custom illustration for the empty state. Falls back to a built-in SVG when omitted. */
+    noRecordImgUrl;
+    noRecordMessage = 'Data may be empty, or try adjusting your filter.';
     change = new EventEmitter();
     /* ================= Outputs ================= */
     actionClick = new EventEmitter();
@@ -4818,12 +4842,15 @@ class BkGrid {
             });
         });
     }
+    get noRecordImagePath() {
+        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" }, 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                    <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=\"./assets/media/logos/no-data-found.jpg\"\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                >Data may be empty, or try adjusting your filter.</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"], 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", noRecordMessage: "noRecordMessage" }, 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\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"], 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                    <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=\"./assets/media/logos/no-data-found.jpg\"\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                >Data may be empty, or try adjusting your filter.</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              <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\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: [{
@@ -4842,6 +4869,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], noRecordFoundHeight: [{
                 type: Input
+            }], noRecordImgUrl: [{
+                type: Input
+            }], noRecordMessage: [{
+                type: Input
             }], change: [{
                 type: Output
             }], actionClick: [{
@@ -5957,7 +5988,7 @@ class BkSelect {
                 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\">\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                  >+{{ 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        [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      >\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        <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      </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-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-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: "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"] }] });
+        ], 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\">\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        [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      >\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        <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      </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-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-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: "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, decorators: [{
             type: Component,
@@ -5967,7 +5998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkSelect),
                             multi: true
                         }
-                    ], template: "<div class=\"bk-select-container\" [ngClass]=\"variation\">\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                  >+{{ 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        [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      >\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        <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      </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-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-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\">\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        [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      >\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        <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      </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-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-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"] }]
         }], 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 }] }], 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: [{
@@ -6023,6 +6054,8 @@ class BkInput {
     hint = '';
     required = false;
     type = 'text';
+    /** 'sm' shrinks height, padding, font size and icon sizing for compact contexts (e.g. dropdown search boxes). */
+    size = 'default';
     value = '';
     hasError = false;
     showErrorIcon = false;
@@ -6311,14 +6344,14 @@ 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", 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", 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", 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: [
             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\">\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        (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--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--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(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--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-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}\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: "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        (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--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--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(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--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-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--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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, decorators: [{
             type: Component,
@@ -6329,7 +6362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkInput),
                             multi: true
                         }
-                    ], template: "<div class=\"input-container\">\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        (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--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--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(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--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-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}\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        (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--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--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(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--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-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--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: [{
@@ -6350,6 +6383,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], type: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], value: [{
                 type: Input
             }], hasError: [{
@@ -7763,7 +7798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  */
 class BkDialogContent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogContent, isStandalone: true, selector: "[bk-dialog-content], bk-dialog-content, [bkDialogContent]", host: { classAttribute: "bk-dialog-content" }, exportAs: ["bkDialogContent"], hostDirectives: [{ directive: i1$1.CdkScrollable }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogContent, isStandalone: true, selector: "[bk-dialog-content], bk-dialog-content, [bkDialogContent]", host: { classAttribute: "bk-dialog-content" }, exportAs: ["bkDialogContent"], hostDirectives: [{ directive: i2$2.CdkScrollable }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogContent, decorators: [{
             type: Directive,
@@ -9131,6 +9166,9 @@ class BkColumnFilterService {
         localStorage.setItem(key, JSON.stringify(list));
     }
     showColumn(field, columnsFilterList) {
+        if (!Array.isArray(columnsFilterList)) {
+            return false;
+        }
         return columnsFilterList.find((i) => i.columnName === field)?.selected || false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -9143,6 +9181,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/** Rough panel footprint used for auto-flip space checks (search input + option rows + padding). */
+const PANEL_ESTIMATED_WIDTH = 190;
+const PANEL_ESTIMATED_HEIGHT = 260;
 class BkColumnSelect {
     columnFilterService;
     searchable = false;
@@ -9151,9 +9192,16 @@ class BkColumnSelect {
     columns = [];
     isOpened = false;
     label = 'Columns';
-    lefticon = '../../../../assets/icons/select-column.svg';
+    lefticon = '../../../../assets/icons/columns-black.svg';
+    /** Corner the dropdown opens from, relative to the trigger button. */
+    position = 'bottom-right';
+    /** When true, flips each axis independently if there isn't enough viewport room for `position`. */
+    autoFlip = true;
     isOpenedChange = new EventEmitter();
     formBoxRef;
+    triggerRef;
+    /** Corner actually rendered on — starts from `position`, auto-flipped on open when needed. */
+    resolvedPosition = 'bottom-right';
     /** Value bound via ngModel – only updated when user ticks/unticks a checkbox, never on search. */
     columnsFilterList = [];
     search = '';
@@ -9177,6 +9225,41 @@ class BkColumnSelect {
         if ((columnsChanged || cacheKeyChanged) && this.columnsFilterList.length === 0 && this.shouldLoadFromService()) {
             this.loadColumnsFilterListFromService();
         }
+        if (changes['isOpened']?.currentValue) {
+            this.resolvedPosition = this.computePlacement();
+        }
+    }
+    /** Picks `position`, flipping each axis independently if the trigger doesn't have room for it. */
+    computePlacement() {
+        const triggerEl = this.triggerRef?.nativeElement;
+        const [vertical, horizontal] = this.position.split('-');
+        if (!this.autoFlip || !triggerEl) {
+            return this.position;
+        }
+        const rect = triggerEl.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const resolvedVertical = this.flipIfShort(vertical, 'top', 'bottom', vertical === 'bottom' ? spaceBelow : spaceAbove, vertical === 'bottom' ? spaceAbove : spaceBelow, PANEL_ESTIMATED_HEIGHT);
+        // 'right' hangs the panel leftward from the trigger's right edge (room = rect.right);
+        // 'left' hangs it rightward from the trigger's left edge (room = viewport width - rect.left).
+        const spaceHangingLeft = rect.right;
+        const spaceHangingRight = window.innerWidth - rect.left;
+        const resolvedHorizontal = this.flipIfShort(horizontal, 'right', 'left', horizontal === 'right' ? spaceHangingLeft : spaceHangingRight, horizontal === 'right' ? spaceHangingRight : spaceHangingLeft, PANEL_ESTIMATED_WIDTH);
+        return `${resolvedVertical}-${resolvedHorizontal}`;
+    }
+    /** Flips `current` to its opposite when it doesn't have `needed` space and the opposite has more room. */
+    flipIfShort(current, a, b, spaceCurrent, spaceOpposite, needed) {
+        if (spaceCurrent < needed && spaceOpposite > spaceCurrent) {
+            return current === a ? b : a;
+        }
+        return current;
+    }
+    /** Tailwind classes placing the panel on `resolvedPosition`'s corner of the trigger. */
+    get panelPositionClass() {
+        const [vertical, horizontal] = this.resolvedPosition.split('-');
+        const verticalClass = vertical === 'top' ? 'bottom-full mb-2' : 'top-full mt-2';
+        const horizontalClass = horizontal === 'left' ? 'left-0' : 'right-0';
+        return `${verticalClass} ${horizontalClass}`;
     }
     shouldLoadFromService() {
         return !!this.cacheKey && !!this.columns?.length;
@@ -9240,13 +9323,13 @@ class BkColumnSelect {
         return this.columnsFilterList.filter((x) => x.columnName.toLowerCase().includes(this.search.toLowerCase()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, deps: [{ token: BkColumnFilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkColumnSelect, isStandalone: true, selector: "bk-column-select", inputs: { searchable: "searchable", buttonClass: "buttonClass", cacheKey: "cacheKey", columns: "columns", isOpened: "isOpened", label: "label", lefticon: "lefticon" }, outputs: { isOpenedChange: "isOpenedChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkColumnSelect, isStandalone: true, selector: "bk-column-select", inputs: { searchable: "searchable", buttonClass: "buttonClass", cacheKey: "cacheKey", columns: "columns", isOpened: "isOpened", label: "label", lefticon: "lefticon", position: "position", autoFlip: "autoFlip" }, outputs: { isOpenedChange: "isOpenedChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkColumnSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n  <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"lefticon\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"label\" [buttonClass]=\"`text-black ${buttonClass}`\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n    @if(searchable){\r\n      <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n        [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n    }\r\n    <div class=\"column-select-options-list\">\r\n      @for (column of list; track column.columnName; let i = $index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox [label]=\"column.columnName\" id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\" labelClass=\"!text-left\"\r\n          (change)=\"onChangeColumnFilter()\">\r\n\r\n        </bk-checkbox>\r\n\r\n        <!-- <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{column.columnName}}\">\r\n          {{column.columnName}}\r\n        </label> -->\r\n\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"column-select-option-empty\">No records found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.column-select-options-list{display:flex;flex-direction:column;overflow-y:auto}@media (max-height: 700px){.column-select-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.column-select-options-list{max-height:166px}}@media (min-height: 901px){.column-select-options-list{max-height:210px}}\n"], dependencies: [{ 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: BkButton, selector: "bk-button", inputs: ["variant", "size", "shadow", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkInput, selector: "bk-input", inputs: ["id", "name", "mask", "dropSpecialCharacters", "autoComplete", "label", "placeholder", "hint", "required", "type", "value", "hasError", "showErrorIcon", "errorMessage", "disabled", "tabIndex", "readOnly", "autoCapitalize", "inputMode", "iconSrc", "iconAlt", "showIcon", "phone", "countryCode", "countryOptions", "iconOrientation", "password", "showPassword", "pattern", "max", "min", "step", "maxlength", "minlength"], outputs: ["input", "change", "focus", "blur", "clicked"] }] });
+        ], viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n  <bk-button #trigger [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"lefticon\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"label\" [buttonClass]=\"`text-black ${buttonClass}`\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute {{ panelPositionClass }} w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl z-[9999]\">\r\n    @if(searchable){\r\n      <div class=\"px-3 py-1\">\r\n        <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\" [size]=\"'sm'\"\r\n        [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n      </div>\r\n    }\r\n    <div class=\"column-select-options-list\">\r\n      @for (column of list; track column.columnName; let i = $index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-1 hover:bg-gray-100 cursor-pointer\">\r\n        <bk-checkbox [label]=\"column.columnName\" id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"  labelClass=\"!text-left\"\r\n          (change)=\"onChangeColumnFilter()\">\r\n\r\n        </bk-checkbox>\r\n\r\n        <!-- <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{column.columnName}}\">\r\n          {{column.columnName}}\r\n        </label> -->\r\n\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"column-select-option-empty\">No records found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.column-select-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:225px}\n"], dependencies: [{ 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: BkButton, selector: "bk-button", inputs: ["variant", "size", "shadow", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkInput, selector: "bk-input", inputs: ["id", "name", "mask", "dropSpecialCharacters", "autoComplete", "label", "placeholder", "hint", "required", "type", "size", "value", "hasError", "showErrorIcon", "errorMessage", "disabled", "tabIndex", "readOnly", "autoCapitalize", "inputMode", "iconSrc", "iconAlt", "showIcon", "phone", "countryCode", "countryOptions", "iconOrientation", "password", "showPassword", "pattern", "max", "min", "step", "maxlength", "minlength"], outputs: ["input", "change", "focus", "blur", "clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, decorators: [{
             type: Component,
@@ -9256,7 +9339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkColumnSelect),
                             multi: true,
                         },
-                    ], template: "<div class=\"relative\">\r\n\r\n  <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"lefticon\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"label\" [buttonClass]=\"`text-black ${buttonClass}`\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n    @if(searchable){\r\n      <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n        [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n    }\r\n    <div class=\"column-select-options-list\">\r\n      @for (column of list; track column.columnName; let i = $index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox [label]=\"column.columnName\" id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\" labelClass=\"!text-left\"\r\n          (change)=\"onChangeColumnFilter()\">\r\n\r\n        </bk-checkbox>\r\n\r\n        <!-- <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{column.columnName}}\">\r\n          {{column.columnName}}\r\n        </label> -->\r\n\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"column-select-option-empty\">No records found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.column-select-options-list{display:flex;flex-direction:column;overflow-y:auto}@media (max-height: 700px){.column-select-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.column-select-options-list{max-height:166px}}@media (min-height: 901px){.column-select-options-list{max-height:210px}}\n"] }]
+                    ], template: "<div class=\"relative\">\r\n\r\n  <bk-button #trigger [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"lefticon\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"label\" [buttonClass]=\"`text-black ${buttonClass}`\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute {{ panelPositionClass }} w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl z-[9999]\">\r\n    @if(searchable){\r\n      <div class=\"px-3 py-1\">\r\n        <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\" [size]=\"'sm'\"\r\n        [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n      </div>\r\n    }\r\n    <div class=\"column-select-options-list\">\r\n      @for (column of list; track column.columnName; let i = $index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-1 hover:bg-gray-100 cursor-pointer\">\r\n        <bk-checkbox [label]=\"column.columnName\" id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"  labelClass=\"!text-left\"\r\n          (change)=\"onChangeColumnFilter()\">\r\n\r\n        </bk-checkbox>\r\n\r\n        <!-- <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{column.columnName}}\">\r\n          {{column.columnName}}\r\n        </label> -->\r\n\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"column-select-option-empty\">No records found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.column-select-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:225px}\n"] }]
         }], ctorParameters: () => [{ type: BkColumnFilterService }], propDecorators: { searchable: [{
                 type: Input
             }], buttonClass: [{
@@ -9271,11 +9354,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], lefticon: [{
                 type: Input
+            }], position: [{
+                type: Input
+            }], autoFlip: [{
+                type: Input
             }], isOpenedChange: [{
                 type: Output
             }], formBoxRef: [{
                 type: ViewChild,
                 args: ['formBox']
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['trigger', { read: ElementRef }]
             }], onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -9893,8 +9983,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  *   open/closed.
  * - Submenus render inline (accordion) or as pop-ups, opened by hover or click.
  *   Pop-ups adapt to the orientation: they drop *below* a horizontal top-level
- *   item and fly out to the side for vertical menus / deeper levels, flipping
- *   whenever the preferred side has no room.
+ *   item and fly out to the side for vertical menus / deeper levels. Side
+ *   fly-outs flip when the preferred side has no room; menubar drop-downs never
+ *   flip — they stay under their trigger and scroll instead.
  */
 class BkMenu {
     host;
@@ -9909,12 +10000,27 @@ class BkMenu {
     trigger = 'hover';
     /** `compact` shrinks the type, padding and icons for dense layouts. */
     size = 'default';
+    /** Fallback grace period for the pointer to cross the gap into a fly-out. */
+    static HOVER_CLOSE_DELAY_MS = 400;
+    /**
+     * Hover mode only: how long (ms) a fly-out survives after the pointer leaves,
+     * giving it time to cross the gap into the panel. Raise it for menus whose
+     * fly-outs sit further from their trigger, or for touch-ish pointers.
+     */
+    hoverCloseDelay = BkMenu.HOVER_CLOSE_DELAY_MS;
     /**
      * Keep only one submenu open per level: opening a parent collapses its
      * siblings (and their descendants) so the menu stays compact. Pop-up mode
      * always behaves this way; this input adds it to inline (accordion) mode.
      */
     singleOpen = false;
+    /**
+     * Tints an inline (accordion) submenu's whole block — title + rows — with
+     * the lightest gray token. Off by default. Pop-up submenus don't offer
+     * this: their padding/insets are different, and the panel's own border
+     * already sets it apart from the page.
+     */
+    submenuBackground = false;
     /** Id of the currently selected leaf item. Two-way bindable. */
     activeItemId = '';
     /** Tint item icons: dark by default, white on the active (dark) row. */
@@ -9929,7 +10035,7 @@ class BkMenu {
     itemClick = new EventEmitter();
     /** Ids of currently expanded/opened parent nodes. */
     openIds = new Set();
-    /** Viewport coordinates for each open fixed-position fly-out, keyed by id. */
+    /** Viewport box for each open fixed-position fly-out, keyed by id. */
     popupPos = new Map();
     /** Side each open fly-out resolved to — drives the chevron and hover bridge. */
     popupSide = new Map();
@@ -9939,12 +10045,73 @@ class BkMenu {
      * position never flashes on the wrong side.
      */
     measuredIds = new Set();
-    /** Grace period for the pointer to cross the gap into a fly-out. */
-    static HOVER_CLOSE_DELAY_MS = 200;
+    /** Floor for a fly-out's height cap, so a trigger near the bottom edge still
+     *  gets a usable (scrollable) panel rather than a sliver. */
+    static MIN_POPUP_H = 120;
+    /**
+     * Ceiling for a fly-out's height — automatic, not a consumer input. Without
+     * one, a popup with many items grows to fill nearly the whole viewport just
+     * because the room is there. Same three-tier breakpoints bk-select uses for
+     * its options list, so a "large" panel reads the same across the design
+     * system regardless of which component renders it.
+     */
+    static popupHeightCeiling() {
+        const vh = window.innerHeight;
+        if (vh <= 700)
+            return 125;
+        if (vh <= 900)
+            return 166;
+        return 210;
+    }
     closeTimer = null;
     constructor(host) {
         this.host = host;
     }
+    /**
+     * Inline mode: whenever the active leaf is (re)set — including the very
+     * first binding, so a deep link or a page refresh lands with the section
+     * already open — expand every ancestor on its path. Pop-up fly-outs are
+     * driven by hover/click, not by which leaf is active, so this is skipped
+     * in `popup` mode.
+     */
+    ngOnChanges(changes) {
+        if (this.isPopup)
+            return;
+        if (changes['activeItemId'] || changes['items']) {
+            this.expandAncestorsOfActive();
+        }
+    }
+    expandAncestorsOfActive() {
+        if (!this.activeItemId)
+            return;
+        const chain = this.findAncestorChain(this.items, this.activeItemId);
+        if (!chain)
+            return;
+        let siblings = this.items;
+        for (const id of chain) {
+            if (this.singleOpen) {
+                for (const sibling of siblings) {
+                    if (sibling.id !== id)
+                        this.closeBranch(sibling);
+                }
+            }
+            this.openIds.add(id);
+            siblings = siblings.find(item => item.id === id)?.children ?? [];
+        }
+    }
+    /** Ids of every ancestor leading to `targetId` (root-first), `[]` if it's top-level, or `null` if not found. */
+    findAncestorChain(items, targetId) {
+        for (const item of items) {
+            if (item.id === targetId)
+                return [];
+            if (item.children?.length) {
+                const nested = this.findAncestorChain(item.children, targetId);
+                if (nested)
+                    return [item.id, ...nested];
+            }
+        }
+        return null;
+    }
     get isVertical() { return this.orientation === 'vertical'; }
     get isPopup() { return this.submenuMode === 'popup'; }
     get isCompact() { return this.size === 'compact'; }
@@ -9962,6 +10129,27 @@ class BkMenu {
     popupLeft(item) {
         return this.isPopup ? (this.popupPos.get(item.id)?.left ?? null) : null;
     }
+    // Size caps for an open fly-out. Width keeps the CSS cap as the upper bound and
+    // only tightens it when the viewport is narrower; height is whatever room is
+    // left below/beside the trigger, past which the panel scrolls.
+    popupMaxWidth(item) {
+        const box = this.isPopup ? this.popupPos.get(item.id) : null;
+        return box ? `min(var(--menu-popup-max-w), ${box.maxW}px)` : null;
+    }
+    popupMaxHeight(item) {
+        const box = this.isPopup ? this.popupPos.get(item.id) : null;
+        return box ? `${box.maxH}px` : null;
+    }
+    // Labels are capped by the panel width and ellipsised; a tooltip would be noise
+    // on the ones that fit, so it is attached on hover, only when actually clipped.
+    onLabelEnter(event) {
+        const el = event.currentTarget;
+        const text = (el.textContent ?? '').trim();
+        if (el.scrollWidth > el.clientWidth + 1)
+            el.setAttribute('title', text);
+        else
+            el.removeAttribute('title');
+    }
     /** Resolved side of an open fly-out, or null before it has been placed. */
     submenuSide(item) {
         return this.isPopup ? (this.popupSide.get(item.id) ?? null) : null;
@@ -9981,6 +10169,15 @@ class BkMenu {
     hasChildren(item) {
         return !!item.children && item.children.length > 0;
     }
+    // Whether the item at `index` opens a new `groupLabel` section: it has one,
+    // and it differs from the sibling right before it (the first item always
+    // starts a section, so the very first group gets a heading but no divider).
+    isGroupStart(items, index) {
+        const item = items[index];
+        if (!item.groupLabel)
+            return false;
+        return index === 0 || items[index - 1].groupLabel !== item.groupLabel;
+    }
     isOpen(item) {
         return this.openIds.has(item.id);
     }
@@ -10076,7 +10273,7 @@ class BkMenu {
         this.closeTimer = setTimeout(() => {
             this.closeTimer = null;
             this.closeBranch(item);
-        }, BkMenu.HOVER_CLOSE_DELAY_MS);
+        }, Math.max(0, this.hoverCloseDelay));
     }
     cancelPendingClose() {
         if (this.closeTimer === null)
@@ -10127,24 +10324,20 @@ class BkMenu {
         const pad = 8;
         const vw = window.innerWidth;
         const vh = window.innerHeight;
-        const w = size?.w ?? 220;
+        const maxW = vw - pad * 2;
+        const w = Math.min(size?.w ?? 220, maxW);
         const h = size?.h ?? 0;
         if (prefer === 'down' || prefer === 'up') {
-            let side = 'down';
-            let top = rect.bottom + gap;
-            if (h && top + h > vh - pad) {
-                const above = rect.top - gap - h;
-                if (above >= pad) {
-                    top = above;
-                    side = 'up';
-                }
-                else
-                    top = Math.max(pad, vh - pad - h);
-            }
-            let left = rect.left;
-            if (left + w > vw - pad)
-                left = rect.right - w; // right-align under the trigger
-            return { pos: { top, left: this.clamp(left, pad, vw - pad - w) }, side };
+            // Menubar drop-down: it always drops *down*, left-aligned to its trigger.
+            // No flipping here — a top-level item is at the top of the page, so both
+            // flips (up, and right-aligning) only ever tore the panel away from the
+            // button it belongs to. Overflow is absorbed by clamping into the viewport
+            // and scrolling inside the panel instead.
+            const top = rect.bottom + gap;
+            const left = this.clamp(rect.left, pad, vw - pad - w);
+            const room = Math.max(BkMenu.MIN_POPUP_H, vh - pad - top);
+            const maxH = Math.min(room, BkMenu.popupHeightCeiling());
+            return { pos: { top, left, maxW, maxH }, side: 'down' };
         }
         // Sideways: take the preferred side if the panel fits, else the other one —
         // and if it fits on neither, the side with more room to be clamped into.
@@ -10161,7 +10354,9 @@ class BkMenu {
         let top = rect.top;
         if (h && top + h > vh - pad)
             top = Math.max(pad, vh - pad - h);
-        return { pos: { top, left: this.clamp(left, pad, vw - pad - w) }, side };
+        const room = Math.max(BkMenu.MIN_POPUP_H, vh - pad - top);
+        const maxH = Math.min(room, BkMenu.popupHeightCeiling());
+        return { pos: { top, left: this.clamp(left, pad, vw - pad - w), maxW, maxH }, side };
     }
     clamp(value, min, max) {
         return Math.min(Math.max(value, min), Math.max(min, max));
@@ -10206,11 +10401,11 @@ 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", singleOpen: "singleOpen", activeItemId: "activeItemId", tintIcons: "tintIcons", maxHeight: "maxHeight" }, outputs: { activeItemIdChange: "activeItemIdChange", itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" } }, 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) {\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\">{{ 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--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          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              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-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-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-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-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-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;}.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 border-b border-[var(--menu-border)] mb-1;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-pad-x) - var(--menu-title-outdent) + var(--menu-popup-pad));padding-right:calc(var(--menu-pad-x) + var(--menu-popup-pad))}.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--popup{@apply fixed z-[1000] max-h-[100vh-16px] overflow-y-auto bg-[var(--menu-bg)] border border-[var(--menu-border)] rounded-xl shadow-[var(--menu-shadow)] hidden;padding: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", 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,
-            args: [{ selector: 'bk-menu', standalone: true, imports: [CommonModule], 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) {\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\">{{ 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--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          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              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-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-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-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-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-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;}.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 border-b border-[var(--menu-border)] mb-1;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-pad-x) - var(--menu-title-outdent) + var(--menu-popup-pad));padding-right:calc(var(--menu-pad-x) + var(--menu-popup-pad))}.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--popup{@apply fixed z-[1000] max-h-[100vh-16px] overflow-y-auto bg-[var(--menu-bg)] border border-[var(--menu-border)] rounded-xl shadow-[var(--menu-shadow)] hidden;padding: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"] }]
+            args: [{ selector: 'bk-menu', standalone: true, imports: [CommonModule], 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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
                 type: Input
             }], orientation: [{
@@ -10221,8 +10416,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], hoverCloseDelay: [{
+                type: Input
             }], singleOpen: [{
                 type: Input
+            }], submenuBackground: [{
+                type: Input
             }], activeItemId: [{
                 type: Input
             }], tintIcons: [{
@@ -10720,6 +10919,1581 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Types for bk-table.
+ *
+ * The control is template-driven: consumers write their own <thead>/<tbody>
+ * markup and the component supplies behaviour. These types describe the
+ * contracts passed *into* that markup — sorting, filtering and query state.
+ */
+function normalizeBkTableSize(size) {
+    if (size === 'middle')
+        return 'md';
+    if (size === 'small')
+        return 'sm';
+    return size;
+}
+function flattenBkTreeData(root, childrenKey = 'children', isExpanded = (n) => !!n['expand']) {
+    const out = [];
+    const walk = (nodes, level, parent) => {
+        for (const node of nodes) {
+            out.push({ data: node, level, parent });
+            const children = node[childrenKey];
+            if (children?.length && isExpanded(node)) {
+                walk(children, level + 1, node);
+            }
+        }
+    };
+    walk(root, 0);
+    return out;
+}
+/**
+ * Whether `node` sits anywhere inside `ancestor`'s subtree.
+ *
+ * The guard a tree drag cannot do without: dropping a node into its own
+ * descendant detaches that whole branch from the tree, and nothing afterwards
+ * can find it again.
+ */
+function containsBkTreeNode(ancestor, node, childrenKey = 'children') {
+    const children = ancestor[childrenKey] ?? [];
+    for (const child of children) {
+        if (child === node || containsBkTreeNode(child, node, childrenKey))
+            return true;
+    }
+    return false;
+}
+/**
+ * Applies a resolved tree drop to the tree behind the rows.
+ *
+ * `before` / `after` insert into the target's sibling list; `inside` makes the
+ * dragged node the target's **first** child — first, not last, so the row
+ * appears directly beneath the row it was dropped on rather than teleporting
+ * to the bottom of a long branch.
+ *
+ * A node's subtree travels with it, because it is nested inside it. Dropping a
+ * node into its own descendant is refused: that move would detach the branch
+ * from the tree with nothing left pointing at it.
+ *
+ * Mutates `root` in place and reports whether anything moved; re-emit your
+ * signal with a fresh array identity when it returns true.
+ */
+function moveBkTreeNode(root, dragged, target, position, childrenKey = 'children') {
+    if (!dragged || !target || dragged.data === target.data)
+        return false;
+    if (containsBkTreeNode(dragged.data, target.data, childrenKey))
+        return false;
+    const fromList = dragged.parent ? (dragged.parent[childrenKey] ?? []) : root;
+    const fromIndex = fromList.indexOf(dragged.data);
+    if (fromIndex < 0)
+        return false;
+    fromList.splice(fromIndex, 1);
+    if (position === 'inside') {
+        const children = target.data[childrenKey] ?? [];
+        children.unshift(dragged.data);
+        target.data[childrenKey] = children;
+        return true;
+    }
+    const toList = target.parent ? (target.parent[childrenKey] ?? []) : root;
+    // Located after the removal, so an index in the same list already accounts
+    // for the gap the dragged node left behind.
+    const toIndex = toList.indexOf(target.data);
+    if (toIndex < 0) {
+        fromList.splice(fromIndex, 0, dragged.data);
+        return false;
+    }
+    toList.splice(position === 'after' ? toIndex + 1 : toIndex, 0, dragged.data);
+    return true;
+}
+
+/** Marks projected content as the table's title bar. */
+class BkTableTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTableTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkTableTitle, isStandalone: true, selector: "[bkTableTitle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTableTitle, decorators: [{
+            type: Directive,
+            args: [{ selector: '[bkTableTitle]', standalone: true }]
+        }] });
+/** Marks projected content as the table's footer bar. */
+class BkTableFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTableFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkTableFooter, isStandalone: true, selector: "[bkTableFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTableFooter, decorators: [{
+            type: Directive,
+            args: [{ selector: '[bkTableFooter]', standalone: true }]
+        }] });
+/**
+ * Row template for virtual scroll mode.
+ *
+ * Virtual scrolling can't use a projected <tbody> — the rows have to be created
+ * and destroyed by the viewport as it scrolls, so they must come from a
+ * template the table instantiates itself:
+ *
+ *   <tbody>
+ *     <ng-template bkVirtualScroll let-row let-i="index">
+ *       <tr>…</tr>
+ *     </ng-template>
+ *   </tbody>
+ */
+class BkVirtualScroll {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkVirtualScroll, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkVirtualScroll, isStandalone: true, selector: "[bkVirtualScroll]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkVirtualScroll, decorators: [{
+            type: Directive,
+            args: [{ selector: '[bkVirtualScroll]', standalone: true }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+/**
+ * Template-driven table.
+ *
+ * Unlike `bk-grid`, this component renders none of your cells — you write the
+ * `<thead>`/`<tbody>` markup and it supplies behaviour: sort and filter state,
+ * pagination, sticky header and columns, virtual scrolling. That's what makes
+ * colspan, nested tables, editable cells and grouped headers possible at all;
+ * none of them can be expressed as a column config object.
+ *
+ *   <bk-table #t [data]="rows" [bordered]="true" size="middle">
+ *     <thead>
+ *       <tr><th bk-th [sortFn]="byName">Name</th></tr>
+ *     </thead>
+ *     <tbody>
+ *       @for (row of t.renderData(); track row.id) {
+ *         <tr><td bk-td>{{ row.name }}</td></tr>
+ *       }
+ *     </tbody>
+ *   </bk-table>
+ *
+ * Client vs server work is decided per column, exactly like ng-zorro: pass a
+ * comparator to `sortFn` and the table sorts; pass `true` and it only reports
+ * the change through `queryParams` for you to handle.
+ */
+class BkTable {
+    host = inject((ElementRef));
+    zone = inject(NgZone);
+    constructor() {
+        // renderData is a computed, so the only way to push it out as an event is
+        // to watch it. Consumers use this to keep a select-all checkbox or a
+        // summary row in step with the rows actually on screen.
+        effect(() => this.currentPageDataChange.emit(this.renderData()));
+        // A path that failed shouldn't stay hidden forever if the consumer swaps
+        // it for a different one — only the path that actually 404'd should be
+        // treated as broken.
+        effect(() => {
+            this.noResultImage();
+            this.emptyImageFailed.set(false);
+        });
+        // Freeze the column proportions once there are real rows to measure. Rows
+        // arriving asynchronously are the common case, and widths measured against
+        // an empty table would be frozen wrong forever.
+        effect(() => {
+            const columnCount = this.columns().length;
+            // A column appearing or disappearing invalidates the frozen widths: they
+            // no longer sum to the table, and the newcomer takes whatever is left
+            // over. Drop them and let the next run measure the new set.
+            if (this.layoutFixed() && columnCount !== this.frozenColumnCount) {
+                this.remeasureColumns();
+                return;
+            }
+            if (this.layoutFixed() || this.freezeScheduled)
+                return;
+            if (!this.stableColumnWidth() || this.isVirtual())
+                return;
+            if (this.renderData().length === 0)
+                return;
+            // Measuring inside the effect would read a layout that hasn't happened
+            // yet — these rows are only being rendered as a result of it. Columns
+            // also register one at a time, so this run is rarely the last one.
+            this.freezeScheduled = true;
+            setTimeout(() => {
+                this.freezeScheduled = false;
+                this.freezeColumnWidths();
+            });
+        });
+    }
+    /* ================= Data ================= */
+    /** Full row set. In server mode, only the current page's rows. */
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /* ================= Appearance ================= */
+    /** Roomiest first: `lg`, `default`, `md`, `sm`. `sm` suits modals. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** One class rather than a binding per size, and it resolves the aliases. */
+    sizeClass = computed(() => `bk-table-${normalizeBkTableSize(this.size())}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : []));
+    bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : []));
+    /** Convenience alternative to projecting `[bkTableTitle]`. */
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /** Convenience alternative to projecting `[bkTableFooter]`. */
+    footer = input('', ...(ngDevMode ? [{ debugName: "footer" }] : []));
+    /**
+     * `x` is a min-width that forces horizontal scrolling instead of column
+     * collapse; `y` caps the body height and pins the header. Fixed columns
+     * (`th[bk-th][left]`) need `x` set to have anything to scroll over.
+     */
+    scroll = input({}, ...(ngDevMode ? [{ debugName: "scroll" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    /**
+     * `loading` always suppresses the empty state — a fetch in flight isn't
+     * "no data," and shouldn't flash that message just because the previous
+     * page's rows haven't arrived yet. This is only about the *spinner*
+     * overlay `loading` draws on top of the table. Turn it off when a
+     * consumer already shows its own loading indicator elsewhere and doesn't
+     * want a second one competing with it — `loading` keeps doing its other
+     * job either way.
+     */
+    showLoadingOverlay = input(true, ...(ngDevMode ? [{ debugName: "showLoadingOverlay" }] : []));
+    /** Shown when there are no rows to render. */
+    noResultText = input('Data may be empty, or try adjusting your filter.', ...(ngDevMode ? [{ debugName: "noResultText" }] : []));
+    noResultImage = input('./assets/media/logos/no-data-found.jpg', ...(ngDevMode ? [{ debugName: "noResultImage" }] : []));
+    /**
+     * Set once `noResultImage()` fails to load, so the template can drop the
+     * `<img>` instead of leaving the browser's broken-image glyph sitting next
+     * to the empty-state text — bk-grid's empty state does exactly that on any
+     * deployment where the asset path doesn't resolve. The text alone still
+     * communicates "no data"; a broken icon just looks like the component is
+     * broken.
+     */
+    emptyImageFailed = signal(false, ...(ngDevMode ? [{ debugName: "emptyImageFailed" }] : []));
+    onEmptyImageError() {
+        this.emptyImageFailed.set(true);
+    }
+    /* ================= Pagination ================= */
+    showPagination = input(true, ...(ngDevMode ? [{ debugName: "showPagination" }] : []));
+    /**
+     * When true the table slices `data` itself. Turn it off for server-side
+     * paging and feed `total` instead.
+     */
+    frontPagination = input(true, ...(ngDevMode ? [{ debugName: "frontPagination" }] : []));
+    pageIndex = model(1, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    /**
+     * Defaults to 25 because that is the smallest size `bk-pagination` offers
+     * (25/50/75/100). A value outside that list matches no option and leaves its
+     * "rows per page" select rendering blank.
+     */
+    pageSize = model(25, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    /** Row count for server mode. Ignored when `frontPagination` is on. */
+    total = input(0, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    /* ================= Virtual scroll ================= */
+    /**
+     * Row height in px. Required for virtual scroll — the viewport can't measure
+     * rows it hasn't created. Rows must be uniform height, which is why virtual
+     * scroll does not combine with rowspan, tree data or expandable rows.
+     */
+    virtualItemSize = input(0, ...(ngDevMode ? [{ debugName: "virtualItemSize" }] : []));
+    virtualTrackBy = input((index) => index, ...(ngDevMode ? [{ debugName: "virtualTrackBy" }] : []));
+    viewport;
+    /**
+     * Scrolls the virtual viewport so the row at `index` (into `renderData()`)
+     * lands at the top.
+     *
+     * Indexes are 0-based against the rendered rows, not the raw `data` input —
+     * sorting/filtering already reduced it to what's actually on screen, and
+     * jumping against the raw array would land on the wrong row the moment
+     * either is active.
+     */
+    scrollToIndex(index, behavior = 'smooth') {
+        if (!this.isVirtual() || !this.viewport)
+            return;
+        if (index < 0 || index >= this.renderData().length)
+            return;
+        this.viewport.scrollToIndex(index, behavior);
+    }
+    /* ================= Column sizing ================= */
+    /**
+     * Hold the columns still once they have been measured.
+     *
+     * A table left on `table-layout: auto` sizes its columns from whatever
+     * content is currently on screen, so sorting, filtering or paging — none of
+     * which change the columns — visibly resizes them. Freezing the proportions
+     * after the first real layout keeps the header from jumping under the
+     * pointer that just clicked it.
+     *
+     * Turn it off if the content genuinely should drive the widths on every
+     * change. Columns with an explicit `width` are never overwritten either way.
+     */
+    stableColumnWidth = input(true, ...(ngDevMode ? [{ debugName: "stableColumnWidth" }] : []));
+    /* ================= Outputs ================= */
+    /** Everything the server needs to reproduce the current view. */
+    queryParams = output();
+    /** The rows actually rendered, after filter/sort/paging. */
+    currentPageDataChange = output();
+    /* ================= Projected slots ================= */
+    titleContent;
+    footerContent;
+    virtualScroll;
+    /* ================= Column registry ================= */
+    /**
+     * Registered `th[bk-th]` instances. Sorting and filtering are driven by
+     * column state, so the pipeline below reads through this signal — replacing
+     * the array (rather than mutating it) is what makes the computeds re-run.
+     */
+    columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    registerColumn(column) {
+        this.columns.update((list) => [...list, column]);
+    }
+    unregisterColumn(column) {
+        this.columns.update((list) => list.filter((c) => c !== column));
+    }
+    /**
+     * Re-emits query params. Columns call this when their sort or filter
+     * changes; the data pipeline reacts on its own through signals, so this
+     * exists purely to notify the consumer.
+     */
+    onColumnStateChange() {
+        // A filter narrowing the row set can strand the user past the last page.
+        if (this.frontPagination() && this.pageIndex() !== 1) {
+            this.pageIndex.set(1);
+        }
+        this.emitQueryParams();
+    }
+    /* ================= Data pipeline ================= */
+    /**
+     * Rows surviving every column's client-side filter. Columns whose filter is
+     * handled server-side contribute nothing here.
+     */
+    filtered = computed(() => {
+        const active = this.columns().filter((c) => c.clientFilterFn && c.filterValue().length > 0);
+        if (!active.length)
+            return this.data();
+        return this.data().filter((row) => active.every((c) => c.clientFilterFn(c.filterValue(), row)));
+    }, ...(ngDevMode ? [{ debugName: "filtered" }] : []));
+    /**
+     * Filtered rows in sort order.
+     *
+     * Multi-sort runs columns by descending `sortPriority`, and comparators are
+     * applied in that order until one breaks the tie — so a priority-2 column
+     * only orders rows a priority-3 column considers equal.
+     */
+    sorted = computed(() => {
+        const active = this.columns()
+            .filter((c) => c.clientSortFn && c.sortOrder() !== null)
+            .sort((a, b) => (b.sortPriority ?? 0) - (a.sortPriority ?? 0));
+        if (!active.length)
+            return this.filtered();
+        // Copy first: sort mutates, and the input array belongs to the consumer.
+        return [...this.filtered()].sort((rowA, rowB) => {
+            for (const column of active) {
+                const order = column.sortOrder();
+                const result = column.clientSortFn(rowA, rowB, order);
+                if (result !== 0)
+                    return order === 'descend' ? -result : result;
+            }
+            return 0;
+        });
+    }, ...(ngDevMode ? [{ debugName: "sorted" }] : []));
+    /** Row count before paging — what the pager needs to size itself. */
+    totalCount = computed(() => this.frontPagination() ? this.sorted().length : this.total(), ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
+    /**
+     * The rows to render. Iterate this in your `<tbody>`, not the raw input:
+     * it is the input after filtering, sorting and paging.
+     */
+    renderData = computed(() => {
+        // Virtual scroll windows the DOM itself — slicing to a page on top of that
+        // would cap the viewport at `pageSize` rows and defeat the point of it.
+        if (!this.frontPagination() || this.isVirtual())
+            return this.sorted();
+        const size = this.pageSize();
+        const start = (this.pageIndex() - 1) * size;
+        return this.sorted().slice(start, start + size);
+    }, ...(ngDevMode ? [{ debugName: "renderData" }] : []));
+    isVirtual = computed(() => this.virtualItemSize() > 0, ...(ngDevMode ? [{ debugName: "isVirtual" }] : []));
+    /**
+     * Column widths for the virtual-scroll `<colgroup>`.
+     *
+     * Virtual scroll splits the header and body into two tables, so they can no
+     * longer size each other — a shared colgroup is what keeps their columns
+     * lined up, and it needs a declared width per column to do it.
+     */
+    colWidths = computed(() => this.columns().map((c) => c.width), ...(ngDevMode ? [{ debugName: "colWidths" }] : []));
+    /* ================= Derived view state ================= */
+    hasTitle = computed(() => !!this.title() || !!this.titleContent, ...(ngDevMode ? [{ debugName: "hasTitle" }] : []));
+    hasFooter = computed(() => !!this.footer() || !!this.footerContent, ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
+    isEmpty = computed(() => !this.loading() && this.renderData().length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+    /** Floor for the empty state's home: `.bk-table-empty` is absolutely
+     *  positioned against this container (see table.css), so without either
+     *  `scroll.y` or this fallback it'd have a ~0px-tall box to center in
+     *  (just the header row, since an empty `<tbody>` contributes nothing)
+     *  and get clipped by `overflow-auto`. */
+    static EMPTY_STATE_MIN_HEIGHT = '350px';
+    containerStyle = computed(() => {
+        const { y, fill } = this.scroll();
+        if (!y) {
+            return this.isEmpty() ? { 'min-height': BkTable.EMPTY_STATE_MIN_HEIGHT } : {};
+        }
+        return { [fill ? 'height' : 'max-height']: y, 'overflow-y': 'auto' };
+    }, ...(ngDevMode ? [{ debugName: "containerStyle" }] : []));
+    /** Set once the columns have been measured and pinned. */
+    layoutFixed = signal(false, ...(ngDevMode ? [{ debugName: "layoutFixed" }] : []));
+    tableStyle = computed(() => {
+        const { x } = this.scroll();
+        const style = {};
+        // `min-width` alone regresses the table's floor from "100% of container"
+        // (the `.bk-table` class's `min-w-full`) down to just `x`, because an
+        // inline style always wins over a class rule for the same property — so
+        // without an explicit `width` here too, a container wider than `x` left
+        // the table (and every column sized off it) narrower than its own frame.
+        if (x) {
+            style['width'] = '100%';
+            style['min-width'] = x;
+        }
+        // `fixed` is what actually stops content from resizing columns; a declared
+        // scroll width implies it too, since the point of one is a stable grid.
+        if (x || this.layoutFixed())
+            style['table-layout'] = 'fixed';
+        return style;
+    }, ...(ngDevMode ? [{ debugName: "tableStyle" }] : []));
+    /* ================= Layout measurement ================= */
+    virtualHead;
+    headResizeObserver;
+    layoutResizeObserver;
+    ngAfterViewInit() {
+        this.observeHeaderHeight();
+        this.observeTableVisibility();
+    }
+    ngOnDestroy() {
+        this.headResizeObserver?.disconnect();
+        this.layoutResizeObserver?.disconnect();
+    }
+    /**
+     * Publishes the first header row's height as `--bk-thead-row-1`.
+     *
+     * A grouped header's second row has to stick *below* the first, which means
+     * knowing how tall the first is — and that changes with density, with font
+     * loading, and with any header that wraps. Measuring it is the only offset
+     * that stays correct; a constant is right for exactly one configuration.
+     */
+    observeHeaderHeight() {
+        const thead = this.host.nativeElement.querySelector('thead');
+        if (!thead)
+            return;
+        const apply = () => {
+            const firstRow = thead.querySelector('tr');
+            if (!firstRow)
+                return;
+            this.host.nativeElement.style.setProperty('--bk-thead-row-1', `${firstRow.offsetHeight}px`);
+        };
+        apply();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.zone.runOutsideAngular(() => {
+                this.headResizeObserver = new ResizeObserver(apply);
+                this.headResizeObserver.observe(thead);
+            });
+        }
+    }
+    /**
+     * Two unrelated jobs that both boil down to "re-check this whenever the
+     * table's or the container's box size changes," so one `ResizeObserver`
+     * watching both elements does them together.
+     *
+     * **Retries the column freeze.** A table that mounts inside a `[hidden]`
+     * ancestor — a collapsed `tr[bkExpand]` holding a nested `bk-table`, most
+     * commonly — measures 0 on its first freeze attempt, so
+     * `freezeColumnWidths()` correctly declines to pin widths it can't see
+     * (`if (!tableWidth) return;`). Nothing else ever asks it to try again: the
+     * constructor effect only reruns when one of its own signals changes, and
+     * none of them do just because the table became visible. Left alone, that
+     * table stays on `table-layout: auto` forever — and an auto-layout cell
+     * can't give a nested table's `min-width: 100%` a real number to resolve
+     * against, which is what leaves a nested `bk-table` stuck at its own
+     * shrink-to-fit width even after the row expands. Once `layoutFixed` is
+     * true the call is a no-op, so this can just stay connected for the
+     * table's life rather than tracking whether it still needs to be.
+     *
+     * **Tracks whether the rows fall short of the container.** See
+     * `updateUnderfilled`.
+     */
+    observeTableVisibility() {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const table = this.host.nativeElement.querySelector('table.bk-table');
+        const container = this.host.nativeElement.querySelector('.bk-table-container');
+        if (!table)
+            return;
+        this.zone.runOutsideAngular(() => {
+            this.layoutResizeObserver = new ResizeObserver(() => {
+                if (!this.layoutFixed() &&
+                    this.stableColumnWidth() &&
+                    !this.isVirtual() &&
+                    this.renderData().length > 0) {
+                    this.freezeColumnWidths();
+                }
+                this.updateUnderfilled(table, container);
+            });
+            this.layoutResizeObserver.observe(table);
+            if (container)
+                this.layoutResizeObserver.observe(container);
+        });
+    }
+    /**
+     * Marks the host when rows end well short of a reserved `scroll.y`
+     * (`fill`, most commonly) height, so `.bk-table-underfilled` in the
+     * stylesheet can close the real data off with a border instead of letting
+     * it trail into blank reserved space with nothing marking where it
+     * stopped. Left off whenever rows fill or overflow the container — the
+     * frame's own border (or the scroll cutoff) already closes those cases,
+     * and adding another border would double up against it.
+     */
+    updateUnderfilled(table, container) {
+        if (!container)
+            return;
+        const underfilled = table.offsetHeight < container.clientHeight;
+        this.host.nativeElement.classList.toggle('bk-table-underfilled', underfilled);
+    }
+    /**
+     * Pins the columns at the proportions auto layout arrived at.
+     *
+     * Widths are stored as percentages, not pixels: under `table-layout: fixed`
+     * a percentage resolves against the table, so the columns keep their
+     * relationship when the container resizes. Pixels would freeze the table at
+     * whatever width it happened to have when the rows first arrived.
+     *
+     * Only the first header row is written to — that is the row `table-layout:
+     * fixed` reads widths from. A grouped header's second row inherits its share
+     * of whatever the group above it was given.
+     */
+    freezeColumnWidths() {
+        const table = this.host.nativeElement.querySelector('table.bk-table');
+        const row = table?.tHead?.rows[0];
+        if (!table || !row?.cells.length)
+            return;
+        const tableWidth = table.offsetWidth;
+        if (!tableWidth)
+            return;
+        const cells = Array.from(row.cells);
+        // Read every width before writing any: the first write invalidates layout,
+        // so measuring and assigning in one pass would size each column against
+        // the columns already changed ahead of it.
+        const widths = cells.map((cell) => cell.offsetWidth);
+        cells.forEach((cell, index) => {
+            // A declared `width` is an instruction, not a measurement. Leave it.
+            if (cell.style.width)
+                return;
+            cell.style.width = `${((widths[index] / tableWidth) * 100).toFixed(4)}%`;
+            this.frozenCells.push(cell);
+        });
+        this.frozenColumnCount = this.columns().length;
+        this.layoutFixed.set(true);
+    }
+    /** The cells this component wrote a width to, so it can undo exactly those. */
+    frozenCells = [];
+    /** Column count the frozen widths were measured against. */
+    frozenColumnCount = -1;
+    /** Guards against stacking timeouts while columns are still registering. */
+    freezeScheduled = false;
+    /**
+     * Drops the frozen widths so the columns are measured again. Call it after
+     * replacing the dataset with one whose shape is different enough that the
+     * old proportions no longer suit it.
+     */
+    remeasureColumns() {
+        this.frozenCells.forEach((cell) => (cell.style.width = ''));
+        this.frozenCells = [];
+        this.frozenColumnCount = -1;
+        this.layoutFixed.set(false);
+    }
+    /**
+     * Keeps the detached virtual-scroll header aligned with the body it no
+     * longer shares a table with.
+     */
+    onViewportScroll(event) {
+        const head = this.virtualHead?.nativeElement;
+        if (!head)
+            return;
+        head.scrollLeft = event.target.scrollLeft;
+    }
+    /* ================= Pagination ================= */
+    onPageIndexChange(index) {
+        if (index === this.pageIndex())
+            return;
+        this.pageIndex.set(index);
+        this.emitQueryParams();
+    }
+    onPageSizeChange(size) {
+        if (size === this.pageSize())
+            return;
+        this.pageSize.set(size);
+        // Row 1 of the old page size is rarely row 1 of the new one; restarting is
+        // the only landing spot that is meaningful at any size.
+        this.pageIndex.set(1);
+        this.emitQueryParams();
+    }
+    /* ================= Reset ================= */
+    /** Clears every column's sort. Backs "reset sorters" in the demo. */
+    clearSort() {
+        this.columns().forEach((c) => c.clearSort());
+        this.emitQueryParams();
+    }
+    /** Clears every column's filter selection. */
+    clearFilter() {
+        this.columns().forEach((c) => c.clearFilter());
+        this.emitQueryParams();
+    }
+    /** Clears sorts and filters together and returns to the first page. */
+    reset() {
+        this.columns().forEach((c) => {
+            c.clearSort();
+            c.clearFilter();
+        });
+        this.pageIndex.set(1);
+        this.emitQueryParams();
+    }
+    /* ================= Query params ================= */
+    emitQueryParams() {
+        const columns = this.columns();
+        this.queryParams.emit({
+            pageIndex: this.pageIndex(),
+            pageSize: this.pageSize(),
+            sort: columns
+                .filter((c) => c.columnKey)
+                .map((c) => ({ key: c.columnKey, value: c.sortOrder() })),
+            filter: columns
+                .filter((c) => c.columnKey && c.filterValue().length)
+                .map((c) => ({ key: c.columnKey, value: c.filterValue() }))
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTable, isStandalone: true, selector: "bk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showLoadingOverlay: { classPropertyName: "showLoadingOverlay", publicName: "showLoadingOverlay", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, noResultImage: { classPropertyName: "noResultImage", publicName: "noResultImage", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, frontPagination: { classPropertyName: "frontPagination", publicName: "frontPagination", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, virtualItemSize: { classPropertyName: "virtualItemSize", publicName: "virtualItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualTrackBy: { classPropertyName: "virtualTrackBy", publicName: "virtualTrackBy", isSignal: true, isRequired: false, transformFunction: null }, stableColumnWidth: { classPropertyName: "stableColumnWidth", publicName: "stableColumnWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageIndex: "pageIndexChange", pageSize: "pageSizeChange", queryParams: "queryParams", currentPageDataChange: "currentPageDataChange" }, host: { classAttribute: "bk-table-host" }, queries: [{ propertyName: "titleContent", first: true, predicate: BkTableTitle, descendants: true }, { propertyName: "footerContent", first: true, predicate: BkTableFooter, descendants: true }, { propertyName: "virtualScroll", first: true, predicate: BkVirtualScroll, descendants: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "virtualHead", first: true, predicate: ["virtualHead"], descendants: true }], exportAs: ["bkTable"], ngImport: i0, template: "<!--\r\n  Projection slots live inside <ng-template> rather than directly in the\r\n  branches below. A given <ng-content> can only be declared once \u00E2\u20AC\u201D repeating\r\n  the same selector in both the virtual and normal branches would leave one of\r\n  them permanently empty. Wrapping each slot in a template declares it once and\r\n  lets an outlet place it wherever it is needed.\r\n-->\r\n<ng-template #headSlot><ng-content select=\"thead\"></ng-content></ng-template>\r\n<ng-template #bodySlot><ng-content select=\"tbody\"></ng-content></ng-template>\r\n<ng-template #footSlot><ng-content select=\"tfoot\"></ng-content></ng-template>\r\n\r\n<div\r\n  class=\"bk-table-wrapper\"\r\n  [class.bk-table-bordered]=\"bordered()\"\r\n  [ngClass]=\"sizeClass()\"\r\n>\r\n  <!--\r\n    The frame is one box, and it is the only box that draws an outline or a\r\n    corner. Radius on the header cells and border on the table (or on the title\r\n    bar) means two boxes describing the same corner from different places, and\r\n    they disagree the moment a title bar appears above the header. Everything\r\n    inside here draws separators only; `overflow: hidden` clips them to the curve.\r\n  -->\r\n  <div class=\"bk-table-frame\">\r\n    @if (hasTitle()) {\r\n      <div class=\"bk-table-title-bar\">\r\n        @if (title()) {\r\n          {{ title() }}\r\n        }\r\n        <ng-content select=\"[bkTableTitle]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"bk-table-container\" [ngStyle]=\"containerStyle()\">\r\n      @if (isVirtual() && virtualScroll) {\r\n        <!--\r\n          Header and body are two separate tables here, which they are not in any\r\n          other mode. The CDK viewport scrolls by translating its content wrapper,\r\n          and a transformed ancestor takes over as the containing block for\r\n          sticky descendants \u00E2\u20AC\u201D so a header inside the viewport gets dragged along\r\n          by the very transform it is supposed to stay still against. Lifting it\r\n          out is the only way it stays put.\r\n\r\n          The cost is that the two tables can no longer size each other, so a\r\n          shared <colgroup> holds their columns in alignment and the body's\r\n          horizontal scroll is mirrored onto the header by hand.\r\n        -->\r\n        <div #virtualHead class=\"bk-table-virtual-head\">\r\n          <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n            <colgroup>\r\n              @for (width of colWidths(); track $index) {\r\n                <col [style.width]=\"width\" />\r\n              }\r\n            </colgroup>\r\n            <ng-container [ngTemplateOutlet]=\"headSlot\"></ng-container>\r\n          </table>\r\n        </div>\r\n\r\n        <cdk-virtual-scroll-viewport\r\n          class=\"bk-table-viewport\"\r\n          [itemSize]=\"virtualItemSize()\"\r\n          [style.height]=\"scroll().y || '400px'\"\r\n          (scroll)=\"onViewportScroll($event)\"\r\n        >\r\n          <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n            <colgroup>\r\n              @for (width of colWidths(); track $index) {\r\n                <col [style.width]=\"width\" />\r\n              }\r\n            </colgroup>\r\n            <tbody>\r\n              <ng-container\r\n                *cdkVirtualFor=\"\r\n                  let row of renderData();\r\n                  let i = index;\r\n                  trackBy: virtualTrackBy()\r\n                \"\r\n                [ngTemplateOutlet]=\"virtualScroll.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n              ></ng-container>\r\n            </tbody>\r\n            <ng-container [ngTemplateOutlet]=\"footSlot\"></ng-container>\r\n          </table>\r\n        </cdk-virtual-scroll-viewport>\r\n      } @else {\r\n        <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n          <ng-container [ngTemplateOutlet]=\"headSlot\"></ng-container>\r\n          <ng-container [ngTemplateOutlet]=\"bodySlot\"></ng-container>\r\n          <ng-container [ngTemplateOutlet]=\"footSlot\"></ng-container>\r\n        </table>\r\n      }\r\n\r\n      @if (loading() && showLoadingOverlay()) {\r\n        <div class=\"bk-table-loading\">\r\n          <span class=\"bk-table-spinner\"></span>\r\n        </div>\r\n      }\r\n\r\n      @if (isEmpty()) {\r\n        <div class=\"bk-table-empty\">\r\n          @if (!emptyImageFailed()) {\r\n            <img\r\n              [src]=\"noResultImage()\"\r\n              class=\"bk-table-empty-img\"\r\n              alt=\"No data found\"\r\n              (error)=\"onEmptyImageError()\"\r\n            />\r\n          }\r\n          <span class=\"bk-table-empty-text\">{{ noResultText() }}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (hasFooter()) {\r\n      <div class=\"bk-table-footer-bar\">\r\n        @if (footer()) {\r\n          {{ footer() }}\r\n        }\r\n        <ng-content select=\"[bkTableFooter]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <!-- Inside the frame: the pager belongs to the table it drives, and the\r\n         frame's bottom edge is what closes the card around both.\r\n\r\n         `!isEmpty()`, not `totalCount() > 0`: in server mode `totalCount()`\r\n         is just the `total` input, which can say more rows exist than are\r\n         actually on screen right now (a search with no matches but a stale\r\n         total, a page past the end) \u2014 the pager has nothing to page through\r\n         either way, so it goes by what's actually rendered. -->\r\n    @if (showPagination() && !isEmpty()) {\r\n      <div class=\"bk-table-pagination\">\r\n        <bk-pagination\r\n          [total]=\"totalCount()\"\r\n          [pageSize]=\"pageSize()\"\r\n          [activePage]=\"pageIndex()\"\r\n          (pageChanged)=\"onPageIndexChange($event)\"\r\n          (changePageSize)=\"onPageSizeChange($event)\"\r\n        ></bk-pagination>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".bk-table-host{display:block}.bk-table-wrapper{@apply w-full;}.bk-table-frame{border:1px solid #ebedf3;border-radius:.75rem;overflow:hidden}.bk-table-title-bar,.bk-table-footer-bar{@apply text-[13px] font-semibold text-[#15191E] bg-[#F9FAFA] px-4 py-2.5;}.bk-table-title-bar{border-bottom:1px solid #ebedf3}.bk-table-footer-bar{border-top:1px solid #ebedf3}.bk-table-container{@apply relative overflow-auto;}.bk-table{@apply min-w-full text-left;border-collapse:separate;border-spacing:0}.bk-th{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap align-middle;border-bottom:1px solid #ebedf3;position:sticky;top:0;z-index:2}.bk-table thead tr:nth-child(2) .bk-th{top:var(--bk-thead-row-1, 38px);z-index:1}.bk-th-content{@apply flex items-center justify-between gap-1;}.bk-th-align-right .bk-th-content{@apply justify-end;}.bk-th-align-center .bk-th-content{@apply justify-center;}.bk-th-label{@apply inline-flex items-center gap-1;}.bk-th-sortable .bk-th-label{@apply cursor-pointer select-none;}.bk-th-selection{@apply flex items-center gap-1;}.bk-cell-selection{@apply px-3;}.bk-th-selection-caret{@apply inline-flex items-center justify-center size-4 rounded hover:bg-[#EFF1F4];}.bk-td{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 align-middle bg-white;border-bottom:1px solid #ebedf3}.bk-td-content{@apply inline-flex items-center gap-1 align-middle;}.bk-td-content-block{@apply block w-full;}.bk-table tbody tr:hover .bk-td{@apply bg-[#FBFBFC];}.bk-table-lg .bk-th{@apply px-5 py-3.5 text-[13px];}.bk-table-lg .bk-td{@apply px-5 py-3.5 text-sm leading-5;}.bk-table-md .bk-th{@apply px-3 py-2;}.bk-table-md .bk-td{@apply px-3 py-1.5;}.bk-table-sm .bk-th{@apply px-2 py-1.5 text-[11px];}.bk-table-sm .bk-td{@apply px-2 py-1 text-xs;}.bk-table-lg .bk-cell-selection{@apply px-4;}.bk-table-md .bk-cell-selection{@apply px-2.5;}.bk-table-sm .bk-cell-selection{@apply px-2;}.bk-table-bordered .bk-th,.bk-table-bordered .bk-td{border-right:1px solid #ebedf3}.bk-table-bordered .bk-th:last-child,.bk-table-bordered .bk-td:last-child{border-right:0}.bk-table tbody tr:last-child>.bk-td{border-bottom:0}.bk-table-underfilled .bk-table tbody tr:last-child>.bk-td{border-bottom:1px solid #ebedf3}.bk-cell-sticky{position:sticky;z-index:1}.bk-th.bk-cell-sticky{z-index:3}.bk-cell-sticky-left:after,.bk-cell-sticky-right:before{content:\"\";@apply absolute top-0 bottom-0 w-2 pointer-events-none;}.bk-cell-sticky-left:after{right:-8px;background-image:linear-gradient(to right,rgba(0,0,0,.05),transparent)}.bk-cell-sticky-right:before{left:-8px;background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.bk-cell-ellipsis{@apply overflow-hidden text-ellipsis whitespace-nowrap;max-width:0}.bk-td-content-ellipsis{@apply flex w-full;}.bk-td-ellipsis-text{@apply overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1;}.bk-cell-break-word{@apply whitespace-normal;word-break:break-all}.bk-td-indent{@apply inline-block;}.bk-td-expand,.bk-td-expand-spacer{@apply inline-flex items-center justify-center size-4 shrink-0;}.bk-td-expand{@apply rounded text-[#78829D] hover:bg-[#EFF1F4] transition-transform duration-200;transform:rotate(-90deg)}.bk-td-expand-open{transform:rotate(0)}.bk-expanded-row>.bk-td,.bk-expanded-row>td{@apply bg-[#FBFBFC];}.bk-td-flush{@apply p-3;}.bk-table-flush .bk-table-frame{border:0;border-radius:0}.bk-table-summary .bk-td{@apply bg-[#F9FAFA] font-semibold;border-top:1px solid #ebedf3;border-bottom:0}.bk-table-summary-fixed .bk-td{position:sticky;bottom:0;z-index:2}.bk-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.bk-sort-icon:before,.bk-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover}.bk-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='%2378829D'/%3e%3c/svg%3e\")}.bk-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='%2378829D'/%3e%3c/svg%3e\")}.bk-sort-asc: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\")}.bk-sort-asc: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\")}.bk-sort-desc: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\")}.bk-sort-desc: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\")}.bk-sort-priority{@apply inline-flex items-center justify-center min-w-4 h-4 px-1 rounded bg-[#EFF1F4] text-[10px] font-semibold text-[#4B5675];}.bk-filter-trigger{@apply inline-flex items-center justify-center size-5 rounded text-[#78829D] hover:bg-[#EFF1F4];}.bk-filter-active{@apply text-black;}.bk-filter-menu{@apply min-w-[180px];}.bk-filter-list{@apply flex flex-col gap-2 max-h-60 overflow-y-auto py-1;}.bk-filter-option{@apply text-[13px] text-[#15191E];}.bk-filter-actions{@apply flex items-center justify-between gap-2 pt-2 mt-2;border-top:1px solid #ebedf3}.bk-filter-btn{@apply text-xs font-semibold px-2.5 py-1 rounded;}.bk-filter-btn-link{@apply text-[#60646C] hover:bg-[#F1F2F4];}.bk-filter-btn-primary{@apply bg-black text-white hover:bg-[#2A2E36];}.bk-table-menu{@apply min-w-[160px] flex flex-col;}.bk-table-menu-item{@apply w-full text-left text-[13px] text-[#15191E] px-2 py-1.5 rounded hover:bg-[#F1F2F4];}.bk-table-loading{@apply absolute inset-0 flex items-center justify-center bg-white/60 z-10;}.bk-table-spinner{@apply block size-8 rounded-full border-2 border-[#EBEDF3] border-t-black;animation:bk-table-spin .8s linear infinite}@keyframes bk-table-spin{to{transform:rotate(360deg)}}.bk-table-empty{@apply absolute inset-x-0 bottom-0 flex flex-col justify-center items-center py-10;top:var(--bk-thead-row-1, 38px)}.bk-table-empty-img{@apply mb-3 w-96 max-w-full;}.bk-table-empty-text{@apply block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2;}.bk-table-pagination{@apply contents;}.bk-table-viewport{@apply w-full;}.bk-table-virtual-head{@apply w-full overflow-hidden;}.bk-table-virtual-head .bk-th{position:static}.bk-checkbox-indeterminate .checkbox{@apply bg-black border-black;}.bk-checkbox-indeterminate .checkbox:after{content:\"\";@apply absolute w-2 h-0.5 bg-white rounded-sm;}.cdk-drag-preview{display:table;table-layout:fixed;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)}.bk-drag-handle{@apply cursor-move inline-flex items-center justify-center text-[#C4CADA] hover:text-[#78829D] mr-2 align-middle;}.bk-tree-drop-line{@apply absolute pointer-events-none rounded-full;height:2px;background:#15191e;z-index:5}.bk-table tbody tr.bk-tree-drop-inside .bk-td{background:#f1f2f4;box-shadow:inset 0 0 0 1px #15191e59}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BkPagination, selector: "bk-pagination", inputs: ["pageSize", "total", "activePage"], outputs: ["changePageSize", "pageChanged", "activePageChange"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-table', standalone: true, exportAs: 'bkTable', imports: [CommonModule, ScrollingModule, BkPagination], encapsulation: ViewEncapsulation.None, host: {
+                        class: 'bk-table-host'
+                    }, template: "<!--\r\n  Projection slots live inside <ng-template> rather than directly in the\r\n  branches below. A given <ng-content> can only be declared once \u00E2\u20AC\u201D repeating\r\n  the same selector in both the virtual and normal branches would leave one of\r\n  them permanently empty. Wrapping each slot in a template declares it once and\r\n  lets an outlet place it wherever it is needed.\r\n-->\r\n<ng-template #headSlot><ng-content select=\"thead\"></ng-content></ng-template>\r\n<ng-template #bodySlot><ng-content select=\"tbody\"></ng-content></ng-template>\r\n<ng-template #footSlot><ng-content select=\"tfoot\"></ng-content></ng-template>\r\n\r\n<div\r\n  class=\"bk-table-wrapper\"\r\n  [class.bk-table-bordered]=\"bordered()\"\r\n  [ngClass]=\"sizeClass()\"\r\n>\r\n  <!--\r\n    The frame is one box, and it is the only box that draws an outline or a\r\n    corner. Radius on the header cells and border on the table (or on the title\r\n    bar) means two boxes describing the same corner from different places, and\r\n    they disagree the moment a title bar appears above the header. Everything\r\n    inside here draws separators only; `overflow: hidden` clips them to the curve.\r\n  -->\r\n  <div class=\"bk-table-frame\">\r\n    @if (hasTitle()) {\r\n      <div class=\"bk-table-title-bar\">\r\n        @if (title()) {\r\n          {{ title() }}\r\n        }\r\n        <ng-content select=\"[bkTableTitle]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"bk-table-container\" [ngStyle]=\"containerStyle()\">\r\n      @if (isVirtual() && virtualScroll) {\r\n        <!--\r\n          Header and body are two separate tables here, which they are not in any\r\n          other mode. The CDK viewport scrolls by translating its content wrapper,\r\n          and a transformed ancestor takes over as the containing block for\r\n          sticky descendants \u00E2\u20AC\u201D so a header inside the viewport gets dragged along\r\n          by the very transform it is supposed to stay still against. Lifting it\r\n          out is the only way it stays put.\r\n\r\n          The cost is that the two tables can no longer size each other, so a\r\n          shared <colgroup> holds their columns in alignment and the body's\r\n          horizontal scroll is mirrored onto the header by hand.\r\n        -->\r\n        <div #virtualHead class=\"bk-table-virtual-head\">\r\n          <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n            <colgroup>\r\n              @for (width of colWidths(); track $index) {\r\n                <col [style.width]=\"width\" />\r\n              }\r\n            </colgroup>\r\n            <ng-container [ngTemplateOutlet]=\"headSlot\"></ng-container>\r\n          </table>\r\n        </div>\r\n\r\n        <cdk-virtual-scroll-viewport\r\n          class=\"bk-table-viewport\"\r\n          [itemSize]=\"virtualItemSize()\"\r\n          [style.height]=\"scroll().y || '400px'\"\r\n          (scroll)=\"onViewportScroll($event)\"\r\n        >\r\n          <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n            <colgroup>\r\n              @for (width of colWidths(); track $index) {\r\n                <col [style.width]=\"width\" />\r\n              }\r\n            </colgroup>\r\n            <tbody>\r\n              <ng-container\r\n                *cdkVirtualFor=\"\r\n                  let row of renderData();\r\n                  let i = index;\r\n                  trackBy: virtualTrackBy()\r\n                \"\r\n                [ngTemplateOutlet]=\"virtualScroll.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n              ></ng-container>\r\n            </tbody>\r\n            <ng-container [ngTemplateOutlet]=\"footSlot\"></ng-container>\r\n          </table>\r\n        </cdk-virtual-scroll-viewport>\r\n      } @else {\r\n        <table class=\"bk-table\" [ngStyle]=\"tableStyle()\">\r\n          <ng-container [ngTemplateOutlet]=\"headSlot\"></ng-container>\r\n          <ng-container [ngTemplateOutlet]=\"bodySlot\"></ng-container>\r\n          <ng-container [ngTemplateOutlet]=\"footSlot\"></ng-container>\r\n        </table>\r\n      }\r\n\r\n      @if (loading() && showLoadingOverlay()) {\r\n        <div class=\"bk-table-loading\">\r\n          <span class=\"bk-table-spinner\"></span>\r\n        </div>\r\n      }\r\n\r\n      @if (isEmpty()) {\r\n        <div class=\"bk-table-empty\">\r\n          @if (!emptyImageFailed()) {\r\n            <img\r\n              [src]=\"noResultImage()\"\r\n              class=\"bk-table-empty-img\"\r\n              alt=\"No data found\"\r\n              (error)=\"onEmptyImageError()\"\r\n            />\r\n          }\r\n          <span class=\"bk-table-empty-text\">{{ noResultText() }}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (hasFooter()) {\r\n      <div class=\"bk-table-footer-bar\">\r\n        @if (footer()) {\r\n          {{ footer() }}\r\n        }\r\n        <ng-content select=\"[bkTableFooter]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    <!-- Inside the frame: the pager belongs to the table it drives, and the\r\n         frame's bottom edge is what closes the card around both.\r\n\r\n         `!isEmpty()`, not `totalCount() > 0`: in server mode `totalCount()`\r\n         is just the `total` input, which can say more rows exist than are\r\n         actually on screen right now (a search with no matches but a stale\r\n         total, a page past the end) \u2014 the pager has nothing to page through\r\n         either way, so it goes by what's actually rendered. -->\r\n    @if (showPagination() && !isEmpty()) {\r\n      <div class=\"bk-table-pagination\">\r\n        <bk-pagination\r\n          [total]=\"totalCount()\"\r\n          [pageSize]=\"pageSize()\"\r\n          [activePage]=\"pageIndex()\"\r\n          (pageChanged)=\"onPageIndexChange($event)\"\r\n          (changePageSize)=\"onPageSizeChange($event)\"\r\n        ></bk-pagination>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".bk-table-host{display:block}.bk-table-wrapper{@apply w-full;}.bk-table-frame{border:1px solid #ebedf3;border-radius:.75rem;overflow:hidden}.bk-table-title-bar,.bk-table-footer-bar{@apply text-[13px] font-semibold text-[#15191E] bg-[#F9FAFA] px-4 py-2.5;}.bk-table-title-bar{border-bottom:1px solid #ebedf3}.bk-table-footer-bar{border-top:1px solid #ebedf3}.bk-table-container{@apply relative overflow-auto;}.bk-table{@apply min-w-full text-left;border-collapse:separate;border-spacing:0}.bk-th{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap align-middle;border-bottom:1px solid #ebedf3;position:sticky;top:0;z-index:2}.bk-table thead tr:nth-child(2) .bk-th{top:var(--bk-thead-row-1, 38px);z-index:1}.bk-th-content{@apply flex items-center justify-between gap-1;}.bk-th-align-right .bk-th-content{@apply justify-end;}.bk-th-align-center .bk-th-content{@apply justify-center;}.bk-th-label{@apply inline-flex items-center gap-1;}.bk-th-sortable .bk-th-label{@apply cursor-pointer select-none;}.bk-th-selection{@apply flex items-center gap-1;}.bk-cell-selection{@apply px-3;}.bk-th-selection-caret{@apply inline-flex items-center justify-center size-4 rounded hover:bg-[#EFF1F4];}.bk-td{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 align-middle bg-white;border-bottom:1px solid #ebedf3}.bk-td-content{@apply inline-flex items-center gap-1 align-middle;}.bk-td-content-block{@apply block w-full;}.bk-table tbody tr:hover .bk-td{@apply bg-[#FBFBFC];}.bk-table-lg .bk-th{@apply px-5 py-3.5 text-[13px];}.bk-table-lg .bk-td{@apply px-5 py-3.5 text-sm leading-5;}.bk-table-md .bk-th{@apply px-3 py-2;}.bk-table-md .bk-td{@apply px-3 py-1.5;}.bk-table-sm .bk-th{@apply px-2 py-1.5 text-[11px];}.bk-table-sm .bk-td{@apply px-2 py-1 text-xs;}.bk-table-lg .bk-cell-selection{@apply px-4;}.bk-table-md .bk-cell-selection{@apply px-2.5;}.bk-table-sm .bk-cell-selection{@apply px-2;}.bk-table-bordered .bk-th,.bk-table-bordered .bk-td{border-right:1px solid #ebedf3}.bk-table-bordered .bk-th:last-child,.bk-table-bordered .bk-td:last-child{border-right:0}.bk-table tbody tr:last-child>.bk-td{border-bottom:0}.bk-table-underfilled .bk-table tbody tr:last-child>.bk-td{border-bottom:1px solid #ebedf3}.bk-cell-sticky{position:sticky;z-index:1}.bk-th.bk-cell-sticky{z-index:3}.bk-cell-sticky-left:after,.bk-cell-sticky-right:before{content:\"\";@apply absolute top-0 bottom-0 w-2 pointer-events-none;}.bk-cell-sticky-left:after{right:-8px;background-image:linear-gradient(to right,rgba(0,0,0,.05),transparent)}.bk-cell-sticky-right:before{left:-8px;background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.bk-cell-ellipsis{@apply overflow-hidden text-ellipsis whitespace-nowrap;max-width:0}.bk-td-content-ellipsis{@apply flex w-full;}.bk-td-ellipsis-text{@apply overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1;}.bk-cell-break-word{@apply whitespace-normal;word-break:break-all}.bk-td-indent{@apply inline-block;}.bk-td-expand,.bk-td-expand-spacer{@apply inline-flex items-center justify-center size-4 shrink-0;}.bk-td-expand{@apply rounded text-[#78829D] hover:bg-[#EFF1F4] transition-transform duration-200;transform:rotate(-90deg)}.bk-td-expand-open{transform:rotate(0)}.bk-expanded-row>.bk-td,.bk-expanded-row>td{@apply bg-[#FBFBFC];}.bk-td-flush{@apply p-3;}.bk-table-flush .bk-table-frame{border:0;border-radius:0}.bk-table-summary .bk-td{@apply bg-[#F9FAFA] font-semibold;border-top:1px solid #ebedf3;border-bottom:0}.bk-table-summary-fixed .bk-td{position:sticky;bottom:0;z-index:2}.bk-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.bk-sort-icon:before,.bk-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover}.bk-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='%2378829D'/%3e%3c/svg%3e\")}.bk-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='%2378829D'/%3e%3c/svg%3e\")}.bk-sort-asc: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\")}.bk-sort-asc: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\")}.bk-sort-desc: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\")}.bk-sort-desc: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\")}.bk-sort-priority{@apply inline-flex items-center justify-center min-w-4 h-4 px-1 rounded bg-[#EFF1F4] text-[10px] font-semibold text-[#4B5675];}.bk-filter-trigger{@apply inline-flex items-center justify-center size-5 rounded text-[#78829D] hover:bg-[#EFF1F4];}.bk-filter-active{@apply text-black;}.bk-filter-menu{@apply min-w-[180px];}.bk-filter-list{@apply flex flex-col gap-2 max-h-60 overflow-y-auto py-1;}.bk-filter-option{@apply text-[13px] text-[#15191E];}.bk-filter-actions{@apply flex items-center justify-between gap-2 pt-2 mt-2;border-top:1px solid #ebedf3}.bk-filter-btn{@apply text-xs font-semibold px-2.5 py-1 rounded;}.bk-filter-btn-link{@apply text-[#60646C] hover:bg-[#F1F2F4];}.bk-filter-btn-primary{@apply bg-black text-white hover:bg-[#2A2E36];}.bk-table-menu{@apply min-w-[160px] flex flex-col;}.bk-table-menu-item{@apply w-full text-left text-[13px] text-[#15191E] px-2 py-1.5 rounded hover:bg-[#F1F2F4];}.bk-table-loading{@apply absolute inset-0 flex items-center justify-center bg-white/60 z-10;}.bk-table-spinner{@apply block size-8 rounded-full border-2 border-[#EBEDF3] border-t-black;animation:bk-table-spin .8s linear infinite}@keyframes bk-table-spin{to{transform:rotate(360deg)}}.bk-table-empty{@apply absolute inset-x-0 bottom-0 flex flex-col justify-center items-center py-10;top:var(--bk-thead-row-1, 38px)}.bk-table-empty-img{@apply mb-3 w-96 max-w-full;}.bk-table-empty-text{@apply block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2;}.bk-table-pagination{@apply contents;}.bk-table-viewport{@apply w-full;}.bk-table-virtual-head{@apply w-full overflow-hidden;}.bk-table-virtual-head .bk-th{position:static}.bk-checkbox-indeterminate .checkbox{@apply bg-black border-black;}.bk-checkbox-indeterminate .checkbox:after{content:\"\";@apply absolute w-2 h-0.5 bg-white rounded-sm;}.cdk-drag-preview{display:table;table-layout:fixed;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)}.bk-drag-handle{@apply cursor-move inline-flex items-center justify-center text-[#C4CADA] hover:text-[#78829D] mr-2 align-middle;}.bk-tree-drop-line{@apply absolute pointer-events-none rounded-full;height:2px;background:#15191e;z-index:5}.bk-table tbody tr.bk-tree-drop-inside .bk-td{background:#f1f2f4;box-shadow:inset 0 0 0 1px #15191e59}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showLoadingOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingOverlay", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], noResultImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultImage", required: false }] }], showPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagination", required: false }] }], frontPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "frontPagination", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], virtualItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualItemSize", required: false }] }], virtualTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualTrackBy", required: false }] }], viewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }], stableColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "stableColumnWidth", required: false }] }], queryParams: [{ type: i0.Output, args: ["queryParams"] }], currentPageDataChange: [{ type: i0.Output, args: ["currentPageDataChange"] }], titleContent: [{
+                type: ContentChild,
+                args: [BkTableTitle]
+            }], footerContent: [{
+                type: ContentChild,
+                args: [BkTableFooter]
+            }], virtualScroll: [{
+                type: ContentChild,
+                args: [BkVirtualScroll]
+            }], virtualHead: [{
+                type: ViewChild,
+                args: ['virtualHead']
+            }] } });
+
+/**
+ * Behaviour shared by `th[bk-th]` and `td[bk-td]`: fixed columns, text
+ * overflow handling and alignment.
+ *
+ * Fixed columns are `position: sticky`, which needs a pixel offset — and the
+ * correct offset is the cell's distance from the edge of the table, which is
+ * only knowable after layout. Subclasses get that measurement for free.
+ */
+class BkCellBase {
+    el = inject((ElementRef));
+    zone = inject(NgZone);
+    /**
+     * Pin this column to the left edge while the table scrolls horizontally.
+     * `true` measures the offset; a string sets it explicitly.
+     *
+     * Pinned columns must be contiguous from the edge — a gap leaves the columns
+     * beyond it overlapping as they scroll underneath.
+     */
+    left = input(false, ...(ngDevMode ? [{ debugName: "left" }] : []));
+    /** Pin to the right edge. Same rules as `left`. */
+    right = input(false, ...(ngDevMode ? [{ debugName: "right" }] : []));
+    /**
+     * Truncate overflow with an ellipsis instead of wrapping.
+     *
+     * Put it on the `td`, not the `th`. It works by setting `max-width: 0` on
+     * whichever cell carries it, and `table-layout: fixed` sizes a column from
+     * its header cell alone — a `max-width` on the header collapses the whole
+     * column toward zero regardless of any declared `width`. A `td`'s own width
+     * is never consulted by `fixed` layout, so the same rule there only clips
+     * the content, which is the point.
+     */
+    ellipsis = input(false, ...(ngDevMode ? [{ debugName: "ellipsis" }] : []));
+    /**
+     * Allow breaks *inside* words. Without it a long unbroken string (a URL, an
+     * ID) pushes past the cell instead of wrapping.
+     */
+    breakWord = input(false, ...(ngDevMode ? [{ debugName: "breakWord" }] : []));
+    align = input(null, ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** Resolved sticky offsets, written after measurement. */
+    stickyLeft = signal(null, ...(ngDevMode ? [{ debugName: "stickyLeft" }] : []));
+    stickyRight = signal(null, ...(ngDevMode ? [{ debugName: "stickyRight" }] : []));
+    resizeObserver;
+    get isSticky() {
+        return this.left() !== false || this.right() !== false;
+    }
+    ngAfterViewInit() {
+        if (!this.isSticky)
+            return;
+        // Measuring synchronously here reads a layout that hasn't happened yet.
+        // A table with many rows registers hundreds of these cells in one
+        // synchronous pass, before the browser has laid out any of them — an
+        // immediate `offsetWidth` read comes back 0, not "not yet available",
+        // so nothing downstream can tell the difference from a genuinely
+        // zero-width column. Deferring past the current task is what
+        // `BkTable.freezeColumnWidths()` already does for the identical
+        // problem; a plain event listener wouldn't fire without a real resize
+        // to trigger it, so it can't stand in for this first measurement.
+        this.zone.runOutsideAngular(() => {
+            setTimeout(() => this.measure());
+        });
+        // Column widths move with the table, not with Angular's change detection,
+        // so the offsets have to be recomputed from a layout signal. Watching the
+        // table (not the cell) catches sibling columns resizing too.
+        const table = this.el.nativeElement.closest('table');
+        if (table && typeof ResizeObserver !== 'undefined') {
+            this.zone.runOutsideAngular(() => {
+                this.resizeObserver = new ResizeObserver(() => this.measure());
+                this.resizeObserver.observe(table);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    /**
+     * Resolves the sticky offsets.
+     *
+     * Offsets are summed from sibling `offsetWidth`s rather than read from
+     * `getBoundingClientRect()`: once a cell is sticky its rect reflects where it
+     * has been *held*, not where the column sits, so measuring a scrolled table
+     * that way feeds each cell its own displacement back. `offsetWidth` is
+     * unaffected by the sticky shift.
+     */
+    measure() {
+        const cell = this.el.nativeElement;
+        const leftInput = this.left();
+        if (leftInput !== false) {
+            this.stickyLeft.set(typeof leftInput === 'string' ? leftInput : `${this.sumWidths(cell, 'previous')}px`);
+        }
+        const rightInput = this.right();
+        if (rightInput !== false) {
+            this.stickyRight.set(typeof rightInput === 'string' ? rightInput : `${this.sumWidths(cell, 'next')}px`);
+        }
+    }
+    sumWidths(cell, direction) {
+        let total = 0;
+        let sibling = direction === 'previous' ? cell.previousElementSibling : cell.nextElementSibling;
+        while (sibling) {
+            total += sibling.offsetWidth;
+            sibling =
+                direction === 'previous' ? sibling.previousElementSibling : sibling.nextElementSibling;
+        }
+        return total;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCellBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: BkCellBase, isStandalone: true, inputs: { left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, right: { classPropertyName: "right", publicName: "right", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, breakWord: { classPropertyName: "breakWord", publicName: "breakWord", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCellBase, decorators: [{
+            type: Directive
+        }], propDecorators: { left: [{ type: i0.Input, args: [{ isSignal: true, alias: "left", required: false }] }], right: [{ type: i0.Input, args: [{ isSignal: true, alias: "right", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], breakWord: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakWord", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+
+/**
+ * Header cell.
+ *
+ * Carries a column's sort state, filter menu and select-all checkbox, and
+ * registers itself with the parent `bk-table` so the table's data pipeline can
+ * read them. It renders whatever you project as the label:
+ *
+ *   <th bk-th [sortFn]="byName" [filters]="statuses" [filterFn]="byStatus">
+ *     Name
+ *   </th>
+ *
+ * Use the native `colspan` / `rowspan` attributes for grouped headers — they
+ * need no wrapper input.
+ */
+class BkTh extends BkCellBase {
+    /** Optional: the parent table only exists when the th is inside one. */
+    table = inject(BkTable, { optional: true, host: false });
+    /** Identifies the column in `queryParams`. Required for server-side work. */
+    columnKeyInput = input(null, ...(ngDevMode ? [{ debugName: "columnKeyInput", alias: 'columnKey' }] : [{ alias: 'columnKey' }]));
+    /**
+     * Column width. Required in virtual-scroll mode, where the header is a
+     * separate table and has no body cells to size itself against.
+     */
+    widthInput = input(null, ...(ngDevMode ? [{ debugName: "widthInput", alias: 'width' }] : [{ alias: 'width' }]));
+    /** Plain-value views of the inputs, so the table can read them off BkColumnRef. */
+    get columnKey() {
+        return this.columnKeyInput();
+    }
+    get width() {
+        return this.widthInput();
+    }
+    /* ================= Sorting ================= */
+    /**
+     * A comparator sorts client-side; `true` marks the column sortable but
+     * leaves the sorting to the server.
+     */
+    sortFn = input(null, ...(ngDevMode ? [{ debugName: "sortFn" }] : []));
+    sortOrder = model(null, ...(ngDevMode ? [{ debugName: "sortOrder" }] : []));
+    /** The cycle the header steps through on each click. */
+    sortDirections = input(['ascend', 'descend', null], ...(ngDevMode ? [{ debugName: "sortDirections" }] : []));
+    /**
+     * Ranks this column against other sorted columns — higher wins. Columns
+     * without a priority sort in registration order after those with one.
+     */
+    sortPriorityInput = input(null, ...(ngDevMode ? [{ debugName: "sortPriorityInput", alias: 'sortPriority' }] : [{ alias: 'sortPriority' }]));
+    /* ================= Filtering ================= */
+    /** Options for the filter menu. An empty list hides the funnel icon. */
+    filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    /** Predicate for client-side filtering, or `true` to defer to the server. */
+    filterFn = input(null, ...(ngDevMode ? [{ debugName: "filterFn" }] : []));
+    /** Multiple shows checkboxes; single shows radios and closes on pick. */
+    filterMultiple = input(true, ...(ngDevMode ? [{ debugName: "filterMultiple" }] : []));
+    /* ================= Selection ================= */
+    checkbox = input(false, ...(ngDevMode ? [{ debugName: "checkbox" }] : []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Extra entries in the select-all dropdown ("Select odd rows", …). Providing
+     * any adds a caret beside the checkbox.
+     */
+    selections = input([], ...(ngDevMode ? [{ debugName: "selections" }] : []));
+    /* ================= Expand column ================= */
+    /** Reserves the narrow width used by the expand-icon column. */
+    showExpand = input(false, ...(ngDevMode ? [{ debugName: "showExpand" }] : []));
+    /* ================= Internal state ================= */
+    filterValue = signal([], ...(ngDevMode ? [{ debugName: "filterValue" }] : []));
+    /** Menu selection while the popover is open, before OK is pressed. */
+    pendingFilter = signal([], ...(ngDevMode ? [{ debugName: "pendingFilter" }] : []));
+    showSort = computed(() => this.sortFn() !== null, ...(ngDevMode ? [{ debugName: "showSort" }] : []));
+    showFilter = computed(() => this.filters().length > 0, ...(ngDevMode ? [{ debugName: "showFilter" }] : []));
+    isFiltered = computed(() => this.filterValue().length > 0, ...(ngDevMode ? [{ debugName: "isFiltered" }] : []));
+    /** Only comparators run in-process; `true` means the server sorts. */
+    get clientSortFn() {
+        const fn = this.sortFn();
+        return typeof fn === 'function' ? fn : null;
+    }
+    get clientFilterFn() {
+        const fn = this.filterFn();
+        return typeof fn === 'function' ? fn : null;
+    }
+    get sortPriority() {
+        return this.sortPriorityInput();
+    }
+    ngOnInit() {
+        // Options marked byDefault are active before the menu is ever opened.
+        const defaults = this.filters().filter((f) => f.byDefault).map((f) => f.value);
+        if (defaults.length) {
+            this.filterValue.set(defaults);
+            this.pendingFilter.set(defaults);
+        }
+        this.table?.registerColumn(this);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.table?.unregisterColumn(this);
+    }
+    /* ================= Sort interaction ================= */
+    /** Advances to the next order in `sortDirections`, wrapping at the end. */
+    onSortClick() {
+        if (!this.showSort())
+            return;
+        const cycle = this.sortDirections();
+        const next = cycle[(cycle.indexOf(this.sortOrder()) + 1) % cycle.length];
+        this.sortOrder.set(next);
+        this.table?.onColumnStateChange();
+    }
+    clearSort() {
+        this.sortOrder.set(null);
+    }
+    /* ================= Filter interaction ================= */
+    isPending(value) {
+        return this.pendingFilter().includes(value);
+    }
+    /**
+     * Single-select view of the pending selection, for the radio list. The
+     * underlying state stays an array in both modes so the filter predicate has
+     * one shape to handle.
+     */
+    get singleFilter() {
+        return this.pendingFilter()[0] ?? null;
+    }
+    set singleFilter(value) {
+        this.pendingFilter.set(value === null || value === undefined ? [] : [value]);
+    }
+    toggleFilterOption(value, selected) {
+        if (!this.filterMultiple()) {
+            this.pendingFilter.set(selected ? [value] : []);
+            return;
+        }
+        this.pendingFilter.update((list) => selected ? [...list, value] : list.filter((v) => v !== value));
+    }
+    applyFilter(popover) {
+        this.filterValue.set([...this.pendingFilter()]);
+        this.table?.onColumnStateChange();
+        popover?.close();
+    }
+    resetFilter(popover) {
+        this.pendingFilter.set([]);
+        this.filterValue.set([]);
+        this.table?.onColumnStateChange();
+        popover?.close();
+    }
+    clearFilter() {
+        this.filterValue.set([]);
+        this.pendingFilter.set([]);
+    }
+    /** Re-syncs the menu to the applied state so a cancelled edit doesn't stick. */
+    onFilterMenuOpen() {
+        this.pendingFilter.set([...this.filterValue()]);
+    }
+    /* ================= Selection interaction ================= */
+    onCheckedChange(value) {
+        this.checked.set(value);
+    }
+    runSelection(selection, popover) {
+        selection.onSelect();
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTh, decorators: [{
+            type: Component,
+            args: [{ selector: 'th[bk-th]', standalone: true, imports: [CommonModule, FormsModule, BkCheckbox, BkRadioButton, BkPopover], encapsulation: ViewEncapsulation.None, host: {
+                        class: 'bk-th',
+                        '[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()'
+                    }, 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" }]
+        }], propDecorators: { columnKeyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnKey", required: false }] }], widthInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], sortFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFn", required: false }] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }, { type: i0.Output, args: ["sortOrderChange"] }], sortDirections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirections", required: false }] }], sortPriorityInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortPriority", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], filterMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMultiple", required: false }] }], checkbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkbox", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selections: [{ type: i0.Input, args: [{ isSignal: true, alias: "selections", required: false }] }], showExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpand", required: false }] }] } });
+
+/**
+ * Body cell.
+ *
+ * Handles the parts of a cell the consumer shouldn't have to rebuild each
+ * time — row checkbox, expand toggle, tree indentation, sticky positioning —
+ * and projects everything else through untouched:
+ *
+ *   <td bk-td [(checked)]="row.checked"></td>
+ *   <td bk-td [showExpand]="row.hasChildren" [(expand)]="row.expand"
+ *             [indentLevel]="row.level" [indentSize]="20">{{ row.name }}</td>
+ *
+ * Use the native `colspan` / `rowspan` attributes for spanning cells.
+ */
+class BkTd extends BkCellBase {
+    ngZone = inject(NgZone);
+    ellipsisResizeObserver;
+    /**
+     * The tooltip's content, and the switch for whether it shows at all — see
+     * `observeEllipsisTruncation()`. Bound in the template onto the innermost
+     * `.bk-td-ellipsis-text` span wrapping the projected content, not the `td`
+     * or `.bk-td-content`: both of those are wider than the actual (possibly
+     * truncated) text, and the tooltip should point at what's actually there.
+     */
+    truncatedTooltip = signal('', ...(ngDevMode ? [{ debugName: "truncatedTooltip" }] : []));
+    /** Forwarded to the content wrapper's `bkTooltip`. Override on a column whose default 'right' would run into its neighbour. */
+    tooltipPosition = input('right', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
+    /** Only present when `ellipsis()` is true — see the `@else` branch in the template. */
+    ellipsisTextRef;
+    /* ================= Selection ================= */
+    checkbox = input(false, ...(ngDevMode ? [{ debugName: "checkbox" }] : []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+    /* ================= Expansion ================= */
+    /**
+     * Renders the expand toggle. Set it false on leaf rows in a tree — the cell
+     * still reserves the icon's width so labels stay aligned down the column.
+     */
+    showExpand = input(false, ...(ngDevMode ? [{ debugName: "showExpand" }] : []));
+    expand = model(false, ...(ngDevMode ? [{ debugName: "expand" }] : []));
+    /**
+     * Custom expand icon. The template receives the open state as `$implicit`:
+     *
+     *   <ng-template #icon let-expanded>{{ expanded ? '−' : '+' }}</ng-template>
+     */
+    expandIcon = input(null, ...(ngDevMode ? [{ debugName: "expandIcon" }] : []));
+    /* ================= Tree indentation ================= */
+    /** Depth of this row in the tree. Multiplied by `indentSize`. */
+    indentLevel = input(0, ...(ngDevMode ? [{ debugName: "indentLevel" }] : []));
+    /** Pixels of indent per level. */
+    indentSize = input(20, ...(ngDevMode ? [{ debugName: "indentSize" }] : []));
+    /**
+     * Marks the column that carries the tree. Leaf rows in such a column get a
+     * blank spacer where the toggle would be, so their labels line up with the
+     * labels of siblings that do have children — including at depth 0, where
+     * indentation alone gives nothing to align against.
+     */
+    treeCell = input(false, ...(ngDevMode ? [{ debugName: "treeCell" }] : []));
+    /**
+     * The projected content is block-level and should fill the cell — a nested
+     * `bk-table`, most commonly — rather than the default shrink-to-fit inline
+     * box that lets ordinary text/icon content size to itself and still honour
+     * `align` via `text-align`. Turning this on trades that `align` behaviour
+     * away for whatever the block content does with the full width itself.
+     */
+    block = input(false, ...(ngDevMode ? [{ debugName: "block" }] : []));
+    indentPx = computed(() => this.indentLevel() * this.indentSize(), ...(ngDevMode ? [{ debugName: "indentPx" }] : []));
+    /** A tree cell with no toggle of its own still reserves the toggle's width. */
+    isLeafSpacer = computed(() => this.treeCell() && !this.showExpand(), ...(ngDevMode ? [{ debugName: "isLeafSpacer" }] : []));
+    onExpandClick() {
+        this.expand.set(!this.expand());
+    }
+    onCheckedChange(value) {
+        this.checked.set(value);
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.observeEllipsisTruncation();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.ellipsisResizeObserver?.disconnect();
+    }
+    /**
+     * Drives `truncatedTooltip` from measured truncation rather than the
+     * content being present unconditionally: `bkTooltip`'s own emptiness check
+     * already suppresses the tooltip when there's nothing to show, so setting
+     * it only when the cell is genuinely clipped (`scrollWidth > clientWidth`)
+     * is what makes it show "for the truncated item only" — an `ellipsis` cell
+     * whose text happens to fit never gets a tooltip at all.
+     *
+     * Measures the inner `.bk-td-ellipsis-text` span, not the `td` — that span
+     * is now the element that actually owns `overflow: hidden` (see
+     * `.bk-td-ellipsis-text` in table.css, and why: the ellipsis marker needs
+     * a plain, non-flex element to render on at all). Because it clips its own
+     * overflow, that overflow never reaches the `td`'s own `scrollWidth`
+     * anymore — measuring the `td` here would read `scrollWidth ===
+     * clientWidth` even when the text is visibly cut off, since the span
+     * absorbs it first.
+     *
+     * Measured on resize, not on hover: `bkTooltip`'s own `mouseenter` listener
+     * fires independently of this, so content has to already be correct
+     * *before* any hover — computing it reactively to the hover would risk
+     * showing whatever was last set instead of what's true at that moment.
+     */
+    observeEllipsisTruncation() {
+        if (!this.ellipsis() || typeof ResizeObserver === 'undefined')
+            return;
+        const textEl = this.ellipsisTextRef?.nativeElement;
+        if (!textEl)
+            return;
+        const update = () => {
+            const truncated = textEl.scrollWidth > textEl.clientWidth;
+            this.truncatedTooltip.set(truncated ? (textEl.textContent ?? '').trim() : '');
+        };
+        this.ngZone.runOutsideAngular(() => {
+            this.ellipsisResizeObserver = new ResizeObserver(update);
+            this.ellipsisResizeObserver.observe(textEl);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTd, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTd, isStandalone: true, selector: "td[bk-td]", inputs: { tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, indentLevel: { classPropertyName: "indentLevel", publicName: "indentLevel", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, treeCell: { classPropertyName: "treeCell", publicName: "treeCell", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", expand: "expandChange" }, host: { properties: { "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()", "style.left": "stickyLeft()", "style.right": "stickyRight()", "style.text-align": "align()" }, classAttribute: "bk-td" }, viewQueries: [{ propertyName: "ellipsisTextRef", first: true, predicate: ["ellipsisText"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (checkbox()) {\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} @else {\r\n  <span\r\n    class=\"bk-td-content\"\r\n    [class.bk-td-content-block]=\"block()\"\r\n    [class.bk-td-content-ellipsis]=\"ellipsis()\"\r\n  >\r\n    @if (indentPx() > 0) {\r\n      <!-- Depth is expressed as blank width, so the cell keeps one text flow\r\n           and long labels still wrap under themselves rather than under the\r\n           indent. -->\r\n      <span class=\"bk-td-indent\" [style.padding-left.px]=\"indentPx()\"></span>\r\n    }\r\n\r\n    @if (showExpand()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-td-expand\"\r\n        [class.bk-td-expand-open]=\"expand()\"\r\n        [attr.aria-expanded]=\"expand()\"\r\n        aria-label=\"Toggle row\"\r\n        (click)=\"onExpandClick()\"\r\n      >\r\n        @if (expandIcon()) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"expandIcon()!\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: expand() }\"\r\n          ></ng-container>\r\n        } @else {\r\n          <svg width=\"8\" height=\"8\" 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=\"currentColor\"\r\n            />\r\n          </svg>\r\n        }\r\n      </button>\r\n    } @else if (isLeafSpacer()) {\r\n      <span class=\"bk-td-expand-spacer\"></span>\r\n    }\r\n\r\n    <span\r\n      #ellipsisText\r\n      [class.bk-td-ellipsis-text]=\"ellipsis()\"\r\n      [bkTooltip]=\"truncatedTooltip()\"\r\n      [bkTooltipPosition]=\"tooltipPosition()\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </span>\r\n  </span>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTd, decorators: [{
+            type: Component,
+            args: [{ selector: 'td[bk-td]', standalone: true, imports: [CommonModule, FormsModule, BkCheckbox, BKTooltipDirective], encapsulation: ViewEncapsulation.None, host: {
+                        class: 'bk-td',
+                        '[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()',
+                        '[style.left]': 'stickyLeft()',
+                        '[style.right]': 'stickyRight()',
+                        '[style.text-align]': 'align()'
+                    }, template: "@if (checkbox()) {\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} @else {\r\n  <span\r\n    class=\"bk-td-content\"\r\n    [class.bk-td-content-block]=\"block()\"\r\n    [class.bk-td-content-ellipsis]=\"ellipsis()\"\r\n  >\r\n    @if (indentPx() > 0) {\r\n      <!-- Depth is expressed as blank width, so the cell keeps one text flow\r\n           and long labels still wrap under themselves rather than under the\r\n           indent. -->\r\n      <span class=\"bk-td-indent\" [style.padding-left.px]=\"indentPx()\"></span>\r\n    }\r\n\r\n    @if (showExpand()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-td-expand\"\r\n        [class.bk-td-expand-open]=\"expand()\"\r\n        [attr.aria-expanded]=\"expand()\"\r\n        aria-label=\"Toggle row\"\r\n        (click)=\"onExpandClick()\"\r\n      >\r\n        @if (expandIcon()) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"expandIcon()!\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: expand() }\"\r\n          ></ng-container>\r\n        } @else {\r\n          <svg width=\"8\" height=\"8\" 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=\"currentColor\"\r\n            />\r\n          </svg>\r\n        }\r\n      </button>\r\n    } @else if (isLeafSpacer()) {\r\n      <span class=\"bk-td-expand-spacer\"></span>\r\n    }\r\n\r\n    <span\r\n      #ellipsisText\r\n      [class.bk-td-ellipsis-text]=\"ellipsis()\"\r\n      [bkTooltip]=\"truncatedTooltip()\"\r\n      [bkTooltipPosition]=\"tooltipPosition()\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </span>\r\n  </span>\r\n}\r\n" }]
+        }], propDecorators: { tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], ellipsisTextRef: [{
+                type: ViewChild,
+                args: ['ellipsisText']
+            }], checkbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkbox", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], showExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpand", required: false }] }], expand: [{ type: i0.Input, args: [{ isSignal: true, alias: "expand", required: false }] }, { type: i0.Output, args: ["expandChange"] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], indentLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentLevel", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], treeCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeCell", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }] } });
+
+/**
+ * A detail row that appears beneath its parent when expanded.
+ *
+ *   <tr [bkExpand]="row.expand">
+ *     <td colspan="5">…anything…</td>
+ *   </tr>
+ *
+ * The row is hidden rather than destroyed, so state inside it (a scrolled
+ * nested table, a half-filled form) survives being collapsed and reopened.
+ * Wrap it in `@if` instead when the content is expensive enough that keeping
+ * it alive costs more than rebuilding it.
+ */
+class BkTrExpand {
+    bkExpand = input(false, ...(ngDevMode ? [{ debugName: "bkExpand" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTrExpand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: BkTrExpand, isStandalone: true, selector: "tr[bkExpand]", inputs: { bkExpand: { classPropertyName: "bkExpand", publicName: "bkExpand", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "hidden": "!bkExpand()" }, classAttribute: "bk-expanded-row" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTrExpand, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tr[bkExpand]',
+                    standalone: true,
+                    host: {
+                        class: 'bk-expanded-row',
+                        '[hidden]': '!bkExpand()'
+                    }
+                }]
+        }], propDecorators: { bkExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "bkExpand", required: false }] }] } });
+/**
+ * Summary / totals rows, placed in a `<tfoot>`.
+ *
+ *   <tfoot bkTableSummary [fixed]="true">
+ *     <tr><td bk-td>Total</td><td bk-td>{{ total }}</td></tr>
+ *   </tfoot>
+ *
+ * `fixed` pins the footer to the bottom of the scroll container so totals stay
+ * visible while the body scrolls — the counterpart to the fixed header.
+ */
+class BkTableSummary {
+    fixed = input(false, ...(ngDevMode ? [{ debugName: "fixed" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTableSummary, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: BkTableSummary, isStandalone: true, selector: "tfoot[bkTableSummary]", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.bk-table-summary-fixed": "fixed()" }, classAttribute: "bk-table-summary" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTableSummary, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tfoot[bkTableSummary]',
+                    standalone: true,
+                    host: {
+                        class: 'bk-table-summary',
+                        '[class.bk-table-summary-fixed]': 'fixed()'
+                    }
+                }]
+        }], propDecorators: { fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }] } });
+
+/**
+ * Makes CDK row dragging behave inside a `<table>`.
+ *
+ * Two problems the CDK doesn't solve on its own, both carried over from
+ * `bk-grid` where they were already working:
+ *
+ * 1. The drag preview is a detached copy of the `<tr>`, so it loses the column
+ *    widths the table gave it and collapses to its content. Widths are copied
+ *    across at drag start — from the *placeholder*, not the dragged row: by
+ *    the time `cdkDragStarted` fires, the CDK has already swapped the row out
+ *    for the placeholder and moved the row itself out to `<body>`, so the row
+ *    is no longer sitting inside the table and no longer reports the table's
+ *    widths. The placeholder is a clone left in the row's place, still inside
+ *    the table, so it's the one still telling the truth.
+ * 2. Dragging to the edge of a scrolling table doesn't scroll it, so rows below
+ *    the fold are unreachable. Nearing an edge scrolls proportionally to how
+ *    close the pointer is.
+ *
+ *   <div class="wrap" #d="bkTableDrag" bkTableDrag>
+ *     <bk-table>
+ *       <tbody cdkDropList (cdkDropListDropped)="drop($event)">
+ *         @for (row of rows; track row.id) {
+ *           <tr cdkDrag cdkDragLockAxis="y"
+ *               (cdkDragStarted)="d.onStart($event)"
+ *               (cdkDragMoved)="d.onMove($event)">
+ *
+ * The scroll container is resolved from the host, so put this on the element
+ * that actually scrolls (or any ancestor of it).
+ */
+class BkTableDrag {
+    el = inject((ElementRef));
+    /** Distance from an edge, in px, at which auto-scroll kicks in. */
+    edgeThreshold = 80;
+    /** Fastest scroll step per move event, in px. */
+    maxScrollSpeed = 25;
+    onStart(event) {
+        // Both the placeholder and the preview already exist by the time this
+        // fires — the CDK creates and inserts them, in that order, before it
+        // emits `started`. No need to defer the read; doing it synchronously
+        // also means the preview is sized correctly on its very first frame
+        // instead of visibly snapping to the right widths a tick later.
+        const placeholder = document.querySelector('.cdk-drag-placeholder');
+        const preview = document.querySelector('.cdk-drag-preview');
+        if (!placeholder || !preview)
+            return;
+        const placeholderCells = placeholder.querySelectorAll('td');
+        const previewCells = preview.querySelectorAll('td');
+        placeholderCells.forEach((cell, index) => {
+            const width = `${cell.getBoundingClientRect().width}px`;
+            const previewCell = previewCells[index];
+            if (previewCell) {
+                previewCell.style.width = width;
+                previewCell.style.minWidth = width;
+                previewCell.style.maxWidth = width;
+            }
+        });
+    }
+    onMove(event) {
+        const container = this.scrollContainer();
+        if (!container)
+            return;
+        const rect = container.getBoundingClientRect();
+        const pointerY = event.pointerPosition.y - rect.top;
+        if (pointerY < this.edgeThreshold) {
+            const intensity = 1 - pointerY / this.edgeThreshold;
+            container.scrollTop -= Math.min(this.maxScrollSpeed, intensity * this.maxScrollSpeed);
+        }
+        else if (pointerY > rect.height - this.edgeThreshold) {
+            const intensity = 1 - (rect.height - pointerY) / this.edgeThreshold;
+            container.scrollTop += Math.min(this.maxScrollSpeed, intensity * this.maxScrollSpeed);
+        }
+    }
+    /**
+     * The nearest descendant that actually scrolls. `bk-table` puts the overflow
+     * on an inner container, so the host itself usually isn't the scroller.
+     * Protected so `BkTreeDrag` can position its drop indicator inside it.
+     */
+    scrollContainer() {
+        const host = this.el.nativeElement;
+        const inner = host.querySelector('.bk-table-container');
+        return inner ?? host;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTableDrag, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkTableDrag, isStandalone: true, selector: "[bkTableDrag]", exportAs: ["bkTableDrag"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTableDrag, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bkTableDrag]',
+                    standalone: true,
+                    exportAs: 'bkTableDrag'
+                }]
+        }] });
+
+/**
+ * The grip a row is dragged by — a reusable handle instead of a glyph copied
+ * into every drag-sort table.
+ *
+ * `hostDirectives: [CdkDragHandle]` puts `cdkDragHandle` on the component's
+ * own host element, so it registers as the drag origin the moment it appears
+ * anywhere inside a `cdkDrag` row — no need to add the CDK directive by hand,
+ * and no requirement about *where* in the row it sits:
+ *
+ *   <!-- its own column -->
+ *   <td bk-td><bk-drag-handle></bk-drag-handle></td>
+ *   <td bk-td>{{ row.name }}</td>
+ *
+ *   <!-- inline with the first column, no dedicated column at all -->
+ *   <td bk-td><bk-drag-handle></bk-drag-handle> {{ row.name }}</td>
+ *
+ * The icon is a default grip — swap it per table by passing a template:
+ *
+ *   <ng-template #bars><svg>…</svg></ng-template>
+ *   <bk-drag-handle [icon]="bars"></bk-drag-handle>
+ *
+ * Same shape as `expandIcon` on `td[bk-td]`: a `TemplateRef` input the
+ * component falls back from when it's `null`, rather than a projected slot —
+ * `<ng-content>` has no way to render a default only when nothing was
+ * projected into it.
+ */
+class BkDragHandle {
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    ariaLabel = input('Reorder row', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDragHandle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: BkDragHandle, isStandalone: true, selector: "bk-drag-handle", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "bk-drag-handle" }, exportAs: ["bkDragHandle"], hostDirectives: [{ directive: i2$1.CdkDragHandle }], ngImport: i0, template: `
+    <ng-container [ngTemplateOutlet]="icon() ?? defaultIcon"></ng-container>
+    <ng-template #defaultIcon>
+      <svg width="10" height="16" viewBox="0 0 10 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="3" cy="2" r="1.3" />
+        <circle cx="3" cy="8" r="1.3" />
+        <circle cx="3" cy="14" r="1.3" />
+        <circle cx="7" cy="2" r="1.3" />
+        <circle cx="7" cy="8" r="1.3" />
+        <circle cx="7" cy="14" r="1.3" />
+      </svg>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDragHandle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bk-drag-handle',
+                    standalone: true,
+                    exportAs: 'bkDragHandle',
+                    imports: [NgTemplateOutlet],
+                    hostDirectives: [CdkDragHandle],
+                    host: {
+                        class: 'bk-drag-handle',
+                        role: 'button',
+                        '[attr.aria-label]': 'ariaLabel()'
+                    },
+                    template: `
+    <ng-container [ngTemplateOutlet]="icon() ?? defaultIcon"></ng-container>
+    <ng-template #defaultIcon>
+      <svg width="10" height="16" viewBox="0 0 10 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="3" cy="2" r="1.3" />
+        <circle cx="3" cy="8" r="1.3" />
+        <circle cx="3" cy="14" r="1.3" />
+        <circle cx="7" cy="2" r="1.3" />
+        <circle cx="7" cy="8" r="1.3" />
+        <circle cx="7" cy="14" r="1.3" />
+      </svg>
+    </ng-template>
+  `
+                }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Tree-aware row dragging: before / after / inside.
+ *
+ * A table flattens the tree into one list of `<tr>` — every row is a sibling
+ * in the same `<tbody>` whatever its depth, so nested `cdkDropList`s have
+ * nothing to nest on. Instead the CDK is kept for what it is good at (the
+ * preview, the placeholder, returning the row on release) with its sorting
+ * turned off, and this directive does the targeting: the pointer's position
+ * within the row under it picks the relationship —
+ *
+ *   top third     insert BEFORE the target, as a sibling
+ *   middle third  drop INSIDE the target, as its child
+ *   bottom third  insert AFTER the target, as a sibling
+ *
+ * — drawn live as a line above, a line below, or a tinted row, so the drop
+ * never lands somewhere the indicator didn't say it would. Illegal targets
+ * (the dragged row itself, anything in its own subtree, anything the `canDrop`
+ * predicate vetoes) simply show no indicator.
+ *
+ * Set `scope="siblings"` to restrict dragging to reordering among the node's
+ * current siblings — no re-parenting, no nesting, and no `inside` zone at all
+ * (see `BkTreeDragScope`). That is the right default whenever the tree's
+ * levels mean something specific; `canDrop` covers anything more particular
+ * than the two built-in scopes.
+ *
+ * The directive never touches the tree. It resolves the drag into one event —
+ * `{ dragged, target, position }` — and the consumer applies it, usually with
+ * `moveBkTreeNode`. Hovering the middle of a row for `expandDelay` emits
+ * `treeExpand` so collapsed branches can be opened mid-drag; acting on it is
+ * likewise the consumer's call.
+ *
+ *   <div bkTreeDrag #td="bkTreeDrag" [treeRows]="t.renderData()"
+ *        (treeDrop)="onDrop($event)" (treeExpand)="open($event)">
+ *     <bk-table #t [data]="rows()">
+ *       <tbody cdkDropList [cdkDropListSortingDisabled]="true">
+ *         @for (row of t.renderData(); track row.data.id) {
+ *           <tr cdkDrag cdkDragLockAxis="y"
+ *               (cdkDragStarted)="td.onDragStart($event, row)"
+ *               (cdkDragMoved)="td.onDragMove($event)"
+ *               (cdkDragEnded)="td.onDragEnd()">
+ *
+ * Sorting stays disabled on the drop list deliberately: with rows shuffling
+ * under the pointer, an open branch's children sit still while their parent
+ * moves. With a static list and an indicator, nothing lies.
+ *
+ * Extends `BkTableDrag`, so the preview keeps its column widths and dragging
+ * near an edge still scrolls the table.
+ */
+class BkTreeDrag extends BkTableDrag {
+    /**
+     * The flattened rows currently rendered, in render order — the same array
+     * the `<tbody>` iterates. Row *i* of the tbody is entry *i* here; that
+     * index mapping is the whole basis of the hit-testing.
+     */
+    treeRows = input([], ...(ngDevMode ? [{ debugName: "treeRows" }] : []));
+    /** See `BkTreeDragScope`. Defaults to full re-parenting. */
+    scope = input('anywhere', ...(ngDevMode ? [{ debugName: "scope" }] : []));
+    /**
+     * Consumer veto over and above the built-in guards — e.g. "a person cannot
+     * contain a team". Return false and the indicator never appears.
+     */
+    canDrop = input(null, ...(ngDevMode ? [{ debugName: "canDrop" }] : []));
+    /** How long the pointer rests on a row's middle before `treeExpand` fires. */
+    expandDelay = input(700, ...(ngDevMode ? [{ debugName: "expandDelay" }] : []));
+    treeDrop = output();
+    treeExpand = output();
+    dragged = null;
+    target = null;
+    position = null;
+    line = null;
+    insideRow = null;
+    expandTimer = null;
+    expandFor = null;
+    onDragStart(event, row) {
+        super.onStart(event); // preview column widths
+        this.dragged = row;
+    }
+    onDragMove(event) {
+        super.onMove(event); // edge auto-scroll
+        if (!this.dragged)
+            return;
+        const container = this.scrollContainer();
+        const tbody = container?.querySelector('tbody');
+        if (!container || !tbody)
+            return;
+        const { y } = event.pointerPosition;
+        const rows = Array.from(tbody.rows);
+        // The dragged row stays in the DOM as the CDK's placeholder, so DOM order
+        // still matches treeRows() one to one — including any rows a mid-drag
+        // auto-expand has just added.
+        const index = rows.findIndex((tr) => {
+            const r = tr.getBoundingClientRect();
+            return y >= r.top && y < r.bottom;
+        });
+        const target = index >= 0 ? this.treeRows()[index] ?? null : null;
+        if (!target || !this.isLegal(target)) {
+            this.setTarget(null, null, null, container);
+            return;
+        }
+        const rect = rows[index].getBoundingClientRect();
+        const fraction = (y - rect.top) / rect.height;
+        // In 'siblings' scope there is no legal way to land inside a row — that
+        // would make the dragged node a child of something it wasn't a child of
+        // before, which is exactly what this scope rules out. The row splits in
+        // half instead of thirds, so the whole target is reachable as before/after.
+        const position = this.scope() === 'siblings'
+            ? fraction < 1 / 2
+                ? 'before'
+                : 'after'
+            : fraction < 1 / 3
+                ? 'before'
+                : fraction > 2 / 3
+                    ? 'after'
+                    : 'inside';
+        if (position !== 'inside' || this.canDropAt(target, 'inside')) {
+            this.setTarget(target, position, rows[index], container);
+        }
+        else {
+            this.setTarget(null, null, null, container);
+        }
+    }
+    onDragEnd() {
+        if (this.dragged && this.target && this.position) {
+            this.treeDrop.emit({ dragged: this.dragged, target: this.target, position: this.position });
+        }
+        this.clearIndicator();
+        this.clearExpandTimer();
+        this.dragged = null;
+        this.target = null;
+        this.position = null;
+    }
+    ngOnDestroy() {
+        this.clearIndicator();
+        this.clearExpandTimer();
+    }
+    /* ================= Guards ================= */
+    /**
+     * Structural legality, before the zone is even known. Dropping a node
+     * anywhere inside its own subtree would detach that branch from the tree
+     * with nothing left pointing at it — walking the parent chain is cheaper
+     * than searching the subtree, and `flattenBkTreeData` already carries it.
+     *
+     * In `'siblings'` scope, the only legal targets are the dragged node's
+     * current siblings — same `parent` reference, root-level nodes included
+     * (`undefined === undefined`). That alone also rules out every cycle: a
+     * node's siblings can never be its own ancestor.
+     */
+    isLegal(target) {
+        if (!this.dragged || target.data === this.dragged.data)
+            return false;
+        if (this.scope() === 'siblings') {
+            return target.parent === this.dragged.parent;
+        }
+        for (let p = target.parent; p;) {
+            if (p === this.dragged.data)
+                return false;
+            p = this.treeRows().find((r) => r.data === p)?.parent;
+        }
+        return true;
+    }
+    canDropAt(target, position) {
+        const veto = this.canDrop();
+        return !veto || veto(this.dragged, target, position);
+    }
+    /* ================= Indicator ================= */
+    setTarget(target, position, rowEl, container) {
+        const changed = target !== this.target || position !== this.position;
+        this.target = target && position && this.canDropAt(target, position) ? target : null;
+        this.position = this.target ? position : null;
+        if (!changed)
+            return;
+        this.clearIndicator();
+        if (!this.target || !rowEl) {
+            this.clearExpandTimer();
+            return;
+        }
+        if (this.position === 'inside') {
+            rowEl.classList.add('bk-tree-drop-inside');
+            this.insideRow = rowEl;
+            this.armExpandTimer(this.target);
+        }
+        else {
+            this.drawLine(rowEl, container, this.position === 'after');
+            this.clearExpandTimer();
+        }
+    }
+    drawLine(rowEl, container, below) {
+        if (!this.line) {
+            this.line = document.createElement('div');
+            this.line.className = 'bk-tree-drop-line';
+            container.appendChild(this.line);
+        }
+        const rowRect = rowEl.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const edge = below ? rowRect.bottom : rowRect.top;
+        this.line.style.top = `${edge - containerRect.top + container.scrollTop - 1}px`;
+        this.line.style.left = `${rowRect.left - containerRect.left + container.scrollLeft}px`;
+        this.line.style.width = `${rowRect.width}px`;
+    }
+    clearIndicator() {
+        this.line?.remove();
+        this.line = null;
+        this.insideRow?.classList.remove('bk-tree-drop-inside');
+        this.insideRow = null;
+    }
+    /* ================= Auto-expand ================= */
+    /**
+     * One timer per hovered node: moving within the same row keeps it running,
+     * moving to another row restarts it. The directive only reports the dwell —
+     * whether the node has children to show is the consumer's knowledge.
+     */
+    armExpandTimer(target) {
+        if (this.expandFor === target.data)
+            return;
+        this.clearExpandTimer();
+        this.expandFor = target.data;
+        this.expandTimer = setTimeout(() => this.treeExpand.emit(target), this.expandDelay());
+    }
+    clearExpandTimer() {
+        if (this.expandTimer)
+            clearTimeout(this.expandTimer);
+        this.expandTimer = null;
+        this.expandFor = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTreeDrag, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: BkTreeDrag, isStandalone: true, selector: "[bkTreeDrag]", inputs: { treeRows: { classPropertyName: "treeRows", publicName: "treeRows", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, canDrop: { classPropertyName: "canDrop", publicName: "canDrop", isSignal: true, isRequired: false, transformFunction: null }, expandDelay: { classPropertyName: "expandDelay", publicName: "expandDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeDrop: "treeDrop", treeExpand: "treeExpand" }, exportAs: ["bkTreeDrag"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTreeDrag, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bkTreeDrag]',
+                    standalone: true,
+                    exportAs: 'bkTreeDrag'
+                }]
+        }], propDecorators: { treeRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeRows", required: false }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }], canDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrop", required: false }] }], expandDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandDelay", required: false }] }], treeDrop: [{ type: i0.Output, args: ["treeDrop"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }] } });
+
+/**
+ * bk-table public surface.
+ *
+ * `BK_TABLE` is the convenience bundle — spread it into a standalone
+ * component's `imports` rather than listing eight symbols by hand:
+ *
+ *   imports: [...BK_TABLE]
+ */
+const BK_TABLE = [
+    BkTable,
+    BkTableTitle,
+    BkTableFooter,
+    BkVirtualScroll,
+    BkTh,
+    BkTd,
+    BkTrExpand,
+    BkTableSummary,
+    BkTableDrag,
+    BkDragHandle,
+    BkTreeDrag
+];
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -10729,5 +12503,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, NEUTRAL_APPEARANCE, POPOVER_PLACEMENTS, computePopoverPosition, deriveAppearance, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, parseColor, splitPlacement };
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BK_TABLE, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, 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 };
 //# sourceMappingURL=brickclay-org-ui.mjs.map