@brickclay-org/ui 0.1.37 → 0.1.39

package/fesm2022/brickclay-org-ui.mjs

@@ -2648,7 +2648,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       }\"\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' : ''\">\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            [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              [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              [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.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.dual-calendar-mode.has-ranges .dual-calendar{border-left:1px solid #eee}.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;border-left:1px solid #eee}.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%;border-left:1px solid #eee}.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}.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:.5px solid #000;outline-offset:.5px}\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", "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       }\"\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' : ''\">\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            [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              [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              [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.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.dual-calendar-mode.has-ranges .dual-calendar{border-left:1px solid #eee}.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;border-left:1px solid #eee}.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%;border-left:1px solid #eee}.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:.5px solid #000;outline-offset:.5px}\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", "disabled"], outputs: ["change", "timeChange", "pickerOpened", "pickerClosed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCustomCalendar, decorators: [{
             type: Component,
@@ -2663,7 +2663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkCustomCalendar),
                             multi: true,
                         },
-                    ], 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       }\"\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' : ''\">\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            [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              [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              [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.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.dual-calendar-mode.has-ranges .dual-calendar{border-left:1px solid #eee}.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;border-left:1px solid #eee}.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%;border-left:1px solid #eee}.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}.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:.5px solid #000;outline-offset:.5px}\n"] }]
+                    ], 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       }\"\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' : ''\">\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            [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              [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              [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.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.dual-calendar-mode.has-ranges .dual-calendar{border-left:1px solid #eee}.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;border-left:1px solid #eee}.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%;border-left:1px solid #eee}.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:.5px solid #000;outline-offset:.5px}\n"] }]
         }], ctorParameters: () => [{ type: BkCalendarManagerService }], propDecorators: { enableTimepicker: [{
                 type: Input
             }], autoApply: [{
@@ -3770,7 +3770,14 @@ class BKTooltipDirective {
     renderer;
     tooltipContent = '';
     tooltipPosition = 'right';
+    scrollable = false;
+    maxHeight = '300px';
+    autoHeight = true; // Auto-adjust height based on available space
     tooltipElement = null;
+    contentWrapper = null;
+    isHoveringTooltip = false;
+    hideTimeout = null;
+    tooltipListeners = [];
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
@@ -3784,6 +3791,11 @@ class BKTooltipDirective {
         }
     }
     ngOnDestroy() {
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+        this.cleanupTooltipListeners();
         this.removeTooltip();
     }
     updateTooltipContent() {
@@ -3804,6 +3816,8 @@ class BKTooltipDirective {
     appendContent() {
         if (!this.tooltipElement)
             return;
+        // Append to wrapper if scrollable, otherwise to tooltip directly
+        const target = this.contentWrapper || this.tooltipElement;
         const contentLines = Array.isArray(this.tooltipContent)
             ? this.tooltipContent
             : [this.tooltipContent];
@@ -3817,10 +3831,15 @@ class BKTooltipDirective {
                 const text = this.renderer.createText(line ?? '');
                 this.renderer.appendChild(div, text);
             }
-            this.renderer.appendChild(this.tooltipElement, div);
+            this.renderer.appendChild(target, div);
         });
     }
     onMouseEnter() {
+        // Clear any pending hide timeout
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
         if (this.tooltipElement) {
             this.setTooltipPosition();
             this.setStyle(this.tooltipElement, {
@@ -3831,17 +3850,27 @@ class BKTooltipDirective {
         }
     }
     onMouseLeave() {
-        this.hideTooltip();
-    }
-    hideTooltip() {
-        if (this.tooltipElement) {
-            this.setStyle(this.tooltipElement, {
-                visibility: 'hidden',
-                opacity: '0',
-            });
-            this.renderer.removeStyle(document.body, 'overflow-x');
+        // Don't hide immediately - wait a bit to see if mouse moves to tooltip
+        // Only hide if not hovering over tooltip
+        if (!this.isHoveringTooltip) {
+            this.hideTimeout = setTimeout(() => {
+                if (!this.isHoveringTooltip && this.tooltipElement) {
+                    this.hideTooltip();
+                }
+            }, 100); // Small delay to allow mouse to move to tooltip
         }
     }
+    // private hideTooltip() {
+    //   if (this.tooltipElement) {
+    //     this.setStyle(this.tooltipElement, {
+    //       visibility: 'hidden',
+    //       opacity: '0',
+    //     });
+    //     this.renderer.removeStyle(document.body, 'overflow-x');
+    //   }
+    // }
+    // Hide tooltip on mousedown so it doesn't stick during CDK drag-drop
+    // (CDK drag steals the element before mouseleave can fire)
     onInteract() {
         this.hideTooltip();
     }
@@ -3859,15 +3888,73 @@ class BKTooltipDirective {
         }
         return true;
     }
+    hideTooltip() {
+        if (this.tooltipElement) {
+            this.setStyle(this.tooltipElement, {
+                visibility: 'hidden',
+                opacity: '0',
+            });
+            this.renderer.removeStyle(document.body, 'overflow-x'); // ✅ restore scroll when tooltip hides
+        }
+        this.isHoveringTooltip = false;
+    }
+    setupTooltipHoverListeners() {
+        if (!this.tooltipElement)
+            return;
+        // Clean up existing listeners
+        this.cleanupTooltipListeners();
+        // Add mouseenter listener to tooltip
+        const mouseEnterListener = this.renderer.listen(this.tooltipElement, 'mouseenter', () => {
+            this.isHoveringTooltip = true;
+            // Clear any pending hide timeout
+            if (this.hideTimeout) {
+                clearTimeout(this.hideTimeout);
+                this.hideTimeout = null;
+            }
+            // Ensure tooltip is visible
+            if (this.tooltipElement) {
+                this.setStyle(this.tooltipElement, {
+                    visibility: 'visible',
+                    opacity: '1',
+                });
+            }
+        });
+        // Add mouseleave listener to tooltip
+        const mouseLeaveListener = this.renderer.listen(this.tooltipElement, 'mouseleave', () => {
+            this.isHoveringTooltip = false;
+            // Hide tooltip after a short delay
+            this.hideTimeout = setTimeout(() => {
+                this.hideTooltip();
+            }, 100);
+        });
+        // Store listeners for cleanup
+        this.tooltipListeners = [mouseEnterListener, mouseLeaveListener];
+    }
+    cleanupTooltipListeners() {
+        this.tooltipListeners.forEach(cleanup => cleanup());
+        this.tooltipListeners = [];
+    }
     createTooltip() {
         if (this.isTooltipContentEmpty())
             return;
         this.tooltipElement = this.renderer.createElement('div');
         this.renderer.addClass(this.tooltipElement, 'bk-tooltip-content');
+        // Add scrollable class if needed
+        if (this.scrollable) {
+            this.renderer.addClass(this.tooltipElement, 'bk-tooltip-scrollable');
+        }
+        // Create wrapper for content if scrollable
+        if (this.scrollable) {
+            this.contentWrapper = this.renderer.createElement('div');
+            this.renderer.addClass(this.contentWrapper, 'bk-tooltip-content-wrapper');
+            this.renderer.setStyle(this.contentWrapper, 'max-height', this.maxHeight);
+            this.renderer.appendChild(this.tooltipElement, this.contentWrapper);
+        }
         // Add content
         const contentLines = Array.isArray(this.tooltipContent)
             ? this.tooltipContent
             : [this.tooltipContent];
+        const target = this.contentWrapper || this.tooltipElement;
         contentLines.forEach((line) => {
             const div = this.renderer.createElement('div');
             this.renderer.addClass(div, 'text');
@@ -3878,7 +3965,7 @@ class BKTooltipDirective {
                 const text = this.renderer.createText(line);
                 this.renderer.appendChild(div, text);
             }
-            this.renderer.appendChild(this.tooltipElement, div);
+            this.renderer.appendChild(target, div);
         });
         // Add triangle
         const triangle = this.renderer.createElement('div');
@@ -3898,17 +3985,54 @@ class BKTooltipDirective {
             boxSizing: 'border-box',
         });
         this.renderer.appendChild(document.body, this.tooltipElement);
+        // Setup hover listeners for the tooltip itself
+        this.setupTooltipHoverListeners();
     }
     setTooltipPosition() {
         if (!this.tooltipElement)
             return;
         const hostRect = this.el.nativeElement.getBoundingClientRect();
-        const tooltipRect = this.tooltipElement.getBoundingClientRect();
+        let tooltipRect = this.tooltipElement.getBoundingClientRect();
         const triangle = this.tooltipElement.querySelector('.bk-tooltip-triangle');
         const padding = 10;
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        // Get content wrapper reference
+        const contentWrapper = this.tooltipElement.querySelector('.bk-tooltip-content-wrapper');
+        // Get actual content height first (without max-height constraint)
+        let contentHeight = 0;
+        if (contentWrapper && this.scrollable) {
+            // Temporarily remove max-height to get actual content height
+            const originalMaxHeight = contentWrapper.style.maxHeight;
+            this.renderer.setStyle(contentWrapper, 'max-height', 'none');
+            // Force reflow to get accurate scrollHeight
+            contentWrapper.offsetHeight;
+            contentHeight = contentWrapper.scrollHeight;
+            // Restore original styles
+            this.renderer.setStyle(contentWrapper, 'max-height', originalMaxHeight);
+        }
+        // Calculate available space and adjust max-height if scrollable and auto-height is enabled
+        if (this.scrollable && this.autoHeight && contentWrapper && contentHeight > 0) {
+            const spaceInfo = this.calculateAvailableSpace(hostRect, this.tooltipPosition, viewportHeight, viewportWidth, padding, contentHeight);
+            if (spaceInfo.available > 0) {
+                // Set optimal height
+                const heightToUse = spaceInfo.optimalHeight;
+                this.renderer.setStyle(contentWrapper, 'max-height', `${heightToUse}px`);
+                // Only enable scroll if content exceeds available space
+                if (spaceInfo.needsScroll) {
+                    this.renderer.setStyle(contentWrapper, 'overflow-y', 'auto');
+                }
+                else {
+                    this.renderer.setStyle(contentWrapper, 'overflow-y', 'hidden');
+                }
+                // Force a reflow to get updated dimensions
+                contentWrapper.offsetHeight;
+            }
+        }
+        // Recalculate tooltip dimensions after max-height adjustment
+        tooltipRect = this.tooltipElement.getBoundingClientRect();
         let top = 0, left = 0;
-        // Position logic — using viewport-relative coords (getBoundingClientRect)
-        // since the tooltip uses position: fixed (no scroll offset needed)
+        // Position logic
         switch (this.tooltipPosition) {
             case 'right':
             case 'left':
@@ -3918,7 +4042,7 @@ class BKTooltipDirective {
                         ? hostRect.right + padding
                         : hostRect.left - tooltipRect.width - padding;
                 // Auto flip if out of viewport
-                if (this.tooltipPosition === 'right' && left + tooltipRect.width > window.innerWidth) {
+                if (this.tooltipPosition === 'right' && left + tooltipRect.width > viewportWidth) {
                     left = hostRect.left - tooltipRect.width - padding;
                 }
                 else if (this.tooltipPosition === 'left' && left < 0) {
@@ -3936,11 +4060,48 @@ class BKTooltipDirective {
                     ? hostRect.top - tooltipRect.height - padding
                     : hostRect.bottom + padding;
                 // Prevent overflow
-                left = Math.max(10, Math.min(left, window.innerWidth - tooltipRect.width - 10));
+                left = Math.max(10, Math.min(left, viewportWidth - tooltipRect.width - 10));
+                // Adjust vertically if tooltip goes out of viewport
+                if (this.tooltipPosition === 'bottom' && top + tooltipRect.height > viewportHeight) {
+                    // Try positioning above instead
+                    if (hostRect.top - tooltipRect.height - padding >= 0) {
+                        top = hostRect.top - tooltipRect.height - padding;
+                        // Recalculate available space for top position
+                        if (this.scrollable && this.autoHeight && contentWrapper && contentHeight > 0) {
+                            const spaceInfo = this.calculateAvailableSpace(hostRect, 'top', viewportHeight, viewportWidth, padding, contentHeight);
+                            if (spaceInfo.available > 0) {
+                                this.renderer.setStyle(contentWrapper, 'max-height', `${spaceInfo.optimalHeight}px`);
+                                this.renderer.setStyle(contentWrapper, 'overflow-y', spaceInfo.needsScroll ? 'auto' : 'hidden');
+                                contentWrapper.offsetHeight;
+                                tooltipRect = this.tooltipElement.getBoundingClientRect();
+                            }
+                        }
+                        this.setTriangleStyles(triangle, 'top');
+                    }
+                }
+                else if (this.tooltipPosition === 'top' && top < 0) {
+                    // Try positioning below instead
+                    if (hostRect.bottom + tooltipRect.height + padding <= viewportHeight) {
+                        top = hostRect.bottom + padding;
+                        // Recalculate available space for bottom position
+                        if (this.scrollable && this.autoHeight && contentWrapper && contentHeight > 0) {
+                            const spaceInfo = this.calculateAvailableSpace(hostRect, 'bottom', viewportHeight, viewportWidth, padding, contentHeight);
+                            if (spaceInfo.available > 0) {
+                                this.renderer.setStyle(contentWrapper, 'max-height', `${spaceInfo.optimalHeight}px`);
+                                this.renderer.setStyle(contentWrapper, 'overflow-y', spaceInfo.needsScroll ? 'auto' : 'hidden');
+                                contentWrapper.offsetHeight;
+                                tooltipRect = this.tooltipElement.getBoundingClientRect();
+                            }
+                        }
+                        this.setTriangleStyles(triangle, 'bottom');
+                    }
+                }
+                else {
+                    this.setTriangleStyles(triangle, this.tooltipPosition);
+                }
                 this.setStyle(this.tooltipElement, {
                     transform: 'translateX(0)',
                 });
-                this.setTriangleStyles(triangle, this.tooltipPosition);
                 break;
         }
         this.setStyle(this.tooltipElement, {
@@ -3948,6 +4109,41 @@ class BKTooltipDirective {
             left: `${left}px`,
         });
     }
+    /**
+     * Calculates available space for tooltip based on position
+     * Returns: { available: number, needsScroll: boolean, optimalHeight: number }
+     */
+    calculateAvailableSpace(hostRect, tooltipPosition, viewportHeight, viewportWidth, padding, contentHeight) {
+        if (!this.scrollable || !this.autoHeight) {
+            return { available: 0, needsScroll: false, optimalHeight: 0 };
+        }
+        let availableSpace = 0;
+        const minHeight = 100;
+        const maxHeightLimit = parseInt(this.maxHeight) || 300;
+        const buffer = 35; // Extra buffer to prevent cutting
+        switch (tooltipPosition) {
+            case 'bottom':
+                const spaceBelow = viewportHeight - hostRect.bottom - padding - buffer;
+                availableSpace = Math.max(minHeight, Math.min(spaceBelow, maxHeightLimit));
+                break;
+            case 'top':
+                const spaceAbove = hostRect.top - padding - buffer;
+                availableSpace = Math.max(minHeight, Math.min(spaceAbove, maxHeightLimit));
+                break;
+            case 'left':
+            case 'right':
+                const spaceBelowSide = viewportHeight - hostRect.bottom - padding - buffer;
+                const spaceAboveSide = hostRect.top - padding - buffer;
+                const maxVerticalSpace = Math.max(spaceBelowSide, spaceAboveSide);
+                availableSpace = Math.max(minHeight, Math.min(maxVerticalSpace, maxHeightLimit));
+                break;
+        }
+        // Check if content fits without scroll
+        const needsScroll = contentHeight > availableSpace;
+        // Optimal height: use content height if it fits, otherwise use available space
+        const optimalHeight = needsScroll ? availableSpace : contentHeight;
+        return { available: availableSpace, needsScroll, optimalHeight };
+    }
     setTriangleStyles(triangle, position, flipped = false) {
         if (!triangle)
             return;
@@ -3994,6 +4190,7 @@ class BKTooltipDirective {
         if (this.tooltipElement) {
             this.renderer.removeChild(document.body, this.tooltipElement);
             this.tooltipElement = null;
+            this.contentWrapper = null;
         }
     }
     // Utility function to apply multiple styles
@@ -4003,7 +4200,7 @@ class BKTooltipDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BKTooltipDirective, isStandalone: true, selector: "[bkTooltip]", inputs: { tooltipContent: ["bkTooltip", "tooltipContent"], tooltipPosition: ["bkTooltipPosition", "tooltipPosition"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onInteract()", "touchstart": "onInteract()", "window:scroll": "onWindowChange()", "window:resize": "onWindowChange()" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BKTooltipDirective, isStandalone: true, selector: "[bkTooltip]", inputs: { tooltipContent: ["bkTooltip", "tooltipContent"], tooltipPosition: ["bkTooltipPosition", "tooltipPosition"], scrollable: ["bkTooltipScrollable", "scrollable"], maxHeight: ["bkTooltipMaxHeight", "maxHeight"], autoHeight: ["bkTooltipAutoHeight", "autoHeight"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onInteract()", "touchstart": "onInteract()", "window:scroll": "onWindowChange()", "window:resize": "onWindowChange()" } }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BKTooltipDirective, decorators: [{
             type: Directive,
@@ -4017,6 +4214,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], tooltipPosition: [{
                 type: Input,
                 args: ['bkTooltipPosition']
+            }], scrollable: [{
+                type: Input,
+                args: ['bkTooltipScrollable']
+            }], maxHeight: [{
+                type: Input,
+                args: ['bkTooltipMaxHeight']
+            }], autoHeight: [{
+                type: Input,
+                args: ['bkTooltipAutoHeight']
             }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
@@ -4200,7 +4406,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", 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\">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                      <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                  </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]\"\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"] }, { 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", 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\">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                      <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                  </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]\"\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", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, decorators: [{
             type: Component,
@@ -4633,7 +4839,7 @@ class BkSelect {
                 useExisting: forwardRef(() => BkSelect),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "optionsRef", predicate: ["optionsRef"], 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\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 class=\"bk-value-chips flex gap-0.5 flex-wrap h-[18px] overflow-y-auto\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"bk-multi-badge-item me-0.5\">\r\n              <span class=\"bk-multi-badge-item-text\" [style.color]=\"resolveColor(opt)\">{{\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 (selectedOptions().length > maxLabels()) {\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 - maxLabels() }}</span\r\n              >\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\">\r\n          {{ resolveLabel(selectedOptions()[0]) }}\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]=\"dropdownPosition()\"\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      [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 #optionsListContainer tabindex=\"-1\" class=\"bk-options-list\" (scroll)=\"onScroll($event)\">\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                (click)=\"handleSelection(item, $event)\"\r\n              >\r\n                <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                  <span class=\"bk-option-label min-w-0\" [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\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  @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 transition-all duration-200 cursor-pointer focus:border-transparent focus-visible:!outline-[.5px] focus-visible:!outline-[#6B7080];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;}.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-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-[99] 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:175px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:210px}}@media (min-height: 901px){.bk-options-list{max-height:240px}}.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-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}\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"] }] });
+        ], 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: "optionsRef", predicate: ["optionsRef"], 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\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 class=\"bk-value-chips flex gap-0.5 flex-wrap h-[18px] overflow-y-auto\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"bk-multi-badge-item me-0.5\">\r\n              <span class=\"bk-multi-badge-item-text\" [style.color]=\"resolveColor(opt)\">{{\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 (selectedOptions().length > maxLabels()) {\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 - maxLabels() }}</span\r\n              >\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\">\r\n          {{ resolveLabel(selectedOptions()[0]) }}\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]=\"dropdownPosition()\"\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      [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 #optionsListContainer tabindex=\"-1\" class=\"bk-options-list\" (scroll)=\"onScroll($event)\">\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                (click)=\"handleSelection(item, $event)\"\r\n              >\r\n                <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                  <span class=\"bk-option-label min-w-0\" [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\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  @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 transition-all duration-200 cursor-pointer focus:border-transparent focus-visible:!outline-[.5px] focus-visible:!outline-[#6B7080];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;}.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-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-[99] 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:175px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:210px}}@media (min-height: 901px){.bk-options-list{max-height:240px}}.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-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}\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", "bkTooltipAutoHeight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, decorators: [{
             type: Component,
@@ -5352,7 +5558,7 @@ class BkTabs {
         return tab.icon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTabs, isStandalone: true, selector: "bk-tabs", inputs: { list: "list", activeTabId: "activeTabId", disabled: "disabled" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"tabs-container overflow-x-auto whitespace-nowrap\">\r\n  <ul class=\"tabs-list\" role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <!--\r\n          Tooltip logic:\r\n          - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n          - No icon + error state      \u2192 tooltip on the button\r\n          - No icon + no error         \u2192 no tooltip\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--error]=\"tab.error\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n          [class.tabs-button--icon-right]=\"tab.direction === 'right'\"\r\n          [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n            class=\"tabs-icon\">\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n          <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n            class=\"tabs-icon\">\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply flex gap-0 list-none m-0 p-0;}.tabs-item{@apply flex-shrink-0;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-200 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTabs, isStandalone: true, selector: "bk-tabs", inputs: { list: "list", activeTabId: "activeTabId", disabled: "disabled" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"tabs-container overflow-x-auto whitespace-nowrap\">\r\n  <ul class=\"tabs-list\" role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <!--\r\n          Tooltip logic:\r\n          - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n          - No icon + error state      \u2192 tooltip on the button\r\n          - No icon + no error         \u2192 no tooltip\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--error]=\"tab.error\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n          [class.tabs-button--icon-right]=\"tab.direction === 'right'\"\r\n          [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n            class=\"tabs-icon\">\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n          <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n            class=\"tabs-icon\">\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply flex gap-0 list-none m-0 p-0;}.tabs-item{@apply flex-shrink-0;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-200 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipAutoHeight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, decorators: [{
             type: Component,
@@ -6849,7 +7055,7 @@ class BkAvatarUploader {
                 useExisting: forwardRef(() => BkAvatarUploader),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar-profile-container\" [ngClass]=\"sizeClasses\">\r\n  @if (label) {\r\n    <label class=\"avatar-profile-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"avatar-profile-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"flex gap-4 justify-end\">\r\n    <div\r\n    [ngClass]=\"containerClasses\"\r\n    [bkTooltip]=\"name\"\r\n    [bkTooltipPosition]=\"'top'\"\r\n  >\r\n\r\n      <!-- Loading overlay -->\r\n      @if (loading) {\r\n        <div class=\"absolute inset-0 flex items-center justify-center z-10 rounded-full bg-white/60\">\r\n          <div class=\"w-5 h-5 border-2 border-[#141414] border-t-transparent rounded-full animate-spin\"></div>\r\n        </div>\r\n      }\r\n\r\n      @if (corrupted) {\r\n        <!-- Corrupted file indicator -->\r\n        <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M19.3517 7.61665L15.3929 4.05375C14.2651 3.03868 13.7012 2.53114 13.0092 2.26562L13 5.00011C13 7.35713 13 8.53564 13.7322 9.26787C14.4645 10.0001 15.643 10.0001 18 10.0001H21.5801C21.2175 9.29588 20.5684 8.71164 19.3517 7.61665Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2.72548 20.3823 2.44924 19.8327 2.27818 19.1149C2.15904 18.6149 2.09948 18.3649 2.21429 18.0728C2.32911 17.7806 2.58217 17.6119 3.08829 17.2745L3.71429 16.8571C4.49285 16.3381 5.50715 16.3381 6.28571 16.8571C7.3238 17.5492 8.6762 17.5492 9.71429 16.8571C10.4929 16.3381 11.5071 16.3381 12.2857 16.8571C13.3238 17.5492 14.6762 17.5492 15.7143 16.8571C16.4929 16.3381 17.5071 16.3381 18.2857 16.8571C19.3238 17.5492 20.6762 17.5492 21.7143 16.8571C21.8241 16.7839 21.9705 16.8681 21.965 17C21.8873 18.8723 21.6366 20.0203 20.8284 20.8284C19.6569 22 17.7712 22 14 22Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M2 10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.23869 2 10.0298 2C10.6358 2 11.1214 2 11.53 2.01666C11.5166 2.09659 11.5095 2.17813 11.5092 2.26057L11.5 5.09497C11.4999 6.19207 11.4998 7.16164 11.6049 7.94316C11.7188 8.79028 11.9803 9.63726 12.6716 10.3285C13.3628 11.0198 14.2098 11.2813 15.0569 11.3952C15.8385 11.5003 16.808 11.5002 17.9051 11.5001L18 11.5001H21.9934V12.3273C21.9973 12.5399 21.8912 12.7392 21.7143 12.8571C20.6762 13.5492 19.3238 13.5492 18.2857 12.8571C17.5071 12.3381 16.4929 12.3381 15.7143 12.8571C14.6762 13.5492 13.3238 13.5492 12.2857 12.8571C11.5071 12.3381 10.4929 12.3381 9.71429 12.8571C8.6762 13.5492 7.3238 13.5492 6.28571 12.8571C5.50715 12.3381 4.49285 12.3381 3.71429 12.8571L3.5547 12.9635C2.87033 13.4198 2.52814 13.6479 2.26407 13.5066C2 13.3653 2 12.954 2 12.1315V10Z\" fill=\"#DC3545\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (displaySrc && !imageLoadFailed) {\r\n        <img\r\n          [src]=\"displaySrc\"\r\n          [alt]=\"alt\"\r\n          class=\"avatar-img\"\r\n          (error)=\"onImageError()\"\r\n        />\r\n      }\r\n\r\n      @else if (fallback === 'camera') {\r\n        <svg class=\"placeholder-icon\" width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M18.3843 4.66667C17.6726 4.66667 17.0193 4.25833 16.6926 3.62833L15.8526 1.93667C15.316 0.875 13.916 0 12.726 0H10.0543C8.85264 0 7.45264 0.875 6.91598 1.93667L6.07598 3.62833C5.74931 4.25833 5.09598 4.66667 4.38431 4.66667C1.85264 4.66667 -0.154023 6.80167 0.00931005 9.32167L0.615977 18.9583C0.755977 21.3617 2.05098 23.3333 5.27098 23.3333H17.4976C20.7176 23.3333 22.001 21.3617 22.1526 18.9583L22.7593 9.32167C22.9226 6.80167 20.916 4.66667 18.3843 4.66667ZM9.63431 6.125H13.1343C13.6126 6.125 14.0093 6.52167 14.0093 7C14.0093 7.47833 13.6126 7.875 13.1343 7.875H9.63431C9.15598 7.875 8.75931 7.47833 8.75931 7C8.75931 6.52167 9.15598 6.125 9.63431 6.125ZM11.3843 18.8067C9.21431 18.8067 7.44098 17.045 7.44098 14.8633C7.44098 12.6817 9.20264 10.92 11.3843 10.92C13.566 10.92 15.3276 12.6817 15.3276 14.8633C15.3276 17.045 13.5543 18.8067 11.3843 18.8067Z\" fill=\"#6B7080\"/>\r\n        </svg>\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 class=\"placeholder-icon\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" > <g clip-path=\"url(#clip0)\"> <path 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\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> <path d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g> <defs> <clipPath id=\"clip0\"> <rect width=\"32\" height=\"32\" fill=\"white\" /> </clipPath> </defs> </svg>\r\n      }\r\n\r\n      <!-- Remove badge -->\r\n      @if (showRemoveButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"remove-badge\"\r\n          (click)=\"onRemove()\"\r\n          aria-label=\"Remove avatar\"\r\n        >\r\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"#6B7080\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n          </svg>\r\n        </button>\r\n      }\r\n\r\n    </div>\r\n    <div class=\"flex flex-col gap-2 justify-end items-start\">\r\n      @if (editable) {\r\n        <label class=\"upload-button cursor-pointer\">\r\n          {{ uploadLabel }}\r\n          <input\r\n            type=\"file\"\r\n            class=\"hidden\"\r\n            [accept]=\"accept\"\r\n            [disabled]=\"disabled\"\r\n            (change)=\"onFileSelected($event)\"\r\n          />\r\n        </label>\r\n      }\r\n      @if (!hasError && hint) {\r\n        <p class=\"profile-size\">{{ hint }}</p>\r\n      }\r\n      @if (hasError && errorMessage) {\r\n        <p class=\"avatar-profile-error\">{{ errorMessage }}</p>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".avatar-profile-container{@apply flex flex-col gap-1.5;}.avatar-profile-label{@apply text-sm font-medium text-[#141414];}.avatar-profile-label-required{@apply text-[#E7000B] ml-0.5;}.avatar-profile-error{@apply text-xs text-[#E7000B] font-normal;}.avatar-profile{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none shadow-lg transition-all duration-200 border-[3px] border-white bg-[#F9FAFA];}.avatar-profile .avatar-img{@apply w-full h-full object-cover rounded-full;}.upload-button{@apply font-medium text-[#6B7080] border border-[#E3E3E7] rounded shadow-sm;}.sm .upload-button{@apply text-[12px] leading-[18px] px-2 py-3;}.md .upload-button{@apply text-[14px] leading-[20px] px-[10px] py-2.5;}.lg .upload-button{@apply text-[16px] leading-[24px] px-[18px] py-2.5;}.xl .upload-button{@apply text-[16px] leading-[24px] px-5 py-3;}.profile-size{@apply font-medium text-[#6B7080];}.sm .profile-size{@apply text-[10px] leading-[14px];}.md .profile-size{@apply text-[12px] leading-[18px];}.lg .profile-size{@apply text-[14px] leading-[20px];}.xl .profile-size{@apply text-[16px] leading-[24px];}.avatar-profile.sm .avatar-text{@apply font-medium text-[30px] leading-[38px];}.avatar-profile.md .avatar-text{@apply font-medium text-[36px] leading-[44px];}.avatar-profile.lg .avatar-text{@apply font-medium text-[45px] leading-[55px];}.avatar-profile.xl .avatar-text{@apply font-medium text-[60px] leading-[72px];}.avatar-profile{@apply font-medium text-[#6B7080];}.avatar-profile.sm{@apply size-[72px] text-sm;}.avatar-profile.md{@apply size-[96px] text-base;}.avatar-profile.lg{@apply size-[120px] text-[18px] leading-[26px];}.avatar-profile.xl{@apply size-[160px] text-xl;}.avatar-profile.sm .placeholder-icon{@apply size-[28px];}.avatar-profile.md .placeholder-icon{@apply size-[42px];}.avatar-profile.lg .placeholder-icon{@apply size-[52px];}.avatar-profile.xl .placeholder-icon{@apply size-[65px];}.avatar-profile.corrupted{@apply border-[3px] border-[#E7000B];}.avatar-profile .corrupted-icon{@apply text-[#E7000B];}.avatar-profile.sm .corrupted-icon{@apply size-[28px];}.avatar-profile.md .corrupted-icon{@apply size-[42px];}.avatar-profile.lg .corrupted-icon{@apply size-[52px];}.avatar-profile.xl .corrupted-icon{@apply size-[65px];}.remove-badge{@apply absolute top-0 right-0 w-5 h-5 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-gray-50 transition z-20 border-0 p-0;}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar-profile-container\" [ngClass]=\"sizeClasses\">\r\n  @if (label) {\r\n    <label class=\"avatar-profile-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"avatar-profile-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"flex gap-4 justify-end\">\r\n    <div\r\n    [ngClass]=\"containerClasses\"\r\n    [bkTooltip]=\"name\"\r\n    [bkTooltipPosition]=\"'top'\"\r\n  >\r\n\r\n      <!-- Loading overlay -->\r\n      @if (loading) {\r\n        <div class=\"absolute inset-0 flex items-center justify-center z-10 rounded-full bg-white/60\">\r\n          <div class=\"w-5 h-5 border-2 border-[#141414] border-t-transparent rounded-full animate-spin\"></div>\r\n        </div>\r\n      }\r\n\r\n      @if (corrupted) {\r\n        <!-- Corrupted file indicator -->\r\n        <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M19.3517 7.61665L15.3929 4.05375C14.2651 3.03868 13.7012 2.53114 13.0092 2.26562L13 5.00011C13 7.35713 13 8.53564 13.7322 9.26787C14.4645 10.0001 15.643 10.0001 18 10.0001H21.5801C21.2175 9.29588 20.5684 8.71164 19.3517 7.61665Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2.72548 20.3823 2.44924 19.8327 2.27818 19.1149C2.15904 18.6149 2.09948 18.3649 2.21429 18.0728C2.32911 17.7806 2.58217 17.6119 3.08829 17.2745L3.71429 16.8571C4.49285 16.3381 5.50715 16.3381 6.28571 16.8571C7.3238 17.5492 8.6762 17.5492 9.71429 16.8571C10.4929 16.3381 11.5071 16.3381 12.2857 16.8571C13.3238 17.5492 14.6762 17.5492 15.7143 16.8571C16.4929 16.3381 17.5071 16.3381 18.2857 16.8571C19.3238 17.5492 20.6762 17.5492 21.7143 16.8571C21.8241 16.7839 21.9705 16.8681 21.965 17C21.8873 18.8723 21.6366 20.0203 20.8284 20.8284C19.6569 22 17.7712 22 14 22Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M2 10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.23869 2 10.0298 2C10.6358 2 11.1214 2 11.53 2.01666C11.5166 2.09659 11.5095 2.17813 11.5092 2.26057L11.5 5.09497C11.4999 6.19207 11.4998 7.16164 11.6049 7.94316C11.7188 8.79028 11.9803 9.63726 12.6716 10.3285C13.3628 11.0198 14.2098 11.2813 15.0569 11.3952C15.8385 11.5003 16.808 11.5002 17.9051 11.5001L18 11.5001H21.9934V12.3273C21.9973 12.5399 21.8912 12.7392 21.7143 12.8571C20.6762 13.5492 19.3238 13.5492 18.2857 12.8571C17.5071 12.3381 16.4929 12.3381 15.7143 12.8571C14.6762 13.5492 13.3238 13.5492 12.2857 12.8571C11.5071 12.3381 10.4929 12.3381 9.71429 12.8571C8.6762 13.5492 7.3238 13.5492 6.28571 12.8571C5.50715 12.3381 4.49285 12.3381 3.71429 12.8571L3.5547 12.9635C2.87033 13.4198 2.52814 13.6479 2.26407 13.5066C2 13.3653 2 12.954 2 12.1315V10Z\" fill=\"#DC3545\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (displaySrc && !imageLoadFailed) {\r\n        <img\r\n          [src]=\"displaySrc\"\r\n          [alt]=\"alt\"\r\n          class=\"avatar-img\"\r\n          (error)=\"onImageError()\"\r\n        />\r\n      }\r\n\r\n      @else if (fallback === 'camera') {\r\n        <svg class=\"placeholder-icon\" width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M18.3843 4.66667C17.6726 4.66667 17.0193 4.25833 16.6926 3.62833L15.8526 1.93667C15.316 0.875 13.916 0 12.726 0H10.0543C8.85264 0 7.45264 0.875 6.91598 1.93667L6.07598 3.62833C5.74931 4.25833 5.09598 4.66667 4.38431 4.66667C1.85264 4.66667 -0.154023 6.80167 0.00931005 9.32167L0.615977 18.9583C0.755977 21.3617 2.05098 23.3333 5.27098 23.3333H17.4976C20.7176 23.3333 22.001 21.3617 22.1526 18.9583L22.7593 9.32167C22.9226 6.80167 20.916 4.66667 18.3843 4.66667ZM9.63431 6.125H13.1343C13.6126 6.125 14.0093 6.52167 14.0093 7C14.0093 7.47833 13.6126 7.875 13.1343 7.875H9.63431C9.15598 7.875 8.75931 7.47833 8.75931 7C8.75931 6.52167 9.15598 6.125 9.63431 6.125ZM11.3843 18.8067C9.21431 18.8067 7.44098 17.045 7.44098 14.8633C7.44098 12.6817 9.20264 10.92 11.3843 10.92C13.566 10.92 15.3276 12.6817 15.3276 14.8633C15.3276 17.045 13.5543 18.8067 11.3843 18.8067Z\" fill=\"#6B7080\"/>\r\n        </svg>\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 class=\"placeholder-icon\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" > <g clip-path=\"url(#clip0)\"> <path 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\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> <path d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g> <defs> <clipPath id=\"clip0\"> <rect width=\"32\" height=\"32\" fill=\"white\" /> </clipPath> </defs> </svg>\r\n      }\r\n\r\n      <!-- Remove badge -->\r\n      @if (showRemoveButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"remove-badge\"\r\n          (click)=\"onRemove()\"\r\n          aria-label=\"Remove avatar\"\r\n        >\r\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"#6B7080\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n          </svg>\r\n        </button>\r\n      }\r\n\r\n    </div>\r\n    <div class=\"flex flex-col gap-2 justify-end items-start\">\r\n      @if (editable) {\r\n        <label class=\"upload-button cursor-pointer\">\r\n          {{ uploadLabel }}\r\n          <input\r\n            type=\"file\"\r\n            class=\"hidden\"\r\n            [accept]=\"accept\"\r\n            [disabled]=\"disabled\"\r\n            (change)=\"onFileSelected($event)\"\r\n          />\r\n        </label>\r\n      }\r\n      @if (!hasError && hint) {\r\n        <p class=\"profile-size\">{{ hint }}</p>\r\n      }\r\n      @if (hasError && errorMessage) {\r\n        <p class=\"avatar-profile-error\">{{ errorMessage }}</p>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".avatar-profile-container{@apply flex flex-col gap-1.5;}.avatar-profile-label{@apply text-sm font-medium text-[#141414];}.avatar-profile-label-required{@apply text-[#E7000B] ml-0.5;}.avatar-profile-error{@apply text-xs text-[#E7000B] font-normal;}.avatar-profile{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none shadow-lg transition-all duration-200 border-[3px] border-white bg-[#F9FAFA];}.avatar-profile .avatar-img{@apply w-full h-full object-cover rounded-full;}.upload-button{@apply font-medium text-[#6B7080] border border-[#E3E3E7] rounded shadow-sm;}.sm .upload-button{@apply text-[12px] leading-[18px] px-2 py-3;}.md .upload-button{@apply text-[14px] leading-[20px] px-[10px] py-2.5;}.lg .upload-button{@apply text-[16px] leading-[24px] px-[18px] py-2.5;}.xl .upload-button{@apply text-[16px] leading-[24px] px-5 py-3;}.profile-size{@apply font-medium text-[#6B7080];}.sm .profile-size{@apply text-[10px] leading-[14px];}.md .profile-size{@apply text-[12px] leading-[18px];}.lg .profile-size{@apply text-[14px] leading-[20px];}.xl .profile-size{@apply text-[16px] leading-[24px];}.avatar-profile.sm .avatar-text{@apply font-medium text-[30px] leading-[38px];}.avatar-profile.md .avatar-text{@apply font-medium text-[36px] leading-[44px];}.avatar-profile.lg .avatar-text{@apply font-medium text-[45px] leading-[55px];}.avatar-profile.xl .avatar-text{@apply font-medium text-[60px] leading-[72px];}.avatar-profile{@apply font-medium text-[#6B7080];}.avatar-profile.sm{@apply size-[72px] text-sm;}.avatar-profile.md{@apply size-[96px] text-base;}.avatar-profile.lg{@apply size-[120px] text-[18px] leading-[26px];}.avatar-profile.xl{@apply size-[160px] text-xl;}.avatar-profile.sm .placeholder-icon{@apply size-[28px];}.avatar-profile.md .placeholder-icon{@apply size-[42px];}.avatar-profile.lg .placeholder-icon{@apply size-[52px];}.avatar-profile.xl .placeholder-icon{@apply size-[65px];}.avatar-profile.corrupted{@apply border-[3px] border-[#E7000B];}.avatar-profile .corrupted-icon{@apply text-[#E7000B];}.avatar-profile.sm .corrupted-icon{@apply size-[28px];}.avatar-profile.md .corrupted-icon{@apply size-[42px];}.avatar-profile.lg .corrupted-icon{@apply size-[52px];}.avatar-profile.xl .corrupted-icon{@apply size-[65px];}.remove-badge{@apply absolute top-0 right-0 w-5 h-5 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-gray-50 transition z-20 border-0 p-0;}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipAutoHeight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatarUploader, decorators: [{
             type: Component,
@@ -7557,7 +7763,7 @@ class BkAvatar {
                 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], 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", "bkTooltipAutoHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatar, decorators: [{
             type: Component,
@@ -8040,7 +8246,7 @@ class BkFileCard {
         this.remove.emit(this.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFileCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkFileCard, isStandalone: true, selector: "bk-file-card", inputs: { id: "id", state: "state", fileName: "fileName", fileSize: "fileSize", progress: "progress", errorMessage: "errorMessage" }, outputs: { remove: "remove" }, ngImport: i0, template: "\r\n  <div\r\n    class=\"file-uploader\"\r\n    [ngClass]=\"{\r\n      'file-uploader--uploading': state === 'uploading',\r\n      'file-uploader--uploaded': state === 'uploaded',\r\n      'file-uploader--failed': state === 'failed'\r\n    }\">\r\n    <!-- Icon Section -->\r\n    <div class=\"file-uploader__icon-container\">\r\n      <svg\r\n        width=\"48\"\r\n        height=\"48\"\r\n        viewBox=\"0 0 48 48\"\r\n        fill=\"none\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        class=\"file-uploader__icon\">\r\n        <rect\r\n          x=\"3.57007\"\r\n          y=\"3.56995\"\r\n          width=\"40\"\r\n          height=\"40\"\r\n          rx=\"20\"\r\n          [attr.fill]=\"state === 'uploading' ? '#C7E2FF' : state === 'uploaded' ? '#C7E2FF' : '#FECACA'\"/>\r\n        <rect\r\n          x=\"3.57007\"\r\n          y=\"3.56995\"\r\n          width=\"40\"\r\n          height=\"40\"\r\n          rx=\"20\"\r\n          [attr.stroke]=\"state === 'uploading' ? '#E5F3FF' : state === 'uploaded' ? '#E5F3FF' : '#FEE2E2'\"\r\n          stroke-width=\"7.14\"/>\r\n        <g clip-path=\"url(#clip0_1_149094)\">\r\n          <path\r\n            d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\r\n            [attr.stroke]=\"state === 'uploading' ? '#1434CB' : state === 'uploaded' ? '#1434CB' : '#EF4444'\"\r\n            stroke-width=\"1.66667\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"/>\r\n        </g>\r\n        <defs>\r\n          <clipPath id=\"clip0_1_149094\">\r\n            <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\r\n          </clipPath>\r\n        </defs>\r\n      </svg>\r\n    </div>\r\n\r\n    <!-- Content Section -->\r\n    <div class=\"file-uploader__content\">\r\n      <!-- Row 1: File Info + Delete -->\r\n      <div class=\"file-uploader__row-1\">\r\n        <div class=\"file-uploader__file-info\">\r\n          <!-- Uploading State -->\r\n\r\n          @if (state === 'uploading' || state === 'uploaded') {\r\n            <ng-container>\r\n              <span class=\"file-uploader__file-name\">{{ fileName }}</span>\r\n              <span class=\"file-uploader__file-size\">{{ fileSize }}</span>\r\n            </ng-container>\r\n          }\r\n\r\n          @if(state === 'failed'){\r\n            <!-- Failed State -->\r\n            <ng-container>\r\n              <p class=\"file-uploader__error-message\">{{ errorMessage }}</p>\r\n              <span class=\"file-uploader__file-name file-uploader__file-name--failed\">{{ fileName }}</span>\r\n              <p class=\"file-uploader__error-message\">Try again</p>\r\n            </ng-container>\r\n          }\r\n        </div>\r\n        <img\r\n          src=\"../../assets/icons/bin-gray.svg\"\r\n          alt=\"Delete\"\r\n          bkTooltip=\"Delete\"\r\n          bkTooltipPosition=\"left\"\r\n          class=\"file-uploader__delete-icon\"\r\n          (click)=\"onRemove()\"\r\n          >\r\n      </div>\r\n\r\n      <!-- Row 2: Progress Bar + Percentage -->\r\n      <div class=\"file-uploader__row-2\">\r\n        @if (state === 'uploading') {\r\n           <!-- Uploading State -->\r\n           <ng-container>\r\n             <div class=\"file-uploader__progress-bar\">\r\n               <div\r\n                 class=\"file-uploader__progress-fill\"\r\n                 [style.width.%]=\"progress\"></div>\r\n             </div>\r\n             <span class=\"file-uploader__progress-text\">{{ progress }}%</span>\r\n           </ng-container>\r\n         }\r\n         @if(state === 'uploaded'){\r\n           <!-- Uploaded State -->\r\n           <ng-container>\r\n             <div class=\"file-uploader__progress-bar\">\r\n               <div class=\"file-uploader__progress-fill file-uploader__progress-fill--complete\"></div>\r\n             </div>\r\n       <img src=\"../../assets/icons/check-green.svg\" alt=\"\" class=\"file-uploader__checkmark\">\r\n           </ng-container>\r\n         }\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n", styles: [".file-uploader{@apply p-4 flex gap-4 border rounded-lg border-transparent bg-[white];}.file-uploader--uploading{@apply border-[#EFEFF1];}.file-uploader--uploaded{@apply border-[#1434CB];}.file-uploader--failed{@apply border-[#FDA4A8] bg-[#FFF1F1];}.file-uploader__icon-container,.file-uploader__icon{@apply flex-shrink-0;}.file-uploader__content{@apply flex flex-col flex-1 gap-0;}.file-uploader__row-1{@apply flex items-start justify-between;}.file-uploader__file-info{@apply flex flex-col;}.file-uploader__file-name{@apply font-medium text-sm text-[#1B223A];}.file-uploader__file-name--failed{@apply text-[#B41E32] font-normal mb-1;}.file-uploader__file-size{@apply text-[#1B223A] font-normal text-sm;}.file-uploader__row-2{@apply flex justify-between items-center gap-3 mt-1;}.file-uploader--failed .file-uploader__row-2{@apply mt-0;}.file-uploader__progress-bar{@apply flex-1 h-2 bg-[#EFEFF1] rounded-full overflow-hidden;}.file-uploader__progress-fill{@apply h-full bg-[#1336EF] transition-all duration-300 rounded-full;}.file-uploader__progress-fill--complete{@apply bg-[#22973F];}.file-uploader__progress-text{@apply text-sm text-[#6B7080] font-medium;}.file-uploader__checkmark{@apply flex-shrink-0 size-[14px];}.file-uploader__error-message{@apply text-[#B41E32] font-medium text-sm;}.file-uploader__delete-icon{@apply flex-shrink-0 cursor-pointer size-5;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkFileCard, isStandalone: true, selector: "bk-file-card", inputs: { id: "id", state: "state", fileName: "fileName", fileSize: "fileSize", progress: "progress", errorMessage: "errorMessage" }, outputs: { remove: "remove" }, ngImport: i0, template: "\r\n  <div\r\n    class=\"file-uploader\"\r\n    [ngClass]=\"{\r\n      'file-uploader--uploading': state === 'uploading',\r\n      'file-uploader--uploaded': state === 'uploaded',\r\n      'file-uploader--failed': state === 'failed'\r\n    }\">\r\n    <!-- Icon Section -->\r\n    <div class=\"file-uploader__icon-container\">\r\n      <svg\r\n        width=\"48\"\r\n        height=\"48\"\r\n        viewBox=\"0 0 48 48\"\r\n        fill=\"none\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        class=\"file-uploader__icon\">\r\n        <rect\r\n          x=\"3.57007\"\r\n          y=\"3.56995\"\r\n          width=\"40\"\r\n          height=\"40\"\r\n          rx=\"20\"\r\n          [attr.fill]=\"state === 'uploading' ? '#C7E2FF' : state === 'uploaded' ? '#C7E2FF' : '#FECACA'\"/>\r\n        <rect\r\n          x=\"3.57007\"\r\n          y=\"3.56995\"\r\n          width=\"40\"\r\n          height=\"40\"\r\n          rx=\"20\"\r\n          [attr.stroke]=\"state === 'uploading' ? '#E5F3FF' : state === 'uploaded' ? '#E5F3FF' : '#FEE2E2'\"\r\n          stroke-width=\"7.14\"/>\r\n        <g clip-path=\"url(#clip0_1_149094)\">\r\n          <path\r\n            d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\r\n            [attr.stroke]=\"state === 'uploading' ? '#1434CB' : state === 'uploaded' ? '#1434CB' : '#EF4444'\"\r\n            stroke-width=\"1.66667\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"/>\r\n        </g>\r\n        <defs>\r\n          <clipPath id=\"clip0_1_149094\">\r\n            <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\r\n          </clipPath>\r\n        </defs>\r\n      </svg>\r\n    </div>\r\n\r\n    <!-- Content Section -->\r\n    <div class=\"file-uploader__content\">\r\n      <!-- Row 1: File Info + Delete -->\r\n      <div class=\"file-uploader__row-1\">\r\n        <div class=\"file-uploader__file-info\">\r\n          <!-- Uploading State -->\r\n\r\n          @if (state === 'uploading' || state === 'uploaded') {\r\n            <ng-container>\r\n              <span class=\"file-uploader__file-name\">{{ fileName }}</span>\r\n              <span class=\"file-uploader__file-size\">{{ fileSize }}</span>\r\n            </ng-container>\r\n          }\r\n\r\n          @if(state === 'failed'){\r\n            <!-- Failed State -->\r\n            <ng-container>\r\n              <p class=\"file-uploader__error-message\">{{ errorMessage }}</p>\r\n              <span class=\"file-uploader__file-name file-uploader__file-name--failed\">{{ fileName }}</span>\r\n              <p class=\"file-uploader__error-message\">Try again</p>\r\n            </ng-container>\r\n          }\r\n        </div>\r\n        <img\r\n          src=\"../../assets/icons/bin-gray.svg\"\r\n          alt=\"Delete\"\r\n          bkTooltip=\"Delete\"\r\n          bkTooltipPosition=\"left\"\r\n          class=\"file-uploader__delete-icon\"\r\n          (click)=\"onRemove()\"\r\n          >\r\n      </div>\r\n\r\n      <!-- Row 2: Progress Bar + Percentage -->\r\n      <div class=\"file-uploader__row-2\">\r\n        @if (state === 'uploading') {\r\n           <!-- Uploading State -->\r\n           <ng-container>\r\n             <div class=\"file-uploader__progress-bar\">\r\n               <div\r\n                 class=\"file-uploader__progress-fill\"\r\n                 [style.width.%]=\"progress\"></div>\r\n             </div>\r\n             <span class=\"file-uploader__progress-text\">{{ progress }}%</span>\r\n           </ng-container>\r\n         }\r\n         @if(state === 'uploaded'){\r\n           <!-- Uploaded State -->\r\n           <ng-container>\r\n             <div class=\"file-uploader__progress-bar\">\r\n               <div class=\"file-uploader__progress-fill file-uploader__progress-fill--complete\"></div>\r\n             </div>\r\n       <img src=\"../../assets/icons/check-green.svg\" alt=\"\" class=\"file-uploader__checkmark\">\r\n           </ng-container>\r\n         }\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n", styles: [".file-uploader{@apply p-4 flex gap-4 border rounded-lg border-transparent bg-[white];}.file-uploader--uploading{@apply border-[#EFEFF1];}.file-uploader--uploaded{@apply border-[#1434CB];}.file-uploader--failed{@apply border-[#FDA4A8] bg-[#FFF1F1];}.file-uploader__icon-container,.file-uploader__icon{@apply flex-shrink-0;}.file-uploader__content{@apply flex flex-col flex-1 gap-0;}.file-uploader__row-1{@apply flex items-start justify-between;}.file-uploader__file-info{@apply flex flex-col;}.file-uploader__file-name{@apply font-medium text-sm text-[#1B223A];}.file-uploader__file-name--failed{@apply text-[#B41E32] font-normal mb-1;}.file-uploader__file-size{@apply text-[#1B223A] font-normal text-sm;}.file-uploader__row-2{@apply flex justify-between items-center gap-3 mt-1;}.file-uploader--failed .file-uploader__row-2{@apply mt-0;}.file-uploader__progress-bar{@apply flex-1 h-2 bg-[#EFEFF1] rounded-full overflow-hidden;}.file-uploader__progress-fill{@apply h-full bg-[#1336EF] transition-all duration-300 rounded-full;}.file-uploader__progress-fill--complete{@apply bg-[#22973F];}.file-uploader__progress-text{@apply text-sm text-[#6B7080] font-medium;}.file-uploader__checkmark{@apply flex-shrink-0 size-[14px];}.file-uploader__error-message{@apply text-[#B41E32] font-medium text-sm;}.file-uploader__delete-icon{@apply flex-shrink-0 cursor-pointer size-5;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipAutoHeight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFileCard, decorators: [{
             type: Component,