@brickclay-org/ui 0.1.73 → 0.1.75

package/fesm2022/brickclay-org-ui.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, forwardRef, HostListener, ViewChild, Input, Output, Injectable, NgModule, ViewEncapsulation, Optional, Self, Directive, input, model, output, signal, computed, effect, inject, ElementRef, ViewChildren, InjectionToken, createComponent, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, forwardRef, HostListener, ViewChild, Input, Output, Injectable, NgModule, ViewEncapsulation, Optional, Self, Directive, ChangeDetectionStrategy, input, model, output, signal, computed, effect, inject, ElementRef, ViewChildren, InjectionToken, createComponent } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
-import * as i3 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import moment from 'moment';
 import { Subject, filter } from 'rxjs';
-import * as i2 from '@angular/cdk/drag-drop';
+import * as i2$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
@@ -3056,7 +3056,7 @@ class BkCustomCalendar {
                 useExisting: forwardRef(() => BkCustomCalendar),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }, { propertyName: "calendarPopupRef", first: true, predicate: ["calendarPopup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\" [class.disabled]=\"disabled\">\r\n  <!-- Input field -->\r\n  <div #inputWrapper class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"!disabled && toggle()\"\r\n      (keydown.enter)=\"$event.preventDefault()\"\r\n      (blur)=\"markAsTouched()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\r\n      [attr.disabled]=\"disabled ? true : null\"\r\n      [class.hasError]=\"hasError\"\r\n      class=\"calendar-input\">\r\n      <!-- *ngIf=\"!getDisplayValue()\" -->\r\n\r\n    <span class=\"calendar-icon\" >\r\n      <img alt=\"calendar\" class=\"calendar-icon-img\" [src]='brickclayIcons.calenderIcon'/>\r\n    </span>\r\n    <button type=\"button\" class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon && !disabled\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div #calendarPopup\r\n       class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [class.append-to-body]=\"appendToBody && !inline\"\r\n       [style.position]=\"appendToBody && !inline ? 'fixed' : null\"\r\n       [style.top]=\"appendToBody && !inline && !popupPlacementAbove ? dropdownStyle.top : null\"\r\n       [style.bottom]=\"appendToBody && !inline && popupPlacementAbove ? dropdownStyle.bottom : null\"\r\n       [style.left]=\"appendToBody && !inline ? dropdownStyle.left : null\"\r\n       tabindex=\"0\"\r\n       (keydown)=\"onCalendarPopupKeydown($event)\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && !appendToBody && opens === 'right',\r\n         'position-center': !inline && !appendToBody && opens === 'center',\r\n         'drop-up': !inline && popupPlacementAbove,\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar,\r\n         'compact': compact\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\" role=\"listbox\" aria-label=\"Date ranges\">\r\n      <button\r\n        type=\"button\"\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        (keydown)=\"onRangeButtonKeydown($event, rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"activeRange === rangeKey\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1 border-l border-[#eee]' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(month) + ' ' + year\">\r\n        <thead>\r\n          <tr role=\"row\">\r\n            <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\" role=\"row\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\r\n              role=\"gridcell\"\r\n              (click)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && selectDate(dayObj.day)\"\r\n              (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n              (mouseleave)=\"onDateLeave()\"\r\n              [class.active]=\"dayObj.currentMonth && isDateSelected(year, month, dayObj.day)\"\r\n              [class.in-range]=\"dayObj.currentMonth && isDateInRange(year, month, dayObj.day)\"\r\n              [class.other-month]=\"!dayObj.currentMonth\"\r\n              [class.disabled]=\"isDateDisabled(year, month, dayObj.day)\"\r\n              [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(year, month, dayObj.day)\"\r\n              [class.today]=\"dayObj.currentMonth && isToday(year, month, dayObj.day)\"\r\n              [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(year, month, dayObj.day)\"\r\n              class=\"calendar-day\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [variation]=\"compact ? 'default' : 'lg'\"\r\n            [timeFormat]=\"timeFormat\"\r\n            [clearable]=\"clearableTime\"\r\n            [label]=\"''\"\r\n            [ngModel]=\"singleTimeModel\"\r\n            (ngModelChange)=\"onSingleTimePickerChange($event); singleTimeModel=$event\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(leftMonth) + ' ' + leftYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of leftCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && selectDate(dayObj.day, false)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(leftYear, leftMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(leftYear, leftMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(leftYear, leftMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(leftYear, leftMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(leftYear, leftMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(leftYear, leftMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"startTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, true); startTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(rightMonth) + ' ' + rightYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of rightCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && selectDate(dayObj.day, true)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && onDateHover(dayObj.day, true)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(rightYear, rightMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(rightYear, rightMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(rightYear, rightMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(rightYear, rightMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(rightYear, rightMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(rightYear, rightMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"endTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, false); endTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline && showCancelApply\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\" [disabled]=\"disabled || isDualRangeApplyBlocked\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n@if (hasError){\r\n<p class=\"calender-error\">{{errorMessage}}</p>\r\n}\r\n", styles: [".calendar-container,.calendar-container *{font-family:Inter,sans-serif!important}.calendar-container{position:relative;display:inline-block;width:100%}.input-wrapper{position:relative;display:flex;align-items:center}.calendar-input{width:100%;padding:9px 14px 9px 40px;border:1px solid #ddd;border-radius:8px;font-size:14px;cursor:pointer;background:#fff;transition:all .2s}.calendar-input:hover{border-color:#999}.calendar-input:focus{outline:none;border-color:#999}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{position:absolute;top:110%;left:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out}.calendar-popup:focus-visible{outline:0!important}.calendar-popup.append-to-body{font-family:Inter,sans-serif;z-index:100000}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.drop-up{top:auto;bottom:110%;animation:slideUp .2s ease-out}.calendar-popup.position-right{left:auto;right:0}.calendar-popup.position-center{left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ranges{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #eee;min-width:150px;padding-right:8px}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;text-align:center;text-transform:capitalize}.nav-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:11.5px 14px;color:#666;border-radius:4px;transition:all .2s;line-height:1;height:30px;width:30px;display:flex;justify-content:center;align-items:center}.nav-btn:hover{background:#f0f0f0;color:#000}.nav-btn img{width:auto;max-width:none!important}.calendar-table{width:100%;border-collapse:collapse;text-align:center}.weekday-header{font-size:12px;color:#7e7e7e;font-weight:600;padding:8px 4px;letter-spacing:.3px}.calendar-day{padding:8px 4px;font-size:14px;cursor:pointer;border-radius:6px;transition:all .2s;position:relative;color:#333;font-weight:500;line-height:1.5}.calendar-day:hover:not(.disabled):not(.other-month){background:#efefef;color:#000}.calendar-day.other-month{color:#ccc;cursor:default}.calendar-day.disabled{color:#ddd;cursor:not-allowed;opacity:.5}.calendar-day.active{background:#000!important;color:#fff!important;font-weight:600}.calendar-day.today{font-weight:600}.calendar-day.today:not(.active){background:#e5e4e4}.calendar-day.active:hover{background:#000!important}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-apply{background:#000;color:#fff}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px;max-height:300px;overflow:auto}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.dual-calendar{flex-direction:column}.time-input-group{flex-wrap:wrap;justify-content:center}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}.calendar-input.calendar-input-has-error{@apply border-[#d11e14];}.calendar-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.btn-apply:disabled{cursor:not-allowed!important;opacity:.7}.calendar-day.calendar-day-keyboard-focus:not(.disabled):not(.other-month){outline:0px solid #000}.calendar-popup.compact{width:240px}.calendar-popup.compact.has-ranges{width:380px}.calendar-popup.compact.dual-calendar-mode{width:480px}.calendar-popup.compact.dual-calendar-mode.has-ranges{width:600px}.calendar-popup.compact .header{padding:8px 0}.calendar-popup.compact .month-year{font-size:13px}.calendar-popup.compact .nav-btn{height:24px;width:24px;padding:6px 8px}.calendar-popup.compact .calendar-wrapper,.calendar-popup.compact .calendar-left,.calendar-popup.compact .calendar-right{padding:0 8px 8px}.calendar-popup.compact .weekday-header{font-size:11px;padding:4px 2px}.calendar-popup.compact .calendar-day{font-size:12px;padding:5px 2px;line-height:1.3}.calendar-popup.compact .ranges{min-width:120px;gap:2px;margin-bottom:8px;padding-bottom:8px}.calendar-popup.compact.has-ranges .ranges{padding:6px}.calendar-popup.compact .range-btn{font-size:12px;padding:5px 8px}.calendar-popup.compact .timepicker-section{margin-top:8px;padding-top:8px}.calendar-popup.compact .timepicker-label{font-size:11px}.calendar-popup.compact .footer{padding:8px;gap:6px}.calendar-popup.compact .btn-cancel,.calendar-popup.compact .btn-apply{font-size:11px;padding:6px 12px;min-width:64px}\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkTimePicker, selector: "bk-time-picker", inputs: ["required", "value", "label", "placeholder", "clearable", "position", "variation", "pickerId", "closePicker", "timeFormat", "showSeconds", "autoPosition", "appendToBody", "disabled"], outputs: ["change", "timeChange", "pickerOpened", "pickerClosed"] }] });
+        ], viewQueries: [{ propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }, { propertyName: "calendarPopupRef", first: true, predicate: ["calendarPopup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\" [class.disabled]=\"disabled\">\r\n  <!-- Input field -->\r\n  <div #inputWrapper class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"!disabled && toggle()\"\r\n      (keydown.enter)=\"$event.preventDefault()\"\r\n      (blur)=\"markAsTouched()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\r\n      [attr.disabled]=\"disabled ? true : null\"\r\n      [class.hasError]=\"hasError\"\r\n      class=\"calendar-input\">\r\n      <!-- *ngIf=\"!getDisplayValue()\" -->\r\n\r\n    <span class=\"calendar-icon\" >\r\n      <img alt=\"calendar\" class=\"calendar-icon-img\" [src]='brickclayIcons.calenderIcon'/>\r\n    </span>\r\n    <button type=\"button\" class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon && !disabled\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div #calendarPopup\r\n       class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [class.append-to-body]=\"appendToBody && !inline\"\r\n       [style.position]=\"appendToBody && !inline ? 'fixed' : null\"\r\n       [style.top]=\"appendToBody && !inline && !popupPlacementAbove ? dropdownStyle.top : null\"\r\n       [style.bottom]=\"appendToBody && !inline && popupPlacementAbove ? dropdownStyle.bottom : null\"\r\n       [style.left]=\"appendToBody && !inline ? dropdownStyle.left : null\"\r\n       tabindex=\"0\"\r\n       (keydown)=\"onCalendarPopupKeydown($event)\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && !appendToBody && opens === 'right',\r\n         'position-center': !inline && !appendToBody && opens === 'center',\r\n         'drop-up': !inline && popupPlacementAbove,\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar,\r\n         'compact': compact\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\" role=\"listbox\" aria-label=\"Date ranges\">\r\n      <button\r\n        type=\"button\"\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        (keydown)=\"onRangeButtonKeydown($event, rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"activeRange === rangeKey\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1 border-l border-[#eee]' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(month) + ' ' + year\">\r\n        <thead>\r\n          <tr role=\"row\">\r\n            <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\" role=\"row\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\r\n              role=\"gridcell\"\r\n              (click)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && selectDate(dayObj.day)\"\r\n              (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n              (mouseleave)=\"onDateLeave()\"\r\n              [class.active]=\"dayObj.currentMonth && isDateSelected(year, month, dayObj.day)\"\r\n              [class.in-range]=\"dayObj.currentMonth && isDateInRange(year, month, dayObj.day)\"\r\n              [class.other-month]=\"!dayObj.currentMonth\"\r\n              [class.disabled]=\"isDateDisabled(year, month, dayObj.day)\"\r\n              [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(year, month, dayObj.day)\"\r\n              [class.today]=\"dayObj.currentMonth && isToday(year, month, dayObj.day)\"\r\n              [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(year, month, dayObj.day)\"\r\n              class=\"calendar-day\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [variation]=\"compact ? 'default' : 'lg'\"\r\n            [timeFormat]=\"timeFormat\"\r\n            [clearable]=\"clearableTime\"\r\n            [label]=\"''\"\r\n            [ngModel]=\"singleTimeModel\"\r\n            (ngModelChange)=\"onSingleTimePickerChange($event); singleTimeModel=$event\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(leftMonth) + ' ' + leftYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of leftCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && selectDate(dayObj.day, false)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(leftYear, leftMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(leftYear, leftMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(leftYear, leftMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(leftYear, leftMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(leftYear, leftMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(leftYear, leftMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"startTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, true); startTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(rightMonth) + ' ' + rightYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of rightCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && selectDate(dayObj.day, true)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && onDateHover(dayObj.day, true)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(rightYear, rightMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(rightYear, rightMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(rightYear, rightMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(rightYear, rightMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(rightYear, rightMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(rightYear, rightMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"endTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, false); endTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline && showCancelApply\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\" [disabled]=\"disabled || isDualRangeApplyBlocked\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n@if (hasError){\r\n<p class=\"calender-error\">{{errorMessage}}</p>\r\n}\r\n", styles: [".calendar-container,.calendar-container *{font-family:Inter,sans-serif!important}.calendar-container{position:relative;display:inline-block;width:100%}.input-wrapper{position:relative;display:flex;align-items:center}.calendar-input{width:100%;padding:9px 14px 9px 40px;border:1px solid #ddd;border-radius:8px;font-size:14px;cursor:pointer;background:#fff;transition:all .2s}.calendar-input:hover{border-color:#999}.calendar-input:focus{outline:none;border-color:#999}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{position:absolute;top:110%;left:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out}.calendar-popup:focus-visible{outline:0!important}.calendar-popup.append-to-body{font-family:Inter,sans-serif;z-index:100000}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.drop-up{top:auto;bottom:110%;animation:slideUp .2s ease-out}.calendar-popup.position-right{left:auto;right:0}.calendar-popup.position-center{left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ranges{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #eee;min-width:150px;padding-right:8px}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;text-align:center;text-transform:capitalize}.nav-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:11.5px 14px;color:#666;border-radius:4px;transition:all .2s;line-height:1;height:30px;width:30px;display:flex;justify-content:center;align-items:center}.nav-btn:hover{background:#f0f0f0;color:#000}.nav-btn img{width:auto;max-width:none!important}.calendar-table{width:100%;border-collapse:collapse;text-align:center}.weekday-header{font-size:12px;color:#7e7e7e;font-weight:600;padding:8px 4px;letter-spacing:.3px}.calendar-day{padding:8px 4px;font-size:14px;cursor:pointer;border-radius:6px;transition:all .2s;position:relative;color:#333;font-weight:500;line-height:1.5}.calendar-day:hover:not(.disabled):not(.other-month){background:#efefef;color:#000}.calendar-day.other-month{color:#ccc;cursor:default}.calendar-day.disabled{color:#ddd;cursor:not-allowed;opacity:.5}.calendar-day.active{background:#000!important;color:#fff!important;font-weight:600}.calendar-day.today{font-weight:600}.calendar-day.today:not(.active){background:#e5e4e4}.calendar-day.active:hover{background:#000!important}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-apply{background:#000;color:#fff}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px;max-height:300px;overflow:auto}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.dual-calendar{flex-direction:column}.time-input-group{flex-wrap:wrap;justify-content:center}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}.calendar-input.calendar-input-has-error{@apply border-[#d11e14];}.calendar-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.btn-apply:disabled{cursor:not-allowed!important;opacity:.7}.calendar-day.calendar-day-keyboard-focus:not(.disabled):not(.other-month){outline:0px solid #000}.calendar-popup.compact{width:240px}.calendar-popup.compact.has-ranges{width:380px}.calendar-popup.compact.dual-calendar-mode{width:480px}.calendar-popup.compact.dual-calendar-mode.has-ranges{width:600px}.calendar-popup.compact .header{padding:8px 0}.calendar-popup.compact .month-year{font-size:13px}.calendar-popup.compact .nav-btn{height:24px;width:24px;padding:6px 8px}.calendar-popup.compact .calendar-wrapper,.calendar-popup.compact .calendar-left,.calendar-popup.compact .calendar-right{padding:0 8px 8px}.calendar-popup.compact .weekday-header{font-size:11px;padding:4px 2px}.calendar-popup.compact .calendar-day{font-size:12px;padding:5px 2px;line-height:1.3}.calendar-popup.compact .ranges{min-width:120px;gap:2px;margin-bottom:8px;padding-bottom:8px}.calendar-popup.compact.has-ranges .ranges{padding:6px}.calendar-popup.compact .range-btn{font-size:12px;padding:5px 8px}.calendar-popup.compact .timepicker-section{margin-top:8px;padding-top:8px}.calendar-popup.compact .timepicker-label{font-size:11px}.calendar-popup.compact .footer{padding:8px;gap:6px}.calendar-popup.compact .btn-cancel,.calendar-popup.compact .btn-apply{font-size:11px;padding:6px 12px;min-width:64px}\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkTimePicker, selector: "bk-time-picker", inputs: ["required", "value", "label", "placeholder", "clearable", "position", "variation", "pickerId", "closePicker", "timeFormat", "showSeconds", "autoPosition", "appendToBody", "disabled"], outputs: ["change", "timeChange", "pickerOpened", "pickerClosed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCustomCalendar, decorators: [{
             type: Component,
@@ -4117,13 +4117,13 @@ class BkTextarea {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTextarea, deps: [{ token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTextarea, deps: [{ token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTextarea, isStandalone: true, selector: "bk-textarea", inputs: { autoComplete: "autoComplete", name: "name", id: "id", label: "label", placeholder: "placeholder", rows: "rows", hint: "hint", required: "required", maxlength: "maxlength", minlength: "minlength", hasError: "hasError", disabled: "disabled", errorMessage: "errorMessage", tabIndex: "tabIndex", readOnly: "readOnly", autoCapitalize: "autoCapitalize", inputMode: "inputMode" }, outputs: { input: "input", change: "change", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n  @if (label) {\r\n    <label class=\"text-sm font-medium text-[#141414] block\" [for]=\"id\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <textarea\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      [inputMode]=\"inputMode\"\r\n      [value]=\"value\"\r\n      (input)=\"handleInput($event)\"\r\n      (change)=\"handleChange($event)\"\r\n      (blur)=\"handleBlur($event)\"\r\n      (focus)=\"handleFocus($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [autocomplete]=\"autoComplete\"\r\n      rows=\"{{ rows }}\"\r\n      class=\"w-full px-3 py-2.5 text-sm border border-[#E3E3E7] outline-none transition-colors duration-200 bg-white resize-y placeholder:text-[#6B7080] rounded bk-textarea-shadow \"\r\n      [ngClass]=\"{\r\n        'border-[#FA727A]': hasError && !disabled,\r\n        'focus:border-[#6B7080]': !hasError && !disabled,\r\n        '!bg-[#F4F4F6] !text-[#A1A3AE] cursor-not-allowed !border-[#E3E3E7]': disabled,\r\n      }\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <div class=\"flex justify-between items-start font-normal text-sm\">\r\n    <div class=\"flex-1\">\r\n      @if (hasError) {\r\n        <span class=\"font-medium text-xs leading-normal text-[#C10007] text-left\">\r\n          {{ errorMessage }}\r\n        </span>\r\n      } @else if (hint) {\r\n        <span class=\"text-[#868997]\">\r\n          {{ hint }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    @if (maxlength) {\r\n      <div class=\"text-[#868997] tabular-nums flex-shrink-0\">\r\n        {{ value.length }}/{{ maxlength }}\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTextarea, decorators: [{
             type: Component,
             args: [{ selector: 'bk-textarea', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n  @if (label) {\r\n    <label class=\"text-sm font-medium text-[#141414] block\" [for]=\"id\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <textarea\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      [inputMode]=\"inputMode\"\r\n      [value]=\"value\"\r\n      (input)=\"handleInput($event)\"\r\n      (change)=\"handleChange($event)\"\r\n      (blur)=\"handleBlur($event)\"\r\n      (focus)=\"handleFocus($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [autocomplete]=\"autoComplete\"\r\n      rows=\"{{ rows }}\"\r\n      class=\"w-full px-3 py-2.5 text-sm border border-[#E3E3E7] outline-none transition-colors duration-200 bg-white resize-y placeholder:text-[#6B7080] rounded bk-textarea-shadow \"\r\n      [ngClass]=\"{\r\n        'border-[#FA727A]': hasError && !disabled,\r\n        'focus:border-[#6B7080]': !hasError && !disabled,\r\n        '!bg-[#F4F4F6] !text-[#A1A3AE] cursor-not-allowed !border-[#E3E3E7]': disabled,\r\n      }\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <div class=\"flex justify-between items-start font-normal text-sm\">\r\n    <div class=\"flex-1\">\r\n      @if (hasError) {\r\n        <span class=\"font-medium text-xs leading-normal text-[#C10007] text-left\">\r\n          {{ errorMessage }}\r\n        </span>\r\n      } @else if (hint) {\r\n        <span class=\"text-[#868997]\">\r\n          {{ hint }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    @if (maxlength) {\r\n      <div class=\"text-[#868997] tabular-nums flex-shrink-0\">\r\n        {{ value.length }}/{{ maxlength }}\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: i3.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -4819,7 +4819,7 @@ class BkGrid {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions", customClass: "customClass", actionIconClass: "actionIconClass", actionClass: "actionClass", showNoRecords: "showNoRecords", noRecordFoundHeight: "noRecordFoundHeight" }, outputs: { change: "change", actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                          [src]=\"icon.url\"\r\n                          class=\"size-4\"\r\n                          [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                          [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                          [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              <img\r\n                src=\"./assets/media/logos/no-data-found.jpg\"\r\n                class=\"mb-3 w-96\"\r\n                alt=\"No data found\"\r\n              />\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >Data may be empty, or try adjusting your filter.</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass"], outputs: ["clicked"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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" }, outputs: { change: "change", actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div #tableScrollContainer cdkScrollable class=\"overflow-y-auto\" [ngClass]=\"customClass\">\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n    <!-- ================= HEADER ================= -->\r\n    <thead>\r\n      <tr>\r\n        @for (col of columns; track col.header; let i = $index) {\r\n          @if (isColumnVisible(col)) {\r\n            <th\r\n              class=\"grid-header sticky top-[-1px]\"\r\n              [class.cursor-pointer]=\"col.sortable\"\r\n              [class.cursor-default]=\"!col.sortable\"\r\n              [class.action-sticky]=\"col.sticky\"\r\n              [class.z-10]=\"col.sticky\"\r\n              class=\"{{ col.headerClass }} {{ col.cellClass }}\"\r\n              (click)=\"sort(col, i)\"\r\n            >\r\n              <!-- [ngClass]=\"col.headerClass\"\r\n              [ngClass]=\"col.cellClass\" -->\r\n              <span\r\n                class=\"flex items-center gap-1\"\r\n                [ngClass]=\"\r\n                  sortColumn === col.field\r\n                    ? sortDirection === 'asc'\r\n                      ? 'grid-asc'\r\n                      : 'grid-desc'\r\n                    : ''\r\n                \"\r\n              >\r\n                {{ col.header }}\r\n                @if (col.sortable) {\r\n                  <span class=\"grid-sort-icon\"></span>\r\n                }\r\n              </span>\r\n            </th>\r\n          }\r\n        }\r\n\r\n        @if (actions.length) {\r\n          <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20 {{actionClass}}\">Action</th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\"\r\n    >\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\"\r\n          [ngClass]=\"{ 'cursor-move ': draggable }\"\r\n        >\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span\r\n                    cdkDragHandle\r\n                    class=\"mr-2 text-gray-400\"\r\n                    [ngClass]=\"{ 'cursor-move': draggable }\"\r\n                    >\u2630</span\r\n                  >\r\n                }\r\n                @if (col.checkbox) {\r\n                  <bk-checkbox\r\n                    checkboxClass=\"sm\"\r\n                    [ngModel]=\"getCheckboxValue(row, col)\"\r\n                    (ngModelChange)=\"setCheckboxValue(row, col, $event)\"\r\n                    [disabled]=\"typeof col.checkboxDisabled === 'function' ? col.checkboxDisabled(row) : col.checkboxDisabled || false\"\r\n                    [bkTooltip]=\"typeof col.checkboxTooltip === 'function' ? col.checkboxTooltip(row) : col.checkboxTooltip || ''\"\r\n                    [bkTooltipPosition]=\"col.checkboxTooltipPosition || 'top'\"\r\n                  ></bk-checkbox>\r\n                } @else if (col.badges) {\r\n                  @let badge = getBadge(row, col);\r\n                  @if (badge) {\r\n                    <bk-badge\r\n                      [label]=\"badge.label\"\r\n                      [variant]=\"badge.variant\"\r\n                      [size]=\"badge.size\"\r\n                      [color]=\"badge.color\"\r\n                      [dot]=\"badge.dot\"\r\n                      [customClass]=\"badge.customClass\"\r\n                      [bkTooltip]=\"badge.toolTipLabel || ''\"\r\n                      [bkTooltipPosition]=\"badge.tooltipPosition || 'top'\"\r\n                    ></bk-badge>\r\n                  }\r\n                } @else if (col.icons) {\r\n                  @let iconsList = getIcons(row, col);\r\n                  <div class=\"flex justify-center items-center gap-2\">\r\n                    @for (icon of iconsList; track $index) {\r\n                      @if(icon.url){\r\n                        <img\r\n                          [src]=\"icon.url\"\r\n                          class=\"size-4\"\r\n                          [ngClass]=\"{ 'cursor-pointer': icon.url }\"\r\n                          [bkTooltip]=\"icon.toolTipLabel || []\"\r\n                          [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\"\r\n                        />\r\n                      }\r\n                    }\r\n                  </div>\r\n                } @else if (col.toolTipField) {\r\n                  <span\r\n                    [bkTooltip]=\"getTooltipValue(row, col)\"\r\n                    [bkTooltipPosition]=\"col.toolTipPosition || 'top'\"\r\n                  >\r\n                    {{ getCellValue(row, col) }}\r\n                  </span>\r\n                } @else {\r\n                  {{ getCellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n\r\n          @if (getRowActions(row).length) {\r\n            <td class=\"grid-cell action-sticky text-center\">\r\n              <div class=\"flex items-center justify-center gap-1.5\">\r\n                @for (action of getRowActions(row); track action.name) {\r\n                  @if (isActionVisible(action, row)) {\r\n                    <button\r\n                      [bkTooltip]=\"action.tooltip\"\r\n                      [bkTooltipPosition]=\"action?.tooltipPosition || 'top'\"\r\n                      class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA] {{actionIconClass}}\"\r\n                      (click)=\"emitAction(action, row)\"\r\n                      [disabled]=\"isActionDisabled(action, row)\"\r\n                    >\r\n                      <img [src]=\"action.icon\" width=\"14\" height=\"14\" alt=\"action-icon\" />\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n      @if (showNoRecords) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\r\n            class=\"text-center py-10 {{ noRecordFoundHeight }}\"\r\n          >\r\n            <div class=\"flex flex-col justify-center items-center w-full h-auto\">\r\n              <img\r\n                src=\"./assets/media/logos/no-data-found.jpg\"\r\n                class=\"mb-3 w-96\"\r\n                alt=\"No data found\"\r\n              />\r\n\r\n              <span class=\"block text-sm leading-3 text-center font-semibold text-[#60646C] mt-2\"\r\n                >Data may be empty, or try adjusting your filter.</span\r\n              >\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#F9FAFA] text-xs text-[#60646C] font-semibold capitalize px-[17px] py-2.5 whitespace-nowrap;box-shadow:0 1px #ebedf3;-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}thead tr th:first-child{border-top-left-radius:.75rem}thead tr th:last-child{border-top-right-radius:.75rem}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border-x border-b border-[#EBEDF3];}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass"], outputs: ["clicked"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, decorators: [{
             type: Component,
@@ -4855,6 +4855,305 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['tableScrollContainer', { static: false }]
             }] } });
 
+class BkAvatar {
+    cdr;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    // ---------- Display Inputs ----------
+    src = null;
+    alt = 'Avatar';
+    name = '';
+    initialsOverride = '';
+    tooltipContent = null;
+    bgColor = null;
+    textColor = null;
+    size = 'md';
+    variant = 'gray';
+    fallback = 'auto';
+    dot = 'none';
+    dotPosition = 'bottom-right';
+    // ---------- Outputs ----------
+    /** Emits when the provided image URL fails to load */
+    imageLoadError = new EventEmitter();
+    // ---------- Internal State ----------
+    initials = '';
+    imageLoadFailed = false;
+    // ---------- CVA Callbacks ----------
+    onChange = (_value) => { };
+    onTouched = () => { };
+    /**
+     * Called by the forms system when the model value changes (ngModel / formControl).
+     * Sets the src directly and tells OnPush to re-check the template.
+     */
+    writeValue(value) {
+        this.src = value || null;
+        this.imageLoadFailed = false;
+        // OnPush won't detect this change on its own because writeValue
+        // is called programmatically by the forms system — not through an
+        // @Input binding. markForCheck tells Angular: "this component's
+        // template might have changed, check it on the next CD cycle."
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(_isDisabled) {
+        // Display-only component — disabled doesn't change visual behaviour,
+        // but we still honour the CVA contract.
+        this.cdr.markForCheck();
+    }
+    // ---------- Lifecycle ----------
+    ngOnChanges(changes) {
+        if (changes['name'] || changes['initialsOverride']) {
+            this.initials = this.initialsOverride || this.getInitials(this.name);
+        }
+        // Reset error state whenever a new src arrives via @Input
+        if (changes['src']) {
+            this.imageLoadFailed = false;
+        }
+    }
+    onImageError() {
+        this.imageLoadFailed = true;
+        this.imageLoadError.emit();
+    }
+    // ---------- Derived UI ----------
+    get showImage() {
+        return !!(this.src) && !this.imageLoadFailed;
+    }
+    get showInitials() {
+        if (this.showImage)
+            return false;
+        if (!this.name)
+            return false;
+        if (this.fallback === 'icon')
+            return false;
+        return true; // 'auto' and 'initials' both show initials when name is present
+    }
+    get showIcon() {
+        return !this.showImage && !this.showInitials;
+    }
+    get containerClasses() {
+        return [
+            'avatar',
+            this.size,
+            VARIANT_MAP[this.variant]
+        ].join(' ');
+    }
+    get containerStyles() {
+        const styles = {};
+        if (this.bgColor) {
+            styles['background'] = this.bgColor;
+        }
+        if (this.textColor) {
+            styles['color'] = this.textColor;
+        }
+        return Object.keys(styles).length ? styles : null;
+    }
+    get resolvedTooltip() {
+        return this.tooltipContent ?? this.name;
+    }
+    get dotClasses() {
+        return [
+            'avatar-dot',
+            this.size,
+            DOT_COLOR_MAP[this.dot],
+            DOT_POSITION_MAP[this.dotPosition]
+        ].join(' ');
+    }
+    // ---------- Utils ----------
+    getInitials(name) {
+        if (!name?.trim())
+            return '';
+        const normalized = name.includes(',')
+            ? name.split(',').map(part => part.trim()).filter(Boolean).reverse().join(' ')
+            : name.trim();
+        const parts = normalized.split(/\s+/);
+        if (parts.length === 1) {
+            return parts[0].slice(0, 2).toUpperCase();
+        }
+        return (parts[0][0] + parts.at(-1)[0]).toUpperCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatar, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkAvatar, isStandalone: true, selector: "bk-avatar", inputs: { src: "src", alt: "alt", name: "name", initialsOverride: "initialsOverride", tooltipContent: "tooltipContent", bgColor: "bgColor", textColor: "textColor", size: "size", variant: "variant", fallback: "fallback", dot: "dot", dotPosition: "dotPosition" }, outputs: { imageLoadError: "imageLoadError" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BkAvatar),
+                multi: true
+            }
+        ], usesOnChanges: true, ngImport: i0, template: "<div\r\n  [ngClass]=\"containerClasses\"\r\n  [ngStyle]=\"containerStyles\"\r\n  [bkTooltip]=\"resolvedTooltip\"\r\n  [bkTooltipPosition]=\"'top'\"\r\n>\r\n\r\n  @if (showImage) {\r\n    <img\r\n      [src]=\"src\"\r\n      [alt]=\"alt\"\r\n      class=\"avatar-img\"\r\n      (error)=\"onImageError()\"\r\n    />\r\n  }\r\n\r\n  @else if (showInitials) {\r\n    <span class=\"avatar-text\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n\r\n  @else {\r\n    <svg\r\n      class=\"placeholder-icon\"\r\n      viewBox=\"0 0 32 32\"\r\n      fill=\"none\"\r\n      aria-hidden=\"true\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @if (dot !== 'none') {\r\n    <span [ngClass]=\"dotClasses\"></span>\r\n  }\r\n\r\n</div>\r\n", styles: [".avatar{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none;}.avatar-img{@apply w-full h-full object-cover rounded-full;}.avatar-text{@apply font-medium;}.avatar.xxsm{@apply size-4 text-[8px] leading-[10px];}.avatar.xsm{@apply size-6 text-[10px] leading-[14px];}.avatar.sm{@apply size-8 text-sm;}.avatar.md{@apply size-10 text-base;}.avatar.lg{@apply size-12 text-[18px] leading-[26px];}.avatar.xl{@apply size-14 text-xl;}.avatar.xxl{@apply size-16 text-xl;}.avatar.xxsm .placeholder-icon{@apply size-3;}.avatar.xsm .placeholder-icon{@apply size-4;}.avatar.sm .placeholder-icon{@apply size-5;}.avatar.md .placeholder-icon{@apply size-6;}.avatar.lg .placeholder-icon{@apply size-7;}.avatar.xl .placeholder-icon,.avatar.xxl .placeholder-icon{@apply size-8;}.avatar-dot{@apply absolute rounded-full block box-content border-[1.5px] border-white;}.avatar.xxsm .avatar-dot,.avatar.xsm .avatar-dot{@apply size-1;}.avatar.sm .avatar-dot{@apply size-1.5;}.avatar.md .avatar-dot{@apply size-2.5;}.avatar.lg .avatar-dot{@apply size-3;}.avatar.xl .avatar-dot{@apply size-[14px];}.avatar.xxl .avatar-dot{@apply size-4;}.avatar .active{@apply bg-[#22973F];}.avatar .inactive{@apply bg-gray-300;}.avatar .notification{@apply bg-[#2E90FA];}.avatar .none{@apply hidden;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-avatar', standalone: true, imports: [CommonModule, BKTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BkAvatar),
+                            multi: true
+                        }
+                    ], template: "<div\r\n  [ngClass]=\"containerClasses\"\r\n  [ngStyle]=\"containerStyles\"\r\n  [bkTooltip]=\"resolvedTooltip\"\r\n  [bkTooltipPosition]=\"'top'\"\r\n>\r\n\r\n  @if (showImage) {\r\n    <img\r\n      [src]=\"src\"\r\n      [alt]=\"alt\"\r\n      class=\"avatar-img\"\r\n      (error)=\"onImageError()\"\r\n    />\r\n  }\r\n\r\n  @else if (showInitials) {\r\n    <span class=\"avatar-text\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n\r\n  @else {\r\n    <svg\r\n      class=\"placeholder-icon\"\r\n      viewBox=\"0 0 32 32\"\r\n      fill=\"none\"\r\n      aria-hidden=\"true\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @if (dot !== 'none') {\r\n    <span [ngClass]=\"dotClasses\"></span>\r\n  }\r\n\r\n</div>\r\n", styles: [".avatar{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none;}.avatar-img{@apply w-full h-full object-cover rounded-full;}.avatar-text{@apply font-medium;}.avatar.xxsm{@apply size-4 text-[8px] leading-[10px];}.avatar.xsm{@apply size-6 text-[10px] leading-[14px];}.avatar.sm{@apply size-8 text-sm;}.avatar.md{@apply size-10 text-base;}.avatar.lg{@apply size-12 text-[18px] leading-[26px];}.avatar.xl{@apply size-14 text-xl;}.avatar.xxl{@apply size-16 text-xl;}.avatar.xxsm .placeholder-icon{@apply size-3;}.avatar.xsm .placeholder-icon{@apply size-4;}.avatar.sm .placeholder-icon{@apply size-5;}.avatar.md .placeholder-icon{@apply size-6;}.avatar.lg .placeholder-icon{@apply size-7;}.avatar.xl .placeholder-icon,.avatar.xxl .placeholder-icon{@apply size-8;}.avatar-dot{@apply absolute rounded-full block box-content border-[1.5px] border-white;}.avatar.xxsm .avatar-dot,.avatar.xsm .avatar-dot{@apply size-1;}.avatar.sm .avatar-dot{@apply size-1.5;}.avatar.md .avatar-dot{@apply size-2.5;}.avatar.lg .avatar-dot{@apply size-3;}.avatar.xl .avatar-dot{@apply size-[14px];}.avatar.xxl .avatar-dot{@apply size-4;}.avatar .active{@apply bg-[#22973F];}.avatar .inactive{@apply bg-gray-300;}.avatar .notification{@apply bg-[#2E90FA];}.avatar .none{@apply hidden;}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { src: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], initialsOverride: [{
+                type: Input
+            }], tooltipContent: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], fallback: [{
+                type: Input
+            }], dot: [{
+                type: Input
+            }], dotPosition: [{
+                type: Input
+            }], imageLoadError: [{
+                type: Output
+            }] } });
+// ---------- Constants ----------
+const VARIANT_MAP = {
+    gray: 'bg-white border border-[#EFEFF1] text-[#363C51]',
+    colored: 'bg-[#F63D68] border border-white text-white'
+};
+const DOT_COLOR_MAP = {
+    active: 'active',
+    inactive: 'inactive',
+    notification: 'notification',
+    none: 'hidden'
+};
+const DOT_POSITION_MAP = {
+    'bottom-right': 'bottom-0 right-0',
+    'top-left': 'top-0.5 -left-0.5'
+};
+
+/* =========================================================================
+   Derives a full UI appearance (background / text / border / dot) from a
+   single accent colour. Shared by bk-status-select, bk-select and
+   bk-hierarchical-select so colour handling stays identical across all three.
+   ========================================================================= */
+const BLACK = { r: 0, g: 0, b: 0 };
+const WHITE = { r: 255, g: 255, b: 255 };
+const HEX3 = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;
+const HEX6 = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
+const RGB_FN = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i;
+/** The neutral look used when there is no colour (or an unparseable one). */
+const NEUTRAL_APPEARANCE = {
+    backgroundColor: null,
+    color: null,
+    borderColor: null,
+    dotColor: null
+};
+/**
+ * Parses hex and rgb()/rgba() colours. Named CSS colours ("red") are not
+ * supported — they'd need a live DOM to resolve — and return null, which makes
+ * the caller fall back to the neutral (uncoloured) appearance.
+ */
+function parseColor(input) {
+    if (!input)
+        return null;
+    const s = String(input).trim();
+    let m = HEX3.exec(s);
+    if (m) {
+        return {
+            r: parseInt(m[1] + m[1], 16),
+            g: parseInt(m[2] + m[2], 16),
+            b: parseInt(m[3] + m[3], 16)
+        };
+    }
+    m = HEX6.exec(s);
+    if (m) {
+        return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) };
+    }
+    m = RGB_FN.exec(s);
+    if (m) {
+        return { r: clampChannel(+m[1]), g: clampChannel(+m[2]), b: clampChannel(+m[3]) };
+    }
+    return null;
+}
+function clampChannel(v) {
+    return Math.max(0, Math.min(255, Math.round(v)));
+}
+/** WCAG relative luminance — used to decide whether text needs to be light or dark. */
+function luminance({ r, g, b }) {
+    const [lr, lg, lb] = [r, g, b].map(v => {
+        const c = v / 255;
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+}
+/** Linear blend of `c` toward `target`. amount 0 = c, 1 = target. */
+function mix(c, target, amount) {
+    return {
+        r: Math.round(c.r + (target.r - c.r) * amount),
+        g: Math.round(c.g + (target.g - c.g) * amount),
+        b: Math.round(c.b + (target.b - c.b) * amount)
+    };
+}
+/**
+ * Darkens a colour until it reads acceptably as text on a light tint. Pastel
+ * accents (light yellows, mints) are unreadable at full strength, so they get
+ * stepped toward black; already-dark accents pass through untouched.
+ */
+function readableOnLight(c) {
+    let out = c;
+    let guard = 0;
+    while (luminance(out) > 0.4 && guard < 12) {
+        out = mix(out, BLACK, 0.2);
+        guard++;
+    }
+    return out;
+}
+function rgbString({ r, g, b }) {
+    return `rgb(${r}, ${g}, ${b})`;
+}
+function rgbaString({ r, g, b }, alpha) {
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+/**
+ * Derives every colour the UI needs from a single accent colour.
+ *
+ * subtle → soft tint of the accent, accent-coloured (darkened if needed) text.
+ * solid  → accent as the background, white or near-black text by contrast.
+ * none   → no background; only the dot and text carry the accent.
+ */
+function deriveAppearance(color, fill = 'subtle') {
+    const rgb = parseColor(color);
+    if (!rgb)
+        return NEUTRAL_APPEARANCE;
+    const dotColor = rgbString(rgb);
+    if (fill === 'solid') {
+        return {
+            backgroundColor: dotColor,
+            color: luminance(rgb) > 0.5 ? '#141414' : '#FFFFFF',
+            borderColor: rgbString(mix(rgb, BLACK, 0.08)),
+            // On a solid accent background the dot must contrast with the accent itself.
+            dotColor: luminance(rgb) > 0.5 ? rgbaString(BLACK, 0.55) : rgbaString(WHITE, 0.85)
+        };
+    }
+    const text = rgbString(readableOnLight(rgb));
+    if (fill === 'none') {
+        return { backgroundColor: null, color: text, borderColor: null, dotColor };
+    }
+    return {
+        backgroundColor: rgbaString(rgb, 0.12),
+        color: text,
+        borderColor: rgbaString(rgb, 0.28),
+        dotColor
+    };
+}
+
 class BkSelect {
     // --- Inputs ---
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -4868,6 +5167,32 @@ class BkSelect {
     clearAllText = input('Clear all', ...(ngDevMode ? [{ debugName: "clearAllText" }] : []));
     groupBy = input('', ...(ngDevMode ? [{ debugName: "groupBy" }] : [])); // NEW
     colorKey = input('', ...(ngDevMode ? [{ debugName: "colorKey" }] : [])); // e.g. "color"
+    /**
+     * Show an accent dot beside each option, driven by `colorKey`.
+     *
+     * In single-select mode the control is also tinted with the selected option's
+     * colour (same treatment as bk-status-select), unless `hasError` is set — an
+     * errored control drops the accent for a soft red tint instead. Multi-select
+     * never tints the control: one background can't represent several colours, so
+     * the accents are carried on the chips instead.
+     *
+     * Only one leading visual renders per row — precedence is avatar > icon > dot
+     * — so the dot appears only when `showAvatar` is off and the item has no icon.
+     */
+    showDots = input(false, ...(ngDevMode ? [{ debugName: "showDots" }] : []));
+    /**
+     * Render an avatar before each option label: the `avatarKey` image when the
+     * item has one, otherwise initials derived from the label ("mtayyab" → "MT").
+     * Replaces the plain icon <img> in options and the single-select value.
+     */
+    showAvatar = input(false, ...(ngDevMode ? [{ debugName: "showAvatar" }] : []));
+    /**
+     * Key holding the avatar image URL, used only when `showAvatar` is on.
+     * Falls back to `bindIcon` when unset. Kept separate from `bindIcon` so the
+     * plain icon feature stays independent — an item's icon should not appear
+     * as a bare <img> just because it also has an avatar.
+     */
+    avatarKey = input('', ...(ngDevMode ? [{ debugName: "avatarKey" }] : []));
     // iconSrc = input<string>('Clear all');
     iconAlt = 'icon';
     label = '';
@@ -4944,6 +5269,11 @@ class BkSelect {
             return label.includes(term);
         });
     }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    /**
+     * True when the user is allowed to change the selection. Both disabled and
+     * readonly lock the control, so neither may offer a remove/clear affordance.
+     */
+    isEditable = computed(() => !this.disabled() && !this.readonly(), ...(ngDevMode ? [{ debugName: "isEditable" }] : []));
     isAllSelected = computed(() => {
         const filtered = this.filteredItems();
         const current = this.selectedOptions();
@@ -5323,11 +5653,15 @@ class BkSelect {
     }
     removeOption(item, event) {
         event.stopPropagation();
+        if (!this.isEditable())
+            return;
         const newSelection = this.selectedOptions().filter(i => i !== item);
         this.updateModel(newSelection);
     }
     handleClear(event) {
         event.stopPropagation();
+        if (!this.isEditable())
+            return;
         this.updateModel([]);
         this.clear.emit(null);
     }
@@ -5486,12 +5820,73 @@ class BkSelect {
         const key = this.colorKey();
         return key && typeof item === 'object' ? item[key] : null;
     }
+    /**
+     * Colours for the control itself. Single-select only: with several chips
+     * selected there is no single accent that could represent them, so multi
+     * mode stays neutral and relies on per-chip dots.
+     */
+    controlAppearance = computed(() => {
+        if (!this.showDots() || this.multiple())
+            return NEUTRAL_APPEARANCE;
+        const selected = this.selectedOptions()[0];
+        if (!selected)
+            return NEUTRAL_APPEARANCE;
+        return deriveAppearance(this.resolveColor(selected), 'subtle');
+    }, ...(ngDevMode ? [{ debugName: "controlAppearance" }] : []));
+    /**
+     * Tint for an errored control, derived from the same red as the error border
+     * so the control reads as one state rather than a red outline over a colour.
+     */
+    static ERROR_APPEARANCE = deriveAppearance('#D11E14', 'subtle');
+    /**
+     * Colours actually applied to the control. An option's accent never survives
+     * an error: the tint is swapped for a soft red one so the error can't be
+     * mistaken for a status colour. Only tintable controls have anything to swap
+     * — a multi-select is neutral either way, since one background can't stand in
+     * for several chips.
+     */
+    controlStyle() {
+        if (!this.hasError)
+            return this.controlAppearance();
+        return this.showDots() && !this.multiple()
+            ? BkSelect.ERROR_APPEARANCE
+            : NEUTRAL_APPEARANCE;
+    }
+    /** Raw accent for an option's dot. Null when the item has no usable colour. */
+    accentFor(item) {
+        return deriveAppearance(this.resolveColor(item), 'subtle').dotColor;
+    }
+    /**
+     * Label colour for an option/chip. With showDots on, the accent is darkened
+     * until it stays legible (a pale accent as raw text is unreadable); otherwise
+     * the raw colorKey value is used, preserving the previous behaviour.
+     */
+    optionTextColor(item) {
+        if (!this.showDots())
+            return this.resolveColor(item);
+        return deriveAppearance(this.resolveColor(item), 'none').color;
+    }
+    /** Soft tint for an option's avatar, so it matches the option's accent. */
+    avatarBgFor(item) {
+        return deriveAppearance(this.resolveColor(item), 'subtle').backgroundColor;
+    }
+    /** Readable text colour paired with avatarBgFor. */
+    avatarTextFor(item) {
+        return deriveAppearance(this.resolveColor(item), 'subtle').color;
+    }
     resolveIcon(item) {
         if (!item)
             return null;
         const key = this.bindIcon();
         return key && typeof item === 'object' ? item[key] ?? null : null;
     }
+    /** Image for the avatar. Prefers `avatarKey`, falling back to `bindIcon`. */
+    resolveAvatarSrc(item) {
+        if (!item || typeof item !== 'object')
+            return null;
+        const key = this.avatarKey() || this.bindIcon();
+        return key ? item[key] ?? null : null;
+    }
     getRemainingItems() {
         return this.selectedOptions()
             .slice(this.visibleCount())
@@ -5506,24 +5901,24 @@ class BkSelect {
         this.markedIndex.set(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkSelect, isStandalone: true, selector: "bk-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindIcon: { classPropertyName: "bindIcon", publicName: "bindIcon", isSignal: true, isRequired: false, transformFunction: null }, isResponsive: { classPropertyName: "isResponsive", publicName: "isResponsive", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, variation: { classPropertyName: "variation", publicName: "variation", isSignal: false, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxLabels: { classPropertyName: "maxLabels", publicName: "maxLabels", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allSelect: { classPropertyName: "allSelect", publicName: "allSelect", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: false, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: false, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", open: "open", close: "close", focus: "focus", blur: "blur", search: "search", clear: "clear", change: "change", scrollToEnd: "scrollToEnd" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkSelect, isStandalone: true, selector: "bk-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindIcon: { classPropertyName: "bindIcon", publicName: "bindIcon", isSignal: true, isRequired: false, transformFunction: null }, isResponsive: { classPropertyName: "isResponsive", publicName: "isResponsive", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, avatarKey: { classPropertyName: "avatarKey", publicName: "avatarKey", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, variation: { classPropertyName: "variation", publicName: "variation", isSignal: false, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxLabels: { classPropertyName: "maxLabels", publicName: "maxLabels", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allSelect: { classPropertyName: "allSelect", publicName: "allSelect", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: false, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: false, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", open: "open", close: "close", focus: "focus", blur: "blur", search: "search", clear: "clear", change: "change", scrollToEnd: "scrollToEnd" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkSelect),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }, { propertyName: "chipsViewport", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "measurePlus", first: true, predicate: ["measurePlus"], descendants: true }, { propertyName: "optionsRef", predicate: ["optionsRef"], descendants: true }, { propertyName: "measureChips", predicate: ["measureChip"], descendants: true }], ngImport: i0, template: "<div class=\"bk-select-container\" [ngClass]=\"variation\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <div\r\n      #controlWrapper\r\n      class=\"bk-select-control\"\r\n      [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n      tabindex=\"0\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [class.bk-focused]=\"isOpen()\"\r\n      [class.bk-disabled]=\"disabled()\"\r\n      (mousedown)=\"toggleDropdown($event)\"\r\n    >\r\n      <!-- Icon (Always visible if set) -->\r\n      @if (iconSrc) {\r\n        <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"bk-value-container\">\r\n        @if (selectedOptions().length === 0) {\r\n          <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n        @if (multiple() && selectedOptions().length > 0) {\r\n          <div #chipsViewport class=\"bk-value-chips bk-chips-viewport flex gap-0.5 flex-nowrap h-[18px] overflow-hidden\">\r\n            @for (opt of selectedOptions().slice(0, visibleCount()); track $index) {\r\n              <div class=\"bk-multi-badge-item me-0.5\">\r\n                @if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                }\r\n                <span #badgeTextEl class=\"bk-multi-badge-item-text\" [style.color]=\"resolveColor(opt)\"\r\n                      [bkTooltip]=\"getTooltipIfEllipsed(badgeTextEl, resolveLabel(opt))\"\r\n                      bkTooltipPosition=\"top\">{{\r\n                  resolveLabel(opt)\r\n                }}</span>\r\n\r\n                <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"8\"\r\n                    height=\"8\"\r\n                    viewBox=\"0 0 8 8\"\r\n                    fill=\"none\"\r\n                  >\r\n                    <path\r\n                      d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                      stroke=\"#BBBDC5\"\r\n                      stroke-width=\"1.25\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </button>\r\n              </div>\r\n            }\r\n            @if (visibleCount() < selectedOptions().length) {\r\n              <div class=\"bk-multi-badge-item\">\r\n                <span\r\n                  class=\"bk-multi-badge-item-text\"\r\n                  bkTooltipPosition=\"top\"\r\n                  [bkTooltip]=\"getRemainingItems()\"\r\n                  >+{{ selectedOptions().length - visibleCount() }}</span\r\n                >\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Hidden off-screen row used only to measure each chip's natural\r\n               width so we can decide how many fit on a single line. -->\r\n          <div class=\"bk-value-chips bk-chips-measure flex gap-0.5 flex-nowrap\" aria-hidden=\"true\">\r\n            @for (opt of selectedOptions(); track $index) {\r\n              <div #measureChip class=\"bk-multi-badge-item me-0.5\">\r\n                @if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                }\r\n                <span class=\"bk-multi-badge-item-text\">{{ resolveLabel(opt) }}</span>\r\n                <button type=\"button\" tabindex=\"-1\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"8\"\r\n                    height=\"8\"\r\n                    viewBox=\"0 0 8 8\"\r\n                    fill=\"none\"\r\n                  >\r\n                    <path\r\n                      d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                      stroke=\"#BBBDC5\"\r\n                      stroke-width=\"1.25\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </button>\r\n              </div>\r\n            }\r\n            <div #measurePlus class=\"bk-multi-badge-item\">\r\n              <span class=\"bk-multi-badge-item-text\">+{{ selectedOptions().length }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (!multiple() && selectedOptions().length > 0) {\r\n          <div class=\"flex items-center gap-1.5 min-w-0 w-full\">\r\n            @if (resolveIcon(selectedOptions()[0])) {\r\n              <img [src]=\"resolveIcon(selectedOptions()[0])!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n            }\r\n            <div #singleValueEl class=\"bk-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\"\r\n                 [bkTooltip]=\"getTooltipIfEllipsed(singleValueEl, resolveLabel(selectedOptions()[0]))\"\r\n                 bkTooltipPosition=\"top\">\r\n              {{ resolveLabel(selectedOptions()[0]) }}\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"bk-actions\">\r\n        @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n          <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <path d=\"m6 9 6 6 6-6\" />\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        #dropdownPanel\r\n        tabindex=\"-1\"\r\n        (keydown)=\"onTabPress($event)\"\r\n        class=\"bk-dropdown-panel\"\r\n        [attr.data-position]=\"placement()\"\r\n        [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n        [style.top]=\"getTop()\"\r\n        [style.bottom]=\"getBottom()\"\r\n        [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n        [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n        [style.zIndex]=\"appendToBody() ? 10000 : null\"\r\n        [class.bk-grouped]=\"groupBy()\"\r\n      >\r\n        @if (searchable()) {\r\n          <div class=\"bk-dropdown-search mb-1\">\r\n            <div class=\"bk-search-wrapper\">\r\n              <svg\r\n                class=\"text-[#BBBDC5] mr-2\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"20\"\r\n                height=\"20\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              >\r\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n              </svg>\r\n              <input\r\n                #searchInput\r\n                tabindex=\"-1\"\r\n                type=\"text\"\r\n                class=\"bk-search-input\"\r\n                [value]=\"searchTerm()\"\r\n                [placeholder]=\"'Search...'\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          [class.bk-no-responsive]=\"!isResponsive()\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\r\n          @if (loading()) {\r\n            <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n          } @else {\r\n            @if (allSelect()) {\r\n              @if (multiple() && filteredItems().length > 0) {\r\n                <div\r\n                  class=\"bk-option\"\r\n                  (mousedown)=\"toggleSelectAll($event)\"\r\n                  [class.bk-selected]=\"isAllSelected()\"\r\n                >\r\n                  <div class=\"flex-1 flex justify-between\">\r\n                    <span class=\"line-clamp-1\">Select All</span>\r\n                    @if (isAllSelected()) {\r\n                      <svg\r\n                        class=\"text-[#141414]\"\r\n                        width=\"17\"\r\n                        height=\"17\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2.5\"\r\n                      >\r\n                        <polyline points=\"20 6 9 17 4 12\" />\r\n                      </svg>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n            @for (group of groupedItems(); track $index) {\r\n              @if (group.group) {\r\n                <div class=\"bk-option-group\">\r\n                  {{ group.group }}\r\n                </div>\r\n              }\r\n\r\n              @for (item of group.items; track $index) {\r\n                <div\r\n                  #optionsRef\r\n                  tabindex=\"-1\"\r\n                  class=\"bk-option\"\r\n                  [class.bk-selected]=\"isItemSelected(item)\"\r\n                  [class.bk-marked]=\"$index === markedIndex()\"\r\n                  [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                  [class.cursor-not-allowed]=\"isItemDisabled(item)\"\r\n                  (click)=\"handleSelection(item, $event)\"\r\n                  (mouseenter)=\"onOptionHover($index)\"\r\n                >\r\n                  <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\r\n                      @if (resolveIcon(item)) {\r\n                        <img [src]=\"resolveIcon(item)!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n                      }\r\n                      <span #optionLabelEl class=\"bk-option-label min-w-0\" [style.color]=\"resolveColor(item)\"\r\n                            [bkTooltip]=\"getTooltipIfEllipsed(optionLabelEl, resolveLabel(item))\"\r\n                            bkTooltipPosition=\"top\">{{\r\n                        resolveLabel(item)\r\n                      }}</span>\r\n                    </div>\r\n\r\n                    @if (isItemSelected(item)) {\r\n                      <svg\r\n                        class=\"text-[#141414] shrink-0\"\r\n                        width=\"17\"\r\n                        height=\"17\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2.5\"\r\n                      >\r\n                        <polyline points=\"20 6 9 17 4 12\" />\r\n                      </svg>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (filteredItems().length === 0) {\r\n              <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;outline:none!important}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7;background-color:#f4f4f6}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{@apply border-[#d11e14];}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs;}.bk-chips-viewport{flex:1 1 0%;min-width:0;max-width:100%}.bk-chips-measure{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;white-space:nowrap;z-index:-1}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[100] overflow-hidden cursor-default p-2.5;}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:166px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.bk-options-list.bk-no-responsive{max-height:166px!important}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-option.bk-option-disabled:hover{@apply bg-transparent;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}.bk-option-icon{@apply w-4 h-4 object-contain rounded-sm;}.bk-chip-icon{@apply w-3 h-3 object-contain rounded-sm;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }] });
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }, { propertyName: "chipsViewport", first: true, predicate: ["chipsViewport"], descendants: true }, { propertyName: "measurePlus", first: true, predicate: ["measurePlus"], descendants: true }, { propertyName: "optionsRef", predicate: ["optionsRef"], descendants: true }, { propertyName: "measureChips", predicate: ["measureChip"], descendants: true }], ngImport: i0, template: "<div class=\"bk-select-container\" [ngClass]=\"variation\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <!-- controlStyle() resolves the tint: the selected option's accent normally,\r\n         a soft red one while hasError. It's a method rather than a computed\r\n         because hasError is a plain @Input, not a signal. -->\r\n    <div\r\n      #controlWrapper\r\n      class=\"bk-select-control\"\r\n      [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n      tabindex=\"0\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [class.bk-focused]=\"isOpen()\"\r\n      [class.bk-disabled]=\"disabled()\"\r\n      [class.bk-filled]=\"!!controlStyle().backgroundColor\"\r\n      [style.backgroundColor]=\"controlStyle().backgroundColor\"\r\n      [style.color]=\"controlStyle().color\"\r\n      [style.borderColor]=\"controlStyle().borderColor\"\r\n      (mousedown)=\"toggleDropdown($event)\"\r\n    >\r\n      <!-- Icon (Always visible if set) -->\r\n      @if (iconSrc) {\r\n        <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"bk-value-container\">\r\n        @if (selectedOptions().length === 0) {\r\n          <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n        @if (multiple() && selectedOptions().length > 0) {\r\n          <div\r\n            #chipsViewport\r\n            class=\"bk-value-chips bk-chips-viewport flex gap-0.5 flex-nowrap overflow-hidden h-[18px]\"\r\n          >\r\n            @for (opt of selectedOptions().slice(0, visibleCount()); track $index) {\r\n              <div class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- One leading visual only: avatar > icon > dot. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                    [bgColor]=\"avatarBgFor(opt)\"\r\n                    [textColor]=\"avatarTextFor(opt)\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\" [style.backgroundColor]=\"accentFor(opt)\"></span>\r\n                }\r\n                <span #badgeTextEl class=\"bk-multi-badge-item-text\" [style.color]=\"optionTextColor(opt)\"\r\n                      [bkTooltip]=\"getTooltipIfEllipsed(badgeTextEl, resolveLabel(opt))\"\r\n                      bkTooltipPosition=\"top\">{{\r\n                  resolveLabel(opt)\r\n                }}</span>\r\n\r\n                <!-- A locked control must not offer a way to drop a value. -->\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            @if (visibleCount() < selectedOptions().length) {\r\n              <div class=\"bk-multi-badge-item\">\r\n                <span\r\n                  class=\"bk-multi-badge-item-text\"\r\n                  bkTooltipPosition=\"top\"\r\n                  [bkTooltip]=\"getRemainingItems()\"\r\n                  >+{{ selectedOptions().length - visibleCount() }}</span\r\n                >\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Hidden off-screen row used only to measure each chip's natural\r\n               width so we can decide how many fit on a single line. -->\r\n          <div class=\"bk-value-chips bk-chips-measure flex gap-0.5 flex-nowrap\" aria-hidden=\"true\">\r\n            @for (opt of selectedOptions(); track $index) {\r\n              <div #measureChip class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- Must mirror the visible chip exactly \u2014 same leading visual\r\n                     and same precedence \u2014 or the measured width is wrong and\r\n                     \"+N\" collapses at the wrong point. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\"></span>\r\n                }\r\n                <span class=\"bk-multi-badge-item-text\">{{ resolveLabel(opt) }}</span>\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" tabindex=\"-1\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            <div #measurePlus class=\"bk-multi-badge-item\">\r\n              <span class=\"bk-multi-badge-item-text\">+{{ selectedOptions().length }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (!multiple() && selectedOptions().length > 0) {\r\n          <div class=\"flex items-center gap-1.5 min-w-0 w-full\">\r\n            <!-- One leading visual only: avatar > icon > dot.\r\n                 `flex` on the host: bk-avatar's host is display:inline by\r\n                 default, so its inline-flex body sits on a baseline and the\r\n                 host gains descender space \u2014 which knocks the avatar out of\r\n                 vertical centre against the label. -->\r\n            @if (showAvatar()) {\r\n              <bk-avatar\r\n                class=\"shrink-0 flex\"\r\n                size=\"xxsm\"\r\n                [src]=\"resolveAvatarSrc(selectedOptions()[0])\"\r\n                [name]=\"resolveLabel(selectedOptions()[0])\"\r\n                [alt]=\"iconAlt\"\r\n                [bgColor]=\"avatarBgFor(selectedOptions()[0])\"\r\n                [textColor]=\"avatarTextFor(selectedOptions()[0])\"\r\n              ></bk-avatar>\r\n            } @else if (resolveIcon(selectedOptions()[0])) {\r\n              <img [src]=\"resolveIcon(selectedOptions()[0])!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n            } @else if (showDots() && accentFor(selectedOptions()[0])) {\r\n              <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(selectedOptions()[0])\"></span>\r\n            }\r\n            <div #singleValueEl class=\"bk-value-label-single\" [style.color]=\"controlStyle().color ?? resolveColor(selectedOptions()[0])\"\r\n                 [bkTooltip]=\"getTooltipIfEllipsed(singleValueEl, resolveLabel(selectedOptions()[0]))\"\r\n                 bkTooltipPosition=\"top\">\r\n              {{ resolveLabel(selectedOptions()[0]) }}\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"bk-actions\">\r\n        @if (clearable() && selectedOptions().length > 0 && isEditable()) {\r\n          <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <path d=\"m6 9 6 6 6-6\" />\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        #dropdownPanel\r\n        tabindex=\"-1\"\r\n        (keydown)=\"onTabPress($event)\"\r\n        class=\"bk-dropdown-panel\"\r\n        [attr.data-position]=\"placement()\"\r\n        [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n        [style.top]=\"getTop()\"\r\n        [style.bottom]=\"getBottom()\"\r\n        [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n        [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n        [style.zIndex]=\"appendToBody() ? 10000 : null\"\r\n        [class.bk-grouped]=\"groupBy()\"\r\n      >\r\n        @if (searchable()) {\r\n          <div class=\"bk-dropdown-search mb-1\">\r\n            <div class=\"bk-search-wrapper\">\r\n              <svg\r\n                class=\"text-[#BBBDC5] mr-2\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"20\"\r\n                height=\"20\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              >\r\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n              </svg>\r\n              <input\r\n                #searchInput\r\n                tabindex=\"-1\"\r\n                type=\"text\"\r\n                class=\"bk-search-input\"\r\n                [value]=\"searchTerm()\"\r\n                [placeholder]=\"'Search...'\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          [class.bk-no-responsive]=\"!isResponsive()\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\r\n          @if (loading()) {\r\n            <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n          } @else {\r\n            @if (allSelect()) {\r\n              @if (multiple() && filteredItems().length > 0) {\r\n                <div\r\n                  class=\"bk-option\"\r\n                  (mousedown)=\"toggleSelectAll($event)\"\r\n                  [class.bk-selected]=\"isAllSelected()\"\r\n                >\r\n                  <div class=\"flex-1 flex items-center gap-2 min-w-0\">\r\n                    <!-- Reflects state only: pointer-events-none lets the row's\r\n                         mousedown own the toggle, so the box can't fire twice.\r\n                         standalone keeps this ngModel out of any parent <form>\r\n                         bk-select is rendered inside. -->\r\n                    <bk-checkbox\r\n                      class=\"pointer-events-none shrink-0 flex\"\r\n                      checkboxClass=\"sm\"\r\n                      [ngModel]=\"isAllSelected()\"\r\n                      [ngModelOptions]=\"{ standalone: true }\"\r\n                    ></bk-checkbox>\r\n                    <span class=\"line-clamp-1\">Select All</span>\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n            @for (group of groupedItems(); track $index) {\r\n              @if (group.group) {\r\n                <div class=\"bk-option-group\">\r\n                  {{ group.group }}\r\n                </div>\r\n              }\r\n\r\n              @for (item of group.items; track $index) {\r\n                <div\r\n                  #optionsRef\r\n                  tabindex=\"-1\"\r\n                  class=\"bk-option\"\r\n                  [class.bk-selected]=\"isItemSelected(item)\"\r\n                  [class.bk-marked]=\"$index === markedIndex()\"\r\n                  [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                  [class.cursor-not-allowed]=\"isItemDisabled(item)\"\r\n                  (click)=\"handleSelection(item, $event)\"\r\n                  (mouseenter)=\"onOptionHover($index)\"\r\n                >\r\n                  <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\r\n                      <!-- One leading visual only: avatar > icon > dot. -->\r\n                      @if (showAvatar()) {\r\n                        <bk-avatar\r\n                          class=\"shrink-0 flex\"\r\n                          size=\"xxsm\"\r\n                          [src]=\"resolveAvatarSrc(item)\"\r\n                          [name]=\"resolveLabel(item)\"\r\n                          [alt]=\"iconAlt\"\r\n                          [bgColor]=\"avatarBgFor(item)\"\r\n                          [textColor]=\"avatarTextFor(item)\"\r\n                        ></bk-avatar>\r\n                      } @else if (resolveIcon(item)) {\r\n                        <img [src]=\"resolveIcon(item)!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n                      } @else if (showDots() && accentFor(item)) {\r\n                        <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(item)\"></span>\r\n                      }\r\n                      <span #optionLabelEl class=\"bk-option-label min-w-0\" [style.color]=\"optionTextColor(item)\"\r\n                            [bkTooltip]=\"getTooltipIfEllipsed(optionLabelEl, resolveLabel(item))\"\r\n                            bkTooltipPosition=\"top\">{{\r\n                        resolveLabel(item)\r\n                      }}</span>\r\n                    </div>\r\n\r\n                    @if (isItemSelected(item)) {\r\n                      <svg\r\n                        class=\"text-[#141414] shrink-0\"\r\n                        width=\"17\"\r\n                        height=\"17\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2.5\"\r\n                      >\r\n                        <polyline points=\"20 6 9 17 4 12\" />\r\n                      </svg>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (filteredItems().length === 0) {\r\n              <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply shadow-none z-10;outline:none!important}.bk-select-control.bk-focused:not(.bk-filled){@apply border-[#6B7080];}.bk-select-control.bk-filled{box-shadow:none}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7!important;background-color:#f4f4f6!important;color:#a1a3ae!important}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{border-color:#d11e14!important}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs !leading-[18px];}.bk-chips-viewport{flex:1 1 0%;min-width:0;max-width:100%}.bk-chips-measure{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;white-space:nowrap;z-index:-1}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item.bk-chip-has-avatar{@apply py-0 ps-0.5;max-width:140px}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[100] overflow-hidden cursor-default p-2.5;}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:166px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.bk-options-list.bk-no-responsive{max-height:166px!important}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-option.bk-option-disabled:hover{@apply bg-transparent;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}.bk-option-icon{@apply w-4 h-4 object-contain rounded-sm;}.bk-chip-icon{@apply w-3 h-3 object-contain rounded-sm;}.bk-value-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.bk-chip-dot{@apply inline-block w-1.5 h-1.5 rounded-full shrink-0;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkAvatar, selector: "bk-avatar", inputs: ["src", "alt", "name", "initialsOverride", "tooltipContent", "bgColor", "textColor", "size", "variant", "fallback", "dot", "dotPosition"], outputs: ["imageLoadError"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-select', standalone: true, imports: [CommonModule, FormsModule, BKTooltipDirective], providers: [
+            args: [{ selector: 'bk-select', standalone: true, imports: [CommonModule, FormsModule, BKTooltipDirective, BkCheckbox, BkAvatar], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BkSelect),
                             multi: true
                         }
-                    ], template: "<div class=\"bk-select-container\" [ngClass]=\"variation\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <div\r\n      #controlWrapper\r\n      class=\"bk-select-control\"\r\n      [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n      tabindex=\"0\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [class.bk-focused]=\"isOpen()\"\r\n      [class.bk-disabled]=\"disabled()\"\r\n      (mousedown)=\"toggleDropdown($event)\"\r\n    >\r\n      <!-- Icon (Always visible if set) -->\r\n      @if (iconSrc) {\r\n        <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"bk-value-container\">\r\n        @if (selectedOptions().length === 0) {\r\n          <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n        @if (multiple() && selectedOptions().length > 0) {\r\n          <div #chipsViewport class=\"bk-value-chips bk-chips-viewport flex gap-0.5 flex-nowrap h-[18px] overflow-hidden\">\r\n            @for (opt of selectedOptions().slice(0, visibleCount()); track $index) {\r\n              <div class=\"bk-multi-badge-item me-0.5\">\r\n                @if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                }\r\n                <span #badgeTextEl class=\"bk-multi-badge-item-text\" [style.color]=\"resolveColor(opt)\"\r\n                      [bkTooltip]=\"getTooltipIfEllipsed(badgeTextEl, resolveLabel(opt))\"\r\n                      bkTooltipPosition=\"top\">{{\r\n                  resolveLabel(opt)\r\n                }}</span>\r\n\r\n                <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"8\"\r\n                    height=\"8\"\r\n                    viewBox=\"0 0 8 8\"\r\n                    fill=\"none\"\r\n                  >\r\n                    <path\r\n                      d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                      stroke=\"#BBBDC5\"\r\n                      stroke-width=\"1.25\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </button>\r\n              </div>\r\n            }\r\n            @if (visibleCount() < selectedOptions().length) {\r\n              <div class=\"bk-multi-badge-item\">\r\n                <span\r\n                  class=\"bk-multi-badge-item-text\"\r\n                  bkTooltipPosition=\"top\"\r\n                  [bkTooltip]=\"getRemainingItems()\"\r\n                  >+{{ selectedOptions().length - visibleCount() }}</span\r\n                >\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Hidden off-screen row used only to measure each chip's natural\r\n               width so we can decide how many fit on a single line. -->\r\n          <div class=\"bk-value-chips bk-chips-measure flex gap-0.5 flex-nowrap\" aria-hidden=\"true\">\r\n            @for (opt of selectedOptions(); track $index) {\r\n              <div #measureChip class=\"bk-multi-badge-item me-0.5\">\r\n                @if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                }\r\n                <span class=\"bk-multi-badge-item-text\">{{ resolveLabel(opt) }}</span>\r\n                <button type=\"button\" tabindex=\"-1\">\r\n                  <svg\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"8\"\r\n                    height=\"8\"\r\n                    viewBox=\"0 0 8 8\"\r\n                    fill=\"none\"\r\n                  >\r\n                    <path\r\n                      d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                      stroke=\"#BBBDC5\"\r\n                      stroke-width=\"1.25\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </button>\r\n              </div>\r\n            }\r\n            <div #measurePlus class=\"bk-multi-badge-item\">\r\n              <span class=\"bk-multi-badge-item-text\">+{{ selectedOptions().length }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (!multiple() && selectedOptions().length > 0) {\r\n          <div class=\"flex items-center gap-1.5 min-w-0 w-full\">\r\n            @if (resolveIcon(selectedOptions()[0])) {\r\n              <img [src]=\"resolveIcon(selectedOptions()[0])!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n            }\r\n            <div #singleValueEl class=\"bk-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\"\r\n                 [bkTooltip]=\"getTooltipIfEllipsed(singleValueEl, resolveLabel(selectedOptions()[0]))\"\r\n                 bkTooltipPosition=\"top\">\r\n              {{ resolveLabel(selectedOptions()[0]) }}\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"bk-actions\">\r\n        @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n          <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <path d=\"m6 9 6 6 6-6\" />\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        #dropdownPanel\r\n        tabindex=\"-1\"\r\n        (keydown)=\"onTabPress($event)\"\r\n        class=\"bk-dropdown-panel\"\r\n        [attr.data-position]=\"placement()\"\r\n        [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n        [style.top]=\"getTop()\"\r\n        [style.bottom]=\"getBottom()\"\r\n        [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n        [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n        [style.zIndex]=\"appendToBody() ? 10000 : null\"\r\n        [class.bk-grouped]=\"groupBy()\"\r\n      >\r\n        @if (searchable()) {\r\n          <div class=\"bk-dropdown-search mb-1\">\r\n            <div class=\"bk-search-wrapper\">\r\n              <svg\r\n                class=\"text-[#BBBDC5] mr-2\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"20\"\r\n                height=\"20\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              >\r\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n              </svg>\r\n              <input\r\n                #searchInput\r\n                tabindex=\"-1\"\r\n                type=\"text\"\r\n                class=\"bk-search-input\"\r\n                [value]=\"searchTerm()\"\r\n                [placeholder]=\"'Search...'\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          [class.bk-no-responsive]=\"!isResponsive()\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\r\n          @if (loading()) {\r\n            <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n          } @else {\r\n            @if (allSelect()) {\r\n              @if (multiple() && filteredItems().length > 0) {\r\n                <div\r\n                  class=\"bk-option\"\r\n                  (mousedown)=\"toggleSelectAll($event)\"\r\n                  [class.bk-selected]=\"isAllSelected()\"\r\n                >\r\n                  <div class=\"flex-1 flex justify-between\">\r\n                    <span class=\"line-clamp-1\">Select All</span>\r\n                    @if (isAllSelected()) {\r\n                      <svg\r\n                        class=\"text-[#141414]\"\r\n                        width=\"17\"\r\n                        height=\"17\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2.5\"\r\n                      >\r\n                        <polyline points=\"20 6 9 17 4 12\" />\r\n                      </svg>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n            @for (group of groupedItems(); track $index) {\r\n              @if (group.group) {\r\n                <div class=\"bk-option-group\">\r\n                  {{ group.group }}\r\n                </div>\r\n              }\r\n\r\n              @for (item of group.items; track $index) {\r\n                <div\r\n                  #optionsRef\r\n                  tabindex=\"-1\"\r\n                  class=\"bk-option\"\r\n                  [class.bk-selected]=\"isItemSelected(item)\"\r\n                  [class.bk-marked]=\"$index === markedIndex()\"\r\n                  [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                  [class.cursor-not-allowed]=\"isItemDisabled(item)\"\r\n                  (click)=\"handleSelection(item, $event)\"\r\n                  (mouseenter)=\"onOptionHover($index)\"\r\n                >\r\n                  <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\r\n                      @if (resolveIcon(item)) {\r\n                        <img [src]=\"resolveIcon(item)!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n                      }\r\n                      <span #optionLabelEl class=\"bk-option-label min-w-0\" [style.color]=\"resolveColor(item)\"\r\n                            [bkTooltip]=\"getTooltipIfEllipsed(optionLabelEl, resolveLabel(item))\"\r\n                            bkTooltipPosition=\"top\">{{\r\n                        resolveLabel(item)\r\n                      }}</span>\r\n                    </div>\r\n\r\n                    @if (isItemSelected(item)) {\r\n                      <svg\r\n                        class=\"text-[#141414] shrink-0\"\r\n                        width=\"17\"\r\n                        height=\"17\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2.5\"\r\n                      >\r\n                        <polyline points=\"20 6 9 17 4 12\" />\r\n                      </svg>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (filteredItems().length === 0) {\r\n              <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;outline:none!important}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7;background-color:#f4f4f6}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{@apply border-[#d11e14];}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs;}.bk-chips-viewport{flex:1 1 0%;min-width:0;max-width:100%}.bk-chips-measure{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;white-space:nowrap;z-index:-1}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[100] overflow-hidden cursor-default p-2.5;}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:166px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.bk-options-list.bk-no-responsive{max-height:166px!important}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-option.bk-option-disabled:hover{@apply bg-transparent;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}.bk-option-icon{@apply w-4 h-4 object-contain rounded-sm;}.bk-chip-icon{@apply w-3 h-3 object-contain rounded-sm;}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindIcon", required: false }] }], isResponsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResponsive", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllText", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], iconAlt: [{
+                    ], template: "<div class=\"bk-select-container\" [ngClass]=\"variation\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <!-- controlStyle() resolves the tint: the selected option's accent normally,\r\n         a soft red one while hasError. It's a method rather than a computed\r\n         because hasError is a plain @Input, not a signal. -->\r\n    <div\r\n      #controlWrapper\r\n      class=\"bk-select-control\"\r\n      [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n      tabindex=\"0\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      [class.bk-focused]=\"isOpen()\"\r\n      [class.bk-disabled]=\"disabled()\"\r\n      [class.bk-filled]=\"!!controlStyle().backgroundColor\"\r\n      [style.backgroundColor]=\"controlStyle().backgroundColor\"\r\n      [style.color]=\"controlStyle().color\"\r\n      [style.borderColor]=\"controlStyle().borderColor\"\r\n      (mousedown)=\"toggleDropdown($event)\"\r\n    >\r\n      <!-- Icon (Always visible if set) -->\r\n      @if (iconSrc) {\r\n        <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"bk-value-container\">\r\n        @if (selectedOptions().length === 0) {\r\n          <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n        @if (multiple() && selectedOptions().length > 0) {\r\n          <div\r\n            #chipsViewport\r\n            class=\"bk-value-chips bk-chips-viewport flex gap-0.5 flex-nowrap overflow-hidden h-[18px]\"\r\n          >\r\n            @for (opt of selectedOptions().slice(0, visibleCount()); track $index) {\r\n              <div class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- One leading visual only: avatar > icon > dot. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                    [bgColor]=\"avatarBgFor(opt)\"\r\n                    [textColor]=\"avatarTextFor(opt)\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\" [style.backgroundColor]=\"accentFor(opt)\"></span>\r\n                }\r\n                <span #badgeTextEl class=\"bk-multi-badge-item-text\" [style.color]=\"optionTextColor(opt)\"\r\n                      [bkTooltip]=\"getTooltipIfEllipsed(badgeTextEl, resolveLabel(opt))\"\r\n                      bkTooltipPosition=\"top\">{{\r\n                  resolveLabel(opt)\r\n                }}</span>\r\n\r\n                <!-- A locked control must not offer a way to drop a value. -->\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            @if (visibleCount() < selectedOptions().length) {\r\n              <div class=\"bk-multi-badge-item\">\r\n                <span\r\n                  class=\"bk-multi-badge-item-text\"\r\n                  bkTooltipPosition=\"top\"\r\n                  [bkTooltip]=\"getRemainingItems()\"\r\n                  >+{{ selectedOptions().length - visibleCount() }}</span\r\n                >\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Hidden off-screen row used only to measure each chip's natural\r\n               width so we can decide how many fit on a single line. -->\r\n          <div class=\"bk-value-chips bk-chips-measure flex gap-0.5 flex-nowrap\" aria-hidden=\"true\">\r\n            @for (opt of selectedOptions(); track $index) {\r\n              <div #measureChip class=\"bk-multi-badge-item me-0.5\" [class.bk-chip-has-avatar]=\"showAvatar()\">\r\n                <!-- Must mirror the visible chip exactly \u2014 same leading visual\r\n                     and same precedence \u2014 or the measured width is wrong and\r\n                     \"+N\" collapses at the wrong point. -->\r\n                @if (showAvatar()) {\r\n                  <bk-avatar\r\n                    class=\"shrink-0 flex\"\r\n                    size=\"xxsm\"\r\n                    [src]=\"resolveAvatarSrc(opt)\"\r\n                    [name]=\"resolveLabel(opt)\"\r\n                    [alt]=\"iconAlt\"\r\n                  ></bk-avatar>\r\n                } @else if (resolveIcon(opt)) {\r\n                  <img [src]=\"resolveIcon(opt)!\" alt=\"icon\" class=\"bk-chip-icon shrink-0\" />\r\n                } @else if (showDots() && accentFor(opt)) {\r\n                  <span class=\"bk-chip-dot\"></span>\r\n                }\r\n                <span class=\"bk-multi-badge-item-text\">{{ resolveLabel(opt) }}</span>\r\n                @if (isEditable()) {\r\n                  <button type=\"button\" tabindex=\"-1\">\r\n                    <svg\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                      width=\"8\"\r\n                      height=\"8\"\r\n                      viewBox=\"0 0 8 8\"\r\n                      fill=\"none\"\r\n                    >\r\n                      <path\r\n                        d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                        stroke=\"#BBBDC5\"\r\n                        stroke-width=\"1.25\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n            <div #measurePlus class=\"bk-multi-badge-item\">\r\n              <span class=\"bk-multi-badge-item-text\">+{{ selectedOptions().length }}</span>\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (!multiple() && selectedOptions().length > 0) {\r\n          <div class=\"flex items-center gap-1.5 min-w-0 w-full\">\r\n            <!-- One leading visual only: avatar > icon > dot.\r\n                 `flex` on the host: bk-avatar's host is display:inline by\r\n                 default, so its inline-flex body sits on a baseline and the\r\n                 host gains descender space \u2014 which knocks the avatar out of\r\n                 vertical centre against the label. -->\r\n            @if (showAvatar()) {\r\n              <bk-avatar\r\n                class=\"shrink-0 flex\"\r\n                size=\"xxsm\"\r\n                [src]=\"resolveAvatarSrc(selectedOptions()[0])\"\r\n                [name]=\"resolveLabel(selectedOptions()[0])\"\r\n                [alt]=\"iconAlt\"\r\n                [bgColor]=\"avatarBgFor(selectedOptions()[0])\"\r\n                [textColor]=\"avatarTextFor(selectedOptions()[0])\"\r\n              ></bk-avatar>\r\n            } @else if (resolveIcon(selectedOptions()[0])) {\r\n              <img [src]=\"resolveIcon(selectedOptions()[0])!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n            } @else if (showDots() && accentFor(selectedOptions()[0])) {\r\n              <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(selectedOptions()[0])\"></span>\r\n            }\r\n            <div #singleValueEl class=\"bk-value-label-single\" [style.color]=\"controlStyle().color ?? resolveColor(selectedOptions()[0])\"\r\n                 [bkTooltip]=\"getTooltipIfEllipsed(singleValueEl, resolveLabel(selectedOptions()[0]))\"\r\n                 bkTooltipPosition=\"top\">\r\n              {{ resolveLabel(selectedOptions()[0]) }}\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      <div class=\"bk-actions\">\r\n        @if (clearable() && selectedOptions().length > 0 && isEditable()) {\r\n          <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <path d=\"m6 9 6 6 6-6\" />\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n      <div\r\n        #dropdownPanel\r\n        tabindex=\"-1\"\r\n        (keydown)=\"onTabPress($event)\"\r\n        class=\"bk-dropdown-panel\"\r\n        [attr.data-position]=\"placement()\"\r\n        [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n        [style.top]=\"getTop()\"\r\n        [style.bottom]=\"getBottom()\"\r\n        [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n        [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n        [style.zIndex]=\"appendToBody() ? 10000 : null\"\r\n        [class.bk-grouped]=\"groupBy()\"\r\n      >\r\n        @if (searchable()) {\r\n          <div class=\"bk-dropdown-search mb-1\">\r\n            <div class=\"bk-search-wrapper\">\r\n              <svg\r\n                class=\"text-[#BBBDC5] mr-2\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"20\"\r\n                height=\"20\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              >\r\n                <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n              </svg>\r\n              <input\r\n                #searchInput\r\n                tabindex=\"-1\"\r\n                type=\"text\"\r\n                class=\"bk-search-input\"\r\n                [value]=\"searchTerm()\"\r\n                [placeholder]=\"'Search...'\"\r\n                (input)=\"onSearchInput($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </div>\r\n          </div>\r\n        }\r\n        <div\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          [class.bk-no-responsive]=\"!isResponsive()\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\r\n          @if (loading()) {\r\n            <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n          } @else {\r\n            @if (allSelect()) {\r\n              @if (multiple() && filteredItems().length > 0) {\r\n                <div\r\n                  class=\"bk-option\"\r\n                  (mousedown)=\"toggleSelectAll($event)\"\r\n                  [class.bk-selected]=\"isAllSelected()\"\r\n                >\r\n                  <div class=\"flex-1 flex items-center gap-2 min-w-0\">\r\n                    <!-- Reflects state only: pointer-events-none lets the row's\r\n                         mousedown own the toggle, so the box can't fire twice.\r\n                         standalone keeps this ngModel out of any parent <form>\r\n                         bk-select is rendered inside. -->\r\n                    <bk-checkbox\r\n                      class=\"pointer-events-none shrink-0 flex\"\r\n                      checkboxClass=\"sm\"\r\n                      [ngModel]=\"isAllSelected()\"\r\n                      [ngModelOptions]=\"{ standalone: true }\"\r\n                    ></bk-checkbox>\r\n                    <span class=\"line-clamp-1\">Select All</span>\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n            @for (group of groupedItems(); track $index) {\r\n              @if (group.group) {\r\n                <div class=\"bk-option-group\">\r\n                  {{ group.group }}\r\n                </div>\r\n              }\r\n\r\n              @for (item of group.items; track $index) {\r\n                <div\r\n                  #optionsRef\r\n                  tabindex=\"-1\"\r\n                  class=\"bk-option\"\r\n                  [class.bk-selected]=\"isItemSelected(item)\"\r\n                  [class.bk-marked]=\"$index === markedIndex()\"\r\n                  [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                  [class.cursor-not-allowed]=\"isItemDisabled(item)\"\r\n                  (click)=\"handleSelection(item, $event)\"\r\n                  (mouseenter)=\"onOptionHover($index)\"\r\n                >\r\n                  <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                    <div class=\"flex items-center gap-2 min-w-0 flex-1\">\r\n                      <!-- One leading visual only: avatar > icon > dot. -->\r\n                      @if (showAvatar()) {\r\n                        <bk-avatar\r\n                          class=\"shrink-0 flex\"\r\n                          size=\"xxsm\"\r\n                          [src]=\"resolveAvatarSrc(item)\"\r\n                          [name]=\"resolveLabel(item)\"\r\n                          [alt]=\"iconAlt\"\r\n                          [bgColor]=\"avatarBgFor(item)\"\r\n                          [textColor]=\"avatarTextFor(item)\"\r\n                        ></bk-avatar>\r\n                      } @else if (resolveIcon(item)) {\r\n                        <img [src]=\"resolveIcon(item)!\" alt=\"icon\" class=\"bk-option-icon shrink-0\" />\r\n                      } @else if (showDots() && accentFor(item)) {\r\n                        <span class=\"bk-value-dot\" [style.backgroundColor]=\"accentFor(item)\"></span>\r\n                      }\r\n                      <span #optionLabelEl class=\"bk-option-label min-w-0\" [style.color]=\"optionTextColor(item)\"\r\n                            [bkTooltip]=\"getTooltipIfEllipsed(optionLabelEl, resolveLabel(item))\"\r\n                            bkTooltipPosition=\"top\">{{\r\n                        resolveLabel(item)\r\n                      }}</span>\r\n                    </div>\r\n\r\n                    @if (isItemSelected(item)) {\r\n                      <svg\r\n                        class=\"text-[#141414] shrink-0\"\r\n                        width=\"17\"\r\n                        height=\"17\"\r\n                        viewBox=\"0 0 24 24\"\r\n                        fill=\"none\"\r\n                        stroke=\"currentColor\"\r\n                        stroke-width=\"2.5\"\r\n                      >\r\n                        <polyline points=\"20 6 9 17 4 12\" />\r\n                      </svg>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (filteredItems().length === 0) {\r\n              <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply shadow-none z-10;outline:none!important}.bk-select-control.bk-focused:not(.bk-filled){@apply border-[#6B7080];}.bk-select-control.bk-filled{box-shadow:none}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7!important;background-color:#f4f4f6!important;color:#a1a3ae!important}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{border-color:#d11e14!important}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs !leading-[18px];}.bk-chips-viewport{flex:1 1 0%;min-width:0;max-width:100%}.bk-chips-measure{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;white-space:nowrap;z-index:-1}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item.bk-chip-has-avatar{@apply py-0 ps-0.5;max-width:140px}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[100] overflow-hidden cursor-default p-2.5;}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:166px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.bk-options-list.bk-no-responsive{max-height:166px!important}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option.bk-option-disabled{@apply opacity-50 cursor-not-allowed;}.bk-option.bk-option-disabled:hover{@apply bg-transparent;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}.bk-option-icon{@apply w-4 h-4 object-contain rounded-sm;}.bk-chip-icon{@apply w-3 h-3 object-contain rounded-sm;}.bk-value-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.bk-chip-dot{@apply inline-block w-1.5 h-1.5 rounded-full shrink-0;}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindIcon", required: false }] }], isResponsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResponsive", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllText", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatar", required: false }] }], avatarKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarKey", required: false }] }], iconAlt: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -7920,6 +8315,17 @@ class BkHierarchicalSelect {
     colorKey = input('', ...(ngDevMode ? [{ debugName: "colorKey" }] : []));
     /** Whether to show clear button when a value is selected. */
     clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    /**
+     * Show an accent dot beside each option, driven by `colorKey`, and tint the
+     * control with the selected node's colour (same treatment as bk-status-select).
+     */
+    showDots = input(false, ...(ngDevMode ? [{ debugName: "showDots" }] : []));
+    /**
+     * When true, a child with no colour of its own borrows its nearest coloured
+     * ancestor's, keeping a branch visually related. Off by default so existing
+     * trees render exactly as before.
+     */
+    inheritColor = input(false, ...(ngDevMode ? [{ debugName: "inheritColor" }] : []));
     /** Optional anchor key to scope dropdown to one subtree (e.g. module/category key). */
     restrictKey = input(null, ...(ngDevMode ? [{ debugName: "restrictKey" }] : []));
     hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
@@ -8108,14 +8514,59 @@ class BkHierarchicalSelect {
         const key = this.colorKey();
         return key && typeof node === 'object' ? node[key] ?? null : null;
     }
-    getValue(node) {
-        const key = this.valueKey();
-        return key && node ? node[key] : node;
+    /**
+     * Accent for the last node of a root→node path: its own colour, or — when
+     * `inheritColor` is on — the nearest coloured ancestor's.
+     */
+    colorAlong(path) {
+        if (!path.length)
+            return null;
+        if (!this.inheritColor())
+            return this.resolveColor(path[path.length - 1]);
+        for (let i = path.length - 1; i >= 0; i--) {
+            const color = this.resolveColor(path[i]);
+            if (color)
+                return color;
+        }
+        return null;
     }
-    getChildren(node) {
-        const key = this.childrenKey();
-        const raw = node?.[key];
-        if (Array.isArray(raw) && raw.length > 0)
+    /** Accent for a row in the level on screen — its ancestors are the breadcrumb. */
+    optionAccentColor(node) {
+        return this.colorAlong([...this.breadcrumb(), node]);
+    }
+    /**
+     * Colours for the control itself, from the selected node. Neutral unless
+     * `showDots` is on, so existing usages are untouched.
+     */
+    controlAppearance = computed(() => {
+        if (!this.showDots())
+            return NEUTRAL_APPEARANCE;
+        const sel = this.selected();
+        if (!sel)
+            return NEUTRAL_APPEARANCE;
+        return deriveAppearance(this.colorAlong(this.buildPathTo(sel)), 'subtle');
+    }, ...(ngDevMode ? [{ debugName: "controlAppearance" }] : []));
+    /** Raw accent for a node's dot. */
+    accentFor(node) {
+        return deriveAppearance(this.optionAccentColor(node), 'subtle').dotColor;
+    }
+    /**
+     * Label colour for an option. With showDots on, the accent is darkened until
+     * legible; otherwise the raw colorKey value is used as before.
+     */
+    optionTextColor(node) {
+        if (!this.showDots())
+            return this.resolveColor(node);
+        return deriveAppearance(this.optionAccentColor(node), 'none').color;
+    }
+    getValue(node) {
+        const key = this.valueKey();
+        return key && node ? node[key] : node;
+    }
+    getChildren(node) {
+        const key = this.childrenKey();
+        const raw = node?.[key];
+        if (Array.isArray(raw) && raw.length > 0)
             return raw;
         const alt = node?.['children'];
         return Array.isArray(alt) && alt.length > 0 ? alt : undefined;
@@ -8381,13 +8832,13 @@ class BkHierarchicalSelect {
         this.clear.emit(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkHierarchicalSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkHierarchicalSelect, isStandalone: true, selector: "bk-hierarchical-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, clearTooltip: { classPropertyName: "clearTooltip", publicName: "clearTooltip", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowParentSelection: { classPropertyName: "allowParentSelection", publicName: "allowParentSelection", isSignal: true, isRequired: false, transformFunction: null }, backToMainText: { classPropertyName: "backToMainText", publicName: "backToMainText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, restrictKey: { classPropertyName: "restrictKey", publicName: "restrictKey", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", clear: "clear" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkHierarchicalSelect, isStandalone: true, selector: "bk-hierarchical-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, clearTooltip: { classPropertyName: "clearTooltip", publicName: "clearTooltip", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowParentSelection: { classPropertyName: "allowParentSelection", publicName: "allowParentSelection", isSignal: true, isRequired: false, transformFunction: null }, backToMainText: { classPropertyName: "backToMainText", publicName: "backToMainText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, inheritColor: { classPropertyName: "inheritColor", publicName: "inheritColor", isSignal: true, isRequired: false, transformFunction: null }, restrictKey: { classPropertyName: "restrictKey", publicName: "restrictKey", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", clear: "clear" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkHierarchicalSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], ngImport: i0, template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <div\r\n      #controlWrapper\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\" [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                 stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"hierarchical-arrow\" [class.open]=\"isOpen()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m6 9 6 6 6-6\"/>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"hierarchical-dropdown-panel\"\r\n      [attr.data-position]=\"placement()\"\r\n      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"appendToBody() ? getTop() : null\"\r\n      [style.bottom]=\"appendToBody() ? getBottom() : null\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (click)=\"goBack(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            [class.disabled-item]=\"item.disabled\"\r\n            [class.cursor-not-allowed]=\"item.disabled\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <span\r\n              #optLabel\r\n              class=\"hierarchical-option-label\"\r\n              [style.color]=\"resolveColor(item)\"\r\n              [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n              bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.hierarchical-select-control.disabled .hierarchical-placeholder{@apply text-gray-400;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.hierarchical-dropdown-panel[data-position=bottom]{top:calc(100% + 4px);bottom:auto}.hierarchical-dropdown-panel[data-position=top]{bottom:calc(100% + 4px);top:auto}.hierarchical-dropdown-panel-fixed{z-index:10050}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-search-input:-moz-focusring{outline:none}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option.disabled-item{@apply opacity-50 cursor-not-allowed;}.hierarchical-option.disabled-item:hover{@apply bg-transparent;}.hierarchical-option:hover,.hierarchical-option.selected{@apply bg-[#F8F8F8];}.hierarchical-option.selected.disabled-item{@apply bg-transparent;}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{@apply border-[#d11e14];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }] });
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], ngImport: i0, template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <div\r\n      #controlWrapper\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\" [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                 stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"hierarchical-arrow\" [class.open]=\"isOpen()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m6 9 6 6 6-6\"/>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"hierarchical-dropdown-panel\"\r\n      [attr.data-position]=\"placement()\"\r\n      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"appendToBody() ? getTop() : null\"\r\n      [style.bottom]=\"appendToBody() ? getBottom() : null\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (click)=\"goBack(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            [class.disabled-item]=\"item.disabled\"\r\n            [class.cursor-not-allowed]=\"item.disabled\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <span\r\n              #optLabel\r\n              class=\"hierarchical-option-label\"\r\n              [style.color]=\"resolveColor(item)\"\r\n              [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n              bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply cursor-not-allowed opacity-60;background-color:#f4f4f6!important;border-color:#e3e3e7!important;color:#a1a3ae!important}.hierarchical-select-control.disabled .hierarchical-placeholder{@apply text-gray-400;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-row{@apply flex items-center gap-1.5 w-full min-w-0;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.hierarchical-option-body{@apply flex items-center gap-2 min-w-0 flex-1;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.hierarchical-dropdown-panel[data-position=bottom]{top:calc(100% + 4px);bottom:auto}.hierarchical-dropdown-panel[data-position=top]{bottom:calc(100% + 4px);top:auto}.hierarchical-dropdown-panel-fixed{z-index:10050}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option.disabled-item{@apply opacity-50 cursor-not-allowed;}.hierarchical-option.disabled-item:hover{@apply bg-transparent;}.hierarchical-option:hover{@apply bg-[#f9f9f9];}.hierarchical-option.selected{@apply bg-[#f7f7f7];}.hierarchical-option.selected.disabled-item{@apply bg-transparent;}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{border-color:#d11e14!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkHierarchicalSelect, decorators: [{
             type: Component,
@@ -8397,8 +8848,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkHierarchicalSelect),
                             multi: true,
                         },
-                    ], template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <div\r\n      #controlWrapper\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\" [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                 stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"hierarchical-arrow\" [class.open]=\"isOpen()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m6 9 6 6 6-6\"/>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"hierarchical-dropdown-panel\"\r\n      [attr.data-position]=\"placement()\"\r\n      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"appendToBody() ? getTop() : null\"\r\n      [style.bottom]=\"appendToBody() ? getBottom() : null\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (click)=\"goBack(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            [class.disabled-item]=\"item.disabled\"\r\n            [class.cursor-not-allowed]=\"item.disabled\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <span\r\n              #optLabel\r\n              class=\"hierarchical-option-label\"\r\n              [style.color]=\"resolveColor(item)\"\r\n              [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n              bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.hierarchical-select-control.disabled .hierarchical-placeholder{@apply text-gray-400;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.hierarchical-dropdown-panel[data-position=bottom]{top:calc(100% + 4px);bottom:auto}.hierarchical-dropdown-panel[data-position=top]{bottom:calc(100% + 4px);top:auto}.hierarchical-dropdown-panel-fixed{z-index:10050}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-search-input:-moz-focusring{outline:none}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option.disabled-item{@apply opacity-50 cursor-not-allowed;}.hierarchical-option.disabled-item:hover{@apply bg-transparent;}.hierarchical-option:hover,.hierarchical-option.selected{@apply bg-[#F8F8F8];}.hierarchical-option.selected.disabled-item{@apply bg-transparent;}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{@apply border-[#d11e14];}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], clearTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTooltip", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], iconAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlt", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowParentSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowParentSelection", required: false }] }], backToMainText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backToMainText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], restrictKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "restrictKey", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], clear: [{ type: i0.Output, args: ["clear"] }], searchInput: [{
+                    ], template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <div\r\n      #controlWrapper\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\" [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                 stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </span>\r\n        }\r\n        <span class=\"hierarchical-arrow\" [class.open]=\"isOpen()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"m6 9 6 6 6-6\"/>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"hierarchical-dropdown-panel\"\r\n      [attr.data-position]=\"placement()\"\r\n      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"appendToBody() ? getTop() : null\"\r\n      [style.bottom]=\"appendToBody() ? getBottom() : null\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (click)=\"goBack(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            [class.disabled-item]=\"item.disabled\"\r\n            [class.cursor-not-allowed]=\"item.disabled\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <span\r\n              #optLabel\r\n              class=\"hierarchical-option-label\"\r\n              [style.color]=\"resolveColor(item)\"\r\n              [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n              bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-2.5 cursor-pointer;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply cursor-not-allowed opacity-60;background-color:#f4f4f6!important;border-color:#e3e3e7!important;color:#a1a3ae!important}.hierarchical-select-control.disabled .hierarchical-placeholder{@apply text-gray-400;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-row{@apply flex items-center gap-1.5 w-full min-w-0;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-dot{@apply inline-block w-2 h-2 rounded-full shrink-0;}.hierarchical-option-body{@apply flex items-center gap-2 min-w-0 flex-1;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.hierarchical-dropdown-panel[data-position=bottom]{top:calc(100% + 4px);bottom:auto}.hierarchical-dropdown-panel[data-position=top]{bottom:calc(100% + 4px);top:auto}.hierarchical-dropdown-panel-fixed{z-index:10050}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option.disabled-item{@apply opacity-50 cursor-not-allowed;}.hierarchical-option.disabled-item:hover{@apply bg-transparent;}.hierarchical-option:hover{@apply bg-[#f9f9f9];}.hierarchical-option.selected{@apply bg-[#f7f7f7];}.hierarchical-option.selected.disabled-item{@apply bg-transparent;}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{border-color:#d11e14!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], clearTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTooltip", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], iconAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlt", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowParentSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowParentSelection", required: false }] }], backToMainText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backToMainText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], inheritColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritColor", required: false }] }], restrictKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "restrictKey", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], clear: [{ type: i0.Output, args: ["clear"] }], searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
             }], controlWrapper: [{
@@ -8544,189 +8995,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'bk-toastr', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position$ | async\">\r\n\r\n  @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n    <div\r\n      class=\"toast-item\"\r\n      [attr.data-severity]=\"toast.severity\"\r\n      [class.toast-item-inline]=\"toast.inline\"\r\n      [class.toast-enter]=\"!toast.leaving\"\r\n      [class.toast-leave]=\"toast.leaving\">\r\n\r\n      <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n      @if (toast.icon) {\r\n        <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n            <path\r\n              d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n          </g>\r\n          <defs>\r\n            <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n              <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n            </clipPath>\r\n          </defs>\r\n        </svg>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n      <div class=\"toast-content flex-1 min-w-0\">\r\n        <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n        @if (toast.detail) {\r\n          <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n        }\r\n      </div>\r\n\r\n      <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n      @if (toast.actionLabel) {\r\n        <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n          {{ toast.actionLabel }}\r\n        </button>\r\n      }\r\n\r\n      <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n      <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n             xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n            stroke-width=\"1.25\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply fixed flex flex-col gap-3 max-w-[100vw-2rem];z-index:2147483647!important;pointer-events:none}.toast-container[data-position=top-right]{@apply top-4 right-4;}.toast-container[data-position=top-left]{@apply top-4 left-4;}.toast-container[data-position=top-center]{@apply top-4 left-1/2 -translate-x-1/2;}.toast-container[data-position=bottom-right]{@apply bottom-4 right-4;}.toast-container[data-position=bottom-left]{@apply bottom-4 left-4;}.toast-container[data-position=bottom-center]{@apply bottom-4 left-1/2 -translate-x-1/2;}.toast-item{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#1434CB] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#fff}.toast-item[data-severity=info] .toast-summary{@apply text-white;}.toast-item[data-severity=info] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=info] .toast-action{@apply bg-white text-[#1434CB] border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#fff}.toast-item[data-severity=default]{@apply bg-gray-500 border-gray-50;}.toast-item[data-severity=default] .toast-icon path{stroke:#fff}.toast-item[data-severity=default] .toast-summary{@apply text-white;}.toast-item[data-severity=default] .toast-action{@apply bg-white text-gray-500;}.toast-item[data-severity=default] .toast-close path{stroke:#fff}.toast-item[data-severity=error]{@apply bg-[#C84144] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#fff}.toast-item[data-severity=error] .toast-summary{@apply text-white;}.toast-item[data-severity=error] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=error] .toast-action{@apply bg-white text-[#CB1432];}.toast-item[data-severity=error] .toast-close path{stroke:#fff}.toast-item[data-severity=warn]{@apply bg-[#CC6401] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#fff}.toast-item[data-severity=warn] .toast-summary{@apply text-white;}.toast-item[data-severity=warn] .toast-action{@apply bg-white text-[#CC6401];}.toast-item[data-severity=warn] .toast-close path{stroke:#fff}.toast-item[data-severity=success]{@apply bg-[#1E7735] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#fff}.toast-item[data-severity=success] .toast-summary{@apply text-white;}.toast-item[data-severity=success] .toast-action{@apply bg-white text-[#22973F];}.toast-item[data-severity=success] .toast-action:hover{@apply bg-[#22973F];}.toast-item[data-severity=success] .toast-close path{stroke:#fff}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}@media (max-width: 425px){.toast-container{width:calc(100vw - 2rem);max-width:100%}.toast-container[data-position=top-center],.toast-container[data-position=bottom-center]{left:50%!important;right:auto!important;transform:translate(-50%)!important;align-items:center}.toast-item:not(.toast-item-inline){display:grid;grid-template-areas:\"icon action close\" \"content content content\";grid-template-columns:auto 1fr auto;align-items:center;row-gap:6px}.toast-icon{grid-area:icon}.toast-content{grid-area:content}.toast-action{grid-area:action;justify-self:end}.toast-close{grid-area:close}}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"] }]
         }] });
 
-class BkAvatar {
-    cdr;
-    constructor(cdr) {
-        this.cdr = cdr;
-    }
-    // ---------- Display Inputs ----------
-    src = null;
-    alt = 'Avatar';
-    name = '';
-    initialsOverride = '';
-    tooltipContent = null;
-    bgColor = null;
-    textColor = null;
-    size = 'md';
-    variant = 'gray';
-    fallback = 'auto';
-    dot = 'none';
-    dotPosition = 'bottom-right';
-    // ---------- Outputs ----------
-    /** Emits when the provided image URL fails to load */
-    imageLoadError = new EventEmitter();
-    // ---------- Internal State ----------
-    initials = '';
-    imageLoadFailed = false;
-    // ---------- CVA Callbacks ----------
-    onChange = (_value) => { };
-    onTouched = () => { };
-    /**
-     * Called by the forms system when the model value changes (ngModel / formControl).
-     * Sets the src directly and tells OnPush to re-check the template.
-     */
-    writeValue(value) {
-        this.src = value || null;
-        this.imageLoadFailed = false;
-        // OnPush won't detect this change on its own because writeValue
-        // is called programmatically by the forms system — not through an
-        // @Input binding. markForCheck tells Angular: "this component's
-        // template might have changed, check it on the next CD cycle."
-        this.cdr.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(_isDisabled) {
-        // Display-only component — disabled doesn't change visual behaviour,
-        // but we still honour the CVA contract.
-        this.cdr.markForCheck();
-    }
-    // ---------- Lifecycle ----------
-    ngOnChanges(changes) {
-        if (changes['name'] || changes['initialsOverride']) {
-            this.initials = this.initialsOverride || this.getInitials(this.name);
-        }
-        // Reset error state whenever a new src arrives via @Input
-        if (changes['src']) {
-            this.imageLoadFailed = false;
-        }
-    }
-    onImageError() {
-        this.imageLoadFailed = true;
-        this.imageLoadError.emit();
-    }
-    // ---------- Derived UI ----------
-    get showImage() {
-        return !!(this.src) && !this.imageLoadFailed;
-    }
-    get showInitials() {
-        if (this.showImage)
-            return false;
-        if (!this.name)
-            return false;
-        if (this.fallback === 'icon')
-            return false;
-        return true; // 'auto' and 'initials' both show initials when name is present
-    }
-    get showIcon() {
-        return !this.showImage && !this.showInitials;
-    }
-    get containerClasses() {
-        return [
-            'avatar',
-            this.size,
-            VARIANT_MAP[this.variant]
-        ].join(' ');
-    }
-    get containerStyles() {
-        const styles = {};
-        if (this.bgColor) {
-            styles['background'] = this.bgColor;
-        }
-        if (this.textColor) {
-            styles['color'] = this.textColor;
-        }
-        return Object.keys(styles).length ? styles : null;
-    }
-    get resolvedTooltip() {
-        return this.tooltipContent ?? this.name;
-    }
-    get dotClasses() {
-        return [
-            'avatar-dot',
-            this.size,
-            DOT_COLOR_MAP[this.dot],
-            DOT_POSITION_MAP[this.dotPosition]
-        ].join(' ');
-    }
-    // ---------- Utils ----------
-    getInitials(name) {
-        if (!name?.trim())
-            return '';
-        const normalized = name.includes(',')
-            ? name.split(',').map(part => part.trim()).filter(Boolean).reverse().join(' ')
-            : name.trim();
-        const parts = normalized.split(/\s+/);
-        if (parts.length === 1) {
-            return parts[0].slice(0, 2).toUpperCase();
-        }
-        return (parts[0][0] + parts.at(-1)[0]).toUpperCase();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatar, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkAvatar, isStandalone: true, selector: "bk-avatar", inputs: { src: "src", alt: "alt", name: "name", initialsOverride: "initialsOverride", tooltipContent: "tooltipContent", bgColor: "bgColor", textColor: "textColor", size: "size", variant: "variant", fallback: "fallback", dot: "dot", dotPosition: "dotPosition" }, outputs: { imageLoadError: "imageLoadError" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => BkAvatar),
-                multi: true
-            }
-        ], usesOnChanges: true, ngImport: i0, template: "<div\r\n  [ngClass]=\"containerClasses\"\r\n  [ngStyle]=\"containerStyles\"\r\n  [bkTooltip]=\"resolvedTooltip\"\r\n  [bkTooltipPosition]=\"'top'\"\r\n>\r\n\r\n  @if (showImage) {\r\n    <img\r\n      [src]=\"src\"\r\n      [alt]=\"alt\"\r\n      class=\"avatar-img\"\r\n      (error)=\"onImageError()\"\r\n    />\r\n  }\r\n\r\n  @else if (showInitials) {\r\n    <span class=\"avatar-text\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n\r\n  @else {\r\n    <svg\r\n      class=\"placeholder-icon\"\r\n      viewBox=\"0 0 32 32\"\r\n      fill=\"none\"\r\n      aria-hidden=\"true\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @if (dot !== 'none') {\r\n    <span [ngClass]=\"dotClasses\"></span>\r\n  }\r\n\r\n</div>\r\n", styles: [".avatar{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none transition-all duration-200;}.avatar-img{@apply w-full h-full object-cover rounded-full;}.avatar-text{@apply font-medium;}.avatar.xsm{@apply size-6 text-[10px] leading-[14px];}.avatar.sm{@apply size-8 text-sm;}.avatar.md{@apply size-10 text-base;}.avatar.lg{@apply size-12 text-[18px] leading-[26px];}.avatar.xl{@apply size-14 text-xl;}.avatar.xxl{@apply size-16 text-xl;}.avatar.xsm .placeholder-icon{@apply size-4;}.avatar.sm .placeholder-icon{@apply size-5;}.avatar.md .placeholder-icon{@apply size-6;}.avatar.lg .placeholder-icon{@apply size-7;}.avatar.xl .placeholder-icon,.avatar.xxl .placeholder-icon{@apply size-8;}.avatar-dot{@apply absolute rounded-full block box-content border-[1.5px] border-white;}.avatar.xsm .avatar-dot{@apply size-1;}.avatar.sm .avatar-dot{@apply size-1.5;}.avatar.md .avatar-dot{@apply size-2.5;}.avatar.lg .avatar-dot{@apply size-3;}.avatar.xl .avatar-dot{@apply size-[14px];}.avatar.xxl .avatar-dot{@apply size-4;}.avatar .active{@apply bg-[#22973F];}.avatar .inactive{@apply bg-gray-300;}.avatar .notification{@apply bg-[#2E90FA];}.avatar .none{@apply hidden;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatar, decorators: [{
-            type: Component,
-            args: [{ selector: 'bk-avatar', standalone: true, imports: [CommonModule, BKTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => BkAvatar),
-                            multi: true
-                        }
-                    ], template: "<div\r\n  [ngClass]=\"containerClasses\"\r\n  [ngStyle]=\"containerStyles\"\r\n  [bkTooltip]=\"resolvedTooltip\"\r\n  [bkTooltipPosition]=\"'top'\"\r\n>\r\n\r\n  @if (showImage) {\r\n    <img\r\n      [src]=\"src\"\r\n      [alt]=\"alt\"\r\n      class=\"avatar-img\"\r\n      (error)=\"onImageError()\"\r\n    />\r\n  }\r\n\r\n  @else if (showInitials) {\r\n    <span class=\"avatar-text\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n\r\n  @else {\r\n    <svg\r\n      class=\"placeholder-icon\"\r\n      viewBox=\"0 0 32 32\"\r\n      fill=\"none\"\r\n      aria-hidden=\"true\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @if (dot !== 'none') {\r\n    <span [ngClass]=\"dotClasses\"></span>\r\n  }\r\n\r\n</div>\r\n", styles: [".avatar{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none transition-all duration-200;}.avatar-img{@apply w-full h-full object-cover rounded-full;}.avatar-text{@apply font-medium;}.avatar.xsm{@apply size-6 text-[10px] leading-[14px];}.avatar.sm{@apply size-8 text-sm;}.avatar.md{@apply size-10 text-base;}.avatar.lg{@apply size-12 text-[18px] leading-[26px];}.avatar.xl{@apply size-14 text-xl;}.avatar.xxl{@apply size-16 text-xl;}.avatar.xsm .placeholder-icon{@apply size-4;}.avatar.sm .placeholder-icon{@apply size-5;}.avatar.md .placeholder-icon{@apply size-6;}.avatar.lg .placeholder-icon{@apply size-7;}.avatar.xl .placeholder-icon,.avatar.xxl .placeholder-icon{@apply size-8;}.avatar-dot{@apply absolute rounded-full block box-content border-[1.5px] border-white;}.avatar.xsm .avatar-dot{@apply size-1;}.avatar.sm .avatar-dot{@apply size-1.5;}.avatar.md .avatar-dot{@apply size-2.5;}.avatar.lg .avatar-dot{@apply size-3;}.avatar.xl .avatar-dot{@apply size-[14px];}.avatar.xxl .avatar-dot{@apply size-4;}.avatar .active{@apply bg-[#22973F];}.avatar .inactive{@apply bg-gray-300;}.avatar .notification{@apply bg-[#2E90FA];}.avatar .none{@apply hidden;}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { src: [{
-                type: Input
-            }], alt: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], initialsOverride: [{
-                type: Input
-            }], tooltipContent: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], fallback: [{
-                type: Input
-            }], dot: [{
-                type: Input
-            }], dotPosition: [{
-                type: Input
-            }], imageLoadError: [{
-                type: Output
-            }] } });
-// ---------- Constants ----------
-const VARIANT_MAP = {
-    gray: 'bg-white border border-[#EFEFF1] text-[#363C51]',
-    colored: 'bg-[#F63D68] border border-white text-white'
-};
-const DOT_COLOR_MAP = {
-    active: 'active',
-    inactive: 'inactive',
-    notification: 'notification',
-    none: 'hidden'
-};
-const DOT_POSITION_MAP = {
-    'bottom-right': 'bottom-0 right-0',
-    'top-left': 'top-0.5 -left-0.5'
-};
-
 class ColumnFilterOption {
     columnName;
     selected = true;
@@ -8899,7 +9167,7 @@ class BkColumnSelect {
                 useExisting: forwardRef(() => BkColumnSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n  <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"lefticon\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"label\" [buttonClass]=\"`text-black ${buttonClass}`\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n    @if(searchable){\r\n      <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n        [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n    }\r\n    <div class=\"column-select-options-list\">\r\n      @for (column of list; track column.columnName; let i = $index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox [label]=\"column.columnName\" id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\" labelClass=\"!text-left\"\r\n          (change)=\"onChangeColumnFilter()\">\r\n\r\n        </bk-checkbox>\r\n\r\n        <!-- <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{column.columnName}}\">\r\n          {{column.columnName}}\r\n        </label> -->\r\n\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"column-select-option-empty\">No records found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.column-select-options-list{display:flex;flex-direction:column;overflow-y:auto}@media (max-height: 700px){.column-select-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.column-select-options-list{max-height:166px}}@media (min-height: 901px){.column-select-options-list{max-height:210px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkButton, selector: "bk-button", inputs: ["variant", "size", "shadow", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkInput, selector: "bk-input", inputs: ["id", "name", "mask", "dropSpecialCharacters", "autoComplete", "label", "placeholder", "hint", "required", "type", "value", "hasError", "showErrorIcon", "errorMessage", "disabled", "tabIndex", "readOnly", "autoCapitalize", "inputMode", "iconSrc", "iconAlt", "showIcon", "phone", "countryCode", "countryOptions", "iconOrientation", "password", "showPassword", "pattern", "max", "min", "step", "maxlength", "minlength"], outputs: ["input", "change", "focus", "blur", "clicked"] }] });
+        ], viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n  <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"lefticon\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"label\" [buttonClass]=\"`text-black ${buttonClass}`\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n    @if(searchable){\r\n      <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n        [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n    }\r\n    <div class=\"column-select-options-list\">\r\n      @for (column of list; track column.columnName; let i = $index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox [label]=\"column.columnName\" id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\" labelClass=\"!text-left\"\r\n          (change)=\"onChangeColumnFilter()\">\r\n\r\n        </bk-checkbox>\r\n\r\n        <!-- <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{column.columnName}}\">\r\n          {{column.columnName}}\r\n        </label> -->\r\n\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"column-select-option-empty\">No records found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.column-select-options-list{display:flex;flex-direction:column;overflow-y:auto}@media (max-height: 700px){.column-select-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.column-select-options-list{max-height:166px}}@media (min-height: 901px){.column-select-options-list{max-height:210px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkButton, selector: "bk-button", inputs: ["variant", "size", "shadow", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkInput, selector: "bk-input", inputs: ["id", "name", "mask", "dropSpecialCharacters", "autoComplete", "label", "placeholder", "hint", "required", "type", "value", "hasError", "showErrorIcon", "errorMessage", "disabled", "tabIndex", "readOnly", "autoCapitalize", "inputMode", "iconSrc", "iconAlt", "showIcon", "phone", "countryCode", "countryOptions", "iconOrientation", "password", "showPassword", "pattern", "max", "min", "step", "maxlength", "minlength"], outputs: ["input", "change", "focus", "blur", "clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, decorators: [{
             type: Component,
@@ -9308,7 +9576,7 @@ class BkPagination {
         return this.getPageCount();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPagination, isStandalone: true, selector: "bk-pagination", inputs: { pageSize: "pageSize", total: "total", activePage: "activePage" }, outputs: { changePageSize: "changePageSize", pageChanged: "pageChanged", activePageChange: "activePageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n\r\n    <div class=\"flex gap-3 items-center pagination\">\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          [variation]=\"'sm'\"\r\n          [isResponsive]=\"false\"\r\n          class=\"!min-w-[90px] lg:!min-w-[131px]\"\r\n          >\r\n        </bk-select>\r\n    </div>\r\n\r\n    <!-- showing entries -->\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n\r\n    <!-- Pagination main -->\r\n    <nav class=\"flex gap-1.5 items-center\">\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate()\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkSelect, selector: "bk-select", inputs: ["items", "bindLabel", "bindValue", "bindIcon", "isResponsive", "placeholder", "notFoundText", "loadingText", "clearAllText", "groupBy", "colorKey", "iconAlt", "label", "required", "variation", "iconSrc", "multiple", "maxLabels", "searchable", "allSelect", "clearable", "readonly", "disabled", "loading", "closeOnSelect", "dropdownPosition", "hasError", "errorMessage", "appendToBody", "compareWith"], outputs: ["disabledChange", "open", "close", "focus", "blur", "search", "clear", "change", "scrollToEnd"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPagination, isStandalone: true, selector: "bk-pagination", inputs: { pageSize: "pageSize", total: "total", activePage: "activePage" }, outputs: { changePageSize: "changePageSize", pageChanged: "pageChanged", activePageChange: "activePageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n\r\n    <div class=\"flex gap-3 items-center pagination\">\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          [variation]=\"'sm'\"\r\n          [isResponsive]=\"false\"\r\n          class=\"!min-w-[90px] lg:!min-w-[131px]\"\r\n          >\r\n        </bk-select>\r\n    </div>\r\n\r\n    <!-- showing entries -->\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n\r\n    <!-- Pagination main -->\r\n    <nav class=\"flex gap-1.5 items-center\">\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate()\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkSelect, selector: "bk-select", inputs: ["items", "bindLabel", "bindValue", "bindIcon", "isResponsive", "placeholder", "notFoundText", "loadingText", "clearAllText", "groupBy", "colorKey", "showDots", "showAvatar", "avatarKey", "iconAlt", "label", "required", "variation", "iconSrc", "multiple", "maxLabels", "searchable", "allSelect", "clearable", "readonly", "disabled", "loading", "closeOnSelect", "dropdownPosition", "hasError", "errorMessage", "appendToBody", "compareWith"], outputs: ["disabledChange", "open", "close", "focus", "blur", "search", "clear", "change", "scrollToEnd"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPagination, decorators: [{
             type: Component,
@@ -9728,11 +9996,11 @@ class BkMenu {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkMenu, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkMenu, isStandalone: true, selector: "bk-menu", inputs: { items: "items", orientation: "orientation", submenuMode: "submenuMode", singleOpen: "singleOpen", activeItemId: "activeItemId", tintIcons: "tintIcons", maxHeight: "maxHeight" }, outputs: { activeItemIdChange: "activeItemIdChange", itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" } }, ngImport: i0, template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul\r\n    class=\"bk-menu__list\"\r\n    [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n    [style.maxHeight]=\"maxHeightStyle\">\r\n    <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0 }\"></ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level, level = depth. -->\r\n<ng-template #itemTpl let-items let-level=\"level\">\r\n  @for (item of items; track item.id) {\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items, $event, level)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"isPopup && (isVertical || level > 0)\"\r\n            viewBox=\"0 0 24 24\"\r\n            width=\"16\"\r\n            height=\"16\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--popup-right]=\"isPopup && (isVertical || level > 0)\"\r\n          [class.bk-menu__submenu--popup-down]=\"isPopup && !isVertical && level === 0\"\r\n          [style.top.px]=\"popupTop(item)\"\r\n          [style.left.px]=\"popupLeft(item)\"\r\n          role=\"menu\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl; context: { $implicit: item.children, level: level + 1 }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;display:block;width:100%;max-width:100%;font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:-.28px;background:var(--menu-bg);color:var(--menu-text);border:1px solid var(--menu-border);border-radius:var(--menu-radius);overflow:hidden}.bk-menu__list,.bk-menu__submenu{list-style:none;margin:0;padding:0}.bk-menu__list--scroll{overflow:auto}.bk-menu--horizontal>.bk-menu__list{display:flex;flex-direction:row;align-items:stretch;overflow-x:auto}.bk-menu__item{position:relative}.bk-menu__button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;white-space:nowrap;border-radius:6px;transition:background .1s ease,color .1s ease}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:auto}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){background:var(--menu-hover-bg);color:var(--menu-hover-text)}.bk-menu__button--active{background:var(--menu-active-bg);color:var(--menu-active-text)}.bk-menu__button--disabled,.bk-menu__button:disabled{opacity:var(--menu-disabled);cursor:not-allowed}.bk-menu__submenu .bk-menu__button{color:var(--menu-subtext);font-weight:400}.bk-menu__submenu .bk-menu__button--active{color:var(--menu-active-text)}.bk-menu__icon{width:16px;height:16px;flex-shrink:0;object-fit:contain}.bk-menu--tint .bk-menu__icon{filter:brightness(0) saturate(0)}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{filter:brightness(0) invert(1)}.bk-menu__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{flex:0 0 auto;overflow:visible}.bk-menu__chevron{flex-shrink:0;transition:transform .18s ease;opacity:.8}.bk-menu__chevron--open{transform:rotate(180deg)}.bk-menu__chevron--right{transform:rotate(-90deg)}.bk-menu__submenu--inline{overflow:hidden;max-height:0;transition:max-height .2s ease}.bk-menu__submenu--inline.bk-menu__submenu--open{max-height:1000px}.bk-menu__submenu--popup{position:fixed;z-index:1000;min-width:200px;max-width:280px;max-height:calc(100vh - 16px);overflow-y:auto;background:var(--menu-bg);border:1px solid var(--menu-border);border-radius:12px;box-shadow:var(--menu-shadow);padding:4px;display:none}.bk-menu__submenu--popup.bk-menu__submenu--open{display:block}.bk-menu__submenu--popup-right:before{content:\"\";position:absolute;top:0;left:-6px;width:6px;height:100%}.bk-menu__submenu--popup-down:before{content:\"\";position:absolute;top:-6px;left:0;width:100%;height:6px}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{flex-direction:column;overflow-x:visible}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkMenu, isStandalone: true, selector: "bk-menu", inputs: { items: "items", orientation: "orientation", submenuMode: "submenuMode", singleOpen: "singleOpen", activeItemId: "activeItemId", tintIcons: "tintIcons", maxHeight: "maxHeight" }, outputs: { activeItemIdChange: "activeItemIdChange", itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" } }, ngImport: i0, template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul\r\n    class=\"bk-menu__list\"\r\n    [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n    [style.maxHeight]=\"maxHeightStyle\">\r\n    <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0 }\"></ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level, level = depth. -->\r\n<ng-template #itemTpl let-items let-level=\"level\">\r\n  @for (item of items; track item.id) {\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items, $event, level)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"isPopup && (isVertical || level > 0)\"\r\n            viewBox=\"0 0 24 24\"\r\n            width=\"16\"\r\n            height=\"16\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--popup-right]=\"isPopup && (isVertical || level > 0)\"\r\n          [class.bk-menu__submenu--popup-down]=\"isPopup && !isVertical && level === 0\"\r\n          [style.top.px]=\"popupTop(item)\"\r\n          [style.left.px]=\"popupLeft(item)\"\r\n          role=\"menu\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl; context: { $implicit: item.children, level: level + 1 }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;@apply block w-full max-w-full text-sm font-medium tracking-[-.28px] bg-[var(--menu-bg)] text-[color:var(--menu-text)] border border-[var(--menu-border)] rounded-[var(--menu-radius)] overflow-hidden;}.bk-menu__list,.bk-menu__submenu{@apply list-none m-0 p-0;}.bk-menu__list--scroll{@apply overflow-auto;}.bk-menu--horizontal>.bk-menu__list{@apply flex flex-row items-stretch overflow-x-auto;}.bk-menu__item{@apply relative;}.bk-menu__button{@apply flex items-center gap-2 w-full py-2.5 px-3 m-0 border-0 bg-transparent text-inherit text-left cursor-pointer whitespace-nowrap transition-colors duration-100;font:inherit;letter-spacing:inherit}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{@apply w-auto;}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-t-[var(--menu-radius)];}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-b-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-l-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-r-[var(--menu-radius)];}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){@apply bg-[var(--menu-hover-bg)] text-[color:var(--menu-hover-text)];}.bk-menu__button--active{@apply bg-[var(--menu-active-bg)] text-[color:var(--menu-active-text)];}.bk-menu__button--disabled,.bk-menu__button:disabled{@apply opacity-[var(--menu-disabled)] cursor-not-allowed;}.bk-menu__submenu .bk-menu__button{@apply text-[color:var(--menu-subtext)] font-normal;}.bk-menu__submenu .bk-menu__button--active{@apply text-[color:var(--menu-active-text)];}.bk-menu__icon{@apply w-4 h-4 shrink-0 object-contain;}.bk-menu--tint .bk-menu__icon{@apply [filter:brightness(0)_saturate(0)];}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{@apply [filter:brightness(0)_invert(1)];}.bk-menu__label{@apply flex-auto min-w-0 overflow-hidden text-ellipsis;}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{@apply flex-none overflow-visible;}.bk-menu__chevron{@apply shrink-0 opacity-80 transition-transform duration-[.18s];}.bk-menu__chevron--open{@apply rotate-180;}.bk-menu__chevron--right{@apply -rotate-90;}.bk-menu__submenu--inline{@apply overflow-hidden max-h-0 transition-[max-height] duration-200;}.bk-menu__submenu--inline.bk-menu__submenu--open{@apply max-h-[1000px];}.bk-menu__submenu--popup{@apply fixed z-[1000] min-w-[200px] max-w-[280px] max-h-[100vh-16px] overflow-y-auto bg-[var(--menu-bg)] border border-[var(--menu-border)] rounded-xl shadow-[var(--menu-shadow)] p-1 hidden;}.bk-menu__submenu--popup.bk-menu__submenu--open{@apply block;}.bk-menu__submenu--popup-right:before{content:\"\";@apply absolute top-0 left-[-6px] w-1.5 h-full;}.bk-menu__submenu--popup-down:before{content:\"\";@apply absolute top-[-6px] left-0 w-full h-1.5;}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{@apply overflow-x-auto;-webkit-overflow-scrolling:touch}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-menu', imports: [CommonModule], template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul\r\n    class=\"bk-menu__list\"\r\n    [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n    [style.maxHeight]=\"maxHeightStyle\">\r\n    <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0 }\"></ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level, level = depth. -->\r\n<ng-template #itemTpl let-items let-level=\"level\">\r\n  @for (item of items; track item.id) {\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items, $event, level)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"isPopup && (isVertical || level > 0)\"\r\n            viewBox=\"0 0 24 24\"\r\n            width=\"16\"\r\n            height=\"16\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--popup-right]=\"isPopup && (isVertical || level > 0)\"\r\n          [class.bk-menu__submenu--popup-down]=\"isPopup && !isVertical && level === 0\"\r\n          [style.top.px]=\"popupTop(item)\"\r\n          [style.left.px]=\"popupLeft(item)\"\r\n          role=\"menu\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl; context: { $implicit: item.children, level: level + 1 }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;display:block;width:100%;max-width:100%;font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:-.28px;background:var(--menu-bg);color:var(--menu-text);border:1px solid var(--menu-border);border-radius:var(--menu-radius);overflow:hidden}.bk-menu__list,.bk-menu__submenu{list-style:none;margin:0;padding:0}.bk-menu__list--scroll{overflow:auto}.bk-menu--horizontal>.bk-menu__list{display:flex;flex-direction:row;align-items:stretch;overflow-x:auto}.bk-menu__item{position:relative}.bk-menu__button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;white-space:nowrap;border-radius:6px;transition:background .1s ease,color .1s ease}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:auto}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){background:var(--menu-hover-bg);color:var(--menu-hover-text)}.bk-menu__button--active{background:var(--menu-active-bg);color:var(--menu-active-text)}.bk-menu__button--disabled,.bk-menu__button:disabled{opacity:var(--menu-disabled);cursor:not-allowed}.bk-menu__submenu .bk-menu__button{color:var(--menu-subtext);font-weight:400}.bk-menu__submenu .bk-menu__button--active{color:var(--menu-active-text)}.bk-menu__icon{width:16px;height:16px;flex-shrink:0;object-fit:contain}.bk-menu--tint .bk-menu__icon{filter:brightness(0) saturate(0)}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{filter:brightness(0) invert(1)}.bk-menu__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{flex:0 0 auto;overflow:visible}.bk-menu__chevron{flex-shrink:0;transition:transform .18s ease;opacity:.8}.bk-menu__chevron--open{transform:rotate(180deg)}.bk-menu__chevron--right{transform:rotate(-90deg)}.bk-menu__submenu--inline{overflow:hidden;max-height:0;transition:max-height .2s ease}.bk-menu__submenu--inline.bk-menu__submenu--open{max-height:1000px}.bk-menu__submenu--popup{position:fixed;z-index:1000;min-width:200px;max-width:280px;max-height:calc(100vh - 16px);overflow-y:auto;background:var(--menu-bg);border:1px solid var(--menu-border);border-radius:12px;box-shadow:var(--menu-shadow);padding:4px;display:none}.bk-menu__submenu--popup.bk-menu__submenu--open{display:block}.bk-menu__submenu--popup-right:before{content:\"\";position:absolute;top:0;left:-6px;width:6px;height:100%}.bk-menu__submenu--popup-down:before{content:\"\";position:absolute;top:-6px;left:0;width:100%;height:6px}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{flex-direction:column;overflow-x:visible}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:100%}}\n"] }]
+            args: [{ selector: 'bk-menu', imports: [CommonModule], template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul\r\n    class=\"bk-menu__list\"\r\n    [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n    [style.maxHeight]=\"maxHeightStyle\">\r\n    <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0 }\"></ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level, level = depth. -->\r\n<ng-template #itemTpl let-items let-level=\"level\">\r\n  @for (item of items; track item.id) {\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items, $event, level)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"isPopup && (isVertical || level > 0)\"\r\n            viewBox=\"0 0 24 24\"\r\n            width=\"16\"\r\n            height=\"16\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--popup-right]=\"isPopup && (isVertical || level > 0)\"\r\n          [class.bk-menu__submenu--popup-down]=\"isPopup && !isVertical && level === 0\"\r\n          [style.top.px]=\"popupTop(item)\"\r\n          [style.left.px]=\"popupLeft(item)\"\r\n          role=\"menu\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl; context: { $implicit: item.children, level: level + 1 }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;@apply block w-full max-w-full text-sm font-medium tracking-[-.28px] bg-[var(--menu-bg)] text-[color:var(--menu-text)] border border-[var(--menu-border)] rounded-[var(--menu-radius)] overflow-hidden;}.bk-menu__list,.bk-menu__submenu{@apply list-none m-0 p-0;}.bk-menu__list--scroll{@apply overflow-auto;}.bk-menu--horizontal>.bk-menu__list{@apply flex flex-row items-stretch overflow-x-auto;}.bk-menu__item{@apply relative;}.bk-menu__button{@apply flex items-center gap-2 w-full py-2.5 px-3 m-0 border-0 bg-transparent text-inherit text-left cursor-pointer whitespace-nowrap transition-colors duration-100;font:inherit;letter-spacing:inherit}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{@apply w-auto;}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-t-[var(--menu-radius)];}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-b-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-l-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-r-[var(--menu-radius)];}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){@apply bg-[var(--menu-hover-bg)] text-[color:var(--menu-hover-text)];}.bk-menu__button--active{@apply bg-[var(--menu-active-bg)] text-[color:var(--menu-active-text)];}.bk-menu__button--disabled,.bk-menu__button:disabled{@apply opacity-[var(--menu-disabled)] cursor-not-allowed;}.bk-menu__submenu .bk-menu__button{@apply text-[color:var(--menu-subtext)] font-normal;}.bk-menu__submenu .bk-menu__button--active{@apply text-[color:var(--menu-active-text)];}.bk-menu__icon{@apply w-4 h-4 shrink-0 object-contain;}.bk-menu--tint .bk-menu__icon{@apply [filter:brightness(0)_saturate(0)];}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{@apply [filter:brightness(0)_invert(1)];}.bk-menu__label{@apply flex-auto min-w-0 overflow-hidden text-ellipsis;}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{@apply flex-none overflow-visible;}.bk-menu__chevron{@apply shrink-0 opacity-80 transition-transform duration-[.18s];}.bk-menu__chevron--open{@apply rotate-180;}.bk-menu__chevron--right{@apply -rotate-90;}.bk-menu__submenu--inline{@apply overflow-hidden max-h-0 transition-[max-height] duration-200;}.bk-menu__submenu--inline.bk-menu__submenu--open{@apply max-h-[1000px];}.bk-menu__submenu--popup{@apply fixed z-[1000] min-w-[200px] max-w-[280px] max-h-[100vh-16px] overflow-y-auto bg-[var(--menu-bg)] border border-[var(--menu-border)] rounded-xl shadow-[var(--menu-shadow)] p-1 hidden;}.bk-menu__submenu--popup.bk-menu__submenu--open{@apply block;}.bk-menu__submenu--popup-right:before{content:\"\";@apply absolute top-0 left-[-6px] w-1.5 h-full;}.bk-menu__submenu--popup-down:before{content:\"\";@apply absolute top-[-6px] left-0 w-full h-1.5;}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{@apply overflow-x-auto;-webkit-overflow-scrolling:touch}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
                 type: Input
             }], orientation: [{
@@ -9762,6 +10030,482 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['window:resize']
             }] } });
 
+/* =========================================================================
+   Placement maths for bk-popover: turns an anchor rectangle plus a requested
+   placement into viewport coordinates for the panel and its arrow.
+
+   Kept free of the DOM so the rules stay readable and testable — the component
+   measures, this decides.
+   ========================================================================= */
+/** Every placement, in the order a placement picker should show them. */
+const POPOVER_PLACEMENTS = [
+    'top-left', 'top', 'top-right',
+    'right-top', 'right', 'right-bottom',
+    'bottom-left', 'bottom', 'bottom-right',
+    'left-top', 'left', 'left-bottom'
+];
+const OPPOSITE = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+};
+/**
+ * How close the arrow's centre may get to a panel corner. The panel is rounded,
+ * so an arrow any nearer would grow out of the curve instead of a flat edge.
+ */
+const ARROW_CORNER_GAP = 14;
+/**
+ * The edge each side's alignment words refer to. Top and bottom align across the
+ * x axis, so their words are left/right; left and right align across y, so
+ * theirs are top/bottom.
+ */
+const ALIGN_EDGES = {
+    top: { start: 'left', end: 'right' },
+    bottom: { start: 'left', end: 'right' },
+    left: { start: 'top', end: 'bottom' },
+    right: { start: 'top', end: 'bottom' }
+};
+/** `top-left` → side `top`, align `start`. A bare side means centred. */
+function splitPlacement(placement) {
+    const [side, edge] = placement.split('-');
+    if (!edge)
+        return { side, align: 'center' };
+    return { side, align: edge === ALIGN_EDGES[side].start ? 'start' : 'end' };
+}
+/**
+ * Inverse of splitPlacement — centred placements lose the suffix. Safe to call
+ * after a flip: flipping only ever swaps a side for its opposite, which shares
+ * the same cross axis, so the alignment word stays meaningful.
+ */
+function joinPlacement(side, align) {
+    if (align === 'center')
+        return side;
+    return `${side}-${ALIGN_EDGES[side][align]}`;
+}
+function clamp(value, min, max) {
+    // min wins when the range is inverted (panel larger than the viewport), which
+    // keeps the panel's leading edge on screen rather than its trailing one.
+    return Math.max(min, Math.min(value, max));
+}
+/** Does the panel clear the viewport edge on this side of the anchor? */
+function fitsOnSide(side, anchor, panel, { offset, viewportPadding: pad, viewport }) {
+    switch (side) {
+        case 'top':
+            return anchor.top - offset - panel.height >= pad;
+        case 'bottom':
+            return anchor.top + anchor.height + offset + panel.height <= viewport.height - pad;
+        case 'left':
+            return anchor.left - offset - panel.width >= pad;
+        case 'right':
+            return anchor.left + anchor.width + offset + panel.width <= viewport.width - pad;
+    }
+}
+/** Leading edge of the panel along the cross axis, before any clamping. */
+function alignedStart(align, anchorStart, anchorSize, panelSize) {
+    switch (align) {
+        case 'start':
+            return anchorStart;
+        case 'end':
+            return anchorStart + anchorSize - panelSize;
+        case 'center':
+            return anchorStart + anchorSize / 2 - panelSize / 2;
+    }
+}
+/**
+ * Places the panel against the anchor, then keeps it on screen in two ways:
+ *
+ * - flip: a panel with no room on the requested side moves to the opposite one,
+ *   but only if it actually fits there — flipping into a second bad fit just
+ *   trades one clipped edge for another.
+ * - shift: the panel slides along its cross axis to stay inside the viewport.
+ *   The arrow is measured against the *anchor*, not the panel, so it keeps
+ *   pointing at the trigger however far the panel had to slide.
+ */
+function computePopoverPosition(anchor, panel, placement, options) {
+    const { offset, viewportPadding: pad, arrowSize, flip, viewport } = options;
+    let { side, align } = splitPlacement(placement);
+    if (flip && !fitsOnSide(side, anchor, panel, options) && fitsOnSide(OPPOSITE[side], anchor, panel, options)) {
+        side = OPPOSITE[side];
+    }
+    const vertical = side === 'top' || side === 'bottom';
+    let top;
+    let left;
+    if (vertical) {
+        top = side === 'top'
+            ? anchor.top - panel.height - offset
+            : anchor.top + anchor.height + offset;
+        left = clamp(alignedStart(align, anchor.left, anchor.width, panel.width), pad, viewport.width - panel.width - pad);
+    }
+    else {
+        left = side === 'left'
+            ? anchor.left - panel.width - offset
+            : anchor.left + anchor.width + offset;
+        top = clamp(alignedStart(align, anchor.top, anchor.height, panel.height), pad, viewport.height - panel.height - pad);
+    }
+    const anchorCentre = vertical
+        ? anchor.left + anchor.width / 2
+        : anchor.top + anchor.height / 2;
+    const panelStart = vertical ? left : top;
+    const panelSize = vertical ? panel.width : panel.height;
+    const arrowLimit = arrowSize / 2 + ARROW_CORNER_GAP;
+    return {
+        top,
+        left,
+        side,
+        align,
+        placement: joinPlacement(side, align),
+        arrowOffset: clamp(anchorCentre - panelStart, arrowLimit, panelSize - arrowLimit)
+    };
+}
+
+/** Edge length of the arrow square. Mirrored by --bk-popover-arrow in popover.css. */
+const ARROW_SIZE = 10;
+class BkPopover {
+    /**
+     * One of the 12 placements (`top-left`, `right`, `bottom-right`, …). It is a
+     * preference, not a guarantee: a panel with no room moves to the opposite
+     * side (unless `flip` is off) and slides along the edge to stay on screen.
+     * Read `activePlacement()` for where it actually landed.
+     */
+    placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    /**
+     * `click` toggles and stays open until dismissed — the right choice for
+     * anything interactive. `hover` opens on the way in and closes on the way
+     * out, with a grace period so the pointer can travel into the panel.
+     */
+    trigger = input('click', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    /** Optional heading. Empty hides the header row entirely. */
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /** Show the × in the header. Ignored without a `title` to put it in. */
+    closable = input(false, ...(ngDevMode ? [{ debugName: "closable" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    showArrow = input(true, ...(ngDevMode ? [{ debugName: "showArrow" }] : []));
+    /** Gap between the trigger and the panel, in px. The arrow spans most of it. */
+    offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    /** Allow moving to the opposite side when the requested one has no room. */
+    flip = input(true, ...(ngDevMode ? [{ debugName: "flip" }] : []));
+    closeOnClickOutside = input(true, ...(ngDevMode ? [{ debugName: "closeOnClickOutside" }] : []));
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
+    /** Hover only: ms before opening / before closing once the pointer leaves.
+     *  The close delay is what makes the panel reachable — drop it to 0 and the
+     *  panel disappears as the pointer crosses the gap. */
+    openDelay = input(80, ...(ngDevMode ? [{ debugName: "openDelay" }] : []));
+    closeDelay = input(150, ...(ngDevMode ? [{ debugName: "closeDelay" }] : []));
+    maxWidth = input('280px', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
+    /**
+     * Relocate the panel to <body> while open. `position: fixed` alone resolves
+     * against a transformed ancestor rather than the viewport, so a popover
+     * inside an animated dialog or a transformed card needs this to escape.
+     */
+    appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
+    opened = output();
+    closed = output();
+    openChange = output();
+    anchorRef;
+    panelRef;
+    static activeInstance = null;
+    host = inject(ElementRef);
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /**
+     * Null until the panel has been measured. The template keeps the panel
+     * hidden while it is null: the first frame exists only to measure, and
+     * showing it at 0,0 first would flash it in the corner.
+     */
+    position = signal(null, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /** Where the panel actually is, once positioned — may differ from `placement`. */
+    activePlacement = computed(() => this.position()?.placement ?? this.placement(), ...(ngDevMode ? [{ debugName: "activePlacement" }] : []));
+    /** Side the panel sits on. Drives which edge the arrow hangs off (see CSS). */
+    side = computed(() => this.position()?.side ?? splitPlacement(this.placement()).side, ...(ngDevMode ? [{ debugName: "side" }] : []));
+    openTimer = null;
+    closeTimer = null;
+    pointerInPanel = false;
+    resizeObserver;
+    // Panel's home in the DOM, so appendToBody can put it back before Angular's
+    // @if removes it.
+    originalPanelParent = null;
+    originalPanelAnchor = null;
+    panelInBody = false;
+    ngAfterViewInit() {
+        // Capture phase catches scrolling inside nested overflow containers, which
+        // a window:scroll listener would miss entirely.
+        window.addEventListener('scroll', this.reposition, true);
+        window.addEventListener('resize', this.reposition);
+        // Content can change size while open (async data, an expanding section),
+        // which moves every edge the panel is aligned against.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.measure());
+        }
+    }
+    ngOnDestroy() {
+        this.clearTimers();
+        this.resizeObserver?.disconnect();
+        document.removeEventListener('click', this.onDocumentClick);
+        window.removeEventListener('scroll', this.reposition, true);
+        window.removeEventListener('resize', this.reposition);
+        // Don't leave a relocated panel orphaned in <body> if we're torn down open.
+        if (this.panelInBody) {
+            this.panelRef?.nativeElement.remove();
+            this.panelInBody = false;
+        }
+        if (BkPopover.activeInstance === this)
+            BkPopover.activeInstance = null;
+    }
+    // --- Public API ---
+    open() {
+        if (this.isOpen() || this.disabled())
+            return;
+        // Two popovers open at once is nearly always an accident of a missed close.
+        if (BkPopover.activeInstance && BkPopover.activeInstance !== this) {
+            BkPopover.activeInstance.close();
+        }
+        BkPopover.activeInstance = this;
+        this.clearTimers();
+        this.position.set(null);
+        this.isOpen.set(true);
+        this.opened.emit();
+        this.openChange.emit(true);
+        // The panel doesn't exist until Angular renders it, and it can't be
+        // measured before it does — so position on the next tick.
+        setTimeout(() => {
+            if (!this.isOpen())
+                return;
+            if (this.appendToBody())
+                this.movePanelToBody();
+            this.measure();
+            if (this.panelRef)
+                this.resizeObserver?.observe(this.panelRef.nativeElement);
+            // Attached here, not on the host, so the very click that opened the panel
+            // has finished bubbling first — otherwise a popover opened by anything
+            // outside its own trigger (a toolbar button calling open()) would be shut
+            // again by its own opening click.
+            document.addEventListener('click', this.onDocumentClick);
+        });
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.clearTimers();
+        this.resizeObserver?.disconnect();
+        document.removeEventListener('click', this.onDocumentClick);
+        this.restorePanel();
+        this.isOpen.set(false);
+        this.position.set(null);
+        this.pointerInPanel = false;
+        this.closed.emit();
+        this.openChange.emit(false);
+        if (BkPopover.activeInstance === this)
+            BkPopover.activeInstance = null;
+    }
+    toggle() {
+        this.isOpen() ? this.close() : this.open();
+    }
+    // --- Trigger handling ---
+    onAnchorClick() {
+        if (this.trigger() !== 'click' || this.disabled())
+            return;
+        this.toggle();
+    }
+    onAnchorEnter() {
+        if (this.trigger() !== 'hover' || this.disabled())
+            return;
+        this.cancelClose();
+        this.openTimer = setTimeout(() => this.open(), this.openDelay());
+    }
+    onAnchorLeave() {
+        if (this.trigger() !== 'hover')
+            return;
+        this.cancelOpen();
+        this.scheduleClose();
+    }
+    onPanelEnter() {
+        if (this.trigger() !== 'hover')
+            return;
+        this.pointerInPanel = true;
+        this.cancelClose();
+    }
+    onPanelLeave() {
+        if (this.trigger() !== 'hover')
+            return;
+        this.pointerInPanel = false;
+        this.scheduleClose();
+    }
+    /** Only attached while open — see open(). Arrow fn so it can be removed. */
+    onDocumentClick = (event) => {
+        if (this.trigger() !== 'click' || !this.closeOnClickOutside())
+            return;
+        const target = event.target;
+        if (this.host.nativeElement.contains(target))
+            return;
+        // appendToBody moves the panel out of the host, so clicking inside it would
+        // otherwise read as an outside click.
+        if (this.panelRef?.nativeElement.contains(target))
+            return;
+        this.close();
+    };
+    onEscape() {
+        if (this.isOpen() && this.closeOnEscape())
+            this.close();
+    }
+    // --- Positioning ---
+    reposition = () => {
+        if (this.isOpen())
+            this.measure();
+    };
+    /** Measures the anchor and panel, then hands the maths to the utility. */
+    measure() {
+        const anchor = this.anchorRef?.nativeElement;
+        const panel = this.panelRef?.nativeElement;
+        if (!anchor || !panel)
+            return;
+        const anchorRect = anchor.getBoundingClientRect();
+        this.position.set(computePopoverPosition({
+            top: anchorRect.top,
+            left: anchorRect.left,
+            width: anchorRect.width,
+            height: anchorRect.height
+        }, { width: panel.offsetWidth, height: panel.offsetHeight }, this.placement(), {
+            offset: this.offset(),
+            viewportPadding: 8,
+            arrowSize: ARROW_SIZE,
+            flip: this.flip(),
+            viewport: { width: window.innerWidth, height: window.innerHeight }
+        }));
+    }
+    /** Arrow offset along the panel's cross axis — x on top/bottom, y on left/right. */
+    arrowLeft = computed(() => {
+        const pos = this.position();
+        if (!pos)
+            return null;
+        return pos.side === 'top' || pos.side === 'bottom' ? pos.arrowOffset : null;
+    }, ...(ngDevMode ? [{ debugName: "arrowLeft" }] : []));
+    arrowTop = computed(() => {
+        const pos = this.position();
+        if (!pos)
+            return null;
+        return pos.side === 'left' || pos.side === 'right' ? pos.arrowOffset : null;
+    }, ...(ngDevMode ? [{ debugName: "arrowTop" }] : []));
+    movePanelToBody() {
+        const panel = this.panelRef?.nativeElement;
+        if (!panel || this.panelInBody)
+            return;
+        this.originalPanelParent = panel.parentNode;
+        this.originalPanelAnchor = panel.nextSibling;
+        document.body.appendChild(panel);
+        this.panelInBody = true;
+    }
+    restorePanel() {
+        const panel = this.panelRef?.nativeElement;
+        if (!panel || !this.panelInBody)
+            return;
+        this.originalPanelParent?.insertBefore(panel, this.originalPanelAnchor);
+        this.panelInBody = false;
+        this.originalPanelParent = null;
+        this.originalPanelAnchor = null;
+    }
+    // --- Timers ---
+    scheduleClose() {
+        this.cancelClose();
+        this.closeTimer = setTimeout(() => {
+            if (!this.pointerInPanel)
+                this.close();
+        }, this.closeDelay());
+    }
+    cancelOpen() {
+        if (this.openTimer) {
+            clearTimeout(this.openTimer);
+            this.openTimer = null;
+        }
+    }
+    cancelClose() {
+        if (this.closeTimer) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+    }
+    clearTimers() {
+        this.cancelOpen();
+        this.cancelClose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPopover, isStandalone: true, selector: "bk-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.title": "null" } }, viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchor"], descendants: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<!-- The anchor wraps the projected trigger so the popover has an element to\r\n     measure and to listen on, whatever the consumer passes in. -->\r\n<span\r\n  #anchor\r\n  class=\"bk-popover-anchor\"\r\n  (click)=\"onAnchorClick()\"\r\n  (mouseenter)=\"onAnchorEnter()\"\r\n  (mouseleave)=\"onAnchorLeave()\"\r\n>\r\n  <ng-content select=\"[bkPopoverTrigger]\"></ng-content>\r\n</span>\r\n\r\n@if (isOpen()) {\r\n  <!-- Hidden until position() lands: the first frame exists only so the panel\r\n       can be measured, and painting it at 0,0 first flashes it in the corner. -->\r\n  <div\r\n    #panel\r\n    class=\"bk-popover-panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    role=\"dialog\"\r\n    [attr.data-side]=\"side()\"\r\n    [style.top.px]=\"position()?.top\"\r\n    [style.left.px]=\"position()?.left\"\r\n    [style.maxWidth]=\"maxWidth()\"\r\n    [class.bk-popover-ready]=\"!!position()\"\r\n    (mouseenter)=\"onPanelEnter()\"\r\n    (mouseleave)=\"onPanelLeave()\"\r\n  >\r\n    @if (showArrow()) {\r\n      <!-- A rotated square, not a border triangle: it inherits the panel's\r\n           background and border, so the tip matches the panel on every side.\r\n           Sits above the panel's own border, hiding the segment it crosses. -->\r\n      <span\r\n        class=\"bk-popover-arrow\"\r\n        [style.left.px]=\"arrowLeft()\"\r\n        [style.top.px]=\"arrowTop()\"\r\n      ></span>\r\n    }\r\n\r\n    @if (title()) {\r\n      <div class=\"bk-popover-header\">\r\n        <span class=\"bk-popover-title\">{{ title() }}</span>\r\n        @if (closable()) {\r\n          <button type=\"button\" class=\"bk-popover-close\" aria-label=\"Close\" (click)=\"close()\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"bk-popover-body\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{@apply inline-flex;}.bk-popover-anchor{@apply inline-flex;}.bk-popover-panel{@apply fixed z-[10000] bg-white border border-[#E3E3E7] rounded-lg p-3 cursor-default;box-shadow:0 12px 24px -6px #1018281f,0 4px 8px -4px #1018280f;visibility:hidden;opacity:0}.bk-popover-panel.bk-popover-ready{visibility:visible;opacity:1;transition:opacity .12s ease-out}.bk-popover-arrow{@apply absolute block w-2.5 h-2.5 bg-white border border-[#E3E3E7];}.bk-popover-panel[data-side=top] .bk-popover-arrow{bottom:-5px;border-top:none;border-left:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=bottom] .bk-popover-arrow{top:-5px;border-bottom:none;border-right:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=left] .bk-popover-arrow{right:-5px;border-bottom:none;border-left:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-panel[data-side=right] .bk-popover-arrow{left:-5px;border-top:none;border-right:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-header{@apply flex items-start justify-between gap-3 mb-1;}.bk-popover-title{@apply text-sm font-semibold text-[#141414];}.bk-popover-close{@apply shrink-0 text-gray-400 hover:text-[#141414] cursor-pointer -me-1 -mt-0.5;}.bk-popover-body{@apply text-sm font-normal text-[#6B7080];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPopover, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-popover', standalone: true, imports: [CommonModule], host: {
+                        // A static `title="…"` lands on the input *and* stays on the host as a real
+                        // HTML attribute, which the browser would render as its own native tooltip
+                        // over the trigger. Stripping it here means the input can keep the obvious
+                        // name without consumers having to remember to bind it.
+                        '[attr.title]': 'null'
+                    }, template: "<!-- The anchor wraps the projected trigger so the popover has an element to\r\n     measure and to listen on, whatever the consumer passes in. -->\r\n<span\r\n  #anchor\r\n  class=\"bk-popover-anchor\"\r\n  (click)=\"onAnchorClick()\"\r\n  (mouseenter)=\"onAnchorEnter()\"\r\n  (mouseleave)=\"onAnchorLeave()\"\r\n>\r\n  <ng-content select=\"[bkPopoverTrigger]\"></ng-content>\r\n</span>\r\n\r\n@if (isOpen()) {\r\n  <!-- Hidden until position() lands: the first frame exists only so the panel\r\n       can be measured, and painting it at 0,0 first flashes it in the corner. -->\r\n  <div\r\n    #panel\r\n    class=\"bk-popover-panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    role=\"dialog\"\r\n    [attr.data-side]=\"side()\"\r\n    [style.top.px]=\"position()?.top\"\r\n    [style.left.px]=\"position()?.left\"\r\n    [style.maxWidth]=\"maxWidth()\"\r\n    [class.bk-popover-ready]=\"!!position()\"\r\n    (mouseenter)=\"onPanelEnter()\"\r\n    (mouseleave)=\"onPanelLeave()\"\r\n  >\r\n    @if (showArrow()) {\r\n      <!-- A rotated square, not a border triangle: it inherits the panel's\r\n           background and border, so the tip matches the panel on every side.\r\n           Sits above the panel's own border, hiding the segment it crosses. -->\r\n      <span\r\n        class=\"bk-popover-arrow\"\r\n        [style.left.px]=\"arrowLeft()\"\r\n        [style.top.px]=\"arrowTop()\"\r\n      ></span>\r\n    }\r\n\r\n    @if (title()) {\r\n      <div class=\"bk-popover-header\">\r\n        <span class=\"bk-popover-title\">{{ title() }}</span>\r\n        @if (closable()) {\r\n          <button type=\"button\" class=\"bk-popover-close\" aria-label=\"Close\" (click)=\"close()\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"14\"\r\n              height=\"14\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            >\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"bk-popover-body\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{@apply inline-flex;}.bk-popover-anchor{@apply inline-flex;}.bk-popover-panel{@apply fixed z-[10000] bg-white border border-[#E3E3E7] rounded-lg p-3 cursor-default;box-shadow:0 12px 24px -6px #1018281f,0 4px 8px -4px #1018280f;visibility:hidden;opacity:0}.bk-popover-panel.bk-popover-ready{visibility:visible;opacity:1;transition:opacity .12s ease-out}.bk-popover-arrow{@apply absolute block w-2.5 h-2.5 bg-white border border-[#E3E3E7];}.bk-popover-panel[data-side=top] .bk-popover-arrow{bottom:-5px;border-top:none;border-left:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=bottom] .bk-popover-arrow{top:-5px;border-bottom:none;border-right:none;transform:translate(-50%) rotate(45deg)}.bk-popover-panel[data-side=left] .bk-popover-arrow{right:-5px;border-bottom:none;border-left:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-panel[data-side=right] .bk-popover-arrow{left:-5px;border-top:none;border-right:none;transform:translateY(-50%) rotate(45deg)}.bk-popover-header{@apply flex items-start justify-between gap-3 mb-1;}.bk-popover-title{@apply text-sm font-semibold text-[#141414];}.bk-popover-close{@apply shrink-0 text-gray-400 hover:text-[#141414] cursor-pointer -me-1 -mt-0.5;}.bk-popover-body{@apply text-sm font-normal text-[#6B7080];}\n"] }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], anchorRef: [{
+                type: ViewChild,
+                args: ['anchor']
+            }], panelRef: [{
+                type: ViewChild,
+                args: ['panel']
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * A stacked ("avatar list") group. Renders a set of overlapping `bk-avatar`s and
+ * collapses any beyond `max` into a `+N` bubble whose tooltip lists the hidden
+ * names. Uses bk-avatar for every slot, so image/initials/icon fallback, sizing
+ * and status dots all come for free.
+ */
+class BkAvatarGroup {
+    /** The people to stack. */
+    avatars = [];
+    /** Shared size for every avatar in the group. */
+    size = 'md';
+    /** Max avatars shown before collapsing the rest into a +N bubble. */
+    max = 3;
+    /** Default variant for items that don't set their own. */
+    variant = 'gray';
+    /** Show the +N overflow bubble (otherwise extra avatars are just hidden). */
+    showOverflow = true;
+    get visibleAvatars() {
+        return this.avatars.slice(0, this.max);
+    }
+    get overflowCount() {
+        return Math.max(0, this.avatars.length - this.max);
+    }
+    get overflowLabel() {
+        return `+${this.overflowCount}`;
+    }
+    /** Names of the hidden avatars, for the +N tooltip. */
+    get overflowTooltip() {
+        return this.avatars
+            .slice(this.max)
+            .map(a => a.name?.trim())
+            .filter((n) => !!n)
+            .join(', ');
+    }
+    trackByIndex(index) {
+        return index;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkAvatarGroup, isStandalone: true, selector: "bk-avatar-group", inputs: { avatars: "avatars", size: "size", max: "max", variant: "variant", showOverflow: "showOverflow" }, ngImport: i0, template: "<div class=\"bk-avatar-group\" [ngClass]=\"size\">\r\n  @for (item of visibleAvatars; track trackByIndex($index)) {\r\n    <span class=\"bk-avatar-group__item\">\r\n      <bk-avatar\r\n        [src]=\"item.src ?? null\"\r\n        [name]=\"item.name ?? ''\"\r\n        [initialsOverride]=\"item.initialsOverride ?? ''\"\r\n        [alt]=\"item.alt ?? 'Avatar'\"\r\n        [tooltipContent]=\"item.tooltipContent ?? null\"\r\n        [bgColor]=\"item.bgColor ?? null\"\r\n        [textColor]=\"item.textColor ?? null\"\r\n        [size]=\"size\"\r\n        [variant]=\"item.variant ?? variant\"\r\n        [dot]=\"item.dot ?? 'none'\"\r\n        [dotPosition]=\"item.dotPosition ?? 'bottom-right'\"\r\n      ></bk-avatar>\r\n    </span>\r\n  }\r\n\r\n  @if (showOverflow && overflowCount > 0) {\r\n    <span class=\"bk-avatar-group__item bk-avatar-group__item--overflow\">\r\n      <bk-avatar\r\n        [name]=\"overflowLabel\"\r\n        [initialsOverride]=\"overflowLabel\"\r\n        [tooltipContent]=\"overflowTooltip\"\r\n        [size]=\"size\"\r\n        variant=\"gray\"\r\n        bgColor=\"#F3F4F6\"\r\n        textColor=\"#4A5565\"\r\n      ></bk-avatar>\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".bk-avatar-group{@apply inline-flex items-center;}.bk-avatar-group__item{@apply relative inline-flex rounded-full transition-transform duration-150;box-shadow:0 0 0 2px #fff}.bk-avatar-group__item:hover{@apply z-10;}.bk-avatar-group__item--overflow{@apply cursor-pointer;}.bk-avatar-group.xsm .bk-avatar-group__item:not(:first-child){margin-left:-8px}.bk-avatar-group.sm .bk-avatar-group__item:not(:first-child){margin-left:-10px}.bk-avatar-group.md .bk-avatar-group__item:not(:first-child){margin-left:-12px}.bk-avatar-group.lg .bk-avatar-group__item:not(:first-child){margin-left:-16px}.bk-avatar-group.xl .bk-avatar-group__item:not(:first-child){margin-left:-18px}.bk-avatar-group.xxl .bk-avatar-group__item:not(:first-child){margin-left:-20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BkAvatar, selector: "bk-avatar", inputs: ["src", "alt", "name", "initialsOverride", "tooltipContent", "bgColor", "textColor", "size", "variant", "fallback", "dot", "dotPosition"], outputs: ["imageLoadError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatarGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-avatar-group', standalone: true, imports: [CommonModule, BkAvatar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bk-avatar-group\" [ngClass]=\"size\">\r\n  @for (item of visibleAvatars; track trackByIndex($index)) {\r\n    <span class=\"bk-avatar-group__item\">\r\n      <bk-avatar\r\n        [src]=\"item.src ?? null\"\r\n        [name]=\"item.name ?? ''\"\r\n        [initialsOverride]=\"item.initialsOverride ?? ''\"\r\n        [alt]=\"item.alt ?? 'Avatar'\"\r\n        [tooltipContent]=\"item.tooltipContent ?? null\"\r\n        [bgColor]=\"item.bgColor ?? null\"\r\n        [textColor]=\"item.textColor ?? null\"\r\n        [size]=\"size\"\r\n        [variant]=\"item.variant ?? variant\"\r\n        [dot]=\"item.dot ?? 'none'\"\r\n        [dotPosition]=\"item.dotPosition ?? 'bottom-right'\"\r\n      ></bk-avatar>\r\n    </span>\r\n  }\r\n\r\n  @if (showOverflow && overflowCount > 0) {\r\n    <span class=\"bk-avatar-group__item bk-avatar-group__item--overflow\">\r\n      <bk-avatar\r\n        [name]=\"overflowLabel\"\r\n        [initialsOverride]=\"overflowLabel\"\r\n        [tooltipContent]=\"overflowTooltip\"\r\n        [size]=\"size\"\r\n        variant=\"gray\"\r\n        bgColor=\"#F3F4F6\"\r\n        textColor=\"#4A5565\"\r\n      ></bk-avatar>\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".bk-avatar-group{@apply inline-flex items-center;}.bk-avatar-group__item{@apply relative inline-flex rounded-full transition-transform duration-150;box-shadow:0 0 0 2px #fff}.bk-avatar-group__item:hover{@apply z-10;}.bk-avatar-group__item--overflow{@apply cursor-pointer;}.bk-avatar-group.xsm .bk-avatar-group__item:not(:first-child){margin-left:-8px}.bk-avatar-group.sm .bk-avatar-group__item:not(:first-child){margin-left:-10px}.bk-avatar-group.md .bk-avatar-group__item:not(:first-child){margin-left:-12px}.bk-avatar-group.lg .bk-avatar-group__item:not(:first-child){margin-left:-16px}.bk-avatar-group.xl .bk-avatar-group__item:not(:first-child){margin-left:-18px}.bk-avatar-group.xxl .bk-avatar-group__item:not(:first-child){margin-left:-20px}\n"] }]
+        }], propDecorators: { avatars: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], showOverflow: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -9771,5 +10515,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, NEUTRAL_APPEARANCE, POPOVER_PLACEMENTS, computePopoverPosition, deriveAppearance, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, parseColor, splitPlacement };
 //# sourceMappingURL=brickclay-org-ui.mjs.map