@brickclay-org/ui 0.1.89 → 0.1.91

package/fesm2022/brickclay-org-ui.mjs

@@ -4028,7 +4028,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 }, { propertyName: "calendarOverlay", first: true, predicate: ["calendarOverlay"], 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 + its CDK overlay share one *ngIf=\"!inline\" scope so the origin's template ref\r\n       (#calendarOrigin) is visible to the overlay template below \u2014 a ref declared inside one *ngIf\r\n       embedded view isn't visible from a different (even identically-conditioned) *ngIf. -->\r\n  <ng-container *ngIf=\"!inline\">\r\n    <div #inputWrapper cdkOverlayOrigin #calendarOrigin=\"cdkOverlayOrigin\" class=\"input-wrapper\">\r\n      <input\r\n        type=\"text\"\r\n        (mousedown)=\"onTriggerMouseDown($event)\"\r\n        (focus)=\"onTriggerFocus()\"\r\n        (keydown.enter)=\"onTriggerKeydownOpen($event)\"\r\n        (keydown.space)=\"onTriggerKeydownOpen($event)\"\r\n        (keydown.arrowDown)=\"onTriggerKeydownOpen($event)\"\r\n        (blur)=\"onTriggerBlur()\"\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    <!-- Positioned via Angular CDK Overlay, portalled into the shared cdk-overlay-container so it\r\n         escapes clipping/stacking inside dialogs and scroll containers regardless of the old\r\n         appendToBody flag (see its @deprecated note in the component). -->\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      #calendarOverlay=\"cdkConnectedOverlay\"\r\n      [cdkConnectedOverlayOrigin]=\"calendarOrigin\"\r\n      [cdkConnectedOverlayOpen]=\"show\"\r\n      [cdkConnectedOverlayPositions]=\"calendarPositions\"\r\n      [cdkConnectedOverlayPush]=\"true\"\r\n      [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\r\n      [cdkConnectedOverlayPanelClass]=\"panelClass\"\r\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n      (positionChange)=\"onPositionChange($event)\"\r\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n      (detach)=\"close()\">\r\n      <div #calendarPopup\r\n           class=\"calendar-popup\"\r\n           tabindex=\"0\"\r\n           (keydown)=\"onCalendarPopupKeydown($event)\"\r\n           (wheel)=\"onCalendarPopupWheel($event)\"\r\n           [ngClass]=\"{\r\n             'drop-up': popupPlacementAbove,\r\n             'has-ranges': showRanges && customRanges,\r\n             'dual-calendar-mode': dualCalendar,\r\n             'compact': compact\r\n           }\">\r\n        <ng-container *ngTemplateOutlet=\"popupContent\"></ng-container>\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n\r\n  <!-- Popup content \u2014 written once, projected into whichever render path below is active -->\r\n  <ng-template #popupContent>\r\n    <!-- RANGES: date-range shortcuts don't apply once selection is restricted to a month/year. -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges && pickerView === 'day'\" 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 && pickerView === 'day' ? 'w-100 flex-grow-1 border-l border-[#eee]' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n\r\n      <!-- DAY GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'days'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevYear()\" [disabled]=\"isPrevYearDisabled(year)\" title=\"Prev year\">\r\n          <img alt=\"prev year\"  [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" title=\"Prev month\">\r\n          <img alt=\"prev\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n        </button>\r\n        <span class=\"month-year\">\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openMonthView()\" [disabled]=\"disabled\">{{ getMonthName(month) }}</button>\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openYearView()\" [disabled]=\"disabled\">{{ year }}</button>\r\n        </span>\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" title=\"Next month\">\r\n          <img alt=\"next\" [src]='brickclayIcons.arrowRight'/>\r\n        </button>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextYear()\" [disabled]=\"isNextYearDisabled(year)\" title=\"Next year\">\r\n          <img alt=\"next year\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- MONTH GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'months'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevMonthGridYear()\" [disabled]=\"isPrevYearDisabled(year)\" title=\"Prev year\">\r\n          <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <span class=\"month-year\">\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openYearView()\" [disabled]=\"disabled\">{{ year }}</button>\r\n        </span>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextMonthGridYear()\" [disabled]=\"isNextYearDisabled(year)\" title=\"Next year\">\r\n          <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- YEAR GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'years'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevYearRange()\" title=\"Prev years\">\r\n          <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <span class=\"month-year\">{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextYearRange()\" title=\"Next years\">\r\n          <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\" *ngIf=\"view === 'days'\" 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      <!-- MONTH GRID -->\r\n      <div class=\"bk-grid-picker\" *ngIf=\"view === 'months'\">\r\n        <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + year\">\r\n          <button\r\n            *ngFor=\"let m of monthNamesShort; let i = index\"\r\n            type=\"button\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"i === month\"\r\n            [class.active]=\"i === month\"\r\n            [class.current]=\"isCurrentMonth(i, year)\"\r\n            [disabled]=\"isMonthDisabled(i, year)\"\r\n            (click)=\"selectMonthFromGrid(i)\"\r\n            class=\"bk-month-cell\">\r\n            {{ m }}\r\n          </button>\r\n        </div>\r\n        <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n      </div>\r\n\r\n      <!-- YEAR GRID -->\r\n      <div class=\"bk-grid-picker\" *ngIf=\"view === 'years'\">\r\n        <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n          <button\r\n            *ngFor=\"let y of getYearGridYears(yearRangeStart)\"\r\n            type=\"button\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"y === year\"\r\n            [class.active]=\"y === year\"\r\n            [class.current]=\"isCurrentYear(y)\"\r\n            [disabled]=\"isYearDisabled(y)\"\r\n            (click)=\"selectYearFromGrid(y)\"\r\n            class=\"bk-year-cell\">\r\n            {{ y }}\r\n          </button>\r\n        </div>\r\n        <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n      </div>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker && view === 'days'\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [variation]=\"compact ? 'default' : 'lg'\"\r\n            [timeFormat]=\"timeFormat\"\r\n            [clearable]=\"clearableTime\"\r\n            [label]=\"''\"\r\n            [ngModel]=\"singleTimeModel\"\r\n            (ngModelChange)=\"onSingleTimePickerChange($event); singleTimeModel=$event\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\" *ngIf=\"leftView === 'days'\">\r\n          <button (click)=\"prevLeftYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isPrevYearDisabled(leftYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\" title=\"Prev month\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftMonthView()\" [disabled]=\"disabled\">{{ getMonthName(leftMonth) }}</button>\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftYearView()\" [disabled]=\"disabled\">{{ leftYear }}</button>\r\n          </span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\" title=\"Next month\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n          <button (click)=\"nextLeftYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isNextYearDisabled(leftYear)\" title=\"Next year\">\r\n            <img alt=\"next year\" class=\"arrow-right\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- MONTH GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"leftView === 'months'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevLeftMonthGridYear()\" [disabled]=\"isPrevYearDisabled(leftYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftYearView()\" [disabled]=\"disabled\">{{ leftYear }}</button>\r\n          </span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextLeftMonthGridYear()\" [disabled]=\"isNextYearDisabled(leftYear)\" title=\"Next year\">\r\n            <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"leftView === 'years'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevLeftYearRange()\" title=\"Prev years\">\r\n            <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ leftYearRangeStart }} - {{ leftYearRangeStart + 11 }}</span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextLeftYearRange()\" title=\"Next years\">\r\n            <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <table class=\"calendar-table\" *ngIf=\"leftView === 'days'\" 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        <!-- MONTH GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"leftView === 'months'\">\r\n          <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + leftYear\">\r\n            <button\r\n              *ngFor=\"let m of monthNamesShort; let i = index\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"i === leftMonth\"\r\n              [class.active]=\"i === leftMonth\"\r\n              [class.current]=\"isCurrentMonth(i, leftYear)\"\r\n              [disabled]=\"isMonthDisabled(i, leftYear)\"\r\n              (click)=\"selectLeftMonthFromGrid(i)\"\r\n              class=\"bk-month-cell\">\r\n              {{ m }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToLeftToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"leftView === 'years'\">\r\n          <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n            <button\r\n              *ngFor=\"let y of getYearGridYears(leftYearRangeStart)\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"y === leftYear\"\r\n              [class.active]=\"y === leftYear\"\r\n              [class.current]=\"isCurrentYear(y)\"\r\n              [disabled]=\"isYearDisabled(y)\"\r\n              (click)=\"selectLeftYearFromGrid(y)\"\r\n              class=\"bk-year-cell\">\r\n              {{ y }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToLeftToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker && leftView === 'days'\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"startTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, true); startTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\" *ngIf=\"rightView === 'days'\">\r\n          <button (click)=\"prevRightYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isPrevYearDisabled(rightYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\" title=\"Prev month\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightMonthView()\" [disabled]=\"disabled\">{{ getMonthName(rightMonth) }}</button>\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightYearView()\" [disabled]=\"disabled\">{{ rightYear }}</button>\r\n          </span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\" title=\"Next month\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n          <button (click)=\"nextRightYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isNextYearDisabled(rightYear)\" title=\"Next year\">\r\n            <img alt=\"next year\" class=\"arrow-right\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- MONTH GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"rightView === 'months'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevRightMonthGridYear()\" [disabled]=\"isPrevYearDisabled(rightYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightYearView()\" [disabled]=\"disabled\">{{ rightYear }}</button>\r\n          </span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextRightMonthGridYear()\" [disabled]=\"isNextYearDisabled(rightYear)\" title=\"Next year\">\r\n            <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"rightView === 'years'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevRightYearRange()\" title=\"Prev years\">\r\n            <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ rightYearRangeStart }} - {{ rightYearRangeStart + 11 }}</span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextRightYearRange()\" title=\"Next years\">\r\n            <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <table class=\"calendar-table\" *ngIf=\"rightView === 'days'\" 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        <!-- MONTH GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"rightView === 'months'\">\r\n          <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + rightYear\">\r\n            <button\r\n              *ngFor=\"let m of monthNamesShort; let i = index\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"i === rightMonth\"\r\n              [class.active]=\"i === rightMonth\"\r\n              [class.current]=\"isCurrentMonth(i, rightYear)\"\r\n              [disabled]=\"isMonthDisabled(i, rightYear)\"\r\n              (click)=\"selectRightMonthFromGrid(i)\"\r\n              class=\"bk-month-cell\">\r\n              {{ m }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToRightToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"rightView === 'years'\">\r\n          <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n            <button\r\n              *ngFor=\"let y of getYearGridYears(rightYearRangeStart)\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"y === rightYear\"\r\n              [class.active]=\"y === rightYear\"\r\n              [class.current]=\"isCurrentYear(y)\"\r\n              [disabled]=\"isYearDisabled(y)\"\r\n              (click)=\"selectRightYearFromGrid(y)\"\r\n              class=\"bk-year-cell\">\r\n              {{ y }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToRightToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker && rightView === 'days'\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"endTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, false); endTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER: month/year-only selection commits on click (like autoApply) \u2014 no Apply/Cancel to show. -->\r\n    <div class=\"footer\" *ngIf=\"!inline && showCancelApply && pickerView === 'day'\">\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  </ng-template>\r\n\r\n  <!-- INLINE: rendered directly in normal flow, no overlay -->\r\n  <div #calendarPopup\r\n       *ngIf=\"inline\"\r\n       class=\"calendar-popup inline-calendar\"\r\n       tabindex=\"0\"\r\n       (keydown)=\"onCalendarPopupKeydown($event)\"\r\n       [ngClass]=\"{\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar,\r\n         'compact': compact\r\n       }\">\r\n    <ng-container *ngTemplateOutlet=\"popupContent\"></ng-container>\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{width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out;font-family:Inter,sans-serif;scrollbar-width:thin;scrollbar-color:#c1c1c1 transparent}.calendar-popup::-webkit-scrollbar{width:6px}.calendar-popup::-webkit-scrollbar-track{background:transparent}.calendar-popup::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.calendar-popup::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.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.drop-up{animation:slideUp .2s ease-out}@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;scrollbar-width:thin;scrollbar-color:#888 #f1f1f1}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0;min-height:54px;box-sizing:border-box}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;text-transform:capitalize}.bk-month-year-btn{@apply bg-transparent border-0 rounded py-1 px-1 cursor-pointer transition-all duration-200;font:inherit;color:inherit;text-transform:inherit}.bk-month-year-btn:hover:not(:disabled){@apply text-black;}.bk-month-year-btn:disabled{@apply cursor-not-allowed text-[#ccc] opacity-50;}.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{max-width:none!important}.nav-btn:disabled{cursor:not-allowed;opacity:.35;pointer-events:none}.bk-grid-picker{@apply flex flex-col box-border h-[256px];}.bk-month-grid,.bk-year-grid{@apply grid grid-cols-3 auto-rows-min shrink-0 gap-[18px];}.bk-today-btn{@apply shrink-0 w-full p-2 mt-2 border border-[#eee] rounded-md bg-transparent text-[#333] text-[13px] font-medium cursor-pointer transition-all duration-200;}.bk-today-btn:hover:not(:disabled){@apply bg-[#efefef] text-black;}.bk-today-btn:disabled{@apply text-[#ddd] cursor-not-allowed opacity-50;}.bk-month-cell,.bk-year-cell{@apply flex items-center justify-center py-2.5 px-1 text-[13px] font-medium text-[#333] bg-transparent border-0 rounded-md cursor-pointer text-center transition-all duration-200;}.bk-month-cell:hover:not(:disabled):not(.active):not(.current),.bk-year-cell:hover:not(:disabled):not(.active):not(.current){@apply bg-[#efefef] text-black;}.bk-month-cell.active,.bk-year-cell.active{@apply bg-black text-white font-semibold;}.bk-month-cell.current:not(.active),.bk-year-cell.current:not(.active){@apply bg-[#e5e4e4] font-semibold;}.bk-month-cell:disabled,.bk-year-cell:disabled{@apply text-[#ddd] cursor-not-allowed opacity-50;}.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.today.disabled,.bk-month-cell.current:disabled,.bk-year-cell.current:disabled{color:#a9a9a9}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-apply{background:#000;color:#fff}.btn-apply:active{transform:translateY(0)}@media (max-width: 576px){.calendar-popup.dual-calendar-mode{max-width:300px}}@media (max-width: 768px){.dual-calendar{flex-direction:column}}@media (min-width: 577px) and (max-width: 1024px){.calendar-popup.dual-calendar-mode{max-width:500px}}@media (max-width: 1024px){.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}.time-input-group{flex-wrap:wrap;justify-content:center}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}.calendar-input.calendar-input-has-error{@apply border-[#d11e14];}.calendar-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.btn-apply:disabled{cursor:not-allowed!important;opacity:.7}.calendar-day.calendar-day-keyboard-focus:not(.disabled):not(.other-month){outline:0px solid #000}.calendar-popup.compact{width:240px}.calendar-popup.compact.has-ranges{width:380px}.calendar-popup.compact.dual-calendar-mode{width:480px}.calendar-popup.compact.dual-calendar-mode.has-ranges{width:600px}.calendar-popup.compact .header{padding:8px 0;min-height:40px}.calendar-popup.compact .month-year{font-size:13px}.calendar-popup.compact .nav-btn{height:24px;width:24px;padding:6px 8px}.calendar-popup.compact .calendar-wrapper,.calendar-popup.compact .calendar-left,.calendar-popup.compact .calendar-right{padding:0 8px 8px}.calendar-popup.compact .weekday-header{font-size:11px;padding:4px 2px}.calendar-popup.compact .calendar-day{font-size:12px;padding:5px 2px;line-height:1.3}.calendar-popup.compact .ranges{min-width:120px;gap:2px;margin-bottom:8px;padding-bottom:8px}.calendar-popup.compact.has-ranges .ranges{padding:6px}.calendar-popup.compact .range-btn{font-size:12px;padding:5px 8px}.calendar-popup.compact .timepicker-section{margin-top:8px;padding-top:8px}.calendar-popup.compact .timepicker-label{font-size:11px}.calendar-popup.compact .footer{padding:8px;gap:6px}.calendar-popup.compact .btn-cancel,.calendar-popup.compact .btn-apply{font-size:11px;padding:6px 12px;min-width:64px}.calendar-popup.compact .bk-month-year-btn{@apply text-[13px] py-px px-1;}.calendar-popup.compact .nav-btn img{width:12px;height:8px}.calendar-popup.compact .bk-nav-btn-year img{width:12px;height:12px}.calendar-popup.compact .bk-grid-picker{@apply h-[178px];@apply justify-center;}.calendar-popup.compact .bk-month-grid,.calendar-popup.compact .bk-year-grid{@apply gap-1;}.calendar-popup.compact .bk-month-cell,.calendar-popup.compact .bk-year-cell{@apply text-[11px] py-1.5 px-0.5;}.calendar-popup.compact .bk-today-btn{@apply text-[11px] p-[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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkTimePicker, selector: "bk-time-picker", inputs: ["required", "value", "label", "placeholder", "clearable", "position", "variation", "pickerId", "closePicker", "timeFormat", "showSeconds", "autoPosition", "appendToBody", "viewportMargin", "panelClass", "disabled"], outputs: ["change", "timeChange", "pickerOpened", "pickerClosed"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
+        ], viewQueries: [{ propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }, { propertyName: "calendarPopupRef", first: true, predicate: ["calendarPopup"], descendants: true }, { propertyName: "calendarOverlay", first: true, predicate: ["calendarOverlay"], 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 + its CDK overlay share one *ngIf=\"!inline\" scope so the origin's template ref\r\n       (#calendarOrigin) is visible to the overlay template below \u2014 a ref declared inside one *ngIf\r\n       embedded view isn't visible from a different (even identically-conditioned) *ngIf. -->\r\n  <ng-container *ngIf=\"!inline\">\r\n    <div #inputWrapper cdkOverlayOrigin #calendarOrigin=\"cdkOverlayOrigin\" class=\"input-wrapper\">\r\n      <input\r\n        type=\"text\"\r\n        (mousedown)=\"onTriggerMouseDown($event)\"\r\n        (focus)=\"onTriggerFocus()\"\r\n        (keydown.enter)=\"onTriggerKeydownOpen($event)\"\r\n        (keydown.space)=\"onTriggerKeydownOpen($event)\"\r\n        (keydown.arrowDown)=\"onTriggerKeydownOpen($event)\"\r\n        (blur)=\"onTriggerBlur()\"\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    <!-- Positioned via Angular CDK Overlay, portalled into the shared cdk-overlay-container so it\r\n         escapes clipping/stacking inside dialogs and scroll containers regardless of the old\r\n         appendToBody flag (see its @deprecated note in the component). -->\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      #calendarOverlay=\"cdkConnectedOverlay\"\r\n      [cdkConnectedOverlayOrigin]=\"calendarOrigin\"\r\n      [cdkConnectedOverlayOpen]=\"show\"\r\n      [cdkConnectedOverlayPositions]=\"calendarPositions\"\r\n      [cdkConnectedOverlayPush]=\"true\"\r\n      [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\r\n      [cdkConnectedOverlayPanelClass]=\"panelClass\"\r\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n      (positionChange)=\"onPositionChange($event)\"\r\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n      (detach)=\"close()\">\r\n      <div #calendarPopup\r\n           class=\"calendar-popup\"\r\n           tabindex=\"0\"\r\n           (keydown)=\"onCalendarPopupKeydown($event)\"\r\n           (wheel)=\"onCalendarPopupWheel($event)\"\r\n           [ngClass]=\"{\r\n             'drop-up': popupPlacementAbove,\r\n             'has-ranges': showRanges && customRanges,\r\n             'dual-calendar-mode': dualCalendar,\r\n             'compact': compact\r\n           }\">\r\n        <ng-container *ngTemplateOutlet=\"popupContent\"></ng-container>\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n\r\n  <!-- Popup content \u2014 written once, projected into whichever render path below is active -->\r\n  <ng-template #popupContent>\r\n    <!-- RANGES: date-range shortcuts don't apply once selection is restricted to a month/year. -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges && pickerView === 'day'\" 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 && pickerView === 'day' ? 'w-100 flex-grow-1 border-l border-[#eee]' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n\r\n      <!-- DAY GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'days'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevYear()\" [disabled]=\"isPrevYearDisabled(year)\" title=\"Prev year\">\r\n          <img alt=\"prev year\"  [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" title=\"Prev month\">\r\n          <img alt=\"prev\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n        </button>\r\n        <span class=\"month-year\">\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openMonthView()\" [disabled]=\"disabled\">{{ getMonthName(month) }}</button>\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openYearView()\" [disabled]=\"disabled\">{{ year }}</button>\r\n        </span>\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" title=\"Next month\">\r\n          <img alt=\"next\" [src]='brickclayIcons.arrowRight'/>\r\n        </button>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextYear()\" [disabled]=\"isNextYearDisabled(year)\" title=\"Next year\">\r\n          <img alt=\"next year\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- MONTH GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'months'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevMonthGridYear()\" [disabled]=\"isPrevYearDisabled(year)\" title=\"Prev year\">\r\n          <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <span class=\"month-year\">\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openYearView()\" [disabled]=\"disabled\">{{ year }}</button>\r\n        </span>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextMonthGridYear()\" [disabled]=\"isNextYearDisabled(year)\" title=\"Next year\">\r\n          <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- YEAR GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'years'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevYearRange()\" title=\"Prev years\">\r\n          <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <span class=\"month-year\">{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextYearRange()\" title=\"Next years\">\r\n          <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\" *ngIf=\"view === 'days'\" 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      <!-- MONTH GRID -->\r\n      <div class=\"bk-grid-picker\" *ngIf=\"view === 'months'\">\r\n        <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + year\">\r\n          <button\r\n            *ngFor=\"let m of monthNamesShort; let i = index\"\r\n            type=\"button\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"i === month\"\r\n            [class.active]=\"i === month\"\r\n            [class.current]=\"isCurrentMonth(i, year)\"\r\n            [disabled]=\"isMonthDisabled(i, year)\"\r\n            (click)=\"selectMonthFromGrid(i)\"\r\n            class=\"bk-month-cell\">\r\n            {{ m }}\r\n          </button>\r\n        </div>\r\n        <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n      </div>\r\n\r\n      <!-- YEAR GRID -->\r\n      <div class=\"bk-grid-picker\" *ngIf=\"view === 'years'\">\r\n        <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n          <button\r\n            *ngFor=\"let y of getYearGridYears(yearRangeStart)\"\r\n            type=\"button\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"y === year\"\r\n            [class.active]=\"y === year\"\r\n            [class.current]=\"isCurrentYear(y)\"\r\n            [disabled]=\"isYearDisabled(y)\"\r\n            (click)=\"selectYearFromGrid(y)\"\r\n            class=\"bk-year-cell\">\r\n            {{ y }}\r\n          </button>\r\n        </div>\r\n        <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n      </div>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker && view === 'days'\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [variation]=\"compact ? 'default' : 'lg'\"\r\n            [timeFormat]=\"timeFormat\"\r\n            [clearable]=\"clearableTime\"\r\n            [label]=\"''\"\r\n            [ngModel]=\"singleTimeModel\"\r\n            (ngModelChange)=\"onSingleTimePickerChange($event); singleTimeModel=$event\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\" *ngIf=\"leftView === 'days'\">\r\n          <button (click)=\"prevLeftYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isPrevYearDisabled(leftYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\" title=\"Prev month\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftMonthView()\" [disabled]=\"disabled\">{{ getMonthName(leftMonth) }}</button>\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftYearView()\" [disabled]=\"disabled\">{{ leftYear }}</button>\r\n          </span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\" title=\"Next month\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n          <button (click)=\"nextLeftYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isNextYearDisabled(leftYear)\" title=\"Next year\">\r\n            <img alt=\"next year\" class=\"arrow-right\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- MONTH GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"leftView === 'months'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevLeftMonthGridYear()\" [disabled]=\"isPrevYearDisabled(leftYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftYearView()\" [disabled]=\"disabled\">{{ leftYear }}</button>\r\n          </span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextLeftMonthGridYear()\" [disabled]=\"isNextYearDisabled(leftYear)\" title=\"Next year\">\r\n            <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"leftView === 'years'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevLeftYearRange()\" title=\"Prev years\">\r\n            <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ leftYearRangeStart }} - {{ leftYearRangeStart + 11 }}</span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextLeftYearRange()\" title=\"Next years\">\r\n            <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <table class=\"calendar-table\" *ngIf=\"leftView === 'days'\" 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        <!-- MONTH GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"leftView === 'months'\">\r\n          <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + leftYear\">\r\n            <button\r\n              *ngFor=\"let m of monthNamesShort; let i = index\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"i === leftMonth\"\r\n              [class.active]=\"i === leftMonth\"\r\n              [class.current]=\"isCurrentMonth(i, leftYear)\"\r\n              [disabled]=\"isMonthDisabled(i, leftYear)\"\r\n              (click)=\"selectLeftMonthFromGrid(i)\"\r\n              class=\"bk-month-cell\">\r\n              {{ m }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToLeftToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"leftView === 'years'\">\r\n          <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n            <button\r\n              *ngFor=\"let y of getYearGridYears(leftYearRangeStart)\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"y === leftYear\"\r\n              [class.active]=\"y === leftYear\"\r\n              [class.current]=\"isCurrentYear(y)\"\r\n              [disabled]=\"isYearDisabled(y)\"\r\n              (click)=\"selectLeftYearFromGrid(y)\"\r\n              class=\"bk-year-cell\">\r\n              {{ y }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToLeftToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker && leftView === 'days'\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"startTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, true); startTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\" *ngIf=\"rightView === 'days'\">\r\n          <button (click)=\"prevRightYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isPrevYearDisabled(rightYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\" title=\"Prev month\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightMonthView()\" [disabled]=\"disabled\">{{ getMonthName(rightMonth) }}</button>\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightYearView()\" [disabled]=\"disabled\">{{ rightYear }}</button>\r\n          </span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\" title=\"Next month\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n          <button (click)=\"nextRightYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isNextYearDisabled(rightYear)\" title=\"Next year\">\r\n            <img alt=\"next year\" class=\"arrow-right\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- MONTH GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"rightView === 'months'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevRightMonthGridYear()\" [disabled]=\"isPrevYearDisabled(rightYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightYearView()\" [disabled]=\"disabled\">{{ rightYear }}</button>\r\n          </span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextRightMonthGridYear()\" [disabled]=\"isNextYearDisabled(rightYear)\" title=\"Next year\">\r\n            <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"rightView === 'years'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevRightYearRange()\" title=\"Prev years\">\r\n            <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ rightYearRangeStart }} - {{ rightYearRangeStart + 11 }}</span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextRightYearRange()\" title=\"Next years\">\r\n            <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <table class=\"calendar-table\" *ngIf=\"rightView === 'days'\" 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        <!-- MONTH GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"rightView === 'months'\">\r\n          <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + rightYear\">\r\n            <button\r\n              *ngFor=\"let m of monthNamesShort; let i = index\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"i === rightMonth\"\r\n              [class.active]=\"i === rightMonth\"\r\n              [class.current]=\"isCurrentMonth(i, rightYear)\"\r\n              [disabled]=\"isMonthDisabled(i, rightYear)\"\r\n              (click)=\"selectRightMonthFromGrid(i)\"\r\n              class=\"bk-month-cell\">\r\n              {{ m }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToRightToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"rightView === 'years'\">\r\n          <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n            <button\r\n              *ngFor=\"let y of getYearGridYears(rightYearRangeStart)\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"y === rightYear\"\r\n              [class.active]=\"y === rightYear\"\r\n              [class.current]=\"isCurrentYear(y)\"\r\n              [disabled]=\"isYearDisabled(y)\"\r\n              (click)=\"selectRightYearFromGrid(y)\"\r\n              class=\"bk-year-cell\">\r\n              {{ y }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToRightToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker && rightView === 'days'\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"endTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, false); endTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER: month/year-only selection commits on click (like autoApply) \u2014 no Apply/Cancel to show. -->\r\n    <div class=\"footer\" *ngIf=\"!inline && showCancelApply && pickerView === 'day'\">\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  </ng-template>\r\n\r\n  <!-- INLINE: rendered directly in normal flow, no overlay -->\r\n  <div #calendarPopup\r\n       *ngIf=\"inline\"\r\n       class=\"calendar-popup inline-calendar\"\r\n       tabindex=\"0\"\r\n       (keydown)=\"onCalendarPopupKeydown($event)\"\r\n       [ngClass]=\"{\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar,\r\n         'compact': compact\r\n       }\">\r\n    <ng-container *ngTemplateOutlet=\"popupContent\"></ng-container>\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{width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out;font-family:Inter,sans-serif;scrollbar-width:thin;scrollbar-color:#c1c1c1 transparent}.calendar-popup::-webkit-scrollbar{width:6px}.calendar-popup::-webkit-scrollbar-track{background:transparent}.calendar-popup::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.calendar-popup::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.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.drop-up{animation:slideUp .2s ease-out}@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;scrollbar-width:thin;scrollbar-color:#888 #f1f1f1}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0;min-height:54px;box-sizing:border-box}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;text-transform:capitalize}.bk-month-year-btn{@apply bg-transparent border-0 rounded py-1 px-1 cursor-pointer transition-all duration-200;font:inherit;color:inherit;text-transform:inherit}.bk-month-year-btn:hover:not(:disabled){@apply text-black;}.bk-month-year-btn:disabled{@apply cursor-not-allowed text-[#ccc] opacity-50;}.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{max-width:none!important}.nav-btn:disabled{cursor:not-allowed;opacity:.35;pointer-events:none}.bk-grid-picker{@apply flex flex-col box-border h-[256px];}.bk-month-grid,.bk-year-grid{@apply grid grid-cols-3 auto-rows-min shrink-0 gap-[18px];}.bk-today-btn{@apply shrink-0 w-full p-2 mt-2 border border-[#eee] rounded-md bg-transparent text-[#333] text-[13px] font-medium cursor-pointer transition-all duration-200;}.bk-today-btn:hover:not(:disabled){@apply bg-[#efefef] text-black;}.bk-today-btn:disabled{@apply text-[#ddd] cursor-not-allowed opacity-50;}.bk-month-cell,.bk-year-cell{@apply flex items-center justify-center py-2.5 px-1 text-[13px] font-medium text-[#333] bg-transparent border-0 rounded-md cursor-pointer text-center transition-all duration-200;}.bk-month-cell:hover:not(:disabled):not(.active):not(.current),.bk-year-cell:hover:not(:disabled):not(.active):not(.current){@apply bg-[#efefef] text-black;}.bk-month-cell.active,.bk-year-cell.active{@apply bg-black text-white font-semibold;}.bk-month-cell.current:not(.active),.bk-year-cell.current:not(.active){@apply bg-[#e5e4e4] font-semibold;}.bk-month-cell:disabled,.bk-year-cell:disabled{@apply text-[#ddd] cursor-not-allowed opacity-50;}.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.today.disabled,.bk-month-cell.current:disabled,.bk-year-cell.current:disabled{color:#a9a9a9}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.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: 576px){.calendar-popup.dual-calendar-mode{max-width:300px}}@media (max-width: 768px){.dual-calendar{flex-direction:column}}@media (min-width: 577px) and (max-width: 1024px){.calendar-popup.dual-calendar-mode{max-width:500px}}@media (max-width: 1024px){.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}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}.calendar-input.calendar-input-has-error{@apply border-[#d11e14];}.calendar-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.btn-apply:disabled{cursor:not-allowed!important;opacity:.7}.calendar-day.calendar-day-keyboard-focus:not(.disabled):not(.other-month){outline:0px solid #000}.calendar-popup.compact{width:240px}.calendar-popup.compact.has-ranges{width:380px}.calendar-popup.compact.dual-calendar-mode{width:480px}.calendar-popup.compact.dual-calendar-mode.has-ranges{width:600px}.calendar-popup.compact .header{padding:8px 0;min-height:40px}.calendar-popup.compact .month-year{font-size:13px}.calendar-popup.compact .nav-btn{height:24px;width:24px;padding:6px 8px}.calendar-popup.compact .calendar-wrapper,.calendar-popup.compact .calendar-left,.calendar-popup.compact .calendar-right{padding:0 8px 8px}.calendar-popup.compact .weekday-header{font-size:11px;padding:4px 2px}.calendar-popup.compact .calendar-day{font-size:12px;padding:5px 2px;line-height:1.3}.calendar-popup.compact .ranges{min-width:120px;gap:2px;margin-bottom:8px;padding-bottom:8px}.calendar-popup.compact.has-ranges .ranges{padding:6px}.calendar-popup.compact .range-btn{font-size:12px;padding:5px 8px}.calendar-popup.compact .timepicker-section{margin-top:8px;padding-top:8px}.calendar-popup.compact .timepicker-label{font-size:11px}.calendar-popup.compact .footer{padding:8px;gap:6px}.calendar-popup.compact .btn-cancel,.calendar-popup.compact .btn-apply{font-size:11px;padding:6px 12px;min-width:64px}.calendar-popup.compact .bk-month-year-btn{@apply text-[13px] py-px px-1;}.calendar-popup.compact .nav-btn img{width:12px;height:8px}.calendar-popup.compact .bk-nav-btn-year img{width:12px;height:12px}.calendar-popup.compact .bk-grid-picker{@apply h-[178px];@apply justify-center;}.calendar-popup.compact .bk-month-grid,.calendar-popup.compact .bk-year-grid{@apply gap-1;}.calendar-popup.compact .bk-month-cell,.calendar-popup.compact .bk-year-cell{@apply text-[11px] py-1.5 px-0.5;}.calendar-popup.compact .bk-today-btn{@apply text-[11px] p-[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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkTimePicker, selector: "bk-time-picker", inputs: ["required", "value", "label", "placeholder", "clearable", "position", "variation", "pickerId", "closePicker", "timeFormat", "showSeconds", "autoPosition", "appendToBody", "viewportMargin", "panelClass", "disabled"], outputs: ["change", "timeChange", "pickerOpened", "pickerClosed"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCustomCalendar, decorators: [{
             type: Component,
@@ -4043,7 +4043,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 + its CDK overlay share one *ngIf=\"!inline\" scope so the origin's template ref\r\n       (#calendarOrigin) is visible to the overlay template below \u2014 a ref declared inside one *ngIf\r\n       embedded view isn't visible from a different (even identically-conditioned) *ngIf. -->\r\n  <ng-container *ngIf=\"!inline\">\r\n    <div #inputWrapper cdkOverlayOrigin #calendarOrigin=\"cdkOverlayOrigin\" class=\"input-wrapper\">\r\n      <input\r\n        type=\"text\"\r\n        (mousedown)=\"onTriggerMouseDown($event)\"\r\n        (focus)=\"onTriggerFocus()\"\r\n        (keydown.enter)=\"onTriggerKeydownOpen($event)\"\r\n        (keydown.space)=\"onTriggerKeydownOpen($event)\"\r\n        (keydown.arrowDown)=\"onTriggerKeydownOpen($event)\"\r\n        (blur)=\"onTriggerBlur()\"\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    <!-- Positioned via Angular CDK Overlay, portalled into the shared cdk-overlay-container so it\r\n         escapes clipping/stacking inside dialogs and scroll containers regardless of the old\r\n         appendToBody flag (see its @deprecated note in the component). -->\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      #calendarOverlay=\"cdkConnectedOverlay\"\r\n      [cdkConnectedOverlayOrigin]=\"calendarOrigin\"\r\n      [cdkConnectedOverlayOpen]=\"show\"\r\n      [cdkConnectedOverlayPositions]=\"calendarPositions\"\r\n      [cdkConnectedOverlayPush]=\"true\"\r\n      [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\r\n      [cdkConnectedOverlayPanelClass]=\"panelClass\"\r\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n      (positionChange)=\"onPositionChange($event)\"\r\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n      (detach)=\"close()\">\r\n      <div #calendarPopup\r\n           class=\"calendar-popup\"\r\n           tabindex=\"0\"\r\n           (keydown)=\"onCalendarPopupKeydown($event)\"\r\n           (wheel)=\"onCalendarPopupWheel($event)\"\r\n           [ngClass]=\"{\r\n             'drop-up': popupPlacementAbove,\r\n             'has-ranges': showRanges && customRanges,\r\n             'dual-calendar-mode': dualCalendar,\r\n             'compact': compact\r\n           }\">\r\n        <ng-container *ngTemplateOutlet=\"popupContent\"></ng-container>\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n\r\n  <!-- Popup content \u2014 written once, projected into whichever render path below is active -->\r\n  <ng-template #popupContent>\r\n    <!-- RANGES: date-range shortcuts don't apply once selection is restricted to a month/year. -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges && pickerView === 'day'\" 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 && pickerView === 'day' ? 'w-100 flex-grow-1 border-l border-[#eee]' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n\r\n      <!-- DAY GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'days'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevYear()\" [disabled]=\"isPrevYearDisabled(year)\" title=\"Prev year\">\r\n          <img alt=\"prev year\"  [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" title=\"Prev month\">\r\n          <img alt=\"prev\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n        </button>\r\n        <span class=\"month-year\">\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openMonthView()\" [disabled]=\"disabled\">{{ getMonthName(month) }}</button>\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openYearView()\" [disabled]=\"disabled\">{{ year }}</button>\r\n        </span>\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" title=\"Next month\">\r\n          <img alt=\"next\" [src]='brickclayIcons.arrowRight'/>\r\n        </button>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextYear()\" [disabled]=\"isNextYearDisabled(year)\" title=\"Next year\">\r\n          <img alt=\"next year\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- MONTH GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'months'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevMonthGridYear()\" [disabled]=\"isPrevYearDisabled(year)\" title=\"Prev year\">\r\n          <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <span class=\"month-year\">\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openYearView()\" [disabled]=\"disabled\">{{ year }}</button>\r\n        </span>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextMonthGridYear()\" [disabled]=\"isNextYearDisabled(year)\" title=\"Next year\">\r\n          <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- YEAR GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'years'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevYearRange()\" title=\"Prev years\">\r\n          <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <span class=\"month-year\">{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextYearRange()\" title=\"Next years\">\r\n          <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\" *ngIf=\"view === 'days'\" 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      <!-- MONTH GRID -->\r\n      <div class=\"bk-grid-picker\" *ngIf=\"view === 'months'\">\r\n        <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + year\">\r\n          <button\r\n            *ngFor=\"let m of monthNamesShort; let i = index\"\r\n            type=\"button\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"i === month\"\r\n            [class.active]=\"i === month\"\r\n            [class.current]=\"isCurrentMonth(i, year)\"\r\n            [disabled]=\"isMonthDisabled(i, year)\"\r\n            (click)=\"selectMonthFromGrid(i)\"\r\n            class=\"bk-month-cell\">\r\n            {{ m }}\r\n          </button>\r\n        </div>\r\n        <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n      </div>\r\n\r\n      <!-- YEAR GRID -->\r\n      <div class=\"bk-grid-picker\" *ngIf=\"view === 'years'\">\r\n        <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n          <button\r\n            *ngFor=\"let y of getYearGridYears(yearRangeStart)\"\r\n            type=\"button\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"y === year\"\r\n            [class.active]=\"y === year\"\r\n            [class.current]=\"isCurrentYear(y)\"\r\n            [disabled]=\"isYearDisabled(y)\"\r\n            (click)=\"selectYearFromGrid(y)\"\r\n            class=\"bk-year-cell\">\r\n            {{ y }}\r\n          </button>\r\n        </div>\r\n        <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n      </div>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker && view === 'days'\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [variation]=\"compact ? 'default' : 'lg'\"\r\n            [timeFormat]=\"timeFormat\"\r\n            [clearable]=\"clearableTime\"\r\n            [label]=\"''\"\r\n            [ngModel]=\"singleTimeModel\"\r\n            (ngModelChange)=\"onSingleTimePickerChange($event); singleTimeModel=$event\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\" *ngIf=\"leftView === 'days'\">\r\n          <button (click)=\"prevLeftYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isPrevYearDisabled(leftYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\" title=\"Prev month\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftMonthView()\" [disabled]=\"disabled\">{{ getMonthName(leftMonth) }}</button>\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftYearView()\" [disabled]=\"disabled\">{{ leftYear }}</button>\r\n          </span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\" title=\"Next month\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n          <button (click)=\"nextLeftYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isNextYearDisabled(leftYear)\" title=\"Next year\">\r\n            <img alt=\"next year\" class=\"arrow-right\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- MONTH GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"leftView === 'months'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevLeftMonthGridYear()\" [disabled]=\"isPrevYearDisabled(leftYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftYearView()\" [disabled]=\"disabled\">{{ leftYear }}</button>\r\n          </span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextLeftMonthGridYear()\" [disabled]=\"isNextYearDisabled(leftYear)\" title=\"Next year\">\r\n            <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"leftView === 'years'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevLeftYearRange()\" title=\"Prev years\">\r\n            <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ leftYearRangeStart }} - {{ leftYearRangeStart + 11 }}</span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextLeftYearRange()\" title=\"Next years\">\r\n            <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <table class=\"calendar-table\" *ngIf=\"leftView === 'days'\" 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        <!-- MONTH GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"leftView === 'months'\">\r\n          <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + leftYear\">\r\n            <button\r\n              *ngFor=\"let m of monthNamesShort; let i = index\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"i === leftMonth\"\r\n              [class.active]=\"i === leftMonth\"\r\n              [class.current]=\"isCurrentMonth(i, leftYear)\"\r\n              [disabled]=\"isMonthDisabled(i, leftYear)\"\r\n              (click)=\"selectLeftMonthFromGrid(i)\"\r\n              class=\"bk-month-cell\">\r\n              {{ m }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToLeftToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"leftView === 'years'\">\r\n          <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n            <button\r\n              *ngFor=\"let y of getYearGridYears(leftYearRangeStart)\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"y === leftYear\"\r\n              [class.active]=\"y === leftYear\"\r\n              [class.current]=\"isCurrentYear(y)\"\r\n              [disabled]=\"isYearDisabled(y)\"\r\n              (click)=\"selectLeftYearFromGrid(y)\"\r\n              class=\"bk-year-cell\">\r\n              {{ y }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToLeftToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker && leftView === 'days'\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"startTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, true); startTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\" *ngIf=\"rightView === 'days'\">\r\n          <button (click)=\"prevRightYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isPrevYearDisabled(rightYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\" title=\"Prev month\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightMonthView()\" [disabled]=\"disabled\">{{ getMonthName(rightMonth) }}</button>\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightYearView()\" [disabled]=\"disabled\">{{ rightYear }}</button>\r\n          </span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\" title=\"Next month\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n          <button (click)=\"nextRightYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isNextYearDisabled(rightYear)\" title=\"Next year\">\r\n            <img alt=\"next year\" class=\"arrow-right\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- MONTH GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"rightView === 'months'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevRightMonthGridYear()\" [disabled]=\"isPrevYearDisabled(rightYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightYearView()\" [disabled]=\"disabled\">{{ rightYear }}</button>\r\n          </span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextRightMonthGridYear()\" [disabled]=\"isNextYearDisabled(rightYear)\" title=\"Next year\">\r\n            <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"rightView === 'years'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevRightYearRange()\" title=\"Prev years\">\r\n            <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ rightYearRangeStart }} - {{ rightYearRangeStart + 11 }}</span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextRightYearRange()\" title=\"Next years\">\r\n            <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <table class=\"calendar-table\" *ngIf=\"rightView === 'days'\" 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        <!-- MONTH GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"rightView === 'months'\">\r\n          <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + rightYear\">\r\n            <button\r\n              *ngFor=\"let m of monthNamesShort; let i = index\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"i === rightMonth\"\r\n              [class.active]=\"i === rightMonth\"\r\n              [class.current]=\"isCurrentMonth(i, rightYear)\"\r\n              [disabled]=\"isMonthDisabled(i, rightYear)\"\r\n              (click)=\"selectRightMonthFromGrid(i)\"\r\n              class=\"bk-month-cell\">\r\n              {{ m }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToRightToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"rightView === 'years'\">\r\n          <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n            <button\r\n              *ngFor=\"let y of getYearGridYears(rightYearRangeStart)\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"y === rightYear\"\r\n              [class.active]=\"y === rightYear\"\r\n              [class.current]=\"isCurrentYear(y)\"\r\n              [disabled]=\"isYearDisabled(y)\"\r\n              (click)=\"selectRightYearFromGrid(y)\"\r\n              class=\"bk-year-cell\">\r\n              {{ y }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToRightToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker && rightView === 'days'\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"endTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, false); endTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER: month/year-only selection commits on click (like autoApply) \u2014 no Apply/Cancel to show. -->\r\n    <div class=\"footer\" *ngIf=\"!inline && showCancelApply && pickerView === 'day'\">\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  </ng-template>\r\n\r\n  <!-- INLINE: rendered directly in normal flow, no overlay -->\r\n  <div #calendarPopup\r\n       *ngIf=\"inline\"\r\n       class=\"calendar-popup inline-calendar\"\r\n       tabindex=\"0\"\r\n       (keydown)=\"onCalendarPopupKeydown($event)\"\r\n       [ngClass]=\"{\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar,\r\n         'compact': compact\r\n       }\">\r\n    <ng-container *ngTemplateOutlet=\"popupContent\"></ng-container>\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{width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out;font-family:Inter,sans-serif;scrollbar-width:thin;scrollbar-color:#c1c1c1 transparent}.calendar-popup::-webkit-scrollbar{width:6px}.calendar-popup::-webkit-scrollbar-track{background:transparent}.calendar-popup::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.calendar-popup::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.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.drop-up{animation:slideUp .2s ease-out}@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;scrollbar-width:thin;scrollbar-color:#888 #f1f1f1}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0;min-height:54px;box-sizing:border-box}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;text-transform:capitalize}.bk-month-year-btn{@apply bg-transparent border-0 rounded py-1 px-1 cursor-pointer transition-all duration-200;font:inherit;color:inherit;text-transform:inherit}.bk-month-year-btn:hover:not(:disabled){@apply text-black;}.bk-month-year-btn:disabled{@apply cursor-not-allowed text-[#ccc] opacity-50;}.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{max-width:none!important}.nav-btn:disabled{cursor:not-allowed;opacity:.35;pointer-events:none}.bk-grid-picker{@apply flex flex-col box-border h-[256px];}.bk-month-grid,.bk-year-grid{@apply grid grid-cols-3 auto-rows-min shrink-0 gap-[18px];}.bk-today-btn{@apply shrink-0 w-full p-2 mt-2 border border-[#eee] rounded-md bg-transparent text-[#333] text-[13px] font-medium cursor-pointer transition-all duration-200;}.bk-today-btn:hover:not(:disabled){@apply bg-[#efefef] text-black;}.bk-today-btn:disabled{@apply text-[#ddd] cursor-not-allowed opacity-50;}.bk-month-cell,.bk-year-cell{@apply flex items-center justify-center py-2.5 px-1 text-[13px] font-medium text-[#333] bg-transparent border-0 rounded-md cursor-pointer text-center transition-all duration-200;}.bk-month-cell:hover:not(:disabled):not(.active):not(.current),.bk-year-cell:hover:not(:disabled):not(.active):not(.current){@apply bg-[#efefef] text-black;}.bk-month-cell.active,.bk-year-cell.active{@apply bg-black text-white font-semibold;}.bk-month-cell.current:not(.active),.bk-year-cell.current:not(.active){@apply bg-[#e5e4e4] font-semibold;}.bk-month-cell:disabled,.bk-year-cell:disabled{@apply text-[#ddd] cursor-not-allowed opacity-50;}.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.today.disabled,.bk-month-cell.current:disabled,.bk-year-cell.current:disabled{color:#a9a9a9}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-apply{background:#000;color:#fff}.btn-apply:active{transform:translateY(0)}@media (max-width: 576px){.calendar-popup.dual-calendar-mode{max-width:300px}}@media (max-width: 768px){.dual-calendar{flex-direction:column}}@media (min-width: 577px) and (max-width: 1024px){.calendar-popup.dual-calendar-mode{max-width:500px}}@media (max-width: 1024px){.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}.time-input-group{flex-wrap:wrap;justify-content:center}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}.calendar-input.calendar-input-has-error{@apply border-[#d11e14];}.calendar-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.btn-apply:disabled{cursor:not-allowed!important;opacity:.7}.calendar-day.calendar-day-keyboard-focus:not(.disabled):not(.other-month){outline:0px solid #000}.calendar-popup.compact{width:240px}.calendar-popup.compact.has-ranges{width:380px}.calendar-popup.compact.dual-calendar-mode{width:480px}.calendar-popup.compact.dual-calendar-mode.has-ranges{width:600px}.calendar-popup.compact .header{padding:8px 0;min-height:40px}.calendar-popup.compact .month-year{font-size:13px}.calendar-popup.compact .nav-btn{height:24px;width:24px;padding:6px 8px}.calendar-popup.compact .calendar-wrapper,.calendar-popup.compact .calendar-left,.calendar-popup.compact .calendar-right{padding:0 8px 8px}.calendar-popup.compact .weekday-header{font-size:11px;padding:4px 2px}.calendar-popup.compact .calendar-day{font-size:12px;padding:5px 2px;line-height:1.3}.calendar-popup.compact .ranges{min-width:120px;gap:2px;margin-bottom:8px;padding-bottom:8px}.calendar-popup.compact.has-ranges .ranges{padding:6px}.calendar-popup.compact .range-btn{font-size:12px;padding:5px 8px}.calendar-popup.compact .timepicker-section{margin-top:8px;padding-top:8px}.calendar-popup.compact .timepicker-label{font-size:11px}.calendar-popup.compact .footer{padding:8px;gap:6px}.calendar-popup.compact .btn-cancel,.calendar-popup.compact .btn-apply{font-size:11px;padding:6px 12px;min-width:64px}.calendar-popup.compact .bk-month-year-btn{@apply text-[13px] py-px px-1;}.calendar-popup.compact .nav-btn img{width:12px;height:8px}.calendar-popup.compact .bk-nav-btn-year img{width:12px;height:12px}.calendar-popup.compact .bk-grid-picker{@apply h-[178px];@apply justify-center;}.calendar-popup.compact .bk-month-grid,.calendar-popup.compact .bk-year-grid{@apply gap-1;}.calendar-popup.compact .bk-month-cell,.calendar-popup.compact .bk-year-cell{@apply text-[11px] py-1.5 px-0.5;}.calendar-popup.compact .bk-today-btn{@apply text-[11px] p-[5px];}\n"] }]
+                    ], template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\" [class.disabled]=\"disabled\">\r\n  <!-- Input field + its CDK overlay share one *ngIf=\"!inline\" scope so the origin's template ref\r\n       (#calendarOrigin) is visible to the overlay template below \u2014 a ref declared inside one *ngIf\r\n       embedded view isn't visible from a different (even identically-conditioned) *ngIf. -->\r\n  <ng-container *ngIf=\"!inline\">\r\n    <div #inputWrapper cdkOverlayOrigin #calendarOrigin=\"cdkOverlayOrigin\" class=\"input-wrapper\">\r\n      <input\r\n        type=\"text\"\r\n        (mousedown)=\"onTriggerMouseDown($event)\"\r\n        (focus)=\"onTriggerFocus()\"\r\n        (keydown.enter)=\"onTriggerKeydownOpen($event)\"\r\n        (keydown.space)=\"onTriggerKeydownOpen($event)\"\r\n        (keydown.arrowDown)=\"onTriggerKeydownOpen($event)\"\r\n        (blur)=\"onTriggerBlur()\"\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    <!-- Positioned via Angular CDK Overlay, portalled into the shared cdk-overlay-container so it\r\n         escapes clipping/stacking inside dialogs and scroll containers regardless of the old\r\n         appendToBody flag (see its @deprecated note in the component). -->\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      #calendarOverlay=\"cdkConnectedOverlay\"\r\n      [cdkConnectedOverlayOrigin]=\"calendarOrigin\"\r\n      [cdkConnectedOverlayOpen]=\"show\"\r\n      [cdkConnectedOverlayPositions]=\"calendarPositions\"\r\n      [cdkConnectedOverlayPush]=\"true\"\r\n      [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\r\n      [cdkConnectedOverlayPanelClass]=\"panelClass\"\r\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n      (positionChange)=\"onPositionChange($event)\"\r\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\r\n      (detach)=\"close()\">\r\n      <div #calendarPopup\r\n           class=\"calendar-popup\"\r\n           tabindex=\"0\"\r\n           (keydown)=\"onCalendarPopupKeydown($event)\"\r\n           (wheel)=\"onCalendarPopupWheel($event)\"\r\n           [ngClass]=\"{\r\n             'drop-up': popupPlacementAbove,\r\n             'has-ranges': showRanges && customRanges,\r\n             'dual-calendar-mode': dualCalendar,\r\n             'compact': compact\r\n           }\">\r\n        <ng-container *ngTemplateOutlet=\"popupContent\"></ng-container>\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n\r\n  <!-- Popup content \u2014 written once, projected into whichever render path below is active -->\r\n  <ng-template #popupContent>\r\n    <!-- RANGES: date-range shortcuts don't apply once selection is restricted to a month/year. -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges && pickerView === 'day'\" 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 && pickerView === 'day' ? 'w-100 flex-grow-1 border-l border-[#eee]' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n\r\n      <!-- DAY GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'days'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevYear()\" [disabled]=\"isPrevYearDisabled(year)\" title=\"Prev year\">\r\n          <img alt=\"prev year\"  [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" title=\"Prev month\">\r\n          <img alt=\"prev\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n        </button>\r\n        <span class=\"month-year\">\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openMonthView()\" [disabled]=\"disabled\">{{ getMonthName(month) }}</button>\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openYearView()\" [disabled]=\"disabled\">{{ year }}</button>\r\n        </span>\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" title=\"Next month\">\r\n          <img alt=\"next\" [src]='brickclayIcons.arrowRight'/>\r\n        </button>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextYear()\" [disabled]=\"isNextYearDisabled(year)\" title=\"Next year\">\r\n          <img alt=\"next year\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- MONTH GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'months'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevMonthGridYear()\" [disabled]=\"isPrevYearDisabled(year)\" title=\"Prev year\">\r\n          <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <span class=\"month-year\">\r\n          <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openYearView()\" [disabled]=\"disabled\">{{ year }}</button>\r\n        </span>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextMonthGridYear()\" [disabled]=\"isNextYearDisabled(year)\" title=\"Next year\">\r\n          <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- YEAR GRID HEADER -->\r\n      <div class=\"header\" *ngIf=\"view === 'years'\">\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevYearRange()\" title=\"Prev years\">\r\n          <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n        </button>\r\n        <span class=\"month-year\">{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>\r\n        <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextYearRange()\" title=\"Next years\">\r\n          <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n        </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\" *ngIf=\"view === 'days'\" 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      <!-- MONTH GRID -->\r\n      <div class=\"bk-grid-picker\" *ngIf=\"view === 'months'\">\r\n        <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + year\">\r\n          <button\r\n            *ngFor=\"let m of monthNamesShort; let i = index\"\r\n            type=\"button\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"i === month\"\r\n            [class.active]=\"i === month\"\r\n            [class.current]=\"isCurrentMonth(i, year)\"\r\n            [disabled]=\"isMonthDisabled(i, year)\"\r\n            (click)=\"selectMonthFromGrid(i)\"\r\n            class=\"bk-month-cell\">\r\n            {{ m }}\r\n          </button>\r\n        </div>\r\n        <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n      </div>\r\n\r\n      <!-- YEAR GRID -->\r\n      <div class=\"bk-grid-picker\" *ngIf=\"view === 'years'\">\r\n        <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n          <button\r\n            *ngFor=\"let y of getYearGridYears(yearRangeStart)\"\r\n            type=\"button\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"y === year\"\r\n            [class.active]=\"y === year\"\r\n            [class.current]=\"isCurrentYear(y)\"\r\n            [disabled]=\"isYearDisabled(y)\"\r\n            (click)=\"selectYearFromGrid(y)\"\r\n            class=\"bk-year-cell\">\r\n            {{ y }}\r\n          </button>\r\n        </div>\r\n        <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n      </div>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker && view === 'days'\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [variation]=\"compact ? 'default' : 'lg'\"\r\n            [timeFormat]=\"timeFormat\"\r\n            [clearable]=\"clearableTime\"\r\n            [label]=\"''\"\r\n            [ngModel]=\"singleTimeModel\"\r\n            (ngModelChange)=\"onSingleTimePickerChange($event); singleTimeModel=$event\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\" *ngIf=\"leftView === 'days'\">\r\n          <button (click)=\"prevLeftYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isPrevYearDisabled(leftYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\" title=\"Prev month\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftMonthView()\" [disabled]=\"disabled\">{{ getMonthName(leftMonth) }}</button>\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftYearView()\" [disabled]=\"disabled\">{{ leftYear }}</button>\r\n          </span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\" title=\"Next month\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n          <button (click)=\"nextLeftYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isNextYearDisabled(leftYear)\" title=\"Next year\">\r\n            <img alt=\"next year\" class=\"arrow-right\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- MONTH GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"leftView === 'months'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevLeftMonthGridYear()\" [disabled]=\"isPrevYearDisabled(leftYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openLeftYearView()\" [disabled]=\"disabled\">{{ leftYear }}</button>\r\n          </span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextLeftMonthGridYear()\" [disabled]=\"isNextYearDisabled(leftYear)\" title=\"Next year\">\r\n            <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"leftView === 'years'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevLeftYearRange()\" title=\"Prev years\">\r\n            <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ leftYearRangeStart }} - {{ leftYearRangeStart + 11 }}</span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextLeftYearRange()\" title=\"Next years\">\r\n            <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <table class=\"calendar-table\" *ngIf=\"leftView === 'days'\" 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        <!-- MONTH GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"leftView === 'months'\">\r\n          <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + leftYear\">\r\n            <button\r\n              *ngFor=\"let m of monthNamesShort; let i = index\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"i === leftMonth\"\r\n              [class.active]=\"i === leftMonth\"\r\n              [class.current]=\"isCurrentMonth(i, leftYear)\"\r\n              [disabled]=\"isMonthDisabled(i, leftYear)\"\r\n              (click)=\"selectLeftMonthFromGrid(i)\"\r\n              class=\"bk-month-cell\">\r\n              {{ m }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToLeftToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"leftView === 'years'\">\r\n          <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n            <button\r\n              *ngFor=\"let y of getYearGridYears(leftYearRangeStart)\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"y === leftYear\"\r\n              [class.active]=\"y === leftYear\"\r\n              [class.current]=\"isCurrentYear(y)\"\r\n              [disabled]=\"isYearDisabled(y)\"\r\n              (click)=\"selectLeftYearFromGrid(y)\"\r\n              class=\"bk-year-cell\">\r\n              {{ y }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToLeftToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker && leftView === 'days'\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"startTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, true); startTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\" *ngIf=\"rightView === 'days'\">\r\n          <button (click)=\"prevRightYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isPrevYearDisabled(rightYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\" title=\"Prev month\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightMonthView()\" [disabled]=\"disabled\">{{ getMonthName(rightMonth) }}</button>\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightYearView()\" [disabled]=\"disabled\">{{ rightYear }}</button>\r\n          </span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\" title=\"Next month\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n          <button (click)=\"nextRightYear()\" class=\"nav-btn bk-nav-btn-year\" type=\"button\" [disabled]=\"isNextYearDisabled(rightYear)\" title=\"Next year\">\r\n            <img alt=\"next year\" class=\"arrow-right\" [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- MONTH GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"rightView === 'months'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevRightMonthGridYear()\" [disabled]=\"isPrevYearDisabled(rightYear)\" title=\"Prev year\">\r\n            <img alt=\"prev year\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">\r\n            <button type=\"button\" class=\"bk-month-year-btn\" (click)=\"openRightYearView()\" [disabled]=\"disabled\">{{ rightYear }}</button>\r\n          </span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextRightMonthGridYear()\" [disabled]=\"isNextYearDisabled(rightYear)\" title=\"Next year\">\r\n            <img alt=\"next year\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID HEADER -->\r\n        <div class=\"header\" *ngIf=\"rightView === 'years'\">\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"prevRightYearRange()\" title=\"Prev years\">\r\n            <img alt=\"prev\"   [src]=\"brickclayIcons.arrowLeftDouble\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ rightYearRangeStart }} - {{ rightYearRangeStart + 11 }}</span>\r\n          <button class=\"nav-btn bk-nav-btn-year\" type=\"button\" (click)=\"nextRightYearRange()\" title=\"Next years\">\r\n            <img alt=\"next\"   [src]=\"brickclayIcons.arrowRightDouble\"/>\r\n          </button>\r\n        </div>\r\n\r\n        <table class=\"calendar-table\" *ngIf=\"rightView === 'days'\" 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        <!-- MONTH GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"rightView === 'months'\">\r\n          <div class=\"bk-month-grid\" role=\"listbox\" [attr.aria-label]=\"'Select month for ' + rightYear\">\r\n            <button\r\n              *ngFor=\"let m of monthNamesShort; let i = index\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"i === rightMonth\"\r\n              [class.active]=\"i === rightMonth\"\r\n              [class.current]=\"isCurrentMonth(i, rightYear)\"\r\n              [disabled]=\"isMonthDisabled(i, rightYear)\"\r\n              (click)=\"selectRightMonthFromGrid(i)\"\r\n              class=\"bk-month-cell\">\r\n              {{ m }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToRightToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- YEAR GRID -->\r\n        <div class=\"bk-grid-picker\" *ngIf=\"rightView === 'years'\">\r\n          <div class=\"bk-year-grid\" role=\"listbox\" aria-label=\"Select year\">\r\n            <button\r\n              *ngFor=\"let y of getYearGridYears(rightYearRangeStart)\"\r\n              type=\"button\"\r\n              role=\"option\"\r\n              [attr.aria-selected]=\"y === rightYear\"\r\n              [class.active]=\"y === rightYear\"\r\n              [class.current]=\"isCurrentYear(y)\"\r\n              [disabled]=\"isYearDisabled(y)\"\r\n              (click)=\"selectRightYearFromGrid(y)\"\r\n              class=\"bk-year-cell\">\r\n              {{ y }}\r\n            </button>\r\n          </div>\r\n          <button type=\"button\" class=\"bk-today-btn\" (click)=\"goToRightToday()\" [disabled]=\"disabled || isDateDisabled(today.getFullYear(), today.getMonth(), today.getDate())\">Today</button>\r\n        </div>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker && rightView === 'days'\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"endTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, false); endTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER: month/year-only selection commits on click (like autoApply) \u2014 no Apply/Cancel to show. -->\r\n    <div class=\"footer\" *ngIf=\"!inline && showCancelApply && pickerView === 'day'\">\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  </ng-template>\r\n\r\n  <!-- INLINE: rendered directly in normal flow, no overlay -->\r\n  <div #calendarPopup\r\n       *ngIf=\"inline\"\r\n       class=\"calendar-popup inline-calendar\"\r\n       tabindex=\"0\"\r\n       (keydown)=\"onCalendarPopupKeydown($event)\"\r\n       [ngClass]=\"{\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar,\r\n         'compact': compact\r\n       }\">\r\n    <ng-container *ngTemplateOutlet=\"popupContent\"></ng-container>\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{width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out;font-family:Inter,sans-serif;scrollbar-width:thin;scrollbar-color:#c1c1c1 transparent}.calendar-popup::-webkit-scrollbar{width:6px}.calendar-popup::-webkit-scrollbar-track{background:transparent}.calendar-popup::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.calendar-popup::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.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.drop-up{animation:slideUp .2s ease-out}@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;scrollbar-width:thin;scrollbar-color:#888 #f1f1f1}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0;min-height:54px;box-sizing:border-box}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;text-transform:capitalize}.bk-month-year-btn{@apply bg-transparent border-0 rounded py-1 px-1 cursor-pointer transition-all duration-200;font:inherit;color:inherit;text-transform:inherit}.bk-month-year-btn:hover:not(:disabled){@apply text-black;}.bk-month-year-btn:disabled{@apply cursor-not-allowed text-[#ccc] opacity-50;}.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{max-width:none!important}.nav-btn:disabled{cursor:not-allowed;opacity:.35;pointer-events:none}.bk-grid-picker{@apply flex flex-col box-border h-[256px];}.bk-month-grid,.bk-year-grid{@apply grid grid-cols-3 auto-rows-min shrink-0 gap-[18px];}.bk-today-btn{@apply shrink-0 w-full p-2 mt-2 border border-[#eee] rounded-md bg-transparent text-[#333] text-[13px] font-medium cursor-pointer transition-all duration-200;}.bk-today-btn:hover:not(:disabled){@apply bg-[#efefef] text-black;}.bk-today-btn:disabled{@apply text-[#ddd] cursor-not-allowed opacity-50;}.bk-month-cell,.bk-year-cell{@apply flex items-center justify-center py-2.5 px-1 text-[13px] font-medium text-[#333] bg-transparent border-0 rounded-md cursor-pointer text-center transition-all duration-200;}.bk-month-cell:hover:not(:disabled):not(.active):not(.current),.bk-year-cell:hover:not(:disabled):not(.active):not(.current){@apply bg-[#efefef] text-black;}.bk-month-cell.active,.bk-year-cell.active{@apply bg-black text-white font-semibold;}.bk-month-cell.current:not(.active),.bk-year-cell.current:not(.active){@apply bg-[#e5e4e4] font-semibold;}.bk-month-cell:disabled,.bk-year-cell:disabled{@apply text-[#ddd] cursor-not-allowed opacity-50;}.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.today.disabled,.bk-month-cell.current:disabled,.bk-year-cell.current:disabled{color:#a9a9a9}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.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: 576px){.calendar-popup.dual-calendar-mode{max-width:300px}}@media (max-width: 768px){.dual-calendar{flex-direction:column}}@media (min-width: 577px) and (max-width: 1024px){.calendar-popup.dual-calendar-mode{max-width:500px}}@media (max-width: 1024px){.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}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}.calendar-input.calendar-input-has-error{@apply border-[#d11e14];}.calendar-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.btn-apply:disabled{cursor:not-allowed!important;opacity:.7}.calendar-day.calendar-day-keyboard-focus:not(.disabled):not(.other-month){outline:0px solid #000}.calendar-popup.compact{width:240px}.calendar-popup.compact.has-ranges{width:380px}.calendar-popup.compact.dual-calendar-mode{width:480px}.calendar-popup.compact.dual-calendar-mode.has-ranges{width:600px}.calendar-popup.compact .header{padding:8px 0;min-height:40px}.calendar-popup.compact .month-year{font-size:13px}.calendar-popup.compact .nav-btn{height:24px;width:24px;padding:6px 8px}.calendar-popup.compact .calendar-wrapper,.calendar-popup.compact .calendar-left,.calendar-popup.compact .calendar-right{padding:0 8px 8px}.calendar-popup.compact .weekday-header{font-size:11px;padding:4px 2px}.calendar-popup.compact .calendar-day{font-size:12px;padding:5px 2px;line-height:1.3}.calendar-popup.compact .ranges{min-width:120px;gap:2px;margin-bottom:8px;padding-bottom:8px}.calendar-popup.compact.has-ranges .ranges{padding:6px}.calendar-popup.compact .range-btn{font-size:12px;padding:5px 8px}.calendar-popup.compact .timepicker-section{margin-top:8px;padding-top:8px}.calendar-popup.compact .timepicker-label{font-size:11px}.calendar-popup.compact .footer{padding:8px;gap:6px}.calendar-popup.compact .btn-cancel,.calendar-popup.compact .btn-apply{font-size:11px;padding:6px 12px;min-width:64px}.calendar-popup.compact .bk-month-year-btn{@apply text-[13px] py-px px-1;}.calendar-popup.compact .nav-btn img{width:12px;height:8px}.calendar-popup.compact .bk-nav-btn-year img{width:12px;height:12px}.calendar-popup.compact .bk-grid-picker{@apply h-[178px];@apply justify-center;}.calendar-popup.compact .bk-month-grid,.calendar-popup.compact .bk-year-grid{@apply gap-1;}.calendar-popup.compact .bk-month-cell,.calendar-popup.compact .bk-year-cell{@apply text-[11px] py-1.5 px-0.5;}.calendar-popup.compact .bk-today-btn{@apply text-[11px] p-[5px];}\n"] }]
         }], ctorParameters: () => [{ type: BkCalendarManagerService }], propDecorators: { enableTimepicker: [{
                 type: Input
             }], autoApply: [{
@@ -7393,6 +7393,19 @@ class BkInput {
     // =================== Internal State ===================
     isFocused = false;
     inputValue = '';
+    /**
+     * What the template's `[value]` binding actually renders. Deliberately a separate property
+     * from `inputValue` (which still mirrors the live text for `isFilled`/bookkeeping on every
+     * keystroke): re-applying `[value]` to an element that already displays that exact text is a
+     * no-op on most inputs, but on `type="number"` it isn't - Chromium doesn't skip the write just
+     * because the string is unchanged, and since `type="number"` also refuses `setSelectionRange`
+     * (it throws), we have no way to put the caret back afterwards. So `displayValue` is only ever
+     * written by genuinely external changes (writeValue(), the phone country-prefix swap) - never
+     * from handleInput() or the "parent mutated the native value" resync, both of which are only
+     * echoing back text the DOM already has. That keeps every self-originated edit from re-touching
+     * `.value` at all, which is the only reliable fix here given number inputs can't be caret-restored.
+     */
+    displayValue = '';
     isDropdownOpen = false;
     pendingMaskedValue = null;
     isPropagatingViewValue = false;
@@ -7485,6 +7498,7 @@ class BkInput {
         this.value = str;
         if (!this.maskValue) {
             this.inputValue = str;
+            this.displayValue = str;
             this.pendingMaskedValue = null;
             return;
         }
@@ -7511,6 +7525,7 @@ class BkInput {
     ngOnInit() {
         if (this.value !== undefined && this.value !== null && this.value !== '') {
             this.inputValue = String(this.value);
+            this.displayValue = this.inputValue;
         }
         if (this.password && this.type !== 'password')
             this.type = 'password';
@@ -7547,7 +7562,14 @@ class BkInput {
     }
     handleInput(event) {
         const viewVal = event.target.value ?? '';
-        // Keep the displayed value masked.
+        // Track the live text for isFilled/bookkeeping, but deliberately do NOT touch
+        // `displayValue` (what `[value]` actually renders) here - the native element already
+        // shows `viewVal` (it's where we just read it from), or for a masked field ngx-mask has
+        // already written its reformatted text directly to the DOM itself. Re-pushing that same
+        // text through `[value]` would be a redundant echo, and on `type="number"` a redundant
+        // `.value` write isn't a no-op the way it is on other input types - see the `displayValue`
+        // field's own comment above for why that's exactly what jumps the caret to the start while
+        // editing a decimal.
         this.inputValue = viewVal;
         // Decide what to write to the model.
         const modelRaw = this.currency
@@ -7565,6 +7587,8 @@ class BkInput {
         this.input.emit(event);
         // If parent handlers mutate the underlying native input value (e.g. clamping/formatting),
         // resync our internal view-model from the real input to avoid visual "append" artifacts.
+        // Only `inputValue` (bookkeeping) - the parent already wrote the new text straight to the
+        // DOM itself, so, same as above, `displayValue` has nothing left to do here.
         queueMicrotask(() => {
             const nativeVal = this.inputField?.nativeElement?.value;
             if (nativeVal !== undefined && nativeVal !== null && nativeVal !== this.inputValue) {
@@ -7654,6 +7678,7 @@ class BkInput {
             newPhone = ''; // optionally: newPhone = country.prefix;
         }
         this.inputValue = newPhone;
+        this.displayValue = newPhone;
         this.value = newPhone;
         this.onChange(newPhone);
         setTimeout(() => {
@@ -7700,10 +7725,12 @@ class BkInput {
         this.pendingMaskedValue = value;
         if (!this.maskValue || !this.maskDirective || !this.inputField?.nativeElement) {
             this.inputValue = value;
+            this.displayValue = value;
             return;
         }
         await this.maskDirective.writeValue(value);
         this.inputValue = this.inputField.nativeElement.value ?? '';
+        this.displayValue = this.inputValue;
         this.pendingMaskedValue = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -7714,7 +7741,7 @@ class BkInput {
                 useExisting: forwardRef(() => BkInput),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "maskDirective", first: true, predicate: NgxMaskDirective, descendants: true }, { propertyName: "phoneOverlay", first: true, predicate: ["phoneOverlay"], descendants: true }], ngImport: i0, template: "<div class=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"bk-input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.bk-input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-input-phone-selector-arrow{@apply w-3 h-3;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
+        ], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "maskDirective", first: true, predicate: NgxMaskDirective, descendants: true }, { propertyName: "phoneOverlay", first: true, predicate: ["phoneOverlay"], descendants: true }], ngImport: i0, template: "<div class=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"displayValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"displayValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"bk-input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.bk-input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-input-phone-selector-arrow{@apply w-3 h-3;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, decorators: [{
             type: Component,
@@ -7725,7 +7752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkInput),
                             multi: true
                         }
-                    ], template: "<div class=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"inputValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"bk-input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.bk-input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
+                    ], template: "<div class=\"bk-input-container\" [class.bk-input-container--sm]=\"size === 'sm'\">\r\n  @if(label){\r\n    <label [for]=\"id\" class=\"bk-input-label\">\r\n      {{ label }}\r\n      @if(required){\r\n        <span class=\"bk-input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"bk-input-wrapper\" [ngClass]=\"{\r\n    'bk-input-wrapper--url': type === 'url',\r\n    'bk-input-wrapper--phone': phone,\r\n    'bk-input-wrapper--password': password,\r\n    'bk-input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    @if (maskValue) {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"displayValue\"\r\n\r\n        [mask]=\"maskValue\"\r\n        [prefix]=\"maskPrefixValue\"\r\n        [showMaskTyped]=\"false\"\r\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\r\n        [thousandSeparator]=\"maskThousandSeparator\"\r\n        [decimalMarker]=\"maskDecimalMarker\"\r\n        [allowNegativeNumbers]=\"maskAllowNegativeNumbers\"\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    } @else {\r\n      <input\r\n        #inputField\r\n        [type]=\"currentInputType\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [disabled]=\"disabled\"\r\n        [tabindex]=\"tabIndex\"\r\n        [readOnly]=\"readOnly\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.minlength]=\"minlength\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [autocapitalize]=\"autoCapitalize\"\r\n\r\n        [attr.max]=\"max\"\r\n        [attr.min]=\"min\"\r\n        [attr.step]=\"step\"\r\n\r\n        [placeholder]=\"placeHolderText\"\r\n        [attr.pattern]=\"pattern\"\r\n        [autocomplete]=\"autoComplete\"\r\n        [value]=\"displayValue\"\r\n\r\n        (change)=\"handleChange($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        class=\"bk-input-field\"\r\n\r\n        [ngClass]=\"{\r\n          'bk-input-field--url': type === 'url',\r\n          'bk-input-field--phone': phone,\r\n          'bk-input-field--currency': currency,\r\n          'bk-input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n          'bk-input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n          'bk-input-field--password': password,\r\n          'bk-input-field--default': inputState === 'default',\r\n          'bk-input-field--focused': inputState === 'focused',\r\n          'bk-input-field--filled': inputState === 'filled',\r\n          'bk-input-field--error': inputState === 'error',\r\n          'bk-input-field--disabled': inputState === 'disabled'\r\n        }\">\r\n    }\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'bk-input-search-icon--left': iconOrientation === 'left',\r\n        'bk-input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"bk-input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"bk-input-search-icon bk-input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"bk-input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"bk-input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div\r\n        cdkOverlayOrigin\r\n        #phoneOrigin=\"cdkOverlayOrigin\"\r\n        class=\"bk-input-phone-selector\"\r\n        [ngClass]=\"{\r\n        'bk-input-phone-selector--default': inputState === 'default',\r\n        'bk-input-phone-selector--focused': inputState === 'focused',\r\n        'bk-input-phone-selector--filled': inputState === 'filled',\r\n        'bk-input-phone-selector--error': inputState === 'error',\r\n        'bk-input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"bk-input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"bk-input-phone-selector-arrow\" [ngClass]=\"{'bk-input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n\r\n      <!--\r\n        CDK connected overlay: portals the panel into the shared cdk-overlay-container instead of\r\n        an inline `position:absolute` div, so it escapes clipping inside dialogs/scroll containers\r\n        and stacks correctly above other CDK-overlay content. Deliberately no backdrop: a backdrop\r\n        is a full-viewport, click-catching layer appended to <body> \u2014 right for a true modal, wrong\r\n        for a plain dropdown. In a shell that scrolls a nested container (not the window/body), a\r\n        backdrop's wheel events have no scrollable ancestor to chain to and swallow ALL page scroll\r\n        while open. `overlayOutsideClick` gives \"click outside to close\" without that cost \u2014 it\r\n        already excludes clicks on the trigger itself, so toggleDropdown() stays the sole opener.\r\n      -->\r\n      <ng-template\r\n        cdkConnectedOverlay\r\n        #phoneOverlay=\"cdkConnectedOverlay\"\r\n        [cdkConnectedOverlayOrigin]=\"phoneOrigin\"\r\n        [cdkConnectedOverlayOpen]=\"isDropdownOpen\"\r\n        [cdkConnectedOverlayPositions]=\"phoneDropdownPositions\"\r\n        [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n        (overlayOutsideClick)=\"closeDropdown()\"\r\n        (detach)=\"closeDropdown()\">\r\n        <div class=\"bk-input-phone-dropdown\">\r\n          <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"bk-input-phone-dropdown-item\" [ngClass]=\"{'bk-input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country)\">\r\n            {{ country.name }}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n    }\r\n\r\n\r\n\r\n    @if(currency){\r\n      <span class=\"bk-input-currency-icon\" [ngClass]=\"{\r\n        'bk-input-currency-icon--default': inputState === 'default',\r\n        'bk-input-currency-icon--focused': inputState === 'focused',\r\n        'bk-input-currency-icon--filled': inputState === 'filled',\r\n        'bk-input-currency-icon--error': inputState === 'error',\r\n        'bk-input-currency-icon--disabled': inputState === 'disabled'\r\n      }\">\r\n        <img src=\"../../assets/icons/dollar-icon.svg\" alt=\"Currency\">\r\n      </span>\r\n    }\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"bk-input-url-prefix\" [ngClass]=\"{\r\n        'bk-input-url-prefix--default': inputState === 'default',\r\n        'bk-input-url-prefix--focused': inputState === 'focused',\r\n        'bk-input-url-prefix--filled': inputState === 'filled',\r\n        'bk-input-url-prefix--error': inputState === 'error',\r\n        'bk-input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"bk-input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"bk-input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".bk-input-container{@apply flex flex-col gap-1.5;}.bk-input-label{@apply text-sm font-medium text-[#141414];}.bk-input-label-required{@apply text-[#E7000B] ml-0.5;}.bk-input-wrapper{@apply relative;}.bk-input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box;box-shadow:0 1px 2px #1018280d}.bk-input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.bk-input-field--focused{@apply border-[#6B7080] text-[#141414];}.bk-input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.bk-input-field--error{@apply border-[#E7000B] text-[#141414];}.bk-input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.bk-input-field--icon{@apply !pl-[48px];}.bk-input-field--phone{@apply !pl-[80px];}.bk-input-field--url{@apply !pl-[72px];}.bk-input-field--currency{@apply !pl-[3.5rem];}.bk-input-field--icon-left{@apply !pl-[48px];}.bk-input-field--icon-right,.bk-input-field--password{@apply !pr-[48px];}.bk-input-field--icon.bk-input-field--url{@apply !pl-[120px];}.bk-input-field--phone.bk-input-field--icon{@apply !pl-[128px];}.bk-input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.bk-input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.bk-input-phone-selector-arrow--open{@apply rotate-180;}.bk-input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--focused{@apply bg-white border-[#6B7080];}.bk-input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.bk-input-phone-selector--error{@apply bg-white border-[#E7000B];}.bk-input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.bk-input-phone-selector--disabled .bk-input-phone-selector-text{@apply text-[#A1A3AE];}.bk-input-phone-dropdown{@apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;}.bk-input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;}.bk-input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.bk-input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.bk-input-wrapper--phone .bk-input-icon{@apply left-[80px];}.bk-input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.bk-input-search-icon--left{@apply left-3;}.bk-input-search-icon--right{@apply right-3;}.bk-input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.bk-input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.bk-input-password-toggle:hover:not(:disabled){@apply opacity-70;}.bk-input-password-icon{@apply w-5 h-5 pointer-events-none;}.bk-input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-wrapper--icon .bk-input-url-prefix{@apply left-[48px];}.bk-input-url-prefix--default{@apply border-[#E3E3E7];}.bk-input-url-prefix--focused{@apply border-[#6B7080];}.bk-input-url-prefix--filled{@apply border-[#E3E3E7];}.bk-input-url-prefix--error{@apply border-[#E7000B];}.bk-input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.bk-input-currency-icon{@apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.bk-input-currency-icon img{@apply w-5 h-5;}.bk-input-currency-icon--default{@apply border-[#E3E3E7];}.bk-input-currency-icon--focused{@apply border-[#6B7080];}.bk-input-currency-icon--filled{@apply border-[#E3E3E7];}.bk-input-currency-icon--error{@apply border-[#E7000B];}.bk-input-currency-icon--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7];}.bk-input-hint{@apply text-xs text-[#868997] font-normal;}.bk-input-error{@apply text-xs text-[#E7000B] font-normal;}.bk-input-container ::-webkit-scrollbar{width:4px}.bk-input-container ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-input-container ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-input-container ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-input-container--sm .bk-input-label{@apply text-xs;}.bk-input-container--sm .bk-input-hint,.bk-input-container--sm .bk-input-error{@apply text-[11px];}.bk-input-container--sm .bk-input-field{@apply py-1.5 px-2.5 text-xs;height:32px}.bk-input-container--sm .bk-input-field--icon,.bk-input-container--sm .bk-input-field--icon-left{@apply !pl-8;}.bk-input-container--sm .bk-input-field--icon-right,.bk-input-container--sm .bk-input-field--password{@apply !pr-8;}.bk-input-container--sm .bk-input-field--phone,.bk-input-container--sm .bk-input-field--url{@apply !pl-16;}.bk-input-container--sm .bk-input-field--currency{@apply !pl-9;}.bk-input-container--sm .bk-input-currency-icon{@apply w-8;}.bk-input-container--sm .bk-input-currency-icon img{@apply w-4 h-4;}.bk-input-container--sm .bk-input-field--icon.bk-input-field--url,.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon{@apply !pl-24;}.bk-input-container--sm .bk-input-search-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-search-icon--left{@apply left-2;}.bk-input-container--sm .bk-input-search-icon--right{@apply right-2;}.bk-input-container--sm .bk-input-password-toggle{@apply right-2 w-4 h-4;}.bk-input-container--sm .bk-input-password-icon{@apply w-4 h-4;}.bk-input-container--sm .bk-input-phone-selector{@apply px-2;}.bk-input-container--sm .bk-input-phone-selector-text{@apply text-[11px];}.bk-input-container--sm .bk-input-url-prefix{@apply py-1.5 px-2.5 text-xs;}.bk-input-container--sm .bk-input-phone-dropdown{@apply w-[68px] mt-0.5;}.bk-input-container--sm .bk-input-phone-dropdown-item{@apply px-3 py-1.5 text-[11px];}.bk-input-container--sm .bk-input-phone-selector-arrow{@apply w-3 h-3;}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -10459,6 +10486,15 @@ class BkToastrService {
             scrollStrategy: this.overlay.scrollStrategies.noop(),
             panelClass: 'bk-toastr-panel',
         });
+        // `panelClass` only reaches `.cdk-overlay-pane` — but every overlay in a consuming app
+        // (dialogs, selects, popovers, date/time pickers) shares the same `.cdk-overlay-container`,
+        // and their *wrappers* (`.cdk-global-overlay-wrapper` / `.cdk-overlay-connected-position-
+        // bounding-box`) all tie at z-index:1000 in CDK's prebuilt CSS. A tie falls back to DOM
+        // order, so whichever overlay attached most recently wins — meaning a dialog/dropdown opened
+        // after this toast container was first created would render on top of it no matter what
+        // z-index the pane has. `hostElement` is the actual wrapper competing in that stacking
+        // comparison, so it — not the pane — is what has to be pinned above everything else.
+        this.overlayRef.hostElement.style.zIndex = '2147483647';
         this.componentRef = this.overlayRef.attach(new ComponentPortal(BkToastr));
     }
     /** Show a toast with full config */
@@ -11476,7 +11512,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  *   flip — they stay under their trigger and scroll instead.
  */
 class BkMenu {
-    host;
     items = [];
     orientation = 'vertical';
     submenuMode = 'inline';
@@ -11554,9 +11589,6 @@ class BkMenu {
         return 210;
     }
     closeTimer = null;
-    constructor(host) {
-        this.host = host;
-    }
     /**
      * Inline mode: whenever the active leaf is (re)set — including the very
      * first binding, so a deep link or a page refresh lands with the section
@@ -11737,10 +11769,13 @@ class BkMenu {
     }
     // Pop-up mode: open a parent's fly-out on hover (and close its siblings).
     onItemEnter(item, siblings, event, level, parent) {
-        // Hover only opens/switches fly-outs in hover mode. In click mode every
-        // open and switch must come from a real click, so hover does nothing —
-        // even while a sibling's panel is already open.
-        if (!this.isHoverTrigger || item.disabled || !this.hasChildren(item))
+        if (!this.isPopup || item.disabled || !this.hasChildren(item))
+            return;
+        // Click mode still follows the pointer once a panel at this level is open,
+        // the way a native menubar does — hovering a sibling switches without a
+        // second click. With nothing open, hover does nothing.
+        if (this.trigger === 'click'
+            && !siblings.some(sibling => sibling.id !== item.id && this.isOpen(sibling)))
             return;
         // Re-entering after crossing the gap: keep what's already up rather than
         // tearing it down and re-placing it.
@@ -11881,24 +11916,32 @@ class BkMenu {
         this.popupSide.clear();
         this.measuredIds.clear();
     }
-    // Pop-up mode: click outside the menu closes any open fly-outs.
-    onDocumentClick(event) {
-        if (this.isPopup && !this.host.nativeElement.contains(event.target)) {
+    // Pop-up mode: any click that isn't on a menu button closes any open
+    // fly-outs — both a genuine click outside the host, and a click that lands
+    // on an open panel's own blank space (padding, group-title, background).
+    // Fly-outs are position:fixed, so a click on one reads as "elsewhere" on
+    // screen even though the panel is still a DOM descendant of the host — a
+    // plain `host.contains(target)` check missed that and left the panel's own
+    // blank space as a dead zone that couldn't close it. A real button click
+    // never reaches here at all: onItemClick() calls event.stopPropagation()
+    // before this document listener sees it, so this only ever fires for
+    // clicks the menu itself didn't already handle.
+    onDocumentClick() {
+        if (this.isPopup && this.openIds.size)
             this.closeAll();
-        }
     }
     // Positions become stale on scroll/resize — close fly-outs to avoid drift.
     onViewportChange() {
         if (this.isPopup && this.openIds.size)
             this.closeAll();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkMenu, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkMenu, isStandalone: true, selector: "bk-menu", inputs: { items: "items", orientation: "orientation", submenuMode: "submenuMode", trigger: "trigger", size: "size", hoverCloseDelay: "hoverCloseDelay", singleOpen: "singleOpen", submenuBackground: "submenuBackground", emitParentClick: "emitParentClick", activeItemId: "activeItemId", tintIcons: "tintIcons", maxHeight: "maxHeight" }, outputs: { activeItemIdChange: "activeItemIdChange", itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" } }, usesOnChanges: true, ngImport: i0, template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--compact]=\"isCompact\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul\r\n    class=\"bk-menu__list\"\r\n    [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n    [style.maxHeight]=\"maxHeightStyle\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0, parent: null }\">\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level,\r\n     level = depth, parent = the item they hang off (null at the top). -->\r\n<ng-template #itemTpl let-items let-level=\"level\" let-parent=\"parent\">\r\n  @for (item of items; track item.id; let i = $index) {\r\n    @if (isGroupStart(items, i)) {\r\n      <li\r\n        class=\"bk-menu__group-title bk-menu__group-title--section\"\r\n        [class.bk-menu__group-title--divider]=\"i > 0\"\r\n        [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n        role=\"presentation\">\r\n        {{ item.groupLabel }}\r\n      </li>\r\n    }\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items, $event, level, parent)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event, level, parent)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\" (mouseenter)=\"onLabelEnter($event)\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"chevronDir(item, level) === 'right'\"\r\n            [class.bk-menu__chevron--left]=\"chevronDir(item, level) === 'left'\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--bg]=\"submenuBackground && !isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--placing]=\"isPlacing(item)\"\r\n          [class.bk-menu__submenu--side-right]=\"submenuSide(item) === 'right'\"\r\n          [class.bk-menu__submenu--side-left]=\"submenuSide(item) === 'left'\"\r\n          [class.bk-menu__submenu--side-down]=\"submenuSide(item) === 'down'\"\r\n          [class.bk-menu__submenu--side-up]=\"submenuSide(item) === 'up'\"\r\n          [style.top.px]=\"popupTop(item)\"\r\n          [style.left.px]=\"popupLeft(item)\"\r\n          [style.maxWidth]=\"popupMaxWidth(item)\"\r\n          [style.maxHeight]=\"popupMaxHeight(item)\"\r\n          role=\"menu\"\r\n          [attr.aria-label]=\"item.childrenLabel || item.label\">\r\n          @if (item.childrenLabel) {\r\n            <li\r\n              class=\"bk-menu__group-title\"\r\n              [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n              (mouseenter)=\"onLabelEnter($event)\"\r\n              role=\"presentation\">\r\n              {{ item.childrenLabel }}\r\n            </li>\r\n          }\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl;\r\n              context: { $implicit: item.children, level: level + 1, parent: item }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-submenu-bg: #f8f8f8;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;--menu-font-size: 14px;--menu-tracking: -.28px;--menu-pad-y: 10px;--menu-submenu-pad-y: 8px;--menu-pad-x: 12px;--menu-gap: 8px;--menu-icon-size: 16px;--menu-chevron-size: 16px;--menu-group-font-size: 11px;--menu-title-outdent: 8px;--menu-popup-pad: 4px;--menu-popup-pad-y: 8px;--menu-popup-item-pad-x: 16px;--menu-popup-min-w: 200px;--menu-popup-max-w: 280px;@apply block w-full max-w-full font-medium bg-[var(--menu-bg)] text-[color:var(--menu-text)] border border-[var(--menu-border)] rounded-[var(--menu-radius)] overflow-hidden;font-size:var(--menu-font-size);letter-spacing:var(--menu-tracking)}.bk-menu--compact{--menu-radius: 6px;--menu-font-size: 12px;--menu-tracking: -.24px;--menu-pad-y: 6px;--menu-submenu-pad-y: 4px;--menu-pad-x: 8px;--menu-gap: 6px;--menu-icon-size: 14px;--menu-chevron-size: 14px;--menu-group-font-size: 10px;--menu-title-outdent: 6px;--menu-popup-pad: 3px;--menu-popup-pad-y: 6px;--menu-popup-item-pad-x: 14px;--menu-popup-min-w: 160px;--menu-popup-max-w: 240px}.bk-menu__list,.bk-menu__submenu{@apply list-none m-0 p-0;}.bk-menu__list--scroll{@apply overflow-auto;}.bk-menu--horizontal>.bk-menu__list{@apply flex flex-row items-stretch overflow-x-auto;}.bk-menu__item{@apply relative;}.bk-menu__button{@apply flex items-center w-full m-0 border-0 bg-transparent text-inherit text-left cursor-pointer whitespace-nowrap transition-colors duration-100;font:inherit;letter-spacing:inherit;gap:var(--menu-gap);padding:var(--menu-pad-y) var(--menu-pad-x)}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{@apply w-auto;}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-t-[var(--menu-radius)];}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-b-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-l-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-r-[var(--menu-radius)];}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){@apply bg-[var(--menu-hover-bg)] text-[color:var(--menu-hover-text)];}.bk-menu__button--active{@apply bg-[var(--menu-active-bg)] text-[color:var(--menu-active-text)];}.bk-menu__button--disabled,.bk-menu__button:disabled{@apply opacity-[var(--menu-disabled)] cursor-not-allowed;}.bk-menu__submenu .bk-menu__button{@apply text-[color:var(--menu-subtext)] font-normal;padding-top:var(--menu-submenu-pad-y);padding-bottom:var(--menu-submenu-pad-y)}.bk-menu__submenu--popup .bk-menu__button{padding-left:var(--menu-popup-item-pad-x);padding-right:var(--menu-popup-item-pad-x)}.bk-menu__submenu .bk-menu__button--active{@apply text-[color:var(--menu-active-text)];}.bk-menu__group-title{@apply font-semibold uppercase tracking-wider text-[color:var(--menu-subtext)] whitespace-nowrap overflow-hidden text-ellipsis select-none;font-size:var(--menu-group-font-size);padding:var(--menu-pad-y) var(--menu-pad-x) calc(var(--menu-pad-y) / 2);padding-left:calc(var(--menu-pad-x) - var(--menu-title-outdent))}.bk-menu__submenu--popup>.bk-menu__group-title{margin-left:calc(var(--menu-popup-pad) * -1);margin-right:calc(var(--menu-popup-pad) * -1);padding-left:calc(var(--menu-popup-item-pad-x) - var(--menu-title-outdent) + var(--menu-popup-pad) + 2px);padding-right:calc(var(--menu-popup-item-pad-x) + var(--menu-popup-pad) + 2px)}.bk-menu__group-title--section{@apply mb-0 tracking-wide;padding-top:calc(var(--menu-pad-y) * 1.25)}.bk-menu__group-title--divider{@apply border-t border-[var(--menu-border)];margin-top:calc(var(--menu-pad-y) / 2)}.bk-menu__icon{@apply shrink-0 object-contain;width:var(--menu-icon-size);height:var(--menu-icon-size)}.bk-menu--tint .bk-menu__icon{@apply [filter:brightness(0)_saturate(0)];}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{@apply [filter:brightness(0)_invert(1)];}.bk-menu__label{@apply flex-auto min-w-0 overflow-hidden text-ellipsis;}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{@apply flex-none overflow-visible;}.bk-menu__chevron{@apply shrink-0 opacity-80 transition-transform duration-[.18s];width:var(--menu-chevron-size);height:var(--menu-chevron-size)}.bk-menu__chevron--open{@apply rotate-180;}.bk-menu__chevron--right{@apply -rotate-90;}.bk-menu__chevron--left{@apply rotate-90;}.bk-menu__submenu--inline{@apply overflow-hidden max-h-0 transition-[max-height] duration-200;}.bk-menu__submenu--inline.bk-menu__submenu--open{@apply max-h-[1000px];}.bk-menu__submenu--inline.bk-menu__submenu--bg{background-color:var(--menu-submenu-bg)}.bk-menu__submenu--popup{@apply fixed z-[1000] max-h-[100vh-16px] overflow-y-auto overflow-x-hidden bg-[var(--menu-bg)] border border-[var(--menu-border)] rounded-xl shadow-[var(--menu-shadow)] hidden;padding:var(--menu-popup-pad-y) var(--menu-popup-pad);min-width:var(--menu-popup-min-w);max-width:var(--menu-popup-max-w)}.bk-menu__submenu--popup.bk-menu__submenu--open{@apply block;}.bk-menu__submenu--placing{@apply opacity-0 pointer-events-none;}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{@apply overflow-x-auto;-webkit-overflow-scrolling:touch}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkMenu, isStandalone: true, selector: "bk-menu", inputs: { items: "items", orientation: "orientation", submenuMode: "submenuMode", trigger: "trigger", size: "size", hoverCloseDelay: "hoverCloseDelay", singleOpen: "singleOpen", submenuBackground: "submenuBackground", emitParentClick: "emitParentClick", activeItemId: "activeItemId", tintIcons: "tintIcons", maxHeight: "maxHeight" }, outputs: { activeItemIdChange: "activeItemIdChange", itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick()", "window:scroll": "onViewportChange()", "window:resize": "onViewportChange()" } }, usesOnChanges: true, ngImport: i0, template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--compact]=\"isCompact\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul\r\n    class=\"bk-menu__list\"\r\n    [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n    [style.maxHeight]=\"maxHeightStyle\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0, parent: null }\">\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level,\r\n     level = depth, parent = the item they hang off (null at the top). -->\r\n<ng-template #itemTpl let-items let-level=\"level\" let-parent=\"parent\">\r\n  @for (item of items; track item.id; let i = $index) {\r\n    @if (isGroupStart(items, i)) {\r\n      <li\r\n        class=\"bk-menu__group-title bk-menu__group-title--section\"\r\n        [class.bk-menu__group-title--divider]=\"i > 0\"\r\n        [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n        role=\"presentation\">\r\n        {{ item.groupLabel }}\r\n      </li>\r\n    }\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items, $event, level, parent)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event, level, parent)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\" (mouseenter)=\"onLabelEnter($event)\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"chevronDir(item, level) === 'right'\"\r\n            [class.bk-menu__chevron--left]=\"chevronDir(item, level) === 'left'\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--bg]=\"submenuBackground && !isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--placing]=\"isPlacing(item)\"\r\n          [class.bk-menu__submenu--side-right]=\"submenuSide(item) === 'right'\"\r\n          [class.bk-menu__submenu--side-left]=\"submenuSide(item) === 'left'\"\r\n          [class.bk-menu__submenu--side-down]=\"submenuSide(item) === 'down'\"\r\n          [class.bk-menu__submenu--side-up]=\"submenuSide(item) === 'up'\"\r\n          [style.top.px]=\"popupTop(item)\"\r\n          [style.left.px]=\"popupLeft(item)\"\r\n          [style.maxWidth]=\"popupMaxWidth(item)\"\r\n          [style.maxHeight]=\"popupMaxHeight(item)\"\r\n          role=\"menu\"\r\n          [attr.aria-label]=\"item.childrenLabel || item.label\">\r\n          @if (item.childrenLabel) {\r\n            <li\r\n              class=\"bk-menu__group-title\"\r\n              [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n              (mouseenter)=\"onLabelEnter($event)\"\r\n              role=\"presentation\">\r\n              {{ item.childrenLabel }}\r\n            </li>\r\n          }\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl;\r\n              context: { $implicit: item.children, level: level + 1, parent: item }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-submenu-bg: #f8f8f8;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;--menu-font-size: 14px;--menu-tracking: -.28px;--menu-pad-y: 10px;--menu-submenu-pad-y: 8px;--menu-pad-x: 12px;--menu-gap: 8px;--menu-icon-size: 16px;--menu-chevron-size: 16px;--menu-group-font-size: 11px;--menu-title-outdent: 8px;--menu-popup-pad: 4px;--menu-popup-pad-y: 8px;--menu-popup-item-pad-x: 16px;--menu-popup-min-w: 200px;--menu-popup-max-w: 280px;@apply block w-full max-w-full font-medium bg-[var(--menu-bg)] text-[color:var(--menu-text)] border border-[var(--menu-border)] rounded-[var(--menu-radius)] overflow-hidden;font-size:var(--menu-font-size);letter-spacing:var(--menu-tracking)}.bk-menu--compact{--menu-radius: 6px;--menu-font-size: 12px;--menu-tracking: -.24px;--menu-pad-y: 6px;--menu-submenu-pad-y: 4px;--menu-pad-x: 8px;--menu-gap: 6px;--menu-icon-size: 14px;--menu-chevron-size: 14px;--menu-group-font-size: 10px;--menu-title-outdent: 6px;--menu-popup-pad: 3px;--menu-popup-pad-y: 6px;--menu-popup-item-pad-x: 14px;--menu-popup-min-w: 160px;--menu-popup-max-w: 240px}.bk-menu__list,.bk-menu__submenu{@apply list-none m-0 p-0;}.bk-menu__list--scroll{@apply overflow-auto;}.bk-menu--horizontal>.bk-menu__list{@apply flex flex-row items-stretch overflow-x-auto;}.bk-menu__item{@apply relative;}.bk-menu__button{@apply flex items-center w-full m-0 border-0 bg-transparent text-inherit text-left cursor-pointer whitespace-nowrap transition-colors duration-100;font:inherit;letter-spacing:inherit;gap:var(--menu-gap);padding:var(--menu-pad-y) var(--menu-pad-x)}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{@apply w-auto;}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-t-[var(--menu-radius)];}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-b-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-l-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-r-[var(--menu-radius)];}.bk-menu--vertical:not(.bk-menu--popup)>.bk-menu__list>.bk-menu__item--open:last-child>.bk-menu__button{border-bottom-left-radius:0;border-bottom-right-radius:0}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){@apply bg-[var(--menu-hover-bg)] text-[color:var(--menu-hover-text)];}.bk-menu__item--open>.bk-menu__button:not(.bk-menu__button--active){@apply bg-[var(--menu-hover-bg)] text-[color:var(--menu-hover-text)];}.bk-menu__button--active{@apply bg-[var(--menu-active-bg)] text-[color:var(--menu-active-text)];}.bk-menu__button--disabled,.bk-menu__button:disabled{@apply opacity-[var(--menu-disabled)] cursor-not-allowed;}.bk-menu__submenu .bk-menu__button{@apply text-[color:var(--menu-subtext)] font-normal;padding-top:var(--menu-submenu-pad-y);padding-bottom:var(--menu-submenu-pad-y)}.bk-menu__submenu--popup .bk-menu__button{padding-left:var(--menu-popup-item-pad-x);padding-right:var(--menu-popup-item-pad-x)}.bk-menu__submenu .bk-menu__button--active{@apply text-[color:var(--menu-active-text)];}.bk-menu__group-title{@apply font-semibold uppercase tracking-wider text-[color:var(--menu-subtext)] whitespace-nowrap overflow-hidden text-ellipsis select-none;font-size:var(--menu-group-font-size);padding:var(--menu-pad-y) var(--menu-pad-x) calc(var(--menu-pad-y) / 2);padding-left:calc(var(--menu-pad-x) - var(--menu-title-outdent))}.bk-menu__submenu--popup>.bk-menu__group-title{margin-left:calc(var(--menu-popup-pad) * -1);margin-right:calc(var(--menu-popup-pad) * -1);padding-left:calc(var(--menu-popup-item-pad-x) - var(--menu-title-outdent) + var(--menu-popup-pad) + 2px);padding-right:calc(var(--menu-popup-item-pad-x) + var(--menu-popup-pad) + 2px)}.bk-menu__group-title--section{@apply mb-0 tracking-wide;padding-top:calc(var(--menu-pad-y) * 1.25)}.bk-menu__group-title--divider{@apply border-t border-[var(--menu-border)];margin-top:calc(var(--menu-pad-y) / 2)}.bk-menu__icon{@apply shrink-0 object-contain;width:var(--menu-icon-size);height:var(--menu-icon-size)}.bk-menu--tint .bk-menu__icon{@apply [filter:brightness(0)_saturate(0)];}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{@apply [filter:brightness(0)_invert(1)];}.bk-menu__label{@apply flex-auto min-w-0 overflow-hidden text-ellipsis;}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{@apply flex-none overflow-visible;}.bk-menu__chevron{@apply shrink-0 opacity-80 transition-transform duration-[.18s];width:var(--menu-chevron-size);height:var(--menu-chevron-size)}.bk-menu__chevron--open{@apply rotate-180;}.bk-menu__chevron--right{@apply -rotate-90;}.bk-menu__chevron--left{@apply rotate-90;}.bk-menu__submenu--inline{@apply overflow-hidden max-h-0 transition-[max-height] duration-200;}.bk-menu__submenu--inline.bk-menu__submenu--open{@apply max-h-[1000px];}.bk-menu__submenu--inline.bk-menu__submenu--bg{background-color:var(--menu-submenu-bg)}.bk-menu__submenu--popup{@apply fixed z-[1000] max-h-[100vh-16px] overflow-y-auto overflow-x-hidden bg-[var(--menu-bg)] border border-[var(--menu-border)] rounded-xl shadow-[var(--menu-shadow)] hidden;padding:var(--menu-popup-pad-y) var(--menu-popup-pad);min-width:var(--menu-popup-min-w);max-width:var(--menu-popup-max-w)}.bk-menu__submenu--popup.bk-menu__submenu--open{@apply block;}.bk-menu__submenu--placing{@apply opacity-0 pointer-events-none;}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{@apply overflow-x-auto;-webkit-overflow-scrolling:touch}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-menu', standalone: true, imports: [CommonModule], template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--compact]=\"isCompact\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul\r\n    class=\"bk-menu__list\"\r\n    [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n    [style.maxHeight]=\"maxHeightStyle\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0, parent: null }\">\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level,\r\n     level = depth, parent = the item they hang off (null at the top). -->\r\n<ng-template #itemTpl let-items let-level=\"level\" let-parent=\"parent\">\r\n  @for (item of items; track item.id; let i = $index) {\r\n    @if (isGroupStart(items, i)) {\r\n      <li\r\n        class=\"bk-menu__group-title bk-menu__group-title--section\"\r\n        [class.bk-menu__group-title--divider]=\"i > 0\"\r\n        [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n        role=\"presentation\">\r\n        {{ item.groupLabel }}\r\n      </li>\r\n    }\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items, $event, level, parent)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event, level, parent)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\" (mouseenter)=\"onLabelEnter($event)\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"chevronDir(item, level) === 'right'\"\r\n            [class.bk-menu__chevron--left]=\"chevronDir(item, level) === 'left'\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--bg]=\"submenuBackground && !isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--placing]=\"isPlacing(item)\"\r\n          [class.bk-menu__submenu--side-right]=\"submenuSide(item) === 'right'\"\r\n          [class.bk-menu__submenu--side-left]=\"submenuSide(item) === 'left'\"\r\n          [class.bk-menu__submenu--side-down]=\"submenuSide(item) === 'down'\"\r\n          [class.bk-menu__submenu--side-up]=\"submenuSide(item) === 'up'\"\r\n          [style.top.px]=\"popupTop(item)\"\r\n          [style.left.px]=\"popupLeft(item)\"\r\n          [style.maxWidth]=\"popupMaxWidth(item)\"\r\n          [style.maxHeight]=\"popupMaxHeight(item)\"\r\n          role=\"menu\"\r\n          [attr.aria-label]=\"item.childrenLabel || item.label\">\r\n          @if (item.childrenLabel) {\r\n            <li\r\n              class=\"bk-menu__group-title\"\r\n              [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n              (mouseenter)=\"onLabelEnter($event)\"\r\n              role=\"presentation\">\r\n              {{ item.childrenLabel }}\r\n            </li>\r\n          }\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl;\r\n              context: { $implicit: item.children, level: level + 1, parent: item }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-submenu-bg: #f8f8f8;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;--menu-font-size: 14px;--menu-tracking: -.28px;--menu-pad-y: 10px;--menu-submenu-pad-y: 8px;--menu-pad-x: 12px;--menu-gap: 8px;--menu-icon-size: 16px;--menu-chevron-size: 16px;--menu-group-font-size: 11px;--menu-title-outdent: 8px;--menu-popup-pad: 4px;--menu-popup-pad-y: 8px;--menu-popup-item-pad-x: 16px;--menu-popup-min-w: 200px;--menu-popup-max-w: 280px;@apply block w-full max-w-full font-medium bg-[var(--menu-bg)] text-[color:var(--menu-text)] border border-[var(--menu-border)] rounded-[var(--menu-radius)] overflow-hidden;font-size:var(--menu-font-size);letter-spacing:var(--menu-tracking)}.bk-menu--compact{--menu-radius: 6px;--menu-font-size: 12px;--menu-tracking: -.24px;--menu-pad-y: 6px;--menu-submenu-pad-y: 4px;--menu-pad-x: 8px;--menu-gap: 6px;--menu-icon-size: 14px;--menu-chevron-size: 14px;--menu-group-font-size: 10px;--menu-title-outdent: 6px;--menu-popup-pad: 3px;--menu-popup-pad-y: 6px;--menu-popup-item-pad-x: 14px;--menu-popup-min-w: 160px;--menu-popup-max-w: 240px}.bk-menu__list,.bk-menu__submenu{@apply list-none m-0 p-0;}.bk-menu__list--scroll{@apply overflow-auto;}.bk-menu--horizontal>.bk-menu__list{@apply flex flex-row items-stretch overflow-x-auto;}.bk-menu__item{@apply relative;}.bk-menu__button{@apply flex items-center w-full m-0 border-0 bg-transparent text-inherit text-left cursor-pointer whitespace-nowrap transition-colors duration-100;font:inherit;letter-spacing:inherit;gap:var(--menu-gap);padding:var(--menu-pad-y) var(--menu-pad-x)}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{@apply w-auto;}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-t-[var(--menu-radius)];}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-b-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-l-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-r-[var(--menu-radius)];}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){@apply bg-[var(--menu-hover-bg)] text-[color:var(--menu-hover-text)];}.bk-menu__button--active{@apply bg-[var(--menu-active-bg)] text-[color:var(--menu-active-text)];}.bk-menu__button--disabled,.bk-menu__button:disabled{@apply opacity-[var(--menu-disabled)] cursor-not-allowed;}.bk-menu__submenu .bk-menu__button{@apply text-[color:var(--menu-subtext)] font-normal;padding-top:var(--menu-submenu-pad-y);padding-bottom:var(--menu-submenu-pad-y)}.bk-menu__submenu--popup .bk-menu__button{padding-left:var(--menu-popup-item-pad-x);padding-right:var(--menu-popup-item-pad-x)}.bk-menu__submenu .bk-menu__button--active{@apply text-[color:var(--menu-active-text)];}.bk-menu__group-title{@apply font-semibold uppercase tracking-wider text-[color:var(--menu-subtext)] whitespace-nowrap overflow-hidden text-ellipsis select-none;font-size:var(--menu-group-font-size);padding:var(--menu-pad-y) var(--menu-pad-x) calc(var(--menu-pad-y) / 2);padding-left:calc(var(--menu-pad-x) - var(--menu-title-outdent))}.bk-menu__submenu--popup>.bk-menu__group-title{margin-left:calc(var(--menu-popup-pad) * -1);margin-right:calc(var(--menu-popup-pad) * -1);padding-left:calc(var(--menu-popup-item-pad-x) - var(--menu-title-outdent) + var(--menu-popup-pad) + 2px);padding-right:calc(var(--menu-popup-item-pad-x) + var(--menu-popup-pad) + 2px)}.bk-menu__group-title--section{@apply mb-0 tracking-wide;padding-top:calc(var(--menu-pad-y) * 1.25)}.bk-menu__group-title--divider{@apply border-t border-[var(--menu-border)];margin-top:calc(var(--menu-pad-y) / 2)}.bk-menu__icon{@apply shrink-0 object-contain;width:var(--menu-icon-size);height:var(--menu-icon-size)}.bk-menu--tint .bk-menu__icon{@apply [filter:brightness(0)_saturate(0)];}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{@apply [filter:brightness(0)_invert(1)];}.bk-menu__label{@apply flex-auto min-w-0 overflow-hidden text-ellipsis;}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{@apply flex-none overflow-visible;}.bk-menu__chevron{@apply shrink-0 opacity-80 transition-transform duration-[.18s];width:var(--menu-chevron-size);height:var(--menu-chevron-size)}.bk-menu__chevron--open{@apply rotate-180;}.bk-menu__chevron--right{@apply -rotate-90;}.bk-menu__chevron--left{@apply rotate-90;}.bk-menu__submenu--inline{@apply overflow-hidden max-h-0 transition-[max-height] duration-200;}.bk-menu__submenu--inline.bk-menu__submenu--open{@apply max-h-[1000px];}.bk-menu__submenu--inline.bk-menu__submenu--bg{background-color:var(--menu-submenu-bg)}.bk-menu__submenu--popup{@apply fixed z-[1000] max-h-[100vh-16px] overflow-y-auto overflow-x-hidden bg-[var(--menu-bg)] border border-[var(--menu-border)] rounded-xl shadow-[var(--menu-shadow)] hidden;padding:var(--menu-popup-pad-y) var(--menu-popup-pad);min-width:var(--menu-popup-min-w);max-width:var(--menu-popup-max-w)}.bk-menu__submenu--popup.bk-menu__submenu--open{@apply block;}.bk-menu__submenu--placing{@apply opacity-0 pointer-events-none;}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{@apply overflow-x-auto;-webkit-overflow-scrolling:touch}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
+            args: [{ selector: 'bk-menu', standalone: true, imports: [CommonModule], template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--compact]=\"isCompact\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul\r\n    class=\"bk-menu__list\"\r\n    [class.bk-menu__list--scroll]=\"maxHeightStyle\"\r\n    [style.maxHeight]=\"maxHeightStyle\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0, parent: null }\">\r\n    </ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level,\r\n     level = depth, parent = the item they hang off (null at the top). -->\r\n<ng-template #itemTpl let-items let-level=\"level\" let-parent=\"parent\">\r\n  @for (item of items; track item.id; let i = $index) {\r\n    @if (isGroupStart(items, i)) {\r\n      <li\r\n        class=\"bk-menu__group-title bk-menu__group-title--section\"\r\n        [class.bk-menu__group-title--divider]=\"i > 0\"\r\n        [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n        role=\"presentation\">\r\n        {{ item.groupLabel }}\r\n      </li>\r\n    }\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items, $event, level, parent)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event, level, parent)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\" (mouseenter)=\"onLabelEnter($event)\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"chevronDir(item, level) === 'right'\"\r\n            [class.bk-menu__chevron--left]=\"chevronDir(item, level) === 'left'\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--bg]=\"submenuBackground && !isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--placing]=\"isPlacing(item)\"\r\n          [class.bk-menu__submenu--side-right]=\"submenuSide(item) === 'right'\"\r\n          [class.bk-menu__submenu--side-left]=\"submenuSide(item) === 'left'\"\r\n          [class.bk-menu__submenu--side-down]=\"submenuSide(item) === 'down'\"\r\n          [class.bk-menu__submenu--side-up]=\"submenuSide(item) === 'up'\"\r\n          [style.top.px]=\"popupTop(item)\"\r\n          [style.left.px]=\"popupLeft(item)\"\r\n          [style.maxWidth]=\"popupMaxWidth(item)\"\r\n          [style.maxHeight]=\"popupMaxHeight(item)\"\r\n          role=\"menu\"\r\n          [attr.aria-label]=\"item.childrenLabel || item.label\">\r\n          @if (item.childrenLabel) {\r\n            <li\r\n              class=\"bk-menu__group-title\"\r\n              [style.paddingLeft.px]=\"groupTitleIndent(level)\"\r\n              (mouseenter)=\"onLabelEnter($event)\"\r\n              role=\"presentation\">\r\n              {{ item.childrenLabel }}\r\n            </li>\r\n          }\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl;\r\n              context: { $implicit: item.children, level: level + 1, parent: item }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-submenu-bg: #f8f8f8;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;--menu-font-size: 14px;--menu-tracking: -.28px;--menu-pad-y: 10px;--menu-submenu-pad-y: 8px;--menu-pad-x: 12px;--menu-gap: 8px;--menu-icon-size: 16px;--menu-chevron-size: 16px;--menu-group-font-size: 11px;--menu-title-outdent: 8px;--menu-popup-pad: 4px;--menu-popup-pad-y: 8px;--menu-popup-item-pad-x: 16px;--menu-popup-min-w: 200px;--menu-popup-max-w: 280px;@apply block w-full max-w-full font-medium bg-[var(--menu-bg)] text-[color:var(--menu-text)] border border-[var(--menu-border)] rounded-[var(--menu-radius)] overflow-hidden;font-size:var(--menu-font-size);letter-spacing:var(--menu-tracking)}.bk-menu--compact{--menu-radius: 6px;--menu-font-size: 12px;--menu-tracking: -.24px;--menu-pad-y: 6px;--menu-submenu-pad-y: 4px;--menu-pad-x: 8px;--menu-gap: 6px;--menu-icon-size: 14px;--menu-chevron-size: 14px;--menu-group-font-size: 10px;--menu-title-outdent: 6px;--menu-popup-pad: 3px;--menu-popup-pad-y: 6px;--menu-popup-item-pad-x: 14px;--menu-popup-min-w: 160px;--menu-popup-max-w: 240px}.bk-menu__list,.bk-menu__submenu{@apply list-none m-0 p-0;}.bk-menu__list--scroll{@apply overflow-auto;}.bk-menu--horizontal>.bk-menu__list{@apply flex flex-row items-stretch overflow-x-auto;}.bk-menu__item{@apply relative;}.bk-menu__button{@apply flex items-center w-full m-0 border-0 bg-transparent text-inherit text-left cursor-pointer whitespace-nowrap transition-colors duration-100;font:inherit;letter-spacing:inherit;gap:var(--menu-gap);padding:var(--menu-pad-y) var(--menu-pad-x)}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{@apply w-auto;}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-t-[var(--menu-radius)];}.bk-menu--vertical>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-b-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{@apply rounded-l-[var(--menu-radius)];}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{@apply rounded-r-[var(--menu-radius)];}.bk-menu--vertical:not(.bk-menu--popup)>.bk-menu__list>.bk-menu__item--open:last-child>.bk-menu__button{border-bottom-left-radius:0;border-bottom-right-radius:0}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){@apply bg-[var(--menu-hover-bg)] text-[color:var(--menu-hover-text)];}.bk-menu__item--open>.bk-menu__button:not(.bk-menu__button--active){@apply bg-[var(--menu-hover-bg)] text-[color:var(--menu-hover-text)];}.bk-menu__button--active{@apply bg-[var(--menu-active-bg)] text-[color:var(--menu-active-text)];}.bk-menu__button--disabled,.bk-menu__button:disabled{@apply opacity-[var(--menu-disabled)] cursor-not-allowed;}.bk-menu__submenu .bk-menu__button{@apply text-[color:var(--menu-subtext)] font-normal;padding-top:var(--menu-submenu-pad-y);padding-bottom:var(--menu-submenu-pad-y)}.bk-menu__submenu--popup .bk-menu__button{padding-left:var(--menu-popup-item-pad-x);padding-right:var(--menu-popup-item-pad-x)}.bk-menu__submenu .bk-menu__button--active{@apply text-[color:var(--menu-active-text)];}.bk-menu__group-title{@apply font-semibold uppercase tracking-wider text-[color:var(--menu-subtext)] whitespace-nowrap overflow-hidden text-ellipsis select-none;font-size:var(--menu-group-font-size);padding:var(--menu-pad-y) var(--menu-pad-x) calc(var(--menu-pad-y) / 2);padding-left:calc(var(--menu-pad-x) - var(--menu-title-outdent))}.bk-menu__submenu--popup>.bk-menu__group-title{margin-left:calc(var(--menu-popup-pad) * -1);margin-right:calc(var(--menu-popup-pad) * -1);padding-left:calc(var(--menu-popup-item-pad-x) - var(--menu-title-outdent) + var(--menu-popup-pad) + 2px);padding-right:calc(var(--menu-popup-item-pad-x) + var(--menu-popup-pad) + 2px)}.bk-menu__group-title--section{@apply mb-0 tracking-wide;padding-top:calc(var(--menu-pad-y) * 1.25)}.bk-menu__group-title--divider{@apply border-t border-[var(--menu-border)];margin-top:calc(var(--menu-pad-y) / 2)}.bk-menu__icon{@apply shrink-0 object-contain;width:var(--menu-icon-size);height:var(--menu-icon-size)}.bk-menu--tint .bk-menu__icon{@apply [filter:brightness(0)_saturate(0)];}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{@apply [filter:brightness(0)_invert(1)];}.bk-menu__label{@apply flex-auto min-w-0 overflow-hidden text-ellipsis;}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{@apply flex-none overflow-visible;}.bk-menu__chevron{@apply shrink-0 opacity-80 transition-transform duration-[.18s];width:var(--menu-chevron-size);height:var(--menu-chevron-size)}.bk-menu__chevron--open{@apply rotate-180;}.bk-menu__chevron--right{@apply -rotate-90;}.bk-menu__chevron--left{@apply rotate-90;}.bk-menu__submenu--inline{@apply overflow-hidden max-h-0 transition-[max-height] duration-200;}.bk-menu__submenu--inline.bk-menu__submenu--open{@apply max-h-[1000px];}.bk-menu__submenu--inline.bk-menu__submenu--bg{background-color:var(--menu-submenu-bg)}.bk-menu__submenu--popup{@apply fixed z-[1000] max-h-[100vh-16px] overflow-y-auto overflow-x-hidden bg-[var(--menu-bg)] border border-[var(--menu-border)] rounded-xl shadow-[var(--menu-shadow)] hidden;padding:var(--menu-popup-pad-y) var(--menu-popup-pad);min-width:var(--menu-popup-min-w);max-width:var(--menu-popup-max-w)}.bk-menu__submenu--popup.bk-menu__submenu--open{@apply block;}.bk-menu__submenu--placing{@apply opacity-0 pointer-events-none;}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{@apply overflow-x-auto;-webkit-overflow-scrolling:touch}}\n"] }]
+        }], propDecorators: { items: [{
                 type: Input
             }], orientation: [{
                 type: Input
@@ -11928,7 +11971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }], onDocumentClick: [{
                 type: HostListener,
-                args: ['document:click', ['$event']]
+                args: ['document:click']
             }], onViewportChange: [{
                 type: HostListener,
                 args: ['window:scroll']