@brickclay-org/ui 0.1.90 → 0.1.92

package/fesm2022/brickclay-org-ui.mjs

@@ -8,9 +8,9 @@ import * as i2 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay } from '@angular/cdk/overlay';
 import { Subject, filter } from 'rxjs';
 import moment from 'moment';
-import * as i3 from '@angular/cdk/drag-drop';
+import * as i1$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CdkDragHandle } from '@angular/cdk/drag-drop';
-import * as i1$1 from '@angular/cdk/scrolling';
+import * as i1$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';
@@ -5955,7 +5955,7 @@ class BkGrid {
         return this.noRecordImgUrl || './assets/icons/no-data-found.jpg';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions", customClass: "customClass", actionIconClass: "actionIconClass", actionClass: "actionClass", showNoRecords: "showNoRecords", noRecordFoundHeight: "noRecordFoundHeight", noRecordImgUrl: "noRecordImgUrl", showNoRecordImg: "showNoRecordImg", noRecordMessage: "noRecordMessage", rows: "rows" }, outputs: { change: "change", actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                        [src]=\"icon.url\"\r\n                        class=\"size-4\"\r\n                        [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                        [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                        [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <!-- <bk-icon-button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [size]=\"\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                      (clicked)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\">\r\n                    </bk-icon-button> -->\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              @if (showNoRecordImg) {\r\n                <img\r\n                  [src]=\"noRecordImagePath\"\r\n                  class=\"mb-3 w-96\"\r\n                  alt=\"No data found\"\r\n                />\r\n              }\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >{{ noRecordMessage }}</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i3.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: i3.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: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass", "customBg", "customBorder", "customText"], outputs: ["clicked"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions", customClass: "customClass", actionIconClass: "actionIconClass", actionClass: "actionClass", showNoRecords: "showNoRecords", noRecordFoundHeight: "noRecordFoundHeight", noRecordImgUrl: "noRecordImgUrl", showNoRecordImg: "showNoRecordImg", noRecordMessage: "noRecordMessage", rows: "rows" }, outputs: { change: "change", actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                        [src]=\"icon.url\"\r\n                        class=\"size-4\"\r\n                        [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                        [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                        [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <!-- <bk-icon-button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [size]=\"\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                      (clicked)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\">\r\n                    </bk-icon-button> -->\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              @if (showNoRecordImg) {\r\n                <img\r\n                  [src]=\"noRecordImagePath\"\r\n                  class=\"mb-3 w-96\"\r\n                  alt=\"No data found\"\r\n                />\r\n              }\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >{{ noRecordMessage }}</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i1$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: i1$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: i1$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass", "customBg", "customBorder", "customText"], outputs: ["clicked"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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,
@@ -7393,6 +7393,19 @@ class BkInput {
     // =================== Internal State ===================
     isFocused = false;
     inputValue = '';
+    /**
+     * What the template's `[value]` binding actually renders. Deliberately a separate property
+     * from `inputValue` (which still mirrors the live text for `isFilled`/bookkeeping on every
+     * keystroke): re-applying `[value]` to an element that already displays that exact text is a
+     * no-op on most inputs, but on `type="number"` it isn't - Chromium doesn't skip the write just
+     * because the string is unchanged, and since `type="number"` also refuses `setSelectionRange`
+     * (it throws), we have no way to put the caret back afterwards. So `displayValue` is only ever
+     * written by genuinely external changes (writeValue(), the phone country-prefix swap) - never
+     * from handleInput() or the "parent mutated the native value" resync, both of which are only
+     * echoing back text the DOM already has. That keeps every self-originated edit from re-touching
+     * `.value` at all, which is the only reliable fix here given number inputs can't be caret-restored.
+     */
+    displayValue = '';
     isDropdownOpen = false;
     pendingMaskedValue = null;
     isPropagatingViewValue = false;
@@ -7485,6 +7498,7 @@ class BkInput {
         this.value = str;
         if (!this.maskValue) {
             this.inputValue = str;
+            this.displayValue = str;
             this.pendingMaskedValue = null;
             return;
         }
@@ -7511,6 +7525,7 @@ class BkInput {
     ngOnInit() {
         if (this.value !== undefined && this.value !== null && this.value !== '') {
             this.inputValue = String(this.value);
+            this.displayValue = this.inputValue;
         }
         if (this.password && this.type !== 'password')
             this.type = 'password';
@@ -7547,7 +7562,14 @@ class BkInput {
     }
     handleInput(event) {
         const viewVal = event.target.value ?? '';
-        // Keep the displayed value masked.
+        // Track the live text for isFilled/bookkeeping, but deliberately do NOT touch
+        // `displayValue` (what `[value]` actually renders) here - the native element already
+        // shows `viewVal` (it's where we just read it from), or for a masked field ngx-mask has
+        // already written its reformatted text directly to the DOM itself. Re-pushing that same
+        // text through `[value]` would be a redundant echo, and on `type="number"` a redundant
+        // `.value` write isn't a no-op the way it is on other input types - see the `displayValue`
+        // field's own comment above for why that's exactly what jumps the caret to the start while
+        // editing a decimal.
         this.inputValue = viewVal;
         // Decide what to write to the model.
         const modelRaw = this.currency
@@ -7565,6 +7587,8 @@ class BkInput {
         this.input.emit(event);
         // If parent handlers mutate the underlying native input value (e.g. clamping/formatting),
         // resync our internal view-model from the real input to avoid visual "append" artifacts.
+        // Only `inputValue` (bookkeeping) - the parent already wrote the new text straight to the
+        // DOM itself, so, same as above, `displayValue` has nothing left to do here.
         queueMicrotask(() => {
             const nativeVal = this.inputField?.nativeElement?.value;
             if (nativeVal !== undefined && nativeVal !== null && nativeVal !== this.inputValue) {
@@ -7654,6 +7678,7 @@ class BkInput {
             newPhone = ''; // optionally: newPhone = country.prefix;
         }
         this.inputValue = newPhone;
+        this.displayValue = newPhone;
         this.value = newPhone;
         this.onChange(newPhone);
         setTimeout(() => {
@@ -7700,10 +7725,12 @@ class BkInput {
         this.pendingMaskedValue = value;
         if (!this.maskValue || !this.maskDirective || !this.inputField?.nativeElement) {
             this.inputValue = value;
+            this.displayValue = value;
             return;
         }
         await this.maskDirective.writeValue(value);
         this.inputValue = this.inputField.nativeElement.value ?? '';
+        this.displayValue = this.inputValue;
         this.pendingMaskedValue = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -7714,7 +7741,7 @@ class BkInput {
                 useExisting: forwardRef(() => BkInput),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "maskDirective", first: true, predicate: NgxMaskDirective, descendants: true }, { propertyName: "phoneOverlay", first: true, predicate: ["phoneOverlay"], descendants: true }], ngImport: i0, template: "<div class=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-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=\"bk-input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-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=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-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}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-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}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.bk-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;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-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;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-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}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-input-phone-selector-arrow{@apply w-3 h-3;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
+        ], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "maskDirective", first: true, predicate: NgxMaskDirective, descendants: true }, { propertyName: "phoneOverlay", first: true, predicate: ["phoneOverlay"], descendants: true }], ngImport: i0, template: "<div class=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-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]=\"displayValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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]=\"displayValue\"\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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-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=\"bk-input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-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=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-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}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-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}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.bk-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;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-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;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-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}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-input-phone-selector-arrow{@apply w-3 h-3;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, decorators: [{
             type: Component,
@@ -7725,7 +7752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkInput),
                             multi: true
                         }
-                    ], template: "<div class=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-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=\"bk-input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-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=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-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}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-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}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.bk-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;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-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;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-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}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
+                    ], template: "<div class=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-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]=\"displayValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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]=\"displayValue\"\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=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-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        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-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=\"bk-input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-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=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-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}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-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}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.bk-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;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-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;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-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}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -9166,7 +9193,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: i1$2.CdkScrollable }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogContent, decorators: [{
             type: Directive,
@@ -10459,6 +10486,15 @@ class BkToastrService {
             scrollStrategy: this.overlay.scrollStrategies.noop(),
             panelClass: 'bk-toastr-panel',
         });
+        // `panelClass` only reaches `.cdk-overlay-pane` — but every overlay in a consuming app
+        // (dialogs, selects, popovers, date/time pickers) shares the same `.cdk-overlay-container`,
+        // and their *wrappers* (`.cdk-global-overlay-wrapper` / `.cdk-overlay-connected-position-
+        // bounding-box`) all tie at z-index:1000 in CDK's prebuilt CSS. A tie falls back to DOM
+        // order, so whichever overlay attached most recently wins — meaning a dialog/dropdown opened
+        // after this toast container was first created would render on top of it no matter what
+        // z-index the pane has. `hostElement` is the actual wrapper competing in that stacking
+        // comparison, so it — not the pane — is what has to be pinned above everything else.
+        this.overlayRef.hostElement.style.zIndex = '2147483647';
         this.componentRef = this.overlayRef.attach(new ComponentPortal(BkToastr));
     }
     /** Show a toast with full config */
@@ -11733,10 +11769,13 @@ class BkMenu {
     }
     // Pop-up mode: open a parent's fly-out on hover (and close its siblings).
     onItemEnter(item, siblings, event, level, parent) {
-        // Hover only opens/switches fly-outs in hover mode. In click mode every
-        // open and switch must come from a real click, so hover does nothing —
-        // even while a sibling's panel is already open.
-        if (!this.isHoverTrigger || item.disabled || !this.hasChildren(item))
+        if (!this.isPopup || item.disabled || !this.hasChildren(item))
+            return;
+        // Click mode still follows the pointer once a panel at this level is open,
+        // the way a native menubar does — hovering a sibling switches without a
+        // second click. With nothing open, hover does nothing.
+        if (this.trigger === 'click'
+            && !siblings.some(sibling => sibling.id !== item.id && this.isOpen(sibling)))
             return;
         // Re-entering after crossing the gap: keep what's already up rather than
         // tearing it down and re-placing it.
@@ -13737,7 +13776,7 @@ 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: i3.CdkDragHandle }], ngImport: i0, template: `
+    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: i1$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">
@@ -14038,6 +14077,396 @@ const BK_TABLE = [
     BkTreeDrag
 ];
 
+/**
+ * Content-agnostic kanban board: column layout, card positioning and
+ * drag-and-drop, and nothing about what a card contains or what a click on
+ * one should do.
+ *
+ * The board never renders a card's insides itself — `cardTemplate` does that,
+ * receiving the card and its column as context:
+ *
+ *   <bk-kanban
+ *     [columns]="columns"
+ *     [cards]="cards()"
+ *     [cardTemplate]="card"
+ *     (cardMoved)="onCardMoved($event)"
+ *     (cardClicked)="onCardClicked($event)"
+ *   ></bk-kanban>
+ *
+ *   <ng-template #card let-card let-column="column">
+ *     <div [bkKanbanClickTarget]="'hours'">{{ card.hours }}h</div>
+ *     {{ card.title }}
+ *   </ng-template>
+ *
+ * That is deliberate, not an oversight — see the package spec's Design
+ * Principles. Three consequences fall out of it directly:
+ *
+ * - **Data ownership stays with the caller.** A move is reported through
+ *   `cardMoved`, not applied to some copy of `cards` this component keeps to
+ *   itself. Internally it *does* mutate the card objects it was handed
+ *   (`columnIdField`'s field, and an `order` field used to remember position
+ *   within a column) so the board redraws in the right place immediately,
+ *   exactly the way `bk-grid`'s own row-drag mutates `result` in place and
+ *   renumbers `sortOrder` — but persistence, and reverting the view if a
+ *   save fails, are the host's job. Reverting is just handing back a
+ *   `cards` array (or updated objects) that reflect the pre-move state; nothing
+ *   further to undo on this end.
+ * - **Clicks are reported, never acted on.** `cardClicked` says which card and
+ *   which named region (see `[bkKanbanClickTarget]`); opening a popup or
+ *   doing nothing at all is entirely up to whoever is listening.
+ * - **A card's own shape is never inspected**, beyond the two fields above.
+ *   Tags, hours, avatars, due dates — the board doesn't know they exist.
+ */
+class BkKanban {
+    /* ================= Inputs ================= */
+    /** Column/status definitions. Unlimited — the board renders whatever it's given. */
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /** Flat card list. Grouped into columns via `columnIdField`, ordered within
+     *  a column by an `order` field when the cards carry one, otherwise left in
+     *  the sequence they appear here. */
+    cards = input.required(...(ngDevMode ? [{ debugName: "cards" }] : []));
+    /** Renders a card's body. Receives `{ $implicit: card, card, column, index }`. */
+    cardTemplate = input.required(...(ngDevMode ? [{ debugName: "cardTemplate" }] : []));
+    /** Field name, or a resolver function, that gives a card's column id.
+     *
+     *  A field name can be both read and written, so a cross-column drop
+     *  updates it directly. A resolver function is read-only — the board still
+     *  reports the move via `cardMoved`, but leaves updating the source data to
+     *  the host, since there's nowhere on a function to write the new value. */
+    columnIdField = input('columnId', ...(ngDevMode ? [{ debugName: "columnIdField" }] : []));
+    dragEnabled = input(true, ...(ngDevMode ? [{ debugName: "dragEnabled" }] : []));
+    dragScope = input('both', ...(ngDevMode ? [{ debugName: "dragScope" }] : []));
+    wipLimitBehavior = input('warn', ...(ngDevMode ? [{ debugName: "wipLimitBehavior" }] : []));
+    /** Lets columns themselves be dragged into a new order, via their header
+     *  (`.bk-kanban-column-header` is the drag handle — a card's own drag
+     *  keeps working independently, since it's a separate, unconnected drop
+     *  list one level down). Off by default: reordering the board's own
+     *  columns is a bigger commitment than reordering cards within it, and not
+     *  every consumer wants a "To do / In progress / Done" pipeline to be
+     *  rearrangeable. `columns` is mutated in place the same way `cards` is
+     *  (see the component doc) — persisting the new order, if it needs to be,
+     *  is the host's job, done from `columnMoved`. */
+    columnDragEnabled = input(false, ...(ngDevMode ? [{ debugName: "columnDragEnabled" }] : []));
+    /** See `BkKanbanColumnScrollMode`. */
+    columnScrollMode = input('body', ...(ngDevMode ? [{ debugName: "columnScrollMode" }] : []));
+    /** Extra class(es) appended to the board's own wrapper — `.bk-kanban-board`
+     *  in `kanban.html`, the element that directly contains the scrollable
+     *  region holding every column. Same idea as `columnClass`/`colHeaderClass`
+     *  one level down: it only adds classes, nothing here replaces bk-kanban's
+     *  own layout.
+     *
+     *  Deliberately kept off the *scrolling* element itself
+     *  (`.bk-kanban`, one level further in): a `padding` or `border` in here
+     *  would otherwise become part of what has to be scrolled past, and change
+     *  where the scrollbar itself ends up sitting relative to the columns —
+     *  this wrapper exists specifically so `boardClass` can decorate (a
+     *  background, a border, padding around the whole board) without ever
+     *  touching the box CDK and `columnScrollMode` are actually scrolling. */
+    boardClass = input('', ...(ngDevMode ? [{ debugName: "boardClass" }] : []));
+    /** Identity for `@for`'s `track`. Defaults to position in the rendered column. */
+    trackBy = input(null, ...(ngDevMode ? [{ debugName: "trackBy" }] : []));
+    /** Rendered in a fixed slot in every column's header — e.g. an "add card"
+     *  button. Receives `BkKanbanColumnActionsContext`. The board owns where it
+     *  sits; the consumer owns what it does. */
+    columnHeaderActionsTemplate = input(null, ...(ngDevMode ? [{ debugName: "columnHeaderActionsTemplate" }] : []));
+    /** Overrides the built-in "No cards" placeholder for an empty column.
+     *  Receives `BkKanbanEmptyStateContext`. Takes priority over both
+     *  `noDataText` and a column's own `noDataText` — see `emptyStateText`. */
+    emptyStateTemplate = input(null, ...(ngDevMode ? [{ debugName: "emptyStateTemplate" }] : []));
+    /** Board-wide placeholder text for an empty column, used whenever a column
+     *  doesn't set its own `noDataText`. Only read when `emptyStateTemplate`
+     *  isn't supplied — see `emptyStateText`. */
+    noDataText = input('No cards', ...(ngDevMode ? [{ debugName: "noDataText" }] : []));
+    /** Whether a column flags an over-limit drop while still dragging (`'live'`)
+     *  or only once the drop is attempted (`'on-drop'`). See the doc block on
+     *  `isLiveOverLimit` for how the two relate to `wipLimitBehavior`. */
+    dragPreviewMode = input('live', ...(ngDevMode ? [{ debugName: "dragPreviewMode" }] : []));
+    /* ================= Outputs ================= */
+    cardMoved = output();
+    cardClicked = output();
+    columnLimitExceeded = output();
+    /** A column reorder completed — see `columnDragEnabled`. */
+    columnMoved = output();
+    /** Reserved — see `BkKanbanColumnActionsContext.trigger`. Most consumers
+     *  bind a click handler directly on their own header-actions template and
+     *  never reach for this. */
+    columnActionTriggered = output();
+    /* ================= Grouping ================= */
+    /**
+     * Bumped after every in-place mutation (`setColumnId`, `renumber`) so
+     * `grouped` re-runs even though neither `cards()`'s array identity nor any
+     * card's object identity changed — the same trick as the table demo's
+     * `pgSelectionTick`, needed for exactly the same reason: signals only
+     * notice a new reference, and mutating fields in place is what lets a drop
+     * redraw in the right place without waiting on the host to hand back a
+     * whole new array.
+     */
+    structureTick = signal(0, ...(ngDevMode ? [{ debugName: "structureTick" }] : []));
+    /** Cards grouped by column id, each group in `order` order when present
+     *  (falling back to their sequence in `cards()` otherwise). Cards whose
+     *  resolved column id matches no known column are dropped silently rather
+     *  than rendered nowhere. */
+    grouped = computed(() => {
+        this.structureTick();
+        const map = new Map();
+        for (const column of this.columns())
+            map.set(column.id, []);
+        for (const card of this.cards()) {
+            const list = map.get(this.resolveColumnId(card));
+            list?.push(card);
+        }
+        for (const list of map.values()) {
+            if (list.some((c) => this.cardOrder(c) !== null)) {
+                list.sort((a, b) => (this.cardOrder(a) ?? 0) - (this.cardOrder(b) ?? 0));
+            }
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "grouped" }] : []));
+    /** The cards to render for one column, in display order. */
+    cardsFor(columnId) {
+        return this.grouped().get(columnId) ?? [];
+    }
+    resolveColumnId(card) {
+        const field = this.columnIdField();
+        return typeof field === 'function' ? field(card) : card[field];
+    }
+    cardOrder(card) {
+        const value = card['order'];
+        return typeof value === 'number' ? value : null;
+    }
+    resolveTrackBy(card, index) {
+        const fn = this.trackBy();
+        return fn ? fn(card) : index;
+    }
+    /* ================= Column-level view state ================= */
+    /** Column-header count badge, flagged once the column is over its limit —
+     *  only while `wipLimitBehavior` is `'warn'`; `'block'` should never let a
+     *  column get there and `'none'` treats the number as pure information. */
+    isColumnOverLimit(column) {
+        return (this.wipLimitBehavior() === 'warn' &&
+            column.wipLimit != null &&
+            this.cardsFor(column.id).length > column.wipLimit);
+    }
+    /** "3" with no limit, "3 / 5" with one — the header count badge's label. */
+    columnCountLabel(column) {
+        const count = this.cardsFor(column.id).length;
+        return column.wipLimit != null ? `${count} / ${column.wipLimit}` : `${count}`;
+    }
+    columnActionsContext(column) {
+        return {
+            $implicit: column,
+            column,
+            trigger: () => this.columnActionTriggered.emit({ columnId: column.id })
+        };
+    }
+    emptyStateContext(column) {
+        return { $implicit: column, column };
+    }
+    /** Text for the built-in empty-column placeholder: a column's own
+     *  `noDataText` when it sets one, else the board-wide `noDataText` input.
+     *  Only consulted when `emptyStateTemplate` isn't supplied — the template
+     *  wins outright once given, exactly like `emptyStateContext` itself. */
+    emptyStateText(column) {
+        return column.noDataText ?? this.noDataText();
+    }
+    cardContext(card, column, index) {
+        return { $implicit: card, card, column, index };
+    }
+    /** Which columns a column's drop list connects to, per `dragScope`. */
+    connectedListIds(columnId) {
+        if (!this.dragEnabled() || this.dragScope() === 'same')
+            return [];
+        return this.columns()
+            .filter((c) => c.id !== columnId)
+            .map((c) => c.id);
+    }
+    /** `'cross'` means *only* moves between columns — reordering within one has
+     *  to be switched off at the list level, since a scoped-out `connectedTo`
+     *  alone still leaves the list free to sort itself. */
+    sortingDisabled = computed(() => this.dragScope() === 'cross', ...(ngDevMode ? [{ debugName: "sortingDisabled" }] : []));
+    /* ================= Column-level drag (reordering columns) ================= */
+    /**
+     * `columns` is reordered in place — same trick as `cards` (see the
+     * component doc): the array reference the host handed in is mutated
+     * directly (`moveItemInArray`) rather than swapped for a new one, so the
+     * next render just reflects the new order. There's no `structureTick`-style
+     * signal to bump here the way card moves need one — nothing derives
+     * columns through a `computed()` the way `cardsFor` derives through
+     * `grouped`; the template reads `columns()` directly in its `@for`, so the
+     * drop event's own change detection pass is enough.
+     */
+    onColumnDrop(event) {
+        if (!this.columnDragEnabled() || event.previousIndex === event.currentIndex)
+            return;
+        const columns = this.columns();
+        const moved = columns[event.previousIndex];
+        moveItemInArray(columns, event.previousIndex, event.currentIndex);
+        this.columnMoved.emit({
+            columnId: moved.id,
+            fromIndex: event.previousIndex,
+            toIndex: event.currentIndex
+        });
+    }
+    /* ================= Drag state (for the live WIP preview) ================= */
+    dragSourceColumnId = signal(null, ...(ngDevMode ? [{ debugName: "dragSourceColumnId" }] : []));
+    hoveredOverLimitColumnId = signal(null, ...(ngDevMode ? [{ debugName: "hoveredOverLimitColumnId" }] : []));
+    onDragStarted(column) {
+        this.dragSourceColumnId.set(column.id);
+    }
+    onDragEnded() {
+        this.dragSourceColumnId.set(null);
+        this.hoveredOverLimitColumnId.set(null);
+    }
+    /**
+     * Live WIP-limit preview (§12 of the spec): as the dragged card enters a
+     * column, work out whether *landing* here would exceed its `wipLimit` and
+     * flag it immediately — before release, and independent of
+     * `wipLimitBehavior`, which only governs what happens once the card is
+     * actually dropped. A card re-entering its own source column doesn't grow
+     * that column's count, so only a genuine cross-column entry counts as +1.
+     */
+    onListEntered(event, column) {
+        if (this.dragPreviewMode() !== 'live' || column.wipLimit == null)
+            return;
+        const enteringFromElsewhere = this.dragSourceColumnId() !== column.id;
+        const wouldBeCount = event.container.data.length + (enteringFromElsewhere ? 1 : 0);
+        this.hoveredOverLimitColumnId.set(wouldBeCount > column.wipLimit ? column.id : null);
+    }
+    onListExited(column) {
+        if (this.hoveredOverLimitColumnId() === column.id)
+            this.hoveredOverLimitColumnId.set(null);
+    }
+    isLiveOverLimit(column) {
+        return this.hoveredOverLimitColumnId() === column.id;
+    }
+    /* ================= Drop handling ================= */
+    onDrop(event, column) {
+        this.dragSourceColumnId.set(null);
+        this.hoveredOverLimitColumnId.set(null);
+        if (!this.dragEnabled())
+            return;
+        const fromColumnId = event.previousContainer.id;
+        const toColumnId = event.container.id;
+        const card = event.item.data;
+        if (fromColumnId === toColumnId) {
+            if (event.previousIndex === event.currentIndex)
+                return;
+            const list = this.cardsFor(toColumnId);
+            moveItemInArray(list, event.previousIndex, event.currentIndex);
+            this.renumber(list);
+            this.structureTick.update((n) => n + 1);
+            this.cardMoved.emit({ card, fromColumnId, toColumnId, newIndex: event.currentIndex });
+            return;
+        }
+        const targetList = this.cardsFor(toColumnId);
+        const attemptedCount = targetList.length + 1;
+        const wipLimit = column.wipLimit;
+        const wouldExceed = wipLimit != null && attemptedCount > wipLimit;
+        if (wouldExceed) {
+            this.columnLimitExceeded.emit({ columnId: toColumnId, wipLimit: wipLimit, attemptedCount });
+        }
+        if (wouldExceed && this.wipLimitBehavior() === 'block') {
+            // Rejected: nothing below is mutated, so the next render finds the card
+            // still exactly where `cards()` says it is — the same "snap back" any
+            // cancelled CDK drag shows, not a bespoke undo.
+            return;
+        }
+        const sourceList = this.cardsFor(fromColumnId);
+        const fromIndex = sourceList.indexOf(card);
+        if (fromIndex < 0)
+            return; // Column and card disagree about where it lives; leave state alone.
+        sourceList.splice(fromIndex, 1);
+        targetList.splice(event.currentIndex, 0, card);
+        this.setColumnId(card, toColumnId);
+        this.renumber(sourceList);
+        this.renumber(targetList);
+        this.structureTick.update((n) => n + 1);
+        this.cardMoved.emit({ card, fromColumnId, toColumnId, newIndex: event.currentIndex });
+    }
+    setColumnId(card, columnId) {
+        const field = this.columnIdField();
+        // A resolver function has nowhere to write back to — the host owns that
+        // mapping and is expected to apply the move from `cardMoved` itself.
+        if (typeof field === 'string')
+            card[field] = columnId;
+    }
+    renumber(list) {
+        list.forEach((card, index) => {
+            card['order'] = index;
+        });
+    }
+    /* ================= Click handling (§5) ================= */
+    /**
+     * One listener per card resolves both the whole-card click and every
+     * `[bkKanbanClickTarget]` region: `closest()` from the actual event target
+     * finds the nearest marked ancestor within this card, or there isn't one
+     * and it's a plain card click. Either way this fires exactly once — never
+     * once for the region and again for the card underneath it.
+     */
+    onCardClick(event, card) {
+        const wrapper = event.currentTarget;
+        const marked = event.target?.closest('[data-bk-kanban-click-target]');
+        const target = marked && wrapper.contains(marked)
+            ? (marked.dataset['bkKanbanClickTarget'] ?? 'card')
+            : 'card';
+        this.cardClicked.emit({ card, target });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkKanban, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkKanban, isStandalone: true, selector: "bk-kanban", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: true, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: true, isRequired: true, transformFunction: null }, columnIdField: { classPropertyName: "columnIdField", publicName: "columnIdField", isSignal: true, isRequired: false, transformFunction: null }, dragEnabled: { classPropertyName: "dragEnabled", publicName: "dragEnabled", isSignal: true, isRequired: false, transformFunction: null }, dragScope: { classPropertyName: "dragScope", publicName: "dragScope", isSignal: true, isRequired: false, transformFunction: null }, wipLimitBehavior: { classPropertyName: "wipLimitBehavior", publicName: "wipLimitBehavior", isSignal: true, isRequired: false, transformFunction: null }, columnDragEnabled: { classPropertyName: "columnDragEnabled", publicName: "columnDragEnabled", isSignal: true, isRequired: false, transformFunction: null }, columnScrollMode: { classPropertyName: "columnScrollMode", publicName: "columnScrollMode", isSignal: true, isRequired: false, transformFunction: null }, boardClass: { classPropertyName: "boardClass", publicName: "boardClass", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, columnHeaderActionsTemplate: { classPropertyName: "columnHeaderActionsTemplate", publicName: "columnHeaderActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyStateTemplate: { classPropertyName: "emptyStateTemplate", publicName: "emptyStateTemplate", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, dragPreviewMode: { classPropertyName: "dragPreviewMode", publicName: "dragPreviewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardMoved: "cardMoved", cardClicked: "cardClicked", columnLimitExceeded: "columnLimitExceeded", columnMoved: "columnMoved", columnActionTriggered: "columnActionTriggered" }, host: { classAttribute: "bk-kanban-host" }, exportAs: ["bkKanban"], ngImport: i0, template: "<div class=\"bk-kanban-board\" [class]=\"boardClass()\">\r\n  <div\r\n    class=\"bk-kanban\"\r\n    [class.bk-kanban--scroll-wrapper]=\"columnScrollMode() === 'wrapper'\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    [cdkDropListData]=\"columns()\"\r\n    [cdkDropListDisabled]=\"!columnDragEnabled()\"\r\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\r\n  >\r\n    @for (column of columns(); track column.id) {\r\n      <div\r\n        class=\"bk-kanban-column\"\r\n        cdkDrag\r\n        [cdkDragData]=\"column\"\r\n        [cdkDragDisabled]=\"!columnDragEnabled()\"\r\n        [class]=\"column.columnClass\"\r\n        [class.bk-kanban-column-warn]=\"isColumnOverLimit(column)\"\r\n        [class.bk-kanban-column-live-over]=\"isLiveOverLimit(column)\"\r\n      >\r\n        <div class=\"bk-kanban-column-header\" cdkDragHandle [class]=\"column.colHeaderClass\">\r\n          <span class=\"bk-kanban-column-title\">{{ column.label }}</span>\r\n          <bk-badge\r\n            class=\"bk-kanban-column-count\"\r\n            [label]=\"columnCountLabel(column)\"\r\n            size=\"sm\"\r\n            [color]=\"isColumnOverLimit(column) || isLiveOverLimit(column) ? 'Warning' : 'Gray'\"\r\n          ></bk-badge>\r\n\r\n          @if (columnHeaderActionsTemplate(); as actionsTpl) {\r\n            <div class=\"bk-kanban-column-actions\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"actionsTpl\"\r\n                [ngTemplateOutletContext]=\"columnActionsContext(column)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <div\r\n          class=\"bk-kanban-column-body\"\r\n          cdkDropList\r\n          [id]=\"column.id\"\r\n          [cdkDropListData]=\"cardsFor(column.id)\"\r\n          [cdkDropListConnectedTo]=\"connectedListIds(column.id)\"\r\n          [cdkDropListSortingDisabled]=\"sortingDisabled()\"\r\n          [cdkDropListDisabled]=\"!dragEnabled()\"\r\n          (cdkDropListDropped)=\"onDrop($event, column)\"\r\n          (cdkDropListEntered)=\"onListEntered($event, column)\"\r\n          (cdkDropListExited)=\"onListExited(column)\"\r\n        >\r\n          @if (cardsFor(column.id).length === 0) {\r\n            <div class=\"bk-kanban-empty\">\r\n              @if (emptyStateTemplate(); as emptyTpl) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"emptyTpl\"\r\n                  [ngTemplateOutletContext]=\"emptyStateContext(column)\"\r\n                ></ng-container>\r\n              } @else {\r\n                <span class=\"bk-kanban-empty-text\">{{ emptyStateText(column) }}</span>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @for (card of cardsFor(column.id); track resolveTrackBy(card, $index); let i = $index) {\r\n            <div\r\n              class=\"bk-kanban-card\"\r\n              cdkDrag\r\n              [cdkDragData]=\"card\"\r\n              [cdkDragDisabled]=\"!dragEnabled()\"\r\n              (cdkDragStarted)=\"onDragStarted(column)\"\r\n              (cdkDragEnded)=\"onDragEnded()\"\r\n              (click)=\"onCardClick($event, card)\"\r\n            >\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"cardTemplate()\"\r\n                [ngTemplateOutletContext]=\"cardContext(card, column, i)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".bk-kanban-host,.bk-kanban-board{display:block;height:100%}.bk-kanban{@apply flex items-stretch gap-4 w-full h-full overflow-x-auto;scroll-snap-type:x proximity}.bk-kanban--scroll-wrapper{align-items:flex-start;overflow-y:auto}.bk-kanban--scroll-wrapper .bk-kanban-column-body{overflow-y:visible}.bk-kanban-column{@apply flex flex-col shrink-0 w-[300px] max-w-[85vw] rounded-xl border border-[#EBEDF3] overflow-hidden;background:var(--bk-kanban-column-bg, #f9fafa);scroll-snap-align:start}.bk-kanban-column-header{@apply flex items-center justify-between gap-2 px-3 py-2.5;background:var(--bk-kanban-header-bg, #f9fafa);border-bottom:1px solid #ebedf3}.bk-kanban-column:not(.cdk-drag-disabled)>.bk-kanban-column-header{cursor:grab}.bk-kanban-column.cdk-drag-dragging>.bk-kanban-column-header{cursor:grabbing}.bk-kanban-column-title{@apply text-[13px] font-semibold text-[#15191E] truncate;}.bk-kanban-column-count{@apply shrink-0;}.bk-kanban-column-actions{@apply shrink-0 flex items-center;}.bk-kanban-column-body{@apply flex-1 flex flex-col gap-2 p-2.5 overflow-y-auto;min-height:96px}.bk-kanban-empty{@apply flex flex-1 flex-col items-center justify-center py-6 text-center;}.bk-kanban-empty-text{@apply text-xs font-medium text-[#78829D];}.bk-kanban-card{@apply bg-white rounded-lg border border-[#EBEDF3] p-3 cursor-pointer;box-shadow:0 1px 2px #1018280a;transition:box-shadow .15s ease,border-color .15s ease}.bk-kanban-card:hover{@apply border-[#C4CADA];box-shadow:0 2px 6px #10182814}.bk-kanban-card.cdk-drag-dragging{transition:none}.bk-kanban-column-warn{@apply border-amber-300 bg-amber-50;}.bk-kanban-column-warn .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-column-live-over{@apply border-amber-400 bg-amber-50;outline:2px dashed theme(\"colors.amber.400\");outline-offset:-2px}.bk-kanban-column-live-over .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-card.cdk-drag-preview{@apply rounded-lg;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:grabbing}.bk-kanban-card.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.6}.bk-kanban-column-body.cdk-drop-list-dragging .bk-kanban-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.bk-kanban-column.cdk-drag-preview{box-shadow:0 8px 10px -6px #0003,0 20px 25px -5px #00000024}.bk-kanban-column.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.5}.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-header,.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-body{visibility:hidden}.bk-kanban.cdk-drop-list-dragging .bk-kanban-column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@media (max-width: 640px){.bk-kanban-column{width:86vw}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$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: i1$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: i1$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass", "customBg", "customBorder", "customText"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkKanban, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-kanban', standalone: true, exportAs: 'bkKanban', imports: [NgTemplateOutlet, DragDropModule, BkBadge], encapsulation: ViewEncapsulation.None, host: {
+                        class: 'bk-kanban-host'
+                    }, template: "<div class=\"bk-kanban-board\" [class]=\"boardClass()\">\r\n  <div\r\n    class=\"bk-kanban\"\r\n    [class.bk-kanban--scroll-wrapper]=\"columnScrollMode() === 'wrapper'\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    [cdkDropListData]=\"columns()\"\r\n    [cdkDropListDisabled]=\"!columnDragEnabled()\"\r\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\r\n  >\r\n    @for (column of columns(); track column.id) {\r\n      <div\r\n        class=\"bk-kanban-column\"\r\n        cdkDrag\r\n        [cdkDragData]=\"column\"\r\n        [cdkDragDisabled]=\"!columnDragEnabled()\"\r\n        [class]=\"column.columnClass\"\r\n        [class.bk-kanban-column-warn]=\"isColumnOverLimit(column)\"\r\n        [class.bk-kanban-column-live-over]=\"isLiveOverLimit(column)\"\r\n      >\r\n        <div class=\"bk-kanban-column-header\" cdkDragHandle [class]=\"column.colHeaderClass\">\r\n          <span class=\"bk-kanban-column-title\">{{ column.label }}</span>\r\n          <bk-badge\r\n            class=\"bk-kanban-column-count\"\r\n            [label]=\"columnCountLabel(column)\"\r\n            size=\"sm\"\r\n            [color]=\"isColumnOverLimit(column) || isLiveOverLimit(column) ? 'Warning' : 'Gray'\"\r\n          ></bk-badge>\r\n\r\n          @if (columnHeaderActionsTemplate(); as actionsTpl) {\r\n            <div class=\"bk-kanban-column-actions\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"actionsTpl\"\r\n                [ngTemplateOutletContext]=\"columnActionsContext(column)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <div\r\n          class=\"bk-kanban-column-body\"\r\n          cdkDropList\r\n          [id]=\"column.id\"\r\n          [cdkDropListData]=\"cardsFor(column.id)\"\r\n          [cdkDropListConnectedTo]=\"connectedListIds(column.id)\"\r\n          [cdkDropListSortingDisabled]=\"sortingDisabled()\"\r\n          [cdkDropListDisabled]=\"!dragEnabled()\"\r\n          (cdkDropListDropped)=\"onDrop($event, column)\"\r\n          (cdkDropListEntered)=\"onListEntered($event, column)\"\r\n          (cdkDropListExited)=\"onListExited(column)\"\r\n        >\r\n          @if (cardsFor(column.id).length === 0) {\r\n            <div class=\"bk-kanban-empty\">\r\n              @if (emptyStateTemplate(); as emptyTpl) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"emptyTpl\"\r\n                  [ngTemplateOutletContext]=\"emptyStateContext(column)\"\r\n                ></ng-container>\r\n              } @else {\r\n                <span class=\"bk-kanban-empty-text\">{{ emptyStateText(column) }}</span>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @for (card of cardsFor(column.id); track resolveTrackBy(card, $index); let i = $index) {\r\n            <div\r\n              class=\"bk-kanban-card\"\r\n              cdkDrag\r\n              [cdkDragData]=\"card\"\r\n              [cdkDragDisabled]=\"!dragEnabled()\"\r\n              (cdkDragStarted)=\"onDragStarted(column)\"\r\n              (cdkDragEnded)=\"onDragEnded()\"\r\n              (click)=\"onCardClick($event, card)\"\r\n            >\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"cardTemplate()\"\r\n                [ngTemplateOutletContext]=\"cardContext(card, column, i)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".bk-kanban-host,.bk-kanban-board{display:block;height:100%}.bk-kanban{@apply flex items-stretch gap-4 w-full h-full overflow-x-auto;scroll-snap-type:x proximity}.bk-kanban--scroll-wrapper{align-items:flex-start;overflow-y:auto}.bk-kanban--scroll-wrapper .bk-kanban-column-body{overflow-y:visible}.bk-kanban-column{@apply flex flex-col shrink-0 w-[300px] max-w-[85vw] rounded-xl border border-[#EBEDF3] overflow-hidden;background:var(--bk-kanban-column-bg, #f9fafa);scroll-snap-align:start}.bk-kanban-column-header{@apply flex items-center justify-between gap-2 px-3 py-2.5;background:var(--bk-kanban-header-bg, #f9fafa);border-bottom:1px solid #ebedf3}.bk-kanban-column:not(.cdk-drag-disabled)>.bk-kanban-column-header{cursor:grab}.bk-kanban-column.cdk-drag-dragging>.bk-kanban-column-header{cursor:grabbing}.bk-kanban-column-title{@apply text-[13px] font-semibold text-[#15191E] truncate;}.bk-kanban-column-count{@apply shrink-0;}.bk-kanban-column-actions{@apply shrink-0 flex items-center;}.bk-kanban-column-body{@apply flex-1 flex flex-col gap-2 p-2.5 overflow-y-auto;min-height:96px}.bk-kanban-empty{@apply flex flex-1 flex-col items-center justify-center py-6 text-center;}.bk-kanban-empty-text{@apply text-xs font-medium text-[#78829D];}.bk-kanban-card{@apply bg-white rounded-lg border border-[#EBEDF3] p-3 cursor-pointer;box-shadow:0 1px 2px #1018280a;transition:box-shadow .15s ease,border-color .15s ease}.bk-kanban-card:hover{@apply border-[#C4CADA];box-shadow:0 2px 6px #10182814}.bk-kanban-card.cdk-drag-dragging{transition:none}.bk-kanban-column-warn{@apply border-amber-300 bg-amber-50;}.bk-kanban-column-warn .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-column-live-over{@apply border-amber-400 bg-amber-50;outline:2px dashed theme(\"colors.amber.400\");outline-offset:-2px}.bk-kanban-column-live-over .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-card.cdk-drag-preview{@apply rounded-lg;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:grabbing}.bk-kanban-card.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.6}.bk-kanban-column-body.cdk-drop-list-dragging .bk-kanban-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.bk-kanban-column.cdk-drag-preview{box-shadow:0 8px 10px -6px #0003,0 20px 25px -5px #00000024}.bk-kanban-column.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.5}.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-header,.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-body{visibility:hidden}.bk-kanban.cdk-drop-list-dragging .bk-kanban-column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@media (max-width: 640px){.bk-kanban-column{width:86vw}}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: true }] }], cardTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTemplate", required: true }] }], columnIdField: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnIdField", required: false }] }], dragEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragEnabled", required: false }] }], dragScope: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragScope", required: false }] }], wipLimitBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "wipLimitBehavior", required: false }] }], columnDragEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDragEnabled", required: false }] }], columnScrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnScrollMode", required: false }] }], boardClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "boardClass", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], columnHeaderActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnHeaderActionsTemplate", required: false }] }], emptyStateTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateTemplate", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], dragPreviewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragPreviewMode", required: false }] }], cardMoved: [{ type: i0.Output, args: ["cardMoved"] }], cardClicked: [{ type: i0.Output, args: ["cardClicked"] }], columnLimitExceeded: [{ type: i0.Output, args: ["columnLimitExceeded"] }], columnMoved: [{ type: i0.Output, args: ["columnMoved"] }], columnActionTriggered: [{ type: i0.Output, args: ["columnActionTriggered"] }] } });
+
+/**
+ * Marks an element inside a `cardTemplate` as its own click region.
+ *
+ * `bk-kanban` never attaches a listener to this element directly — it puts
+ * one listener on the whole card and, on click, walks up from
+ * `event.target` (`Element.closest`) looking for the nearest marked
+ * ancestor. That single-listener design is what makes a click on a marked
+ * region resolve to *just* that region's name, instead of firing once for
+ * the region and once more, as a duplicate, for the card underneath it.
+ * This directive's only job is to leave something that walk can find: a
+ * `data-bk-kanban-click-target` attribute carrying the name you gave it.
+ *
+ *   <div [bkKanbanClickTarget]="'hours'">{{ card.hours }}h</div>
+ *   <div [bkKanbanClickTarget]="'assignee'">
+ *     <bk-ui-avatar [name]="card.assignee"></bk-ui-avatar>
+ *   </div>
+ *
+ * A click on either fires `cardClicked` with `target: 'hours'` /
+ * `'assignee'`; a click anywhere else on the card falls back to the default
+ * `target: 'card'`. See `BkKanbanCardClickedEvent`.
+ */
+class BkKanbanClickTarget {
+    target = input.required(...(ngDevMode ? [{ debugName: "target", alias: 'bkKanbanClickTarget' }] : [{ alias: 'bkKanbanClickTarget' }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkKanbanClickTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: BkKanbanClickTarget, isStandalone: true, selector: "[bkKanbanClickTarget]", inputs: { target: { classPropertyName: "target", publicName: "bkKanbanClickTarget", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-bk-kanban-click-target": "target()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkKanbanClickTarget, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bkKanbanClickTarget]',
+                    standalone: true,
+                    host: {
+                        '[attr.data-bk-kanban-click-target]': 'target()'
+                    }
+                }]
+        }], propDecorators: { target: [{ type: i0.Input, args: [{ isSignal: true, alias: "bkKanbanClickTarget", required: true }] }] } });
+
+/**
+ * Types for bk-kanban.
+ *
+ * The board is content-agnostic by design (see the component's own doc
+ * comment): it only ever moves opaque `T` values between columns and reports
+ * what happened. Every type here describes either a column, or one of the
+ * events the board reports — never anything about what a card renders as.
+ */
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -14047,5 +14476,5 @@ const BK_TABLE = [
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_CORNER_GAP, BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BK_TABLE, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkBreadcrumb, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDragHandle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTable, BkTableDrag, BkTableFooter, BkTableSummary, BkTableTitle, BkTabs, BkTd, BkTextarea, BkTh, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkTooltipInteractionService, BkTrExpand, BkTreeDrag, BkValidator, BkVirtualScroll, BrickclayIcons, BrickclayLib, CalendarModule, CalendarMonth, CalendarSelection, CalendarWeekday, ColumnFilterOption, DEFAULT_COUNTRY_OPTIONS, NEUTRAL_APPEARANCE, OPPOSITE_SIDE, POPOVER_PLACEMENTS, clamp, containsBkTreeNode, deriveAppearance, flattenBkTreeData, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, moveBkTreeNode, normalizeBkTableSize, parseColor, splitPlacement };
+export { ARROW_CORNER_GAP, BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BK_TABLE, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkBreadcrumb, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDragHandle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkKanban, BkKanbanClickTarget, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTable, BkTableDrag, BkTableFooter, BkTableSummary, BkTableTitle, BkTabs, BkTd, BkTextarea, BkTh, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkTooltipInteractionService, BkTrExpand, BkTreeDrag, BkValidator, BkVirtualScroll, BrickclayIcons, BrickclayLib, CalendarModule, CalendarMonth, CalendarSelection, CalendarWeekday, ColumnFilterOption, DEFAULT_COUNTRY_OPTIONS, NEUTRAL_APPEARANCE, OPPOSITE_SIDE, POPOVER_PLACEMENTS, clamp, containsBkTreeNode, deriveAppearance, flattenBkTreeData, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, moveBkTreeNode, normalizeBkTableSize, parseColor, splitPlacement };
 //# sourceMappingURL=brickclay-org-ui.mjs.map