@brickclay-org/ui 0.0.24 → 0.0.25

package/fesm2022/brickclay-org-ui.mjs

@@ -36,7 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   ` }]
         }] });
 
-class TimePickerComponent {
+class BkTimePicker {
     value = '1:00 AM'; // Time in format "H:MM AM/PM"
     label = 'Time';
     placeholder = 'Select time';
@@ -275,10 +275,10 @@ class TimePickerComponent {
             this.updateTime();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TimePickerComponent, isStandalone: true, selector: "bk-time-picker", inputs: { value: "value", label: "label", placeholder: "placeholder", position: "position", pickerId: "pickerId", closePicker: "closePicker", timeFormat: "timeFormat", showSeconds: "showSeconds" }, outputs: { timeChange: "timeChange", pickerOpened: "pickerOpened", pickerClosed: "pickerClosed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "timeScrollElements", predicate: ["timeScroll"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"time-picker-wrapper\">\r\n  <div class=\"time-input-group\">\r\n    <label *ngIf=\"label\">{{ label }}</label>\r\n    <div class=\"time-input-wrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"time-input\"\r\n        [value]=\"value\"\r\n        [placeholder]=\"placeholder\"\r\n        readonly\r\n        (click)=\"togglePicker()\">\r\n      <span class=\"time-icon\">\r\n        <img alt=\"timer\" class=\"timer-icon\" [src]='brickclayIcons.timerIcon'/>\r\n      </span>\r\n      <div class=\"custom-time-picker-dropdown\" *ngIf=\"showPicker\">\r\n        <div class=\"custom-time-picker\" [ngClass]=\"position === 'left' ? 'left-position' : 'right-position'\">\r\n          <!-- Hours Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                (click)=\"onHourChange(h)\">\r\n                {{ h.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <!-- Minutes Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let m of getMinutes()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === m\"\r\n                (click)=\"onMinuteChange(m)\">\r\n                {{ m.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <!-- AM/PM Column -->\r\n          <div class=\"time-column ampm-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let ap of getAMPMOptions()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentAMPM === ap\"\r\n                (click)=\"onAMPMChange(ap)\">\r\n                {{ ap }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".time-picker-wrapper{width:100%;font-family:Inter,sans-serif}.time-input-group{display:flex;flex-direction:column;gap:4px}.time-input-group label{font-size:11px;font-weight:500;color:#15191e;text-transform:uppercase;letter-spacing:-.28px}.time-input-wrapper{position:relative;display:flex;align-items:center}.time-input{padding:8px 40px 8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:12px;font-family:Inter,sans-serif;color:#6f737b;background:#fff;transition:all .2s;width:100%;box-sizing:border-box;cursor:pointer}.time-input:focus{outline:none;border-color:#111827;box-shadow:0 0 0 3px #1118271a}.time-input:hover{border-color:#9ca3af}.time-icon{position:absolute;right:12px;font-size:16px;pointer-events:none;color:#9ca3af;cursor:pointer}.custom-time-picker-wrapper{width:100%;display:flex;justify-content:center}.custom-time-picker{display:flex;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:10px;box-shadow:0 4px 12px #00000026;width:182px;position:absolute;top:calc(100% + 4px);z-index:1000}.custom-time-picker.left-position{left:0}.custom-time-picker.right-position{right:0}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:95px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;scrollbar-width:none;-ms-overflow-style:none}.time-scroll::-webkit-scrollbar{display:none}.time-scroll::-webkit-scrollbar-track{background:transparent}.time-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}.time-item{min-width:40px;width:40px;height:32px;min-height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;color:#374151;cursor:pointer;border-radius:4px;transition:all .15s ease;-webkit-user-select:none;user-select:none;font-family:Inter,sans-serif}.time-item:hover{background:#f3f4f6}.time-item.selected{background:#111827;color:#fff;font-weight:500;box-shadow:0 1px 2px #2563eb4d}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BkTimePicker, isStandalone: true, selector: "bk-time-picker", inputs: { value: "value", label: "label", placeholder: "placeholder", position: "position", pickerId: "pickerId", closePicker: "closePicker", timeFormat: "timeFormat", showSeconds: "showSeconds" }, outputs: { timeChange: "timeChange", pickerOpened: "pickerOpened", pickerClosed: "pickerClosed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "timeScrollElements", predicate: ["timeScroll"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"time-picker-wrapper\">\r\n  <div class=\"time-input-group\">\r\n    <label *ngIf=\"label\">{{ label }}</label>\r\n    <div class=\"time-input-wrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"time-input\"\r\n        [value]=\"value\"\r\n        [placeholder]=\"placeholder\"\r\n        readonly\r\n        (click)=\"togglePicker()\">\r\n      <span class=\"time-icon\">\r\n        <img alt=\"timer\" class=\"timer-icon\" [src]='brickclayIcons.timerIcon'/>\r\n      </span>\r\n      <div class=\"custom-time-picker-dropdown\" *ngIf=\"showPicker\">\r\n        <div class=\"custom-time-picker\" [ngClass]=\"position === 'left' ? 'left-position' : 'right-position'\">\r\n          <!-- Hours Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                (click)=\"onHourChange(h)\">\r\n                {{ h.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <!-- Minutes Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let m of getMinutes()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === m\"\r\n                (click)=\"onMinuteChange(m)\">\r\n                {{ m.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <!-- AM/PM Column -->\r\n          <div class=\"time-column ampm-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let ap of getAMPMOptions()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentAMPM === ap\"\r\n                (click)=\"onAMPMChange(ap)\">\r\n                {{ ap }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".time-picker-wrapper{width:100%;font-family:Inter,sans-serif}.time-input-group{display:flex;flex-direction:column;gap:4px}.time-input-group label{font-size:11px;font-weight:500;color:#15191e;text-transform:uppercase;letter-spacing:-.28px}.time-input-wrapper{position:relative;display:flex;align-items:center}.time-input{padding:8px 40px 8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:12px;font-family:Inter,sans-serif;color:#6f737b;background:#fff;transition:all .2s;width:100%;box-sizing:border-box;cursor:pointer}.time-input:focus{outline:none;border-color:#111827;box-shadow:0 0 0 3px #1118271a}.time-input:hover{border-color:#9ca3af}.time-icon{position:absolute;right:12px;font-size:16px;pointer-events:none;color:#9ca3af;cursor:pointer}.custom-time-picker-wrapper{width:100%;display:flex;justify-content:center}.custom-time-picker{display:flex;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:10px;box-shadow:0 4px 12px #00000026;width:182px;position:absolute;top:calc(100% + 4px);z-index:1000}.custom-time-picker.left-position{left:0}.custom-time-picker.right-position{right:0}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:95px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;scrollbar-width:none;-ms-overflow-style:none}.time-scroll::-webkit-scrollbar{display:none}.time-scroll::-webkit-scrollbar-track{background:transparent}.time-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}.time-item{min-width:40px;width:40px;height:32px;min-height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;color:#374151;cursor:pointer;border-radius:4px;transition:all .15s ease;-webkit-user-select:none;user-select:none;font-family:Inter,sans-serif}.time-item:hover{background:#f3f4f6}.time-item.selected{background:#111827;color:#fff;font-weight:500;box-shadow:0 1px 2px #2563eb4d}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}\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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTimePicker, decorators: [{
             type: Component,
             args: [{ selector: 'bk-time-picker', standalone: true, imports: [CommonModule], template: "<div class=\"time-picker-wrapper\">\r\n  <div class=\"time-input-group\">\r\n    <label *ngIf=\"label\">{{ label }}</label>\r\n    <div class=\"time-input-wrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"time-input\"\r\n        [value]=\"value\"\r\n        [placeholder]=\"placeholder\"\r\n        readonly\r\n        (click)=\"togglePicker()\">\r\n      <span class=\"time-icon\">\r\n        <img alt=\"timer\" class=\"timer-icon\" [src]='brickclayIcons.timerIcon'/>\r\n      </span>\r\n      <div class=\"custom-time-picker-dropdown\" *ngIf=\"showPicker\">\r\n        <div class=\"custom-time-picker\" [ngClass]=\"position === 'left' ? 'left-position' : 'right-position'\">\r\n          <!-- Hours Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                (click)=\"onHourChange(h)\">\r\n                {{ h.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <!-- Minutes Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let m of getMinutes()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === m\"\r\n                (click)=\"onMinuteChange(m)\">\r\n                {{ m.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <!-- AM/PM Column -->\r\n          <div class=\"time-column ampm-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let ap of getAMPMOptions()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentAMPM === ap\"\r\n                (click)=\"onAMPMChange(ap)\">\r\n                {{ ap }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".time-picker-wrapper{width:100%;font-family:Inter,sans-serif}.time-input-group{display:flex;flex-direction:column;gap:4px}.time-input-group label{font-size:11px;font-weight:500;color:#15191e;text-transform:uppercase;letter-spacing:-.28px}.time-input-wrapper{position:relative;display:flex;align-items:center}.time-input{padding:8px 40px 8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:12px;font-family:Inter,sans-serif;color:#6f737b;background:#fff;transition:all .2s;width:100%;box-sizing:border-box;cursor:pointer}.time-input:focus{outline:none;border-color:#111827;box-shadow:0 0 0 3px #1118271a}.time-input:hover{border-color:#9ca3af}.time-icon{position:absolute;right:12px;font-size:16px;pointer-events:none;color:#9ca3af;cursor:pointer}.custom-time-picker-wrapper{width:100%;display:flex;justify-content:center}.custom-time-picker{display:flex;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:10px;box-shadow:0 4px 12px #00000026;width:182px;position:absolute;top:calc(100% + 4px);z-index:1000}.custom-time-picker.left-position{left:0}.custom-time-picker.right-position{right:0}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:95px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;scrollbar-width:none;-ms-overflow-style:none}.time-scroll::-webkit-scrollbar{display:none}.time-scroll::-webkit-scrollbar-track{background:transparent}.time-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}.time-item{min-width:40px;width:40px;height:32px;min-height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;color:#374151;cursor:pointer;border-radius:4px;transition:all .15s ease;-webkit-user-select:none;user-select:none;font-family:Inter,sans-serif}.time-item:hover{background:#f3f4f6}.time-item.selected{background:#111827;color:#fff;font-weight:500;box-shadow:0 1px 2px #2563eb4d}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}\n"] }]
         }], propDecorators: { value: [{
@@ -352,7 +352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
-class CustomCalendarComponent {
+class BkCustomCalendar {
     calendarManager;
     // Basic Options
     enableTimepicker = false;
@@ -1229,14 +1229,14 @@ class CustomCalendarComponent {
     getSingleTimeInputValue() {
         return `${this.selectedHour.toString().padStart(2, '0')}:${this.selectedMinute.toString().padStart(2, '0')}`;
     }
-    // NEW: Helper to build display value for TimePickerComponent (single calendar)
+    // NEW: Helper to build display value for BkTimePicker (single calendar)
     getSingleTimePickerDisplay() {
         const hour = this.selectedHour || 12;
         const minuteStr = this.selectedMinute.toString().padStart(2, '0');
         const ampm = this.selectedAMPM || 'AM';
         return `${hour}:${minuteStr} ${ampm}`;
     }
-    // NEW: Helper to build display value for TimePickerComponent (dual calendar)
+    // NEW: Helper to build display value for BkTimePicker (dual calendar)
     getDualTimePickerDisplay(isStart = true) {
         const hour = isStart ? (this.startHour || 12) : (this.endHour || 12);
         const minute = isStart ? this.startMinute : this.endMinute;
@@ -1244,7 +1244,7 @@ class CustomCalendarComponent {
         const minuteStr = minute.toString().padStart(2, '0');
         return `${hour}:${minuteStr} ${ampm}`;
     }
-    // Coordination helpers for embedded TimePickerComponent instances
+    // Coordination helpers for embedded BkTimePicker instances
     onTimePickerOpened(pickerId) {
         // Close previously open picker inside this calendar
         if (this.openTimePickerId && this.openTimePickerId !== pickerId) {
@@ -1263,7 +1263,7 @@ class CustomCalendarComponent {
     shouldClosePicker(pickerId) {
         return this.closePickerCounter[pickerId] || 0;
     }
-    // NEW: Parse "H:MM AM/PM" (or "HH:MM" 24h) from TimePickerComponent
+    // NEW: Parse "H:MM AM/PM" (or "HH:MM" 24h) from BkTimePicker
     parsePickerTimeString(timeStr) {
         if (!timeStr) {
             return { hour12: 12, minute: 0, ampm: 'AM' };
@@ -1294,7 +1294,7 @@ class CustomCalendarComponent {
             hour = 12;
         return { hour12: hour, minute, ampm: ampmPart };
     }
-    // NEW: Handle TimePickerComponent change for single calendar
+    // NEW: Handle BkTimePicker change for single calendar
     onSingleTimePickerChange(time) {
         const { hour12, minute, ampm } = this.parsePickerTimeString(time);
         this.selectedHour = hour12;
@@ -1310,7 +1310,7 @@ class CustomCalendarComponent {
             this.emitSelection();
         }
     }
-    // NEW: Handle TimePickerComponent change for dual calendar
+    // NEW: Handle BkTimePicker change for dual calendar
     onDualTimePickerChange(time, isStart = true) {
         const { hour12, minute, ampm } = this.parsePickerTimeString(time);
         if (isStart) {
@@ -1852,12 +1852,12 @@ class CustomCalendarComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomCalendarComponent, deps: [{ token: CalendarManagerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CustomCalendarComponent, isStandalone: true, selector: "bk-custom-calendar", inputs: { enableTimepicker: "enableTimepicker", autoApply: "autoApply", closeOnAutoApply: "closeOnAutoApply", showCancel: "showCancel", linkedCalendars: "linkedCalendars", singleDatePicker: "singleDatePicker", showWeekNumbers: "showWeekNumbers", showISOWeekNumbers: "showISOWeekNumbers", customRangeDirection: "customRangeDirection", lockStartDate: "lockStartDate", position: "position", drop: "drop", dualCalendar: "dualCalendar", showRanges: "showRanges", timeFormat: "timeFormat", enableSeconds: "enableSeconds", customRanges: "customRanges", multiDateSelection: "multiDateSelection", maxDate: "maxDate", minDate: "minDate", placeholder: "placeholder", opens: "opens", inline: "inline", isDisplayCrossIcon: "isDisplayCrossIcon", selectedValue: "selectedValue", displayFormat: "displayFormat" }, outputs: { selected: "selected", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\">\r\n  <!-- Input field -->\r\n  <div class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"toggle()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\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 class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && opens === 'right',\r\n         'position-center': !inline && opens === 'center',\r\n         'drop-up': !inline && drop === 'up',\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\">\r\n      <button\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        [disabled]=\"rangeKey === 'Custom Range'\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\">\r\n        <thead>\r\n          <tr>\r\n            <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\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\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [label]=\"''\"\r\n            [value]=\"getSingleTimePickerDisplay()\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (timeChange)=\"onSingleTimePickerChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\">\r\n          <thead>\r\n            <tr>\r\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of leftCalendar\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\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\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [label]=\"''\"\r\n              [value]=\"getDualTimePickerDisplay(true)\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (timeChange)=\"onDualTimePickerChange($event, true)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\">\r\n          <thead>\r\n            <tr>\r\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of rightCalendar\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\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\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [label]=\"''\"\r\n              [value]=\"getDualTimePickerDisplay(false)\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (timeChange)=\"onDualTimePickerChange($event, false)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\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;box-shadow:0 0 0 3px #6a6a6a1a}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{position:absolute;top:110%;left:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.dual-calendar-mode.has-ranges .dual-calendar{border-left:1px solid #eee}.calendar-popup.drop-up{top:auto;bottom:110%;animation:slideUp .2s ease-out}.calendar-popup.position-right{left:auto;right:0}.calendar-popup.position-center{left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ranges{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #eee;min-width:150px;padding-right:8px}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px;border-left:1px solid #eee}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;text-align:center;text-transform:capitalize}.nav-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:11.5px 14px;color:#666;border-radius:4px;transition:all .2s;line-height:1;height:30px;width:30px;display:flex;justify-content:center;align-items:center}.nav-btn:hover{background:#f0f0f0;color:#000}.nav-btn img{width:auto;max-width:none!important}.calendar-table{width:100%;border-collapse:collapse;text-align:center}.weekday-header{font-size:12px;color:#7e7e7e;font-weight:600;padding:8px 4px;letter-spacing:.3px}.calendar-day{padding:8px 4px;font-size:14px;cursor:pointer;border-radius:6px;transition:all .2s;position:relative;color:#333;font-weight:500;line-height:1.5}.calendar-day:hover:not(.disabled):not(.other-month){background:#efefef;color:#000}.calendar-day.other-month{color:#ccc;cursor:default}.calendar-day.disabled{color:#ddd;cursor:not-allowed;opacity:.5}.calendar-day.active{background:#000!important;color:#fff!important;font-weight:600}.calendar-day.today{font-weight:600}.calendar-day.today:not(.active){background:#e5e4e4}.calendar-day.active:hover{background:#000!important}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%;border-left:1px solid #eee}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-cancel:hover{background:#f5f5f5;border-color:#bbb}.btn-apply{background:#000;color:#fff}.btn-apply:hover{background:#333}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.dual-calendar{flex-direction:column}.time-input-group{flex-wrap:wrap;justify-content:center}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TimePickerComponent, selector: "bk-time-picker", inputs: ["value", "label", "placeholder", "position", "pickerId", "closePicker", "timeFormat", "showSeconds"], outputs: ["timeChange", "pickerOpened", "pickerClosed"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCustomCalendar, deps: [{ token: CalendarManagerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BkCustomCalendar, isStandalone: true, selector: "bk-custom-calendar", inputs: { enableTimepicker: "enableTimepicker", autoApply: "autoApply", closeOnAutoApply: "closeOnAutoApply", showCancel: "showCancel", linkedCalendars: "linkedCalendars", singleDatePicker: "singleDatePicker", showWeekNumbers: "showWeekNumbers", showISOWeekNumbers: "showISOWeekNumbers", customRangeDirection: "customRangeDirection", lockStartDate: "lockStartDate", position: "position", drop: "drop", dualCalendar: "dualCalendar", showRanges: "showRanges", timeFormat: "timeFormat", enableSeconds: "enableSeconds", customRanges: "customRanges", multiDateSelection: "multiDateSelection", maxDate: "maxDate", minDate: "minDate", placeholder: "placeholder", opens: "opens", inline: "inline", isDisplayCrossIcon: "isDisplayCrossIcon", selectedValue: "selectedValue", displayFormat: "displayFormat" }, outputs: { selected: "selected", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\">\r\n  <!-- Input field -->\r\n  <div class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"toggle()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\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 class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && opens === 'right',\r\n         'position-center': !inline && opens === 'center',\r\n         'drop-up': !inline && drop === 'up',\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\">\r\n      <button\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        [disabled]=\"rangeKey === 'Custom Range'\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\">\r\n        <thead>\r\n          <tr>\r\n            <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\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\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [label]=\"''\"\r\n            [value]=\"getSingleTimePickerDisplay()\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (timeChange)=\"onSingleTimePickerChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\">\r\n          <thead>\r\n            <tr>\r\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of leftCalendar\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\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\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [label]=\"''\"\r\n              [value]=\"getDualTimePickerDisplay(true)\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (timeChange)=\"onDualTimePickerChange($event, true)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\">\r\n          <thead>\r\n            <tr>\r\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of rightCalendar\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\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\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [label]=\"''\"\r\n              [value]=\"getDualTimePickerDisplay(false)\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (timeChange)=\"onDualTimePickerChange($event, false)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\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;box-shadow:0 0 0 3px #6a6a6a1a}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{position:absolute;top:110%;left:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.dual-calendar-mode.has-ranges .dual-calendar{border-left:1px solid #eee}.calendar-popup.drop-up{top:auto;bottom:110%;animation:slideUp .2s ease-out}.calendar-popup.position-right{left:auto;right:0}.calendar-popup.position-center{left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ranges{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #eee;min-width:150px;padding-right:8px}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px;border-left:1px solid #eee}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;text-align:center;text-transform:capitalize}.nav-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:11.5px 14px;color:#666;border-radius:4px;transition:all .2s;line-height:1;height:30px;width:30px;display:flex;justify-content:center;align-items:center}.nav-btn:hover{background:#f0f0f0;color:#000}.nav-btn img{width:auto;max-width:none!important}.calendar-table{width:100%;border-collapse:collapse;text-align:center}.weekday-header{font-size:12px;color:#7e7e7e;font-weight:600;padding:8px 4px;letter-spacing:.3px}.calendar-day{padding:8px 4px;font-size:14px;cursor:pointer;border-radius:6px;transition:all .2s;position:relative;color:#333;font-weight:500;line-height:1.5}.calendar-day:hover:not(.disabled):not(.other-month){background:#efefef;color:#000}.calendar-day.other-month{color:#ccc;cursor:default}.calendar-day.disabled{color:#ddd;cursor:not-allowed;opacity:.5}.calendar-day.active{background:#000!important;color:#fff!important;font-weight:600}.calendar-day.today{font-weight:600}.calendar-day.today:not(.active){background:#e5e4e4}.calendar-day.active:hover{background:#000!important}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%;border-left:1px solid #eee}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-cancel:hover{background:#f5f5f5;border-color:#bbb}.btn-apply{background:#000;color:#fff}.btn-apply:hover{background:#333}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.dual-calendar{flex-direction:column}.time-input-group{flex-wrap:wrap;justify-content:center}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: BkTimePicker, selector: "bk-time-picker", inputs: ["value", "label", "placeholder", "position", "pickerId", "closePicker", "timeFormat", "showSeconds"], outputs: ["timeChange", "pickerOpened", "pickerClosed"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCustomCalendar, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-custom-calendar', standalone: true, imports: [CommonModule, FormsModule, TimePickerComponent], template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\">\r\n  <!-- Input field -->\r\n  <div class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"toggle()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\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 class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && opens === 'right',\r\n         'position-center': !inline && opens === 'center',\r\n         'drop-up': !inline && drop === 'up',\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\">\r\n      <button\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        [disabled]=\"rangeKey === 'Custom Range'\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\">\r\n        <thead>\r\n          <tr>\r\n            <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\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\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [label]=\"''\"\r\n            [value]=\"getSingleTimePickerDisplay()\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (timeChange)=\"onSingleTimePickerChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\">\r\n          <thead>\r\n            <tr>\r\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of leftCalendar\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\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\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [label]=\"''\"\r\n              [value]=\"getDualTimePickerDisplay(true)\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (timeChange)=\"onDualTimePickerChange($event, true)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\">\r\n          <thead>\r\n            <tr>\r\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of rightCalendar\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\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\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [label]=\"''\"\r\n              [value]=\"getDualTimePickerDisplay(false)\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (timeChange)=\"onDualTimePickerChange($event, false)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\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;box-shadow:0 0 0 3px #6a6a6a1a}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{position:absolute;top:110%;left:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.dual-calendar-mode.has-ranges .dual-calendar{border-left:1px solid #eee}.calendar-popup.drop-up{top:auto;bottom:110%;animation:slideUp .2s ease-out}.calendar-popup.position-right{left:auto;right:0}.calendar-popup.position-center{left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ranges{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #eee;min-width:150px;padding-right:8px}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px;border-left:1px solid #eee}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;text-align:center;text-transform:capitalize}.nav-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:11.5px 14px;color:#666;border-radius:4px;transition:all .2s;line-height:1;height:30px;width:30px;display:flex;justify-content:center;align-items:center}.nav-btn:hover{background:#f0f0f0;color:#000}.nav-btn img{width:auto;max-width:none!important}.calendar-table{width:100%;border-collapse:collapse;text-align:center}.weekday-header{font-size:12px;color:#7e7e7e;font-weight:600;padding:8px 4px;letter-spacing:.3px}.calendar-day{padding:8px 4px;font-size:14px;cursor:pointer;border-radius:6px;transition:all .2s;position:relative;color:#333;font-weight:500;line-height:1.5}.calendar-day:hover:not(.disabled):not(.other-month){background:#efefef;color:#000}.calendar-day.other-month{color:#ccc;cursor:default}.calendar-day.disabled{color:#ddd;cursor:not-allowed;opacity:.5}.calendar-day.active{background:#000!important;color:#fff!important;font-weight:600}.calendar-day.today{font-weight:600}.calendar-day.today:not(.active){background:#e5e4e4}.calendar-day.active:hover{background:#000!important}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%;border-left:1px solid #eee}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-cancel:hover{background:#f5f5f5;border-color:#bbb}.btn-apply{background:#000;color:#fff}.btn-apply:hover{background:#333}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.dual-calendar{flex-direction:column}.time-input-group{flex-wrap:wrap;justify-content:center}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}\n"] }]
+            args: [{ selector: 'bk-custom-calendar', standalone: true, imports: [CommonModule, FormsModule, BkTimePicker], template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\">\r\n  <!-- Input field -->\r\n  <div class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"toggle()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\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 class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && opens === 'right',\r\n         'position-center': !inline && opens === 'center',\r\n         'drop-up': !inline && drop === 'up',\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\">\r\n      <button\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        [disabled]=\"rangeKey === 'Custom Range'\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\">\r\n        <thead>\r\n          <tr>\r\n            <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\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\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [label]=\"''\"\r\n            [value]=\"getSingleTimePickerDisplay()\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (timeChange)=\"onSingleTimePickerChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\">\r\n          <thead>\r\n            <tr>\r\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of leftCalendar\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\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\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [label]=\"''\"\r\n              [value]=\"getDualTimePickerDisplay(true)\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (timeChange)=\"onDualTimePickerChange($event, true)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\">\r\n          <thead>\r\n            <tr>\r\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of rightCalendar\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\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\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [label]=\"''\"\r\n              [value]=\"getDualTimePickerDisplay(false)\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (timeChange)=\"onDualTimePickerChange($event, false)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\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;box-shadow:0 0 0 3px #6a6a6a1a}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{position:absolute;top:110%;left:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.dual-calendar-mode.has-ranges .dual-calendar{border-left:1px solid #eee}.calendar-popup.drop-up{top:auto;bottom:110%;animation:slideUp .2s ease-out}.calendar-popup.position-right{left:auto;right:0}.calendar-popup.position-center{left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ranges{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #eee;min-width:150px;padding-right:8px}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px;border-left:1px solid #eee}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;text-align:center;text-transform:capitalize}.nav-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:11.5px 14px;color:#666;border-radius:4px;transition:all .2s;line-height:1;height:30px;width:30px;display:flex;justify-content:center;align-items:center}.nav-btn:hover{background:#f0f0f0;color:#000}.nav-btn img{width:auto;max-width:none!important}.calendar-table{width:100%;border-collapse:collapse;text-align:center}.weekday-header{font-size:12px;color:#7e7e7e;font-weight:600;padding:8px 4px;letter-spacing:.3px}.calendar-day{padding:8px 4px;font-size:14px;cursor:pointer;border-radius:6px;transition:all .2s;position:relative;color:#333;font-weight:500;line-height:1.5}.calendar-day:hover:not(.disabled):not(.other-month){background:#efefef;color:#000}.calendar-day.other-month{color:#ccc;cursor:default}.calendar-day.disabled{color:#ddd;cursor:not-allowed;opacity:.5}.calendar-day.active{background:#000!important;color:#fff!important;font-weight:600}.calendar-day.today{font-weight:600}.calendar-day.today:not(.active){background:#e5e4e4}.calendar-day.active:hover{background:#000!important}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%;border-left:1px solid #eee}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-cancel:hover{background:#f5f5f5;border-color:#bbb}.btn-apply{background:#000;color:#fff}.btn-apply:hover{background:#333}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.dual-calendar{flex-direction:column}.time-input-group{flex-wrap:wrap;justify-content:center}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}\n"] }]
         }], ctorParameters: () => [{ type: CalendarManagerService }], propDecorators: { enableTimepicker: [{
                 type: Input
             }], autoApply: [{
@@ -1921,7 +1921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
-class ScheduledDatePickerComponent {
+class BkScheduledDatePicker {
     timeFormat = 12;
     enableSeconds = false;
     scheduled = new EventEmitter();
@@ -2211,12 +2211,12 @@ class ScheduledDatePickerComponent {
     apply() {
         this.emitScheduled();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ScheduledDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ScheduledDatePickerComponent, isStandalone: true, selector: "bk-scheduled-date-picker", inputs: { timeFormat: "timeFormat", enableSeconds: "enableSeconds" }, outputs: { scheduled: "scheduled", cleared: "cleared" }, ngImport: i0, template: "<div class=\"scheduled-date-picker-container\">\r\n  <!-- Header with Tabs -->\r\n\r\n\r\n  <!-- Main Content Area -->\r\n\r\n  <div class=\"scheduled-content\">\r\n    <!-- Left Side: Calendar -->\r\n    <div class=\"calendar-section\">\r\n      <h2 class=\"scheduled-title\">Scheduled Dates</h2>\r\n      <div class=\"tabs\">\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'single'\"\r\n          (click)=\"onTabChange('single')\">\r\n          Single Date\r\n        </button>\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'multiple'\"\r\n          (click)=\"onTabChange('multiple')\">\r\n          Multiple Dates\r\n        </button>\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'range'\"\r\n          (click)=\"onTabChange('range')\">\r\n          Date Range\r\n        </button>\r\n      </div>\r\n      <!-- Single Date Calendar -->\r\n      <div *ngIf=\"activeTab === 'single'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"true\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select a date\"\r\n          (selected)=\"onSingleDateSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Multiple Dates Calendar -->\r\n      <div *ngIf=\"activeTab === 'multiple'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"false\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [multiDateSelection]=\"true\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select multiple dates\"\r\n          (selected)=\"onMultipleDatesSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Date Range Calendar -->\r\n      <div *ngIf=\"activeTab === 'range'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"false\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select date range\"\r\n          (selected)=\"onRangeSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Right Side: Time Configuration -->\r\n    <div class=\"time-config-section\">\r\n      <h3 class=\"time-config-title\">Time Configuration</h3>\r\n\r\n      <!-- Single Date Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'single'\">\r\n        <div *ngIf=\"singleDate\" class=\"time-config-item\">\r\n          <div class=\"time-config-header\">\r\n            <span class=\"date-label\">{{ formatDate(singleDate) }}</span>\r\n            <label class=\"all-day-toggle\">\r\n              <span class=\"toggle-label\">All Day</span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"singleAllDay\"\r\n                (change)=\"onSingleAllDayChange()\">\r\n            </label>\r\n          </div>\r\n          <div *ngIf=\"!singleAllDay\" class=\"time-inputs\">\r\n            <bk-time-picker\r\n              pickerId=\"single-start\"\r\n              label=\"Start Time\"\r\n              [value]=\"singleStartTime\"\r\n              [position]=\"'left'\"\r\n              [closePicker]=\"shouldClosePicker('single-start')\"\r\n              (timeChange)=\"onSingleStartTimeChange($event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n            <bk-time-picker\r\n              pickerId=\"single-end\"\r\n              label=\"End Time\"\r\n              [value]=\"singleEndTime\"\r\n              [position]=\"'right'\"\r\n              [closePicker]=\"shouldClosePicker('single-end')\"\r\n              (timeChange)=\"onSingleEndTimeChange($event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"!singleDate\" class=\"no-selection\">\r\n          <p>No date selected. Select a date from the calendar.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Multiple Dates Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'multiple'\" class=\"time-config-list\">\r\n        <div\r\n          *ngFor=\"let dateConfig of multipleDates; let i = index\"\r\n          class=\"time-config-item\">\r\n          <div class=\"time-config-header\">\r\n            <span class=\"date-label\">{{ formatDate(dateConfig.date) }}</span>\r\n            <label class=\"all-day-toggle\">\r\n              <span class=\"toggle-label\">All Day</span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"dateConfig.allDay\"\r\n                (change)=\"onMultipleDateAllDayChange(i)\">\r\n            </label>\r\n          </div>\r\n          <div *ngIf=\"!dateConfig.allDay\" class=\"time-inputs\">\r\n            <bk-time-picker\r\n              [pickerId]=\"'multiple-' + i + '-start'\"\r\n              label=\"Start Time\"\r\n              [value]=\"dateConfig.startTime\"\r\n              [position]=\"'left'\"\r\n              [closePicker]=\"shouldClosePicker('multiple-' + i + '-start')\"\r\n              (timeChange)=\"onMultipleDateStartTimeChange(i, $event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n            <bk-time-picker\r\n              [pickerId]=\"'multiple-' + i + '-end'\"\r\n              label=\"End Time\"\r\n              [value]=\"dateConfig.endTime\"\r\n              [position]=\"'right'\"\r\n              [closePicker]=\"shouldClosePicker('multiple-' + i + '-end')\"\r\n              (timeChange)=\"onMultipleDateEndTimeChange(i, $event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"multipleDates.length === 0\" class=\"no-selection\">\r\n          <p>No dates selected. Select dates from the calendar.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Date Range Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'range' && rangeStartDate && rangeEndDate\" class=\"time-config-item\">\r\n        <div class=\"time-config-header\">\r\n          <span class=\"date-label\">{{ formatDate(rangeStartDate) }} - {{ formatDate(rangeEndDate) }}</span>\r\n          <label class=\"all-day-toggle\">\r\n            <span class=\"toggle-label\">All Day</span>\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"rangeAllDay\"\r\n              (change)=\"onRangeAllDayChange()\">\r\n          </label>\r\n        </div>\r\n        <div *ngIf=\"!rangeAllDay\" class=\"time-inputs\">\r\n          <bk-time-picker\r\n            pickerId=\"range-start\"\r\n            label=\"Start Time\"\r\n            [value]=\"rangeStartTime\"\r\n            [position]=\"'left'\"\r\n            [closePicker]=\"shouldClosePicker('range-start')\"\r\n            (timeChange)=\"onRangeStartTimeChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n          <bk-time-picker\r\n            pickerId=\"range-end\"\r\n            label=\"End Time\"\r\n            [value]=\"rangeEndTime\"\r\n            [position]=\"'right'\"\r\n            [closePicker]=\"shouldClosePicker('range-end')\"\r\n            (timeChange)=\"onRangeEndTimeChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"activeTab === 'range' && (!rangeStartDate || !rangeEndDate)\" class=\"no-selection\">\r\n        <p>No date range selected. Select a date range from the calendar.</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Action Buttons -->\r\n  <div class=\"action-buttons\">\r\n    <button class=\"btn-clear\" (click)=\"clear()\">Clear</button>\r\n    <button class=\"btn-apply\" (click)=\"apply()\">Apply</button>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".scheduled-date-picker-container{font-family:Inter,sans-serif;background:#fff;border-radius:12px;padding:0;box-shadow:0 2px 8px #0000001a;overflow:hidden;width:100%;max-width:100%;box-sizing:border-box}.scheduled-header{padding:24px 24px 16px;border-bottom:1px solid #e5e7eb;background:#fff}.scheduled-title{font-size:18px;font-weight:500;line-height:26px;color:#111827;letter-spacing:-.28px;margin:0 0 16px}.tabs{display:flex;margin-bottom:16px;border-radius:6px;padding:3px;background-color:#54578e12}.tab-button{padding:5px 11px;border:none;background:transparent;color:#6b7080;font-size:11px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .2s;font-family:Inter,sans-serif;flex:1;border-radius:4px}.tab-button.active{color:#15191e;border-color:#42578a26;background:#fff}.scheduled-content{display:flex;gap:0;align-items:stretch}.calendar-section{flex:0 0 55%;max-width:55%;padding:12px;border-right:1px solid #e5e7eb;background:#fff;box-sizing:border-box}.calendar-wrapper-inline{width:100%}.calendar-wrapper-inline app-custom-calendar{width:100%}.time-config-section{flex:0 0 45%;max-width:45%;padding:12px;background:#fff;overflow-y:auto;max-height:600px;box-sizing:border-box}.time-config-title{font-size:16px;font-weight:600;color:#111827;margin:17px 0 14px}.time-config-item{padding:14px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.time-config-header{display:flex;justify-content:space-between;align-items:center}.date-label{font-size:12px;font-weight:500;color:#15191e;letter-spacing:-.28px}.all-day-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.all-day-toggle input[type=checkbox]{width:28px;height:16px;appearance:none;background:#bbbdc5;border-radius:10px;position:relative;cursor:pointer;transition:background .2s;margin:0}.all-day-toggle input[type=checkbox]:checked{background:#22973f}.all-day-toggle input[type=checkbox]:before{content:\"\";position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;top:1.5px;left:2.5px;transition:transform .2s;box-shadow:0 1px 3px #0003}.all-day-toggle input[type=checkbox]:checked:before{transform:translate(12px)}.toggle-label{font-size:12px;font-weight:500;color:#111827}.all-day-toggle input[type=checkbox]:checked+.toggle-label{color:#111827}.time-inputs{display:flex;gap:14px;margin-top:12px}.time-config-list{display:flex;flex-direction:column;gap:14px;max-height:350px;overflow-y:auto;padding-right:4px}.time-config-list::-webkit-scrollbar{width:6px;height:6px}.time-config-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.time-config-list::-webkit-scrollbar-thumb{background:#b4b4b4;border-radius:3px}.time-config-list::-webkit-scrollbar-thumb:hover{background:#9b9b9b}.no-selection{padding:24px;text-align:center;color:#9ca3af;font-size:14px}.action-buttons{display:flex;justify-content:flex-end;gap:12px;padding:12px;border-top:1px solid #e5e7eb;background:#fff}.btn-clear,.btn-apply{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;font-family:Inter,sans-serif;min-width:80px}.btn-clear{background:#fff;color:#6b7280;border:1px solid #d1d5db}.btn-clear:hover{background:#f9fafb;border-color:#9ca3af}.btn-apply{background:#111827;color:#fff}.btn-apply:hover{background:#374151}@media (max-width: 1200px){.calendar-section{flex:0 0 52%;max-width:52%}.time-config-section{flex:0 0 48%;max-width:48%}}@media (max-width: 1024px){.scheduled-content{flex-direction:column}.calendar-section{flex:1 1 auto;max-width:100%;border-right:none;border-bottom:1px solid #e5e7eb}.time-config-section{flex:1 1 auto;max-width:100%;max-height:none}.time-config-list{max-height:320px}}@media (max-width: 768px){.scheduled-date-picker-container{border-radius:0}.scheduled-header{padding:16px}.calendar-section,.time-config-section{padding:12px 16px}.tabs{overflow-x:auto}.tab-button{white-space:nowrap;font-size:12px;padding:6px 10px}.time-inputs{flex-direction:column}.time-config-item{padding:12px}.action-buttons{padding:10px}}@media (max-width: 480px){.scheduled-title{font-size:16px}.time-config-title{font-size:14px}.date-label{font-size:11px}.time-config-list{max-height:260px}.btn-clear,.btn-apply{padding:8px 14px;font-size:13px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CustomCalendarComponent, selector: "bk-custom-calendar", inputs: ["enableTimepicker", "autoApply", "closeOnAutoApply", "showCancel", "linkedCalendars", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "customRangeDirection", "lockStartDate", "position", "drop", "dualCalendar", "showRanges", "timeFormat", "enableSeconds", "customRanges", "multiDateSelection", "maxDate", "minDate", "placeholder", "opens", "inline", "isDisplayCrossIcon", "selectedValue", "displayFormat"], outputs: ["selected", "opened", "closed"] }, { kind: "component", type: TimePickerComponent, selector: "bk-time-picker", inputs: ["value", "label", "placeholder", "position", "pickerId", "closePicker", "timeFormat", "showSeconds"], outputs: ["timeChange", "pickerOpened", "pickerClosed"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkScheduledDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BkScheduledDatePicker, isStandalone: true, selector: "bk-scheduled-date-picker", inputs: { timeFormat: "timeFormat", enableSeconds: "enableSeconds" }, outputs: { scheduled: "scheduled", cleared: "cleared" }, ngImport: i0, template: "<div class=\"scheduled-date-picker-container\">\r\n  <!-- Header with Tabs -->\r\n\r\n\r\n  <!-- Main Content Area -->\r\n\r\n  <div class=\"scheduled-content\">\r\n    <!-- Left Side: Calendar -->\r\n    <div class=\"calendar-section\">\r\n      <h2 class=\"scheduled-title\">Scheduled Dates</h2>\r\n      <div class=\"tabs\">\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'single'\"\r\n          (click)=\"onTabChange('single')\">\r\n          Single Date\r\n        </button>\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'multiple'\"\r\n          (click)=\"onTabChange('multiple')\">\r\n          Multiple Dates\r\n        </button>\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'range'\"\r\n          (click)=\"onTabChange('range')\">\r\n          Date Range\r\n        </button>\r\n      </div>\r\n      <!-- Single Date Calendar -->\r\n      <div *ngIf=\"activeTab === 'single'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"true\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select a date\"\r\n          (selected)=\"onSingleDateSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Multiple Dates Calendar -->\r\n      <div *ngIf=\"activeTab === 'multiple'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"false\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [multiDateSelection]=\"true\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select multiple dates\"\r\n          (selected)=\"onMultipleDatesSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Date Range Calendar -->\r\n      <div *ngIf=\"activeTab === 'range'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"false\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select date range\"\r\n          (selected)=\"onRangeSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Right Side: Time Configuration -->\r\n    <div class=\"time-config-section\">\r\n      <h3 class=\"time-config-title\">Time Configuration</h3>\r\n\r\n      <!-- Single Date Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'single'\">\r\n        <div *ngIf=\"singleDate\" class=\"time-config-item\">\r\n          <div class=\"time-config-header\">\r\n            <span class=\"date-label\">{{ formatDate(singleDate) }}</span>\r\n            <label class=\"all-day-toggle\">\r\n              <span class=\"toggle-label\">All Day</span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"singleAllDay\"\r\n                (change)=\"onSingleAllDayChange()\">\r\n            </label>\r\n          </div>\r\n          <div *ngIf=\"!singleAllDay\" class=\"time-inputs\">\r\n            <bk-time-picker\r\n              pickerId=\"single-start\"\r\n              label=\"Start Time\"\r\n              [value]=\"singleStartTime\"\r\n              [position]=\"'left'\"\r\n              [closePicker]=\"shouldClosePicker('single-start')\"\r\n              (timeChange)=\"onSingleStartTimeChange($event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n            <bk-time-picker\r\n              pickerId=\"single-end\"\r\n              label=\"End Time\"\r\n              [value]=\"singleEndTime\"\r\n              [position]=\"'right'\"\r\n              [closePicker]=\"shouldClosePicker('single-end')\"\r\n              (timeChange)=\"onSingleEndTimeChange($event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"!singleDate\" class=\"no-selection\">\r\n          <p>No date selected. Select a date from the calendar.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Multiple Dates Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'multiple'\" class=\"time-config-list\">\r\n        <div\r\n          *ngFor=\"let dateConfig of multipleDates; let i = index\"\r\n          class=\"time-config-item\">\r\n          <div class=\"time-config-header\">\r\n            <span class=\"date-label\">{{ formatDate(dateConfig.date) }}</span>\r\n            <label class=\"all-day-toggle\">\r\n              <span class=\"toggle-label\">All Day</span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"dateConfig.allDay\"\r\n                (change)=\"onMultipleDateAllDayChange(i)\">\r\n            </label>\r\n          </div>\r\n          <div *ngIf=\"!dateConfig.allDay\" class=\"time-inputs\">\r\n            <bk-time-picker\r\n              [pickerId]=\"'multiple-' + i + '-start'\"\r\n              label=\"Start Time\"\r\n              [value]=\"dateConfig.startTime\"\r\n              [position]=\"'left'\"\r\n              [closePicker]=\"shouldClosePicker('multiple-' + i + '-start')\"\r\n              (timeChange)=\"onMultipleDateStartTimeChange(i, $event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n            <bk-time-picker\r\n              [pickerId]=\"'multiple-' + i + '-end'\"\r\n              label=\"End Time\"\r\n              [value]=\"dateConfig.endTime\"\r\n              [position]=\"'right'\"\r\n              [closePicker]=\"shouldClosePicker('multiple-' + i + '-end')\"\r\n              (timeChange)=\"onMultipleDateEndTimeChange(i, $event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"multipleDates.length === 0\" class=\"no-selection\">\r\n          <p>No dates selected. Select dates from the calendar.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Date Range Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'range' && rangeStartDate && rangeEndDate\" class=\"time-config-item\">\r\n        <div class=\"time-config-header\">\r\n          <span class=\"date-label\">{{ formatDate(rangeStartDate) }} - {{ formatDate(rangeEndDate) }}</span>\r\n          <label class=\"all-day-toggle\">\r\n            <span class=\"toggle-label\">All Day</span>\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"rangeAllDay\"\r\n              (change)=\"onRangeAllDayChange()\">\r\n          </label>\r\n        </div>\r\n        <div *ngIf=\"!rangeAllDay\" class=\"time-inputs\">\r\n          <bk-time-picker\r\n            pickerId=\"range-start\"\r\n            label=\"Start Time\"\r\n            [value]=\"rangeStartTime\"\r\n            [position]=\"'left'\"\r\n            [closePicker]=\"shouldClosePicker('range-start')\"\r\n            (timeChange)=\"onRangeStartTimeChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n          <bk-time-picker\r\n            pickerId=\"range-end\"\r\n            label=\"End Time\"\r\n            [value]=\"rangeEndTime\"\r\n            [position]=\"'right'\"\r\n            [closePicker]=\"shouldClosePicker('range-end')\"\r\n            (timeChange)=\"onRangeEndTimeChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"activeTab === 'range' && (!rangeStartDate || !rangeEndDate)\" class=\"no-selection\">\r\n        <p>No date range selected. Select a date range from the calendar.</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Action Buttons -->\r\n  <div class=\"action-buttons\">\r\n    <button class=\"btn-clear\" (click)=\"clear()\">Clear</button>\r\n    <button class=\"btn-apply\" (click)=\"apply()\">Apply</button>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".scheduled-date-picker-container{font-family:Inter,sans-serif;background:#fff;border-radius:12px;padding:0;box-shadow:0 2px 8px #0000001a;overflow:hidden;width:100%;max-width:100%;box-sizing:border-box}.scheduled-header{padding:24px 24px 16px;border-bottom:1px solid #e5e7eb;background:#fff}.scheduled-title{font-size:18px;font-weight:500;line-height:26px;color:#111827;letter-spacing:-.28px;margin:0 0 16px}.tabs{display:flex;margin-bottom:16px;border-radius:6px;padding:3px;background-color:#54578e12}.tab-button{padding:5px 11px;border:none;background:transparent;color:#6b7080;font-size:11px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .2s;font-family:Inter,sans-serif;flex:1;border-radius:4px}.tab-button.active{color:#15191e;border-color:#42578a26;background:#fff}.scheduled-content{display:flex;gap:0;align-items:stretch}.calendar-section{flex:0 0 55%;max-width:55%;padding:12px;border-right:1px solid #e5e7eb;background:#fff;box-sizing:border-box}.calendar-wrapper-inline{width:100%}.calendar-wrapper-inline app-custom-calendar{width:100%}.time-config-section{flex:0 0 45%;max-width:45%;padding:12px;background:#fff;overflow-y:auto;max-height:600px;box-sizing:border-box}.time-config-title{font-size:16px;font-weight:600;color:#111827;margin:17px 0 14px}.time-config-item{padding:14px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.time-config-header{display:flex;justify-content:space-between;align-items:center}.date-label{font-size:12px;font-weight:500;color:#15191e;letter-spacing:-.28px}.all-day-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.all-day-toggle input[type=checkbox]{width:28px;height:16px;appearance:none;background:#bbbdc5;border-radius:10px;position:relative;cursor:pointer;transition:background .2s;margin:0}.all-day-toggle input[type=checkbox]:checked{background:#22973f}.all-day-toggle input[type=checkbox]:before{content:\"\";position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;top:1.5px;left:2.5px;transition:transform .2s;box-shadow:0 1px 3px #0003}.all-day-toggle input[type=checkbox]:checked:before{transform:translate(12px)}.toggle-label{font-size:12px;font-weight:500;color:#111827}.all-day-toggle input[type=checkbox]:checked+.toggle-label{color:#111827}.time-inputs{display:flex;gap:14px;margin-top:12px}.time-config-list{display:flex;flex-direction:column;gap:14px;max-height:350px;overflow-y:auto;padding-right:4px}.time-config-list::-webkit-scrollbar{width:6px;height:6px}.time-config-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.time-config-list::-webkit-scrollbar-thumb{background:#b4b4b4;border-radius:3px}.time-config-list::-webkit-scrollbar-thumb:hover{background:#9b9b9b}.no-selection{padding:24px;text-align:center;color:#9ca3af;font-size:14px}.action-buttons{display:flex;justify-content:flex-end;gap:12px;padding:12px;border-top:1px solid #e5e7eb;background:#fff}.btn-clear,.btn-apply{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;font-family:Inter,sans-serif;min-width:80px}.btn-clear{background:#fff;color:#6b7280;border:1px solid #d1d5db}.btn-clear:hover{background:#f9fafb;border-color:#9ca3af}.btn-apply{background:#111827;color:#fff}.btn-apply:hover{background:#374151}@media (max-width: 1200px){.calendar-section{flex:0 0 52%;max-width:52%}.time-config-section{flex:0 0 48%;max-width:48%}}@media (max-width: 1024px){.scheduled-content{flex-direction:column}.calendar-section{flex:1 1 auto;max-width:100%;border-right:none;border-bottom:1px solid #e5e7eb}.time-config-section{flex:1 1 auto;max-width:100%;max-height:none}.time-config-list{max-height:320px}}@media (max-width: 768px){.scheduled-date-picker-container{border-radius:0}.scheduled-header{padding:16px}.calendar-section,.time-config-section{padding:12px 16px}.tabs{overflow-x:auto}.tab-button{white-space:nowrap;font-size:12px;padding:6px 10px}.time-inputs{flex-direction:column}.time-config-item{padding:12px}.action-buttons{padding:10px}}@media (max-width: 480px){.scheduled-title{font-size:16px}.time-config-title{font-size:14px}.date-label{font-size:11px}.time-config-list{max-height:260px}.btn-clear,.btn-apply{padding:8px 14px;font-size:13px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: BkCustomCalendar, selector: "bk-custom-calendar", inputs: ["enableTimepicker", "autoApply", "closeOnAutoApply", "showCancel", "linkedCalendars", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "customRangeDirection", "lockStartDate", "position", "drop", "dualCalendar", "showRanges", "timeFormat", "enableSeconds", "customRanges", "multiDateSelection", "maxDate", "minDate", "placeholder", "opens", "inline", "isDisplayCrossIcon", "selectedValue", "displayFormat"], outputs: ["selected", "opened", "closed"] }, { kind: "component", type: BkTimePicker, selector: "bk-time-picker", inputs: ["value", "label", "placeholder", "position", "pickerId", "closePicker", "timeFormat", "showSeconds"], outputs: ["timeChange", "pickerOpened", "pickerClosed"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ScheduledDatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkScheduledDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-scheduled-date-picker', standalone: true, imports: [CommonModule, FormsModule, CustomCalendarComponent, TimePickerComponent], template: "<div class=\"scheduled-date-picker-container\">\r\n  <!-- Header with Tabs -->\r\n\r\n\r\n  <!-- Main Content Area -->\r\n\r\n  <div class=\"scheduled-content\">\r\n    <!-- Left Side: Calendar -->\r\n    <div class=\"calendar-section\">\r\n      <h2 class=\"scheduled-title\">Scheduled Dates</h2>\r\n      <div class=\"tabs\">\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'single'\"\r\n          (click)=\"onTabChange('single')\">\r\n          Single Date\r\n        </button>\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'multiple'\"\r\n          (click)=\"onTabChange('multiple')\">\r\n          Multiple Dates\r\n        </button>\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'range'\"\r\n          (click)=\"onTabChange('range')\">\r\n          Date Range\r\n        </button>\r\n      </div>\r\n      <!-- Single Date Calendar -->\r\n      <div *ngIf=\"activeTab === 'single'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"true\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select a date\"\r\n          (selected)=\"onSingleDateSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Multiple Dates Calendar -->\r\n      <div *ngIf=\"activeTab === 'multiple'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"false\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [multiDateSelection]=\"true\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select multiple dates\"\r\n          (selected)=\"onMultipleDatesSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Date Range Calendar -->\r\n      <div *ngIf=\"activeTab === 'range'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"false\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select date range\"\r\n          (selected)=\"onRangeSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Right Side: Time Configuration -->\r\n    <div class=\"time-config-section\">\r\n      <h3 class=\"time-config-title\">Time Configuration</h3>\r\n\r\n      <!-- Single Date Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'single'\">\r\n        <div *ngIf=\"singleDate\" class=\"time-config-item\">\r\n          <div class=\"time-config-header\">\r\n            <span class=\"date-label\">{{ formatDate(singleDate) }}</span>\r\n            <label class=\"all-day-toggle\">\r\n              <span class=\"toggle-label\">All Day</span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"singleAllDay\"\r\n                (change)=\"onSingleAllDayChange()\">\r\n            </label>\r\n          </div>\r\n          <div *ngIf=\"!singleAllDay\" class=\"time-inputs\">\r\n            <bk-time-picker\r\n              pickerId=\"single-start\"\r\n              label=\"Start Time\"\r\n              [value]=\"singleStartTime\"\r\n              [position]=\"'left'\"\r\n              [closePicker]=\"shouldClosePicker('single-start')\"\r\n              (timeChange)=\"onSingleStartTimeChange($event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n            <bk-time-picker\r\n              pickerId=\"single-end\"\r\n              label=\"End Time\"\r\n              [value]=\"singleEndTime\"\r\n              [position]=\"'right'\"\r\n              [closePicker]=\"shouldClosePicker('single-end')\"\r\n              (timeChange)=\"onSingleEndTimeChange($event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"!singleDate\" class=\"no-selection\">\r\n          <p>No date selected. Select a date from the calendar.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Multiple Dates Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'multiple'\" class=\"time-config-list\">\r\n        <div\r\n          *ngFor=\"let dateConfig of multipleDates; let i = index\"\r\n          class=\"time-config-item\">\r\n          <div class=\"time-config-header\">\r\n            <span class=\"date-label\">{{ formatDate(dateConfig.date) }}</span>\r\n            <label class=\"all-day-toggle\">\r\n              <span class=\"toggle-label\">All Day</span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"dateConfig.allDay\"\r\n                (change)=\"onMultipleDateAllDayChange(i)\">\r\n            </label>\r\n          </div>\r\n          <div *ngIf=\"!dateConfig.allDay\" class=\"time-inputs\">\r\n            <bk-time-picker\r\n              [pickerId]=\"'multiple-' + i + '-start'\"\r\n              label=\"Start Time\"\r\n              [value]=\"dateConfig.startTime\"\r\n              [position]=\"'left'\"\r\n              [closePicker]=\"shouldClosePicker('multiple-' + i + '-start')\"\r\n              (timeChange)=\"onMultipleDateStartTimeChange(i, $event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n            <bk-time-picker\r\n              [pickerId]=\"'multiple-' + i + '-end'\"\r\n              label=\"End Time\"\r\n              [value]=\"dateConfig.endTime\"\r\n              [position]=\"'right'\"\r\n              [closePicker]=\"shouldClosePicker('multiple-' + i + '-end')\"\r\n              (timeChange)=\"onMultipleDateEndTimeChange(i, $event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"multipleDates.length === 0\" class=\"no-selection\">\r\n          <p>No dates selected. Select dates from the calendar.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Date Range Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'range' && rangeStartDate && rangeEndDate\" class=\"time-config-item\">\r\n        <div class=\"time-config-header\">\r\n          <span class=\"date-label\">{{ formatDate(rangeStartDate) }} - {{ formatDate(rangeEndDate) }}</span>\r\n          <label class=\"all-day-toggle\">\r\n            <span class=\"toggle-label\">All Day</span>\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"rangeAllDay\"\r\n              (change)=\"onRangeAllDayChange()\">\r\n          </label>\r\n        </div>\r\n        <div *ngIf=\"!rangeAllDay\" class=\"time-inputs\">\r\n          <bk-time-picker\r\n            pickerId=\"range-start\"\r\n            label=\"Start Time\"\r\n            [value]=\"rangeStartTime\"\r\n            [position]=\"'left'\"\r\n            [closePicker]=\"shouldClosePicker('range-start')\"\r\n            (timeChange)=\"onRangeStartTimeChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n          <bk-time-picker\r\n            pickerId=\"range-end\"\r\n            label=\"End Time\"\r\n            [value]=\"rangeEndTime\"\r\n            [position]=\"'right'\"\r\n            [closePicker]=\"shouldClosePicker('range-end')\"\r\n            (timeChange)=\"onRangeEndTimeChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"activeTab === 'range' && (!rangeStartDate || !rangeEndDate)\" class=\"no-selection\">\r\n        <p>No date range selected. Select a date range from the calendar.</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Action Buttons -->\r\n  <div class=\"action-buttons\">\r\n    <button class=\"btn-clear\" (click)=\"clear()\">Clear</button>\r\n    <button class=\"btn-apply\" (click)=\"apply()\">Apply</button>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".scheduled-date-picker-container{font-family:Inter,sans-serif;background:#fff;border-radius:12px;padding:0;box-shadow:0 2px 8px #0000001a;overflow:hidden;width:100%;max-width:100%;box-sizing:border-box}.scheduled-header{padding:24px 24px 16px;border-bottom:1px solid #e5e7eb;background:#fff}.scheduled-title{font-size:18px;font-weight:500;line-height:26px;color:#111827;letter-spacing:-.28px;margin:0 0 16px}.tabs{display:flex;margin-bottom:16px;border-radius:6px;padding:3px;background-color:#54578e12}.tab-button{padding:5px 11px;border:none;background:transparent;color:#6b7080;font-size:11px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .2s;font-family:Inter,sans-serif;flex:1;border-radius:4px}.tab-button.active{color:#15191e;border-color:#42578a26;background:#fff}.scheduled-content{display:flex;gap:0;align-items:stretch}.calendar-section{flex:0 0 55%;max-width:55%;padding:12px;border-right:1px solid #e5e7eb;background:#fff;box-sizing:border-box}.calendar-wrapper-inline{width:100%}.calendar-wrapper-inline app-custom-calendar{width:100%}.time-config-section{flex:0 0 45%;max-width:45%;padding:12px;background:#fff;overflow-y:auto;max-height:600px;box-sizing:border-box}.time-config-title{font-size:16px;font-weight:600;color:#111827;margin:17px 0 14px}.time-config-item{padding:14px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.time-config-header{display:flex;justify-content:space-between;align-items:center}.date-label{font-size:12px;font-weight:500;color:#15191e;letter-spacing:-.28px}.all-day-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.all-day-toggle input[type=checkbox]{width:28px;height:16px;appearance:none;background:#bbbdc5;border-radius:10px;position:relative;cursor:pointer;transition:background .2s;margin:0}.all-day-toggle input[type=checkbox]:checked{background:#22973f}.all-day-toggle input[type=checkbox]:before{content:\"\";position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;top:1.5px;left:2.5px;transition:transform .2s;box-shadow:0 1px 3px #0003}.all-day-toggle input[type=checkbox]:checked:before{transform:translate(12px)}.toggle-label{font-size:12px;font-weight:500;color:#111827}.all-day-toggle input[type=checkbox]:checked+.toggle-label{color:#111827}.time-inputs{display:flex;gap:14px;margin-top:12px}.time-config-list{display:flex;flex-direction:column;gap:14px;max-height:350px;overflow-y:auto;padding-right:4px}.time-config-list::-webkit-scrollbar{width:6px;height:6px}.time-config-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.time-config-list::-webkit-scrollbar-thumb{background:#b4b4b4;border-radius:3px}.time-config-list::-webkit-scrollbar-thumb:hover{background:#9b9b9b}.no-selection{padding:24px;text-align:center;color:#9ca3af;font-size:14px}.action-buttons{display:flex;justify-content:flex-end;gap:12px;padding:12px;border-top:1px solid #e5e7eb;background:#fff}.btn-clear,.btn-apply{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;font-family:Inter,sans-serif;min-width:80px}.btn-clear{background:#fff;color:#6b7280;border:1px solid #d1d5db}.btn-clear:hover{background:#f9fafb;border-color:#9ca3af}.btn-apply{background:#111827;color:#fff}.btn-apply:hover{background:#374151}@media (max-width: 1200px){.calendar-section{flex:0 0 52%;max-width:52%}.time-config-section{flex:0 0 48%;max-width:48%}}@media (max-width: 1024px){.scheduled-content{flex-direction:column}.calendar-section{flex:1 1 auto;max-width:100%;border-right:none;border-bottom:1px solid #e5e7eb}.time-config-section{flex:1 1 auto;max-width:100%;max-height:none}.time-config-list{max-height:320px}}@media (max-width: 768px){.scheduled-date-picker-container{border-radius:0}.scheduled-header{padding:16px}.calendar-section,.time-config-section{padding:12px 16px}.tabs{overflow-x:auto}.tab-button{white-space:nowrap;font-size:12px;padding:6px 10px}.time-inputs{flex-direction:column}.time-config-item{padding:12px}.action-buttons{padding:10px}}@media (max-width: 480px){.scheduled-title{font-size:16px}.time-config-title{font-size:14px}.date-label{font-size:11px}.time-config-list{max-height:260px}.btn-clear,.btn-apply{padding:8px 14px;font-size:13px}}\n"] }]
+            args: [{ selector: 'bk-scheduled-date-picker', standalone: true, imports: [CommonModule, FormsModule, BkCustomCalendar, BkTimePicker], template: "<div class=\"scheduled-date-picker-container\">\r\n  <!-- Header with Tabs -->\r\n\r\n\r\n  <!-- Main Content Area -->\r\n\r\n  <div class=\"scheduled-content\">\r\n    <!-- Left Side: Calendar -->\r\n    <div class=\"calendar-section\">\r\n      <h2 class=\"scheduled-title\">Scheduled Dates</h2>\r\n      <div class=\"tabs\">\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'single'\"\r\n          (click)=\"onTabChange('single')\">\r\n          Single Date\r\n        </button>\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'multiple'\"\r\n          (click)=\"onTabChange('multiple')\">\r\n          Multiple Dates\r\n        </button>\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'range'\"\r\n          (click)=\"onTabChange('range')\">\r\n          Date Range\r\n        </button>\r\n      </div>\r\n      <!-- Single Date Calendar -->\r\n      <div *ngIf=\"activeTab === 'single'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"true\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select a date\"\r\n          (selected)=\"onSingleDateSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Multiple Dates Calendar -->\r\n      <div *ngIf=\"activeTab === 'multiple'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"false\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [multiDateSelection]=\"true\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select multiple dates\"\r\n          (selected)=\"onMultipleDatesSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Date Range Calendar -->\r\n      <div *ngIf=\"activeTab === 'range'\" class=\"calendar-wrapper-inline\">\r\n        <bk-custom-calendar\r\n          [inline]=\"true\"\r\n          [dualCalendar]=\"false\"\r\n          [singleDatePicker]=\"false\"\r\n          [showRanges]=\"false\"\r\n          [enableTimepicker]=\"false\"\r\n          [showCancel]=\"false\"\r\n          placeholder=\"Select date range\"\r\n          (selected)=\"onRangeSelected($event)\">\r\n        </bk-custom-calendar>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Right Side: Time Configuration -->\r\n    <div class=\"time-config-section\">\r\n      <h3 class=\"time-config-title\">Time Configuration</h3>\r\n\r\n      <!-- Single Date Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'single'\">\r\n        <div *ngIf=\"singleDate\" class=\"time-config-item\">\r\n          <div class=\"time-config-header\">\r\n            <span class=\"date-label\">{{ formatDate(singleDate) }}</span>\r\n            <label class=\"all-day-toggle\">\r\n              <span class=\"toggle-label\">All Day</span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"singleAllDay\"\r\n                (change)=\"onSingleAllDayChange()\">\r\n            </label>\r\n          </div>\r\n          <div *ngIf=\"!singleAllDay\" class=\"time-inputs\">\r\n            <bk-time-picker\r\n              pickerId=\"single-start\"\r\n              label=\"Start Time\"\r\n              [value]=\"singleStartTime\"\r\n              [position]=\"'left'\"\r\n              [closePicker]=\"shouldClosePicker('single-start')\"\r\n              (timeChange)=\"onSingleStartTimeChange($event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n            <bk-time-picker\r\n              pickerId=\"single-end\"\r\n              label=\"End Time\"\r\n              [value]=\"singleEndTime\"\r\n              [position]=\"'right'\"\r\n              [closePicker]=\"shouldClosePicker('single-end')\"\r\n              (timeChange)=\"onSingleEndTimeChange($event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"!singleDate\" class=\"no-selection\">\r\n          <p>No date selected. Select a date from the calendar.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Multiple Dates Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'multiple'\" class=\"time-config-list\">\r\n        <div\r\n          *ngFor=\"let dateConfig of multipleDates; let i = index\"\r\n          class=\"time-config-item\">\r\n          <div class=\"time-config-header\">\r\n            <span class=\"date-label\">{{ formatDate(dateConfig.date) }}</span>\r\n            <label class=\"all-day-toggle\">\r\n              <span class=\"toggle-label\">All Day</span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"dateConfig.allDay\"\r\n                (change)=\"onMultipleDateAllDayChange(i)\">\r\n            </label>\r\n          </div>\r\n          <div *ngIf=\"!dateConfig.allDay\" class=\"time-inputs\">\r\n            <bk-time-picker\r\n              [pickerId]=\"'multiple-' + i + '-start'\"\r\n              label=\"Start Time\"\r\n              [value]=\"dateConfig.startTime\"\r\n              [position]=\"'left'\"\r\n              [closePicker]=\"shouldClosePicker('multiple-' + i + '-start')\"\r\n              (timeChange)=\"onMultipleDateStartTimeChange(i, $event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n            <bk-time-picker\r\n              [pickerId]=\"'multiple-' + i + '-end'\"\r\n              label=\"End Time\"\r\n              [value]=\"dateConfig.endTime\"\r\n              [position]=\"'right'\"\r\n              [closePicker]=\"shouldClosePicker('multiple-' + i + '-end')\"\r\n              (timeChange)=\"onMultipleDateEndTimeChange(i, $event)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"multipleDates.length === 0\" class=\"no-selection\">\r\n          <p>No dates selected. Select dates from the calendar.</p>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Date Range Time Configuration -->\r\n      <div *ngIf=\"activeTab === 'range' && rangeStartDate && rangeEndDate\" class=\"time-config-item\">\r\n        <div class=\"time-config-header\">\r\n          <span class=\"date-label\">{{ formatDate(rangeStartDate) }} - {{ formatDate(rangeEndDate) }}</span>\r\n          <label class=\"all-day-toggle\">\r\n            <span class=\"toggle-label\">All Day</span>\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"rangeAllDay\"\r\n              (change)=\"onRangeAllDayChange()\">\r\n          </label>\r\n        </div>\r\n        <div *ngIf=\"!rangeAllDay\" class=\"time-inputs\">\r\n          <bk-time-picker\r\n            pickerId=\"range-start\"\r\n            label=\"Start Time\"\r\n            [value]=\"rangeStartTime\"\r\n            [position]=\"'left'\"\r\n            [closePicker]=\"shouldClosePicker('range-start')\"\r\n            (timeChange)=\"onRangeStartTimeChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n          <bk-time-picker\r\n            pickerId=\"range-end\"\r\n            label=\"End Time\"\r\n            [value]=\"rangeEndTime\"\r\n            [position]=\"'right'\"\r\n            [closePicker]=\"shouldClosePicker('range-end')\"\r\n            (timeChange)=\"onRangeEndTimeChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"activeTab === 'range' && (!rangeStartDate || !rangeEndDate)\" class=\"no-selection\">\r\n        <p>No date range selected. Select a date range from the calendar.</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Action Buttons -->\r\n  <div class=\"action-buttons\">\r\n    <button class=\"btn-clear\" (click)=\"clear()\">Clear</button>\r\n    <button class=\"btn-apply\" (click)=\"apply()\">Apply</button>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".scheduled-date-picker-container{font-family:Inter,sans-serif;background:#fff;border-radius:12px;padding:0;box-shadow:0 2px 8px #0000001a;overflow:hidden;width:100%;max-width:100%;box-sizing:border-box}.scheduled-header{padding:24px 24px 16px;border-bottom:1px solid #e5e7eb;background:#fff}.scheduled-title{font-size:18px;font-weight:500;line-height:26px;color:#111827;letter-spacing:-.28px;margin:0 0 16px}.tabs{display:flex;margin-bottom:16px;border-radius:6px;padding:3px;background-color:#54578e12}.tab-button{padding:5px 11px;border:none;background:transparent;color:#6b7080;font-size:11px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .2s;font-family:Inter,sans-serif;flex:1;border-radius:4px}.tab-button.active{color:#15191e;border-color:#42578a26;background:#fff}.scheduled-content{display:flex;gap:0;align-items:stretch}.calendar-section{flex:0 0 55%;max-width:55%;padding:12px;border-right:1px solid #e5e7eb;background:#fff;box-sizing:border-box}.calendar-wrapper-inline{width:100%}.calendar-wrapper-inline app-custom-calendar{width:100%}.time-config-section{flex:0 0 45%;max-width:45%;padding:12px;background:#fff;overflow-y:auto;max-height:600px;box-sizing:border-box}.time-config-title{font-size:16px;font-weight:600;color:#111827;margin:17px 0 14px}.time-config-item{padding:14px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.time-config-header{display:flex;justify-content:space-between;align-items:center}.date-label{font-size:12px;font-weight:500;color:#15191e;letter-spacing:-.28px}.all-day-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.all-day-toggle input[type=checkbox]{width:28px;height:16px;appearance:none;background:#bbbdc5;border-radius:10px;position:relative;cursor:pointer;transition:background .2s;margin:0}.all-day-toggle input[type=checkbox]:checked{background:#22973f}.all-day-toggle input[type=checkbox]:before{content:\"\";position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;top:1.5px;left:2.5px;transition:transform .2s;box-shadow:0 1px 3px #0003}.all-day-toggle input[type=checkbox]:checked:before{transform:translate(12px)}.toggle-label{font-size:12px;font-weight:500;color:#111827}.all-day-toggle input[type=checkbox]:checked+.toggle-label{color:#111827}.time-inputs{display:flex;gap:14px;margin-top:12px}.time-config-list{display:flex;flex-direction:column;gap:14px;max-height:350px;overflow-y:auto;padding-right:4px}.time-config-list::-webkit-scrollbar{width:6px;height:6px}.time-config-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.time-config-list::-webkit-scrollbar-thumb{background:#b4b4b4;border-radius:3px}.time-config-list::-webkit-scrollbar-thumb:hover{background:#9b9b9b}.no-selection{padding:24px;text-align:center;color:#9ca3af;font-size:14px}.action-buttons{display:flex;justify-content:flex-end;gap:12px;padding:12px;border-top:1px solid #e5e7eb;background:#fff}.btn-clear,.btn-apply{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;font-family:Inter,sans-serif;min-width:80px}.btn-clear{background:#fff;color:#6b7280;border:1px solid #d1d5db}.btn-clear:hover{background:#f9fafb;border-color:#9ca3af}.btn-apply{background:#111827;color:#fff}.btn-apply:hover{background:#374151}@media (max-width: 1200px){.calendar-section{flex:0 0 52%;max-width:52%}.time-config-section{flex:0 0 48%;max-width:48%}}@media (max-width: 1024px){.scheduled-content{flex-direction:column}.calendar-section{flex:1 1 auto;max-width:100%;border-right:none;border-bottom:1px solid #e5e7eb}.time-config-section{flex:1 1 auto;max-width:100%;max-height:none}.time-config-list{max-height:320px}}@media (max-width: 768px){.scheduled-date-picker-container{border-radius:0}.scheduled-header{padding:16px}.calendar-section,.time-config-section{padding:12px 16px}.tabs{overflow-x:auto}.tab-button{white-space:nowrap;font-size:12px;padding:6px 10px}.time-inputs{flex-direction:column}.time-config-item{padding:12px}.action-buttons{padding:10px}}@media (max-width: 480px){.scheduled-title{font-size:16px}.time-config-title{font-size:14px}.date-label{font-size:11px}.time-config-list{max-height:260px}.btn-clear,.btn-apply{padding:8px 14px;font-size:13px}}\n"] }]
         }], propDecorators: { timeFormat: [{
                 type: Input
             }], enableSeconds: [{
@@ -2241,34 +2241,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class CalendarModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: CalendarModule, imports: [CommonModule,
-            CustomCalendarComponent,
-            ScheduledDatePickerComponent,
-            TimePickerComponent], exports: [CustomCalendarComponent,
-            ScheduledDatePickerComponent,
-            TimePickerComponent] });
+            BkCustomCalendar,
+            BkScheduledDatePicker,
+            BkTimePicker], exports: [BkCustomCalendar,
+            BkScheduledDatePicker,
+            BkTimePicker] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarModule, imports: [CommonModule,
-            CustomCalendarComponent,
-            ScheduledDatePickerComponent,
-            TimePickerComponent] });
+            BkCustomCalendar,
+            BkScheduledDatePicker,
+            BkTimePicker] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
-                        CustomCalendarComponent,
-                        ScheduledDatePickerComponent,
-                        TimePickerComponent
+                        BkCustomCalendar,
+                        BkScheduledDatePicker,
+                        BkTimePicker
                     ],
                     exports: [
-                        CustomCalendarComponent,
-                        ScheduledDatePickerComponent,
-                        TimePickerComponent
+                        BkCustomCalendar,
+                        BkScheduledDatePicker,
+                        BkTimePicker
                     ]
                 }]
         }] });
 
-class ToggleComponent {
+class BkToggle {
     label = '';
     disabled = false;
     toggleClass = 'toggle-md';
@@ -2301,21 +2301,21 @@ class ToggleComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ToggleComponent, isStandalone: true, selector: "bk-toggle", inputs: { label: "label", disabled: "disabled", toggleClass: "toggleClass" }, outputs: { change: "change" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkToggle, isStandalone: true, selector: "bk-toggle", inputs: { label: "label", disabled: "disabled", toggleClass: "toggleClass" }, outputs: { change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ToggleComponent),
+                useExisting: forwardRef(() => BkToggle),
                 multi: true
             }
         ], ngImport: i0, template: "<div class=\"inline-flex items-center gap-2 cursor-pointer\" (click)=\"toggle()\">\r\n  <button\r\n    type=\"button\"\r\n    role=\"switch\"\r\n    [attr.aria-checked]=\"isChecked\"\r\n    [disabled]=\"disabled\"\r\n    class=\"toggle-base\"\r\n    [ngClass]=\"toggleClass\"\r\n    [class.toggle-on]=\"isChecked\"\r\n    [class.toggle-off]=\"!isChecked\"\r\n    [class.toggle-disabled]=\"disabled\"\r\n  >\r\n    <span\r\n      class=\"toggle-knob\"\r\n      [class.knob-on]=\"isChecked\"\r\n      [class.knob-off]=\"!isChecked\"\r\n    ></span>\r\n  </button>\r\n  @if (label){\r\n  <span class=\"text-sm font-medium text-[#1B223A] select-none\" [class.opacity-70]=\"disabled\">\r\n    {{ label }}\r\n  </span>\r\n  }\r\n</div>\r\n", styles: [".toggle-base{@apply relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out border-2 border-transparent;@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1336EF] focus-visible:ring-offset-2;}.toggle-off{@apply bg-[#BBBDC5] hover:bg-[#A1A3AE];}.toggle-on{@apply bg-[#22973F] hover:bg-[#1E7735];}.toggle-disabled{@apply bg-[#D6D7DC] hover:bg-[#D6D7DC] cursor-not-allowed;}.toggle-knob{@apply pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;}.toggle-sm{@apply w-7;}.toggle-sm .toggle-knob{@apply h-3 w-3;}.toggle-sm .knob-on{@apply translate-x-3;}.toggle-sm .knob-off{@apply translate-x-0;}.toggle-md{@apply w-9;}.toggle-md .toggle-knob{@apply h-4 w-4;}.toggle-md .knob-on{@apply translate-x-4;}.toggle-md .knob-off{@apply translate-x-0;}.toggle-lg{@apply w-11;}.toggle-lg .toggle-knob{@apply h-5 w-5;}.toggle-lg .knob-on{@apply translate-x-5;}.toggle-lg .knob-off{@apply translate-x-0;}.simulate-hover.toggle-off{@apply bg-[#A1A3AE];}.simulate-hover.toggle-on{@apply bg-[#1E7735];}.simulate-focus{@apply ring-2 ring-[#1336EF] ring-offset-2;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToggle, decorators: [{
             type: Component,
             args: [{ selector: 'bk-toggle', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ToggleComponent),
+                            useExisting: forwardRef(() => BkToggle),
                             multi: true
                         }
                     ], template: "<div class=\"inline-flex items-center gap-2 cursor-pointer\" (click)=\"toggle()\">\r\n  <button\r\n    type=\"button\"\r\n    role=\"switch\"\r\n    [attr.aria-checked]=\"isChecked\"\r\n    [disabled]=\"disabled\"\r\n    class=\"toggle-base\"\r\n    [ngClass]=\"toggleClass\"\r\n    [class.toggle-on]=\"isChecked\"\r\n    [class.toggle-off]=\"!isChecked\"\r\n    [class.toggle-disabled]=\"disabled\"\r\n  >\r\n    <span\r\n      class=\"toggle-knob\"\r\n      [class.knob-on]=\"isChecked\"\r\n      [class.knob-off]=\"!isChecked\"\r\n    ></span>\r\n  </button>\r\n  @if (label){\r\n  <span class=\"text-sm font-medium text-[#1B223A] select-none\" [class.opacity-70]=\"disabled\">\r\n    {{ label }}\r\n  </span>\r\n  }\r\n</div>\r\n", styles: [".toggle-base{@apply relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out border-2 border-transparent;@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1336EF] focus-visible:ring-offset-2;}.toggle-off{@apply bg-[#BBBDC5] hover:bg-[#A1A3AE];}.toggle-on{@apply bg-[#22973F] hover:bg-[#1E7735];}.toggle-disabled{@apply bg-[#D6D7DC] hover:bg-[#D6D7DC] cursor-not-allowed;}.toggle-knob{@apply pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;}.toggle-sm{@apply w-7;}.toggle-sm .toggle-knob{@apply h-3 w-3;}.toggle-sm .knob-on{@apply translate-x-3;}.toggle-sm .knob-off{@apply translate-x-0;}.toggle-md{@apply w-9;}.toggle-md .toggle-knob{@apply h-4 w-4;}.toggle-md .knob-on{@apply translate-x-4;}.toggle-md .knob-off{@apply translate-x-0;}.toggle-lg{@apply w-11;}.toggle-lg .toggle-knob{@apply h-5 w-5;}.toggle-lg .knob-on{@apply translate-x-5;}.toggle-lg .knob-off{@apply translate-x-0;}.simulate-hover.toggle-off{@apply bg-[#A1A3AE];}.simulate-hover.toggle-on{@apply bg-[#1E7735];}.simulate-focus{@apply ring-2 ring-[#1336EF] ring-offset-2;}\n"] }]
@@ -2329,7 +2329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-class CheckboxComponent {
+class BkCheckbox {
     checkboxClass = '';
     label = '';
     labelClass = '';
@@ -2364,21 +2364,21 @@ class CheckboxComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CheckboxComponent, isStandalone: true, selector: "bk-checkbox", inputs: { checkboxClass: "checkboxClass", label: "label", labelClass: "labelClass", disabled: "disabled" }, outputs: { change: "change" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkCheckbox, isStandalone: true, selector: "bk-checkbox", inputs: { checkboxClass: "checkboxClass", label: "label", labelClass: "labelClass", disabled: "disabled" }, outputs: { change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CheckboxComponent),
+                useExisting: forwardRef(() => BkCheckbox),
                 multi: true
             }
         ], ngImport: i0, template: "<div\r\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n  (click)=\"toggle()\"\r\n  (keydown.enter)=\"toggle()\"\r\n  (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n  tabindex=\"0\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n  <div\r\n    class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 checkbox\"\r\n    [ngClass]=\"[\r\n    checkboxClass,\r\n      isChecked && !disabled ? 'bg-black border-black' : '',\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n      disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n      disabled ? 'cursor-not-allowed' : ''\r\n    ]\"\r\n  >\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"3.5\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n      [class.opacity-0]=\"!isChecked\"\r\n      [class.opacity-100]=\"isChecked\"\r\n    >\r\n    <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n  </div>\r\n@if(label){\r\n  <span\r\n    [ngClass]=\"disabled ? 'text-gray-400' : ''\"\r\n    class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n  >\r\n    {{ label }}\r\n  </span>\r\n}\r\n</div>\r\n", styles: [".checkbox.xsm{@apply size-[14px];}.checkbox.sm{@apply size-[16px];}.checkbox.md{@apply size-[18px];}.checkbox.lg{@apply size-[20px];}.checkbox.xsm svg{@apply size-[10.5px];}.checkbox.sm svg{@apply size-[12px];}.checkbox.md svg{@apply size-[13.5px];}.checkbox.lg svg{@apply size-[14px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'bk-checkbox', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CheckboxComponent),
+                            useExisting: forwardRef(() => BkCheckbox),
                             multi: true
                         }
                     ], template: "<div\r\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n  (click)=\"toggle()\"\r\n  (keydown.enter)=\"toggle()\"\r\n  (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n  tabindex=\"0\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n  <div\r\n    class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 checkbox\"\r\n    [ngClass]=\"[\r\n    checkboxClass,\r\n      isChecked && !disabled ? 'bg-black border-black' : '',\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n      disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n      disabled ? 'cursor-not-allowed' : ''\r\n    ]\"\r\n  >\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"3.5\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n      [class.opacity-0]=\"!isChecked\"\r\n      [class.opacity-100]=\"isChecked\"\r\n    >\r\n    <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n  </div>\r\n@if(label){\r\n  <span\r\n    [ngClass]=\"disabled ? 'text-gray-400' : ''\"\r\n    class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n  >\r\n    {{ label }}\r\n  </span>\r\n}\r\n</div>\r\n", styles: [".checkbox.xsm{@apply size-[14px];}.checkbox.sm{@apply size-[16px];}.checkbox.md{@apply size-[18px];}.checkbox.lg{@apply size-[20px];}.checkbox.xsm svg{@apply size-[10.5px];}.checkbox.sm svg{@apply size-[12px];}.checkbox.md svg{@apply size-[13.5px];}.checkbox.lg svg{@apply size-[14px];}\n"] }]
@@ -2394,7 +2394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-class RadioComponent {
+class BkRadioButton {
     radioClass = '';
     label = '';
     labelClass = '';
@@ -2430,21 +2430,21 @@ class RadioComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RadioComponent, isStandalone: true, selector: "bk-radio-button", inputs: { radioClass: "radioClass", label: "label", labelClass: "labelClass", value: "value", disabled: "disabled", variant: "variant" }, outputs: { change: "change" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkRadioButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkRadioButton, isStandalone: true, selector: "bk-radio-button", inputs: { radioClass: "radioClass", label: "label", labelClass: "labelClass", value: "value", disabled: "disabled", variant: "variant" }, outputs: { change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => RadioComponent),
+                useExisting: forwardRef(() => BkRadioButton),
                 multi: true,
             },
         ], ngImport: i0, template: "<div\r\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n  (click)=\"select()\"\r\n  (keydown.enter)=\"select()\"\r\n  (keydown.space)=\"$event.preventDefault(); select()\"\r\n  tabindex=\"0\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n\r\n  <div\r\n    class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0 group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 radio\"\r\n    [ngClass]=\"[\r\n    radioClass,\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n      variant === 'dot' && isChecked && !disabled ? 'border-black bg-white' : '',\r\n\r\n      variant === 'tick' && isChecked && !disabled ? 'bg-black border-black' : '',\r\n\r\n      disabled && isChecked && variant === 'tick' ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && isChecked && variant === 'dot'  ? 'border-gray-300 bg-gray-50' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n      disabled ? 'cursor-not-allowed' : ''\r\n    ]\"\r\n  >\r\n@if(variant === 'dot'){\r\n    <span\r\n      class=\"rounded-full bg-black transition-transform duration-200 transform dot\"\r\n      [class.scale-0]=\"!isChecked\"\r\n      [class.scale-100]=\"isChecked\"\r\n      [class.bg-gray-400]=\"disabled\"\r\n    ></span>\r\n}\r\n    @if (variant === 'tick'){\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"3.5\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"text-white pointer-events-none transition-opacity duration-200 tick\"\r\n      [class.opacity-0]=\"!isChecked\"\r\n      [class.opacity-100]=\"isChecked\"\r\n\r\n    >\r\n      <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n    }\r\n  </div>\r\n\r\n    @if(label) {\r\n  <span class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n        [ngClass]=\"disabled ? 'text-gray-400' : ''\">\r\n    {{ label }}\r\n  </span>\r\n    }\r\n</div>\r\n", styles: [".radio.xsm{@apply size-[14px];}.radio.sm{@apply size-[16px];}.radio.md{@apply size-[18px];}.radio.lg{@apply size-[19px];}.radio.xsm .dot{@apply size-[6px];}.radio.sm .dot{@apply size-[8px];}.radio.md .dot{@apply size-[10px];}.radio.lg .dot{@apply size-[11px];}.radio.xsm .tick{@apply size-[9px];}.radio.sm .tick{@apply size-[10px];}.radio.md .tick{@apply size-[12px];}.radio.lg .tick{@apply size-[14px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkRadioButton, decorators: [{
             type: Component,
             args: [{ selector: 'bk-radio-button', standalone: true, imports: [CommonModule, FormsModule], encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RadioComponent),
+                            useExisting: forwardRef(() => BkRadioButton),
                             multi: true,
                         },
                     ], template: "<div\r\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n  (click)=\"select()\"\r\n  (keydown.enter)=\"select()\"\r\n  (keydown.space)=\"$event.preventDefault(); select()\"\r\n  tabindex=\"0\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n\r\n  <div\r\n    class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0 group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 radio\"\r\n    [ngClass]=\"[\r\n    radioClass,\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n      variant === 'dot' && isChecked && !disabled ? 'border-black bg-white' : '',\r\n\r\n      variant === 'tick' && isChecked && !disabled ? 'bg-black border-black' : '',\r\n\r\n      disabled && isChecked && variant === 'tick' ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && isChecked && variant === 'dot'  ? 'border-gray-300 bg-gray-50' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n      disabled ? 'cursor-not-allowed' : ''\r\n    ]\"\r\n  >\r\n@if(variant === 'dot'){\r\n    <span\r\n      class=\"rounded-full bg-black transition-transform duration-200 transform dot\"\r\n      [class.scale-0]=\"!isChecked\"\r\n      [class.scale-100]=\"isChecked\"\r\n      [class.bg-gray-400]=\"disabled\"\r\n    ></span>\r\n}\r\n    @if (variant === 'tick'){\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"3.5\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"text-white pointer-events-none transition-opacity duration-200 tick\"\r\n      [class.opacity-0]=\"!isChecked\"\r\n      [class.opacity-100]=\"isChecked\"\r\n\r\n    >\r\n      <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n    }\r\n  </div>\r\n\r\n    @if(label) {\r\n  <span class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n        [ngClass]=\"disabled ? 'text-gray-400' : ''\">\r\n    {{ label }}\r\n  </span>\r\n    }\r\n</div>\r\n", styles: [".radio.xsm{@apply size-[14px];}.radio.sm{@apply size-[16px];}.radio.md{@apply size-[18px];}.radio.lg{@apply size-[19px];}.radio.xsm .dot{@apply size-[6px];}.radio.sm .dot{@apply size-[8px];}.radio.md .dot{@apply size-[10px];}.radio.lg .dot{@apply size-[11px];}.radio.xsm .tick{@apply size-[9px];}.radio.sm .tick{@apply size-[10px];}.radio.md .tick{@apply size-[12px];}.radio.lg .tick{@apply size-[14px];}\n"] }]
@@ -2464,7 +2464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-class PillComponent {
+class BkPill {
     label = '';
     variant = 'Light';
     color = 'Gray';
@@ -2486,10 +2486,10 @@ class PillComponent {
         e.stopPropagation();
         this.clicked.emit(this.label);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PillComponent, isStandalone: true, selector: "bk-pill", inputs: { label: "label", variant: "variant", color: "color", size: "size", dot: "dot", removable: "removable", customClass: "customClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"pill-close \"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".pill{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-full;}.pill-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.pill-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.pill-md{@apply px-2 py-0.5 text-sm;}.pill-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.pill-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.pill-xsm .pill-close,.pill-sm .pill-close{@apply w-3 h-3;}.pill-md .pill-close,.pill-lg .pill-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPill, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPill, isStandalone: true, selector: "bk-pill", inputs: { label: "label", variant: "variant", color: "color", size: "size", dot: "dot", removable: "removable", customClass: "customClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"pill-close \"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".pill{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-full;}.pill-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.pill-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.pill-md{@apply px-2 py-0.5 text-sm;}.pill-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.pill-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.pill-xsm .pill-close,.pill-sm .pill-close{@apply w-3 h-3;}.pill-md .pill-close,.pill-lg .pill-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PillComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPill, decorators: [{
             type: Component,
             args: [{ selector: 'bk-pill', standalone: true, template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"pill-close \"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".pill{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-full;}.pill-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.pill-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.pill-md{@apply px-2 py-0.5 text-sm;}.pill-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.pill-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.pill-xsm .pill-close,.pill-sm .pill-close{@apply w-3 h-3;}.pill-md .pill-close,.pill-lg .pill-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] }]
         }], propDecorators: { label: [{
@@ -2510,7 +2510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-class BadgeComponent {
+class BkBadge {
     label = '';
     variant = 'Light';
     color = 'Gray';
@@ -2532,10 +2532,10 @@ class BadgeComponent {
         e.stopPropagation();
         this.clicked.emit(this.label);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BadgeComponent, isStandalone: true, selector: "bk-badge", inputs: { label: "label", variant: "variant", color: "color", size: "size", dot: "dot", removable: "removable", customClass: "customClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"badge-close\"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.badge-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.badge-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.badge-md{@apply px-2 py-0.5 text-sm;}.badge-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.badge-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.badge-xsm .badge-close,.badge-sm .badge-close{@apply w-3 h-3;}.badge-md .badge-close,.badge-lg .badge-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkBadge, isStandalone: true, selector: "bk-badge", inputs: { label: "label", variant: "variant", color: "color", size: "size", dot: "dot", removable: "removable", customClass: "customClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"badge-close\"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.badge-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.badge-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.badge-md{@apply px-2 py-0.5 text-sm;}.badge-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.badge-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.badge-xsm .badge-close,.badge-sm .badge-close{@apply w-3 h-3;}.badge-md .badge-close,.badge-lg .badge-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkBadge, decorators: [{
             type: Component,
             args: [{ selector: 'bk-badge', standalone: true, imports: [CommonModule], template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"badge-close\"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.badge-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.badge-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.badge-md{@apply px-2 py-0.5 text-sm;}.badge-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.badge-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.badge-xsm .badge-close,.badge-sm .badge-close{@apply w-3 h-3;}.badge-md .badge-close,.badge-lg .badge-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] }]
         }], propDecorators: { label: [{
@@ -2556,17 +2556,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-class Spinner {
+class BkSpinner {
     size = 'md';
     show = true;
     color = 'text-blue-600'; // default
     get classes() {
         return `spinner ${this.size} ${this.color}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Spinner, isStandalone: true, selector: "bk-spinner", inputs: { size: "size", show: "show", color: "color" }, ngImport: i0, template: "@if (show) {\r\n<span [class]=\"classes\" role=\"status\" aria-label=\"loading\">\r\n  <span class=\"sr-only\">Loading...</span>\r\n</span>\r\n}\r\n", styles: [".spinner{@apply inline-block rounded-full animate-spin border-current border-t-transparent;border-style:solid}.spinner.xsm{@apply w-[15px] h-[15px] border-[1.5px];}.spinner.sm{@apply w-[25px] h-[25px] border-[2.34px];}.spinner.md{@apply w-[35px] h-[35px] border-[3.28px];}.spinner.lg{@apply w-[50px] h-[50px] border-[4.7px];}.spinner.xl{@apply w-[64px] h-[64px] border-[6px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkSpinner, isStandalone: true, selector: "bk-spinner", inputs: { size: "size", show: "show", color: "color" }, ngImport: i0, template: "@if (show) {\r\n<span [class]=\"classes\" role=\"status\" aria-label=\"loading\">\r\n  <span class=\"sr-only\">Loading...</span>\r\n</span>\r\n}\r\n", styles: [".spinner{@apply inline-block rounded-full animate-spin border-current border-t-transparent;border-style:solid}.spinner.xsm{@apply w-[15px] h-[15px] border-[1.5px];}.spinner.sm{@apply w-[25px] h-[25px] border-[2.34px];}.spinner.md{@apply w-[35px] h-[35px] border-[3.28px];}.spinner.lg{@apply w-[50px] h-[50px] border-[4.7px];}.spinner.xl{@apply w-[64px] h-[64px] border-[6px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Spinner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSpinner, decorators: [{
             type: Component,
             args: [{ selector: 'bk-spinner', standalone: true, imports: [CommonModule], template: "@if (show) {\r\n<span [class]=\"classes\" role=\"status\" aria-label=\"loading\">\r\n  <span class=\"sr-only\">Loading...</span>\r\n</span>\r\n}\r\n", styles: [".spinner{@apply inline-block rounded-full animate-spin border-current border-t-transparent;border-style:solid}.spinner.xsm{@apply w-[15px] h-[15px] border-[1.5px];}.spinner.sm{@apply w-[25px] h-[25px] border-[2.34px];}.spinner.md{@apply w-[35px] h-[35px] border-[3.28px];}.spinner.lg{@apply w-[50px] h-[50px] border-[4.7px];}.spinner.xl{@apply w-[64px] h-[64px] border-[6px];}\n"] }]
         }], propDecorators: { size: [{
@@ -2577,7 +2577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
-class UiButton {
+class BkButton {
     // --- Inputs ---
     // 1. Style & Size Inputs
     variant = 'primary';
@@ -2610,10 +2610,10 @@ class UiButton {
         // Note: The size name (e.g., 'sm') matches your CSS class name exactly
         return `btn ${variantClass} ${this.size} ${this.buttonClass}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: UiButton, isStandalone: true, selector: "bk-button", inputs: { variant: "variant", size: "size", label: "label", leftIcon: "leftIcon", rightIcon: "rightIcon", iconAlt: "iconAlt", type: "type", loading: "loading", disabled: "disabled", buttonClass: "buttonClass", textClass: "textClass", spinnerClass: "spinnerClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  [attr.type]=\"type\"\r\n  [class]=\"buttonClasses\"\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  @if (leftIcon) {\r\n    <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n      @if (label) {\r\n    <span [class]=\"textClass\">\r\n        {{ label }}\r\n    </span>\r\n      }\r\n    @if (loading) {\r\n      <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n    }\r\n\r\n\r\n  @if (rightIcon) {\r\n    <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkButton, isStandalone: true, selector: "bk-button", inputs: { variant: "variant", size: "size", label: "label", leftIcon: "leftIcon", rightIcon: "rightIcon", iconAlt: "iconAlt", type: "type", loading: "loading", disabled: "disabled", buttonClass: "buttonClass", textClass: "textClass", spinnerClass: "spinnerClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  [attr.type]=\"type\"\r\n  [class]=\"buttonClasses\"\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  @if (leftIcon) {\r\n    <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n      @if (label) {\r\n    <span [class]=\"textClass\">\r\n        {{ label }}\r\n    </span>\r\n      }\r\n    @if (loading) {\r\n      <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n    }\r\n\r\n\r\n  @if (rightIcon) {\r\n    <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UiButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkButton, decorators: [{
             type: Component,
             args: [{ selector: 'bk-button', standalone: true, imports: [CommonModule], template: "<button\r\n  [attr.type]=\"type\"\r\n  [class]=\"buttonClasses\"\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  @if (leftIcon) {\r\n    <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n      @if (label) {\r\n    <span [class]=\"textClass\">\r\n        {{ label }}\r\n    </span>\r\n      }\r\n    @if (loading) {\r\n      <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n    }\r\n\r\n\r\n  @if (rightIcon) {\r\n    <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}\n"] }]
         }], propDecorators: { variant: [{
@@ -2644,7 +2644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-class UiIconButton {
+class BkIconButton {
     // --- Inputs ---
     icon; // Required icon path
     alt = 'icon';
@@ -2663,10 +2663,10 @@ class UiIconButton {
         // Maps inputs to CSS classes: .btn-icon .primary .md
         return `btn-icon ${this.variant} ${this.size} ${this.buttonClass}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UiIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: UiIconButton, isStandalone: true, selector: "bk-icon-button", inputs: { icon: "icon", alt: "alt", variant: "variant", size: "size", disabled: "disabled", buttonClass: "buttonClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  [class]=\"buttonClasses\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n    <img [src]=\"icon\" [alt]=\"alt\" class=\"icon\" />\r\n</button>\r\n", styles: [".btn-icon{@apply rounded border flex items-center justify-center transition-all duration-200 cursor-pointer shrink-0 shadow;}.btn-icon.primary{@apply bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-80 disabled:cursor-not-allowed;}.btn-icon.secondary{@apply bg-white border-[#E3E3E7] text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn-icon.xxsm,.btn-icon.xsm{@apply p-1.5;}.btn-icon.sm{@apply p-2;}.btn-icon.md{@apply p-2.5;}.btn-icon.lg{@apply p-3;}.btn-icon.xl{@apply p-[14px];}.btn-icon.xxl{@apply p-4;}.btn-icon.xxsm .icon{@apply size-[14px];}.btn-icon.xsm .icon{@apply size-[18px];}.btn-icon.sm .icon,.btn-icon.md .icon,.btn-icon.lg .icon,.btn-icon.xl .icon{@apply size-[20px];}.btn-icon.xxl .icon{@apply size-[26px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BkIconButton, isStandalone: true, selector: "bk-icon-button", inputs: { icon: "icon", alt: "alt", variant: "variant", size: "size", disabled: "disabled", buttonClass: "buttonClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  [class]=\"buttonClasses\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n    <img [src]=\"icon\" [alt]=\"alt\" class=\"icon\" />\r\n</button>\r\n", styles: [".btn-icon{@apply rounded border flex items-center justify-center transition-all duration-200 cursor-pointer shrink-0 shadow;}.btn-icon.primary{@apply bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-80 disabled:cursor-not-allowed;}.btn-icon.secondary{@apply bg-white border-[#E3E3E7] text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn-icon.xxsm,.btn-icon.xsm{@apply p-1.5;}.btn-icon.sm{@apply p-2;}.btn-icon.md{@apply p-2.5;}.btn-icon.lg{@apply p-3;}.btn-icon.xl{@apply p-[14px];}.btn-icon.xxl{@apply p-4;}.btn-icon.xxsm .icon{@apply size-[14px];}.btn-icon.xsm .icon{@apply size-[18px];}.btn-icon.sm .icon,.btn-icon.md .icon,.btn-icon.lg .icon,.btn-icon.xl .icon{@apply size-[20px];}.btn-icon.xxl .icon{@apply size-[26px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UiIconButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkIconButton, decorators: [{
             type: Component,
             args: [{ selector: 'bk-icon-button', standalone: true, imports: [CommonModule], template: "<button\r\n  [class]=\"buttonClasses\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n    <img [src]=\"icon\" [alt]=\"alt\" class=\"icon\" />\r\n</button>\r\n", styles: [".btn-icon{@apply rounded border flex items-center justify-center transition-all duration-200 cursor-pointer shrink-0 shadow;}.btn-icon.primary{@apply bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-80 disabled:cursor-not-allowed;}.btn-icon.secondary{@apply bg-white border-[#E3E3E7] text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn-icon.xxsm,.btn-icon.xsm{@apply p-1.5;}.btn-icon.sm{@apply p-2;}.btn-icon.md{@apply p-2.5;}.btn-icon.lg{@apply p-3;}.btn-icon.xl{@apply p-[14px];}.btn-icon.xxl{@apply p-4;}.btn-icon.xxsm .icon{@apply size-[14px];}.btn-icon.xsm .icon{@apply size-[18px];}.btn-icon.sm .icon,.btn-icon.md .icon,.btn-icon.lg .icon,.btn-icon.xl .icon{@apply size-[20px];}.btn-icon.xxl .icon{@apply size-[26px];}\n"] }]
         }], propDecorators: { icon: [{
@@ -2685,7 +2685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-class ButtonGroup {
+class BkButtonGroup {
     // --- Inputs ---
     items = [];
     mode = 'single';
@@ -2734,10 +2734,10 @@ class ButtonGroup {
     get containerClass() {
         return `group-container ${this.disabled ? 'disabled' : ''}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ButtonGroup, isStandalone: true, selector: "bk-button-group", inputs: { items: "items", mode: "mode", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [class]=\"containerClass\">\r\n  @for (item of items; track item.value) {\r\n    <div\r\n      class=\"group-item\"\r\n      [class.active]=\"isActive(item.value)\"\r\n      [class.inactive]=\"!isActive(item.value)\"\r\n      (click)=\"onItemClick(item.value)\"\r\n    >\r\n      {{ item.label }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".group-container{@apply inline-flex items-center border border-[#E1E3EA] bg-white rounded-md p-1 gap-2.5 select-none transition-all;}.group-item{@apply flex items-center justify-center font-medium rounded-md transition-all duration-200 cursor-pointer text-center relative;}.group-item.active{@apply bg-black text-white shadow-sm;}.group-item.inactive{@apply text-[#6B7080] hover:bg-gray-50;}.group-container .group-item{@apply px-4 py-[3px] text-[13px] leading-5;}.group-container.disabled .group-item{@apply opacity-50 cursor-not-allowed;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkButtonGroup, isStandalone: true, selector: "bk-button-group", inputs: { items: "items", mode: "mode", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [class]=\"containerClass\">\r\n  @for (item of items; track item.value) {\r\n    <div\r\n      class=\"group-item\"\r\n      [class.active]=\"isActive(item.value)\"\r\n      [class.inactive]=\"!isActive(item.value)\"\r\n      (click)=\"onItemClick(item.value)\"\r\n    >\r\n      {{ item.label }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".group-container{@apply inline-flex items-center border border-[#E1E3EA] bg-white rounded-md p-1 gap-2.5 select-none transition-all;}.group-item{@apply flex items-center justify-center font-medium rounded-md transition-all duration-200 cursor-pointer text-center relative;}.group-item.active{@apply bg-black text-white shadow-sm;}.group-item.inactive{@apply text-[#6B7080] hover:bg-gray-50;}.group-container .group-item{@apply px-4 py-[3px] text-[13px] leading-5;}.group-container.disabled .group-item{@apply opacity-50 cursor-not-allowed;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkButtonGroup, decorators: [{
             type: Component,
             args: [{ selector: 'bk-button-group', standalone: true, imports: [CommonModule], template: "<div [class]=\"containerClass\">\r\n  @for (item of items; track item.value) {\r\n    <div\r\n      class=\"group-item\"\r\n      [class.active]=\"isActive(item.value)\"\r\n      [class.inactive]=\"!isActive(item.value)\"\r\n      (click)=\"onItemClick(item.value)\"\r\n    >\r\n      {{ item.label }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".group-container{@apply inline-flex items-center border border-[#E1E3EA] bg-white rounded-md p-1 gap-2.5 select-none transition-all;}.group-item{@apply flex items-center justify-center font-medium rounded-md transition-all duration-200 cursor-pointer text-center relative;}.group-item.active{@apply bg-black text-white shadow-sm;}.group-item.inactive{@apply text-[#6B7080] hover:bg-gray-50;}.group-container .group-item{@apply px-4 py-[3px] text-[13px] leading-5;}.group-container.disabled .group-item{@apply opacity-50 cursor-not-allowed;}\n"] }]
         }], propDecorators: { items: [{
@@ -2752,7 +2752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-class Textarea {
+class BkTextarea {
     ngControl;
     name;
     id;
@@ -2858,10 +2858,10 @@ class Textarea {
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Textarea, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Textarea, isStandalone: true, selector: "bk-textarea", inputs: { name: "name", id: "id", label: "label", placeholder: "placeholder", rows: "rows", hint: "hint", required: "required", maxLength: "maxLength", hasError: "hasError", errorMessage: "errorMessage", trimWhiteSpaces: "trimWhiteSpaces", eventType: "eventType" }, outputs: { input: "input", change: "change", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n  @if (label) {\r\n    <label\r\n      class=\"text-sm font-medium text-[#141414] block\" [attr.for]=\"effectiveId\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <textarea\r\n      [id]=\"effectiveId\"\r\n      [attr.name]=\"name\"\r\n      [value]=\"value\"\r\n      (input)=\"handleEvent($event)\"\r\n      (change)=\"handleEvent($event)\"\r\n      (blur)=\"handleEvent($event)\"\r\n      (focus)=\"handleEvent($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.maxlength]=\"maxLength\"\r\n      rows=\"{{rows}}\"\r\n      class=\"\r\n        w-full\r\n        px-3 py-2.5\r\n        text-sm\r\n        border border-[#E3E3E7] rounded-[4px]\r\n        outline-none\r\n        transition-colors duration-200\r\n        bg-white resize-y\r\n        placeholder:text-[#6B7080]\r\n      \"\r\n      [ngClass]=\"{\r\n        'border-[#FA727A] text-[#141414]': hasError && !isDisabled,\r\n\r\n        'focus:border-[#6B7080] text-[#141414]': !hasError && !isDisabled,\r\n\r\n        'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': isDisabled\r\n      }\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n    <div class=\"flex-1\">\r\n      @if (showError) {\r\n        <span class=\"text-[#F34050]\">\r\n          {{ errorMessage }}\r\n        </span>\r\n      } @else if (hint) {\r\n        <span class=\"text-[#868997]\">\r\n          {{ hint }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    @if (maxLength) {\r\n      <div\r\n        class=\"text-[#868997] tabular-nums flex-shrink-0\"\r\n      >\r\n        {{ value.length }}/{{ maxLength }}\r\n      </div>\r\n    }\r\n\r\n\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTextarea, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTextarea, isStandalone: true, selector: "bk-textarea", inputs: { name: "name", id: "id", label: "label", placeholder: "placeholder", rows: "rows", hint: "hint", required: "required", maxLength: "maxLength", hasError: "hasError", errorMessage: "errorMessage", trimWhiteSpaces: "trimWhiteSpaces", eventType: "eventType" }, outputs: { input: "input", change: "change", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n  @if (label) {\r\n    <label\r\n      class=\"text-sm font-medium text-[#141414] block\" [attr.for]=\"effectiveId\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <textarea\r\n      [id]=\"effectiveId\"\r\n      [attr.name]=\"name\"\r\n      [value]=\"value\"\r\n      (input)=\"handleEvent($event)\"\r\n      (change)=\"handleEvent($event)\"\r\n      (blur)=\"handleEvent($event)\"\r\n      (focus)=\"handleEvent($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.maxlength]=\"maxLength\"\r\n      rows=\"{{rows}}\"\r\n      class=\"\r\n        w-full\r\n        px-3 py-2.5\r\n        text-sm\r\n        border border-[#E3E3E7] rounded-[4px]\r\n        outline-none\r\n        transition-colors duration-200\r\n        bg-white resize-y\r\n        placeholder:text-[#6B7080]\r\n      \"\r\n      [ngClass]=\"{\r\n        'border-[#FA727A] text-[#141414]': hasError && !isDisabled,\r\n\r\n        'focus:border-[#6B7080] text-[#141414]': !hasError && !isDisabled,\r\n\r\n        'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': isDisabled\r\n      }\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n    <div class=\"flex-1\">\r\n      @if (showError) {\r\n        <span class=\"text-[#F34050]\">\r\n          {{ errorMessage }}\r\n        </span>\r\n      } @else if (hint) {\r\n        <span class=\"text-[#868997]\">\r\n          {{ hint }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    @if (maxLength) {\r\n      <div\r\n        class=\"text-[#868997] tabular-nums flex-shrink-0\"\r\n      >\r\n        {{ value.length }}/{{ maxLength }}\r\n      </div>\r\n    }\r\n\r\n\r\n  </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Textarea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTextarea, decorators: [{
             type: Component,
             args: [{ selector: 'bk-textarea', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n  @if (label) {\r\n    <label\r\n      class=\"text-sm font-medium text-[#141414] block\" [attr.for]=\"effectiveId\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <textarea\r\n      [id]=\"effectiveId\"\r\n      [attr.name]=\"name\"\r\n      [value]=\"value\"\r\n      (input)=\"handleEvent($event)\"\r\n      (change)=\"handleEvent($event)\"\r\n      (blur)=\"handleEvent($event)\"\r\n      (focus)=\"handleEvent($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n      [attr.maxlength]=\"maxLength\"\r\n      rows=\"{{rows}}\"\r\n      class=\"\r\n        w-full\r\n        px-3 py-2.5\r\n        text-sm\r\n        border border-[#E3E3E7] rounded-[4px]\r\n        outline-none\r\n        transition-colors duration-200\r\n        bg-white resize-y\r\n        placeholder:text-[#6B7080]\r\n      \"\r\n      [ngClass]=\"{\r\n        'border-[#FA727A] text-[#141414]': hasError && !isDisabled,\r\n\r\n        'focus:border-[#6B7080] text-[#141414]': !hasError && !isDisabled,\r\n\r\n        'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': isDisabled\r\n      }\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n    <div class=\"flex-1\">\r\n      @if (showError) {\r\n        <span class=\"text-[#F34050]\">\r\n          {{ errorMessage }}\r\n        </span>\r\n      } @else if (hint) {\r\n        <span class=\"text-[#868997]\">\r\n          {{ hint }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    @if (maxLength) {\r\n      <div\r\n        class=\"text-[#868997] tabular-nums flex-shrink-0\"\r\n      >\r\n        {{ value.length }}/{{ maxLength }}\r\n      </div>\r\n    }\r\n\r\n\r\n  </div>\r\n\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
@@ -3136,7 +3136,7 @@ class BkSelect {
             this.updatePosition();
         }
         this.isOpen.set(true);
-        this.markedIndex.set(0);
+        // this.markedIndex.set(0);
         this.open.emit();
         this.focus.emit();
         setTimeout(() => this.searchInput?.nativeElement.focus());
@@ -3155,14 +3155,14 @@ class BkSelect {
             return this.dropdownStyle().top ?? null;
         }
         // NOT appendToBody
-        return this.dropdownPosition() === 'bottom' ? '100%' : null;
+        return this.dropdownPosition() === 'bottom' ? '105%' : null;
     }
     getBottom() {
         if (this.appendToBody()) {
             return this.dropdownStyle().bottom ?? null;
         }
         // NOT appendToBody
-        return this.dropdownPosition() === 'top' ? '100%' : null;
+        return this.dropdownPosition() === 'top' ? '105%' : null;
     }
     updatePosition() {
         const rect = this.controlWrapper.nativeElement.getBoundingClientRect();
@@ -3364,7 +3364,7 @@ class BkSelect {
                 useExisting: forwardRef(() => BkSelect),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "optionsRef", predicate: ["optionsRef"], descendants: true }], ngImport: i0, template: "<div class=\"ng-select-container\">\r\n\r\n  <label\r\n    class=\"input-label\"\r\n    (click)=\"openFromLabel($event)\">\r\n    {{ label }}\r\n    @if(required){\r\n      <span class=\"input-label-required\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"ng-select-control\"\r\n    [class.focused]=\"isOpen()\"\r\n    [class.disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if(iconSrc){\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n    }\r\n    <div class=\"ng-value-container\">\r\n      @if (selectedOptions().length === 0)\r\n      {\r\n         <div class=\"ng-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n      @if\r\n      (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-chips\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"ng-value-chip\">\r\n              <span class=\"ng-value-label\">{{ resolveLabel(opt) }}</span>\r\n              <span class=\"ng-value-icon\" (mousedown)=\"removeOption(opt, $event)\">\u00D7</span>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"ng-value-chip remaining-count\"><span class=\"ng-value-label\">+{{ selectedOptions().length - maxLabels() }} more</span></div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-label-single\">{{ resolveLabel(selectedOptions()[0]) }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"ng-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"ng-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"ng-arrow-wrapper\" [class.open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"custom-ng-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n    >\r\n\r\n\r\n    @if (searchable()) {\r\n        <div class=\"ng-dropdown-search\">\r\n          <div class=\"ng-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\r\n            <input #searchInput type=\"text\" class=\"ng-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\" (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      @if (multiple() && filteredItems().length > 0) {\r\n        <div class=\"ng-option select-all-option\" (mousedown)=\"toggleSelectAll($event)\">\r\n          <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isAllSelected()\" [class.border-blue-600]=\"isAllSelected()\">\r\n            @if(isAllSelected()){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n          </div>\r\n          <span class=\"font-semibold\">Select All</span>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"ng-options-list\">\r\n        @if (loading()) { <div class=\"ng-option-disabled\">{{ loadingText() }}</div> }\r\n        @else {\r\n          @for (item of filteredItems(); track $index) {\r\n            <div #optionsRef class=\"ng-option\" [class.selected]=\"isItemSelected(item)\" [class.marked]=\"$index === markedIndex()\" (mousedown)=\"handleSelection(item, $event)\" (mouseenter)=\"markedIndex.set($index)\">\r\n              @if (multiple()) {\r\n                <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isItemSelected(item)\" [class.border-blue-600]=\"isItemSelected(item)\">\r\n                  @if(isItemSelected(item)){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n                </div>\r\n              }\r\n              <span class=\"flex-1\">{{ resolveLabel(item) }}</span>\r\n              @if (!multiple() && isItemSelected(item)) {\r\n                <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\r\n              }\r\n            </div>\r\n          }\r\n          @if (filteredItems().length === 0) { <div class=\"ng-option-disabled\">{{ notFoundText() }}</div> }\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ng-select-container{@apply relative w-full box-border;}.ng-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-[9.2px] cursor-pointer;}.ng-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.ng-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.ng-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.ng-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.ng-value-label-single{@apply font-normal text-sm text-[#141414] truncate w-full;}.ng-value-chips{@apply flex flex-wrap gap-1 w-full;}.ng-value-chip{@apply flex items-center bg-gray-100 border border-gray-200 rounded px-2 py-0.5 max-w-full;}.ng-value-chip .ng-value-label{@apply text-[#15191E] truncate max-w-[150px];}.ng-value-chip .ng-value-icon{@apply ml-1 text-gray-500 hover:text-red-500 cursor-pointer text-base font-bold leading-none px-1;}.ng-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.ng-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.ng-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.ng-arrow-wrapper.open{@apply rotate-180;}.custom-ng-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default;}.ng-dropdown-search{@apply px-2 pt-2;}.ng-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.ng-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.ng-options-list{@apply max-h-60 overflow-auto relative p-2.5 mb-3.5;}.ng-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];}.ng-option:hover,.ng-option.marked,.ng-option.selected{@apply bg-[#F8F8F8] rounded-md;}.ng-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.ng-value-chip.remaining-count{@apply bg-gray-200 text-gray-600 font-semibold cursor-default;}.select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.select-all-option:hover{@apply bg-gray-100;}.custom-ng-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}::-webkit-scrollbar-thumb:hover{background:#909090}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "optionsRef", predicate: ["optionsRef"], descendants: true }], ngImport: i0, template: "<div class=\"ng-select-container\">\r\n\r\n  <label\r\n    class=\"input-label\"\r\n    (click)=\"openFromLabel($event)\">\r\n    {{ label }}\r\n    @if(required){\r\n      <span class=\"input-label-required\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"ng-select-control\"\r\n    [class.focused]=\"isOpen()\"\r\n    [class.disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if(iconSrc){\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n    }\r\n    <div class=\"ng-value-container\">\r\n      @if (selectedOptions().length === 0)\r\n      {\r\n         <div class=\"ng-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n      @if\r\n      (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-chips\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"ng-value-chip\">\r\n              <span class=\"ng-value-label\">{{ resolveLabel(opt) }}</span>\r\n              <span class=\"ng-value-icon\" (mousedown)=\"removeOption(opt, $event)\">\u00D7</span>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"ng-value-chip remaining-count\"><span class=\"ng-value-label\">+{{ selectedOptions().length - maxLabels() }} more</span></div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-label-single\">{{ resolveLabel(selectedOptions()[0]) }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"ng-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"ng-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"ng-arrow-wrapper\" [class.open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"custom-ng-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n    >\r\n\r\n\r\n    @if (searchable()) {\r\n        <div class=\"ng-dropdown-search\">\r\n          <div class=\"ng-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\r\n            <input #searchInput type=\"text\" class=\"ng-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\" (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      @if (multiple() && filteredItems().length > 0) {\r\n        <div class=\"ng-option select-all-option\" (mousedown)=\"toggleSelectAll($event)\">\r\n          <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isAllSelected()\" [class.border-blue-600]=\"isAllSelected()\">\r\n            @if(isAllSelected()){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n          </div>\r\n          <span class=\"font-semibold\">Select All</span>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"ng-options-list\">\r\n        @if (loading()) { <div class=\"ng-option-disabled\">{{ loadingText() }}</div> }\r\n        @else {\r\n          @for (item of filteredItems(); track $index) {\r\n            <div #optionsRef class=\"ng-option\" [class.selected]=\"isItemSelected(item)\" [class.marked]=\"$index === markedIndex()\" (click)=\"handleSelection(item, $event)\" (click)=\"markedIndex.set($index)\">\r\n              @if (multiple()) {\r\n                <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isItemSelected(item)\" [class.border-blue-600]=\"isItemSelected(item)\">\r\n                  @if(isItemSelected(item)){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n                </div>\r\n              }\r\n              <span class=\"flex-1\">{{ resolveLabel(item) }}</span>\r\n              @if (!multiple() && isItemSelected(item)) {\r\n                <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\r\n              }\r\n            </div>\r\n          }\r\n          @if (filteredItems().length === 0) { <div class=\"ng-option-disabled\">{{ notFoundText() }}</div> }\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ng-select-container{@apply relative w-full box-border;}.ng-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-[9.2px] cursor-pointer;}.ng-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.ng-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.ng-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.ng-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.ng-value-label-single{@apply font-normal text-sm text-[#141414] truncate w-full;}.ng-value-chips{@apply flex flex-wrap gap-1 w-full;}.ng-value-chip{@apply flex items-center bg-gray-100 border border-gray-200 rounded px-2 py-0.5 max-w-full;}.ng-value-chip .ng-value-label{@apply text-[#15191E] truncate max-w-[150px];}.ng-value-chip .ng-value-icon{@apply ml-1 text-gray-500 hover:text-red-500 cursor-pointer text-base font-bold leading-none px-1;}.ng-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.ng-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.ng-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.ng-arrow-wrapper.open{@apply rotate-180;}.custom-ng-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default;}.ng-dropdown-search{@apply px-2 pt-2;}.ng-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.ng-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.ng-options-list{@apply max-h-60 overflow-auto relative p-2.5 mb-3.5 flex flex-col gap-0.5;}.ng-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];}.ng-option:hover,.ng-option.marked,.ng-option.selected{@apply bg-[#F8F8F8] rounded-md;}.ng-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.ng-value-chip.remaining-count{@apply bg-gray-200 text-gray-600 font-semibold cursor-default;}.select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.select-all-option:hover{@apply bg-gray-100;}.custom-ng-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}::-webkit-scrollbar-thumb:hover{background:#909090}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, decorators: [{
             type: Component,
@@ -3374,7 +3374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkSelect),
                             multi: true
                         }
-                    ], template: "<div class=\"ng-select-container\">\r\n\r\n  <label\r\n    class=\"input-label\"\r\n    (click)=\"openFromLabel($event)\">\r\n    {{ label }}\r\n    @if(required){\r\n      <span class=\"input-label-required\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"ng-select-control\"\r\n    [class.focused]=\"isOpen()\"\r\n    [class.disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if(iconSrc){\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n    }\r\n    <div class=\"ng-value-container\">\r\n      @if (selectedOptions().length === 0)\r\n      {\r\n         <div class=\"ng-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n      @if\r\n      (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-chips\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"ng-value-chip\">\r\n              <span class=\"ng-value-label\">{{ resolveLabel(opt) }}</span>\r\n              <span class=\"ng-value-icon\" (mousedown)=\"removeOption(opt, $event)\">\u00D7</span>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"ng-value-chip remaining-count\"><span class=\"ng-value-label\">+{{ selectedOptions().length - maxLabels() }} more</span></div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-label-single\">{{ resolveLabel(selectedOptions()[0]) }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"ng-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"ng-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"ng-arrow-wrapper\" [class.open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"custom-ng-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n    >\r\n\r\n\r\n    @if (searchable()) {\r\n        <div class=\"ng-dropdown-search\">\r\n          <div class=\"ng-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\r\n            <input #searchInput type=\"text\" class=\"ng-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\" (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      @if (multiple() && filteredItems().length > 0) {\r\n        <div class=\"ng-option select-all-option\" (mousedown)=\"toggleSelectAll($event)\">\r\n          <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isAllSelected()\" [class.border-blue-600]=\"isAllSelected()\">\r\n            @if(isAllSelected()){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n          </div>\r\n          <span class=\"font-semibold\">Select All</span>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"ng-options-list\">\r\n        @if (loading()) { <div class=\"ng-option-disabled\">{{ loadingText() }}</div> }\r\n        @else {\r\n          @for (item of filteredItems(); track $index) {\r\n            <div #optionsRef class=\"ng-option\" [class.selected]=\"isItemSelected(item)\" [class.marked]=\"$index === markedIndex()\" (mousedown)=\"handleSelection(item, $event)\" (mouseenter)=\"markedIndex.set($index)\">\r\n              @if (multiple()) {\r\n                <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isItemSelected(item)\" [class.border-blue-600]=\"isItemSelected(item)\">\r\n                  @if(isItemSelected(item)){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n                </div>\r\n              }\r\n              <span class=\"flex-1\">{{ resolveLabel(item) }}</span>\r\n              @if (!multiple() && isItemSelected(item)) {\r\n                <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\r\n              }\r\n            </div>\r\n          }\r\n          @if (filteredItems().length === 0) { <div class=\"ng-option-disabled\">{{ notFoundText() }}</div> }\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ng-select-container{@apply relative w-full box-border;}.ng-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-[9.2px] cursor-pointer;}.ng-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.ng-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.ng-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.ng-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.ng-value-label-single{@apply font-normal text-sm text-[#141414] truncate w-full;}.ng-value-chips{@apply flex flex-wrap gap-1 w-full;}.ng-value-chip{@apply flex items-center bg-gray-100 border border-gray-200 rounded px-2 py-0.5 max-w-full;}.ng-value-chip .ng-value-label{@apply text-[#15191E] truncate max-w-[150px];}.ng-value-chip .ng-value-icon{@apply ml-1 text-gray-500 hover:text-red-500 cursor-pointer text-base font-bold leading-none px-1;}.ng-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.ng-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.ng-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.ng-arrow-wrapper.open{@apply rotate-180;}.custom-ng-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default;}.ng-dropdown-search{@apply px-2 pt-2;}.ng-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.ng-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.ng-options-list{@apply max-h-60 overflow-auto relative p-2.5 mb-3.5;}.ng-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];}.ng-option:hover,.ng-option.marked,.ng-option.selected{@apply bg-[#F8F8F8] rounded-md;}.ng-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.ng-value-chip.remaining-count{@apply bg-gray-200 text-gray-600 font-semibold cursor-default;}.select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.select-all-option:hover{@apply bg-gray-100;}.custom-ng-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}::-webkit-scrollbar-thumb:hover{background:#909090}\n"] }]
+                    ], template: "<div class=\"ng-select-container\">\r\n\r\n  <label\r\n    class=\"input-label\"\r\n    (click)=\"openFromLabel($event)\">\r\n    {{ label }}\r\n    @if(required){\r\n      <span class=\"input-label-required\">*</span>\r\n    }\r\n  </label>\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"ng-select-control\"\r\n    [class.focused]=\"isOpen()\"\r\n    [class.disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if(iconSrc){\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n    }\r\n    <div class=\"ng-value-container\">\r\n      @if (selectedOptions().length === 0)\r\n      {\r\n         <div class=\"ng-placeholder\">{{ placeholder() }}</div>\r\n        }\r\n      @if\r\n      (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-chips\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"ng-value-chip\">\r\n              <span class=\"ng-value-label\">{{ resolveLabel(opt) }}</span>\r\n              <span class=\"ng-value-icon\" (mousedown)=\"removeOption(opt, $event)\">\u00D7</span>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"ng-value-chip remaining-count\"><span class=\"ng-value-label\">+{{ selectedOptions().length - maxLabels() }} more</span></div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"ng-value-label-single\">{{ resolveLabel(selectedOptions()[0]) }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"ng-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"ng-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"ng-arrow-wrapper\" [class.open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"custom-ng-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n    >\r\n\r\n\r\n    @if (searchable()) {\r\n        <div class=\"ng-dropdown-search\">\r\n          <div class=\"ng-search-wrapper\">\r\n            <svg class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\r\n            <input #searchInput type=\"text\" class=\"ng-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\" (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      @if (multiple() && filteredItems().length > 0) {\r\n        <div class=\"ng-option select-all-option\" (mousedown)=\"toggleSelectAll($event)\">\r\n          <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isAllSelected()\" [class.border-blue-600]=\"isAllSelected()\">\r\n            @if(isAllSelected()){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n          </div>\r\n          <span class=\"font-semibold\">Select All</span>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"ng-options-list\">\r\n        @if (loading()) { <div class=\"ng-option-disabled\">{{ loadingText() }}</div> }\r\n        @else {\r\n          @for (item of filteredItems(); track $index) {\r\n            <div #optionsRef class=\"ng-option\" [class.selected]=\"isItemSelected(item)\" [class.marked]=\"$index === markedIndex()\" (click)=\"handleSelection(item, $event)\" (click)=\"markedIndex.set($index)\">\r\n              @if (multiple()) {\r\n                <div class=\"mr-2 flex items-center justify-center w-4 h-4 border border-gray-300 rounded bg-white\" [class.bg-blue-600]=\"isItemSelected(item)\" [class.border-blue-600]=\"isItemSelected(item)\">\r\n                  @if(isItemSelected(item)){ <svg class=\"text-white w-3 h-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\"><polyline points=\"20 6 9 17 4 12\"/></svg> }\r\n                </div>\r\n              }\r\n              <span class=\"flex-1\">{{ resolveLabel(item) }}</span>\r\n              @if (!multiple() && isItemSelected(item)) {\r\n                <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"/></svg>\r\n              }\r\n            </div>\r\n          }\r\n          @if (filteredItems().length === 0) { <div class=\"ng-option-disabled\">{{ notFoundText() }}</div> }\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ng-select-container{@apply relative w-full box-border;}.ng-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 px-3 py-[9.2px] cursor-pointer;}.ng-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.ng-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.ng-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.ng-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.ng-value-label-single{@apply font-normal text-sm text-[#141414] truncate w-full;}.ng-value-chips{@apply flex flex-wrap gap-1 w-full;}.ng-value-chip{@apply flex items-center bg-gray-100 border border-gray-200 rounded px-2 py-0.5 max-w-full;}.ng-value-chip .ng-value-label{@apply text-[#15191E] truncate max-w-[150px];}.ng-value-chip .ng-value-icon{@apply ml-1 text-gray-500 hover:text-red-500 cursor-pointer text-base font-bold leading-none px-1;}.ng-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.ng-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.ng-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.ng-arrow-wrapper.open{@apply rotate-180;}.custom-ng-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default;}.ng-dropdown-search{@apply px-2 pt-2;}.ng-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.ng-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.ng-options-list{@apply max-h-60 overflow-auto relative p-2.5 mb-3.5 flex flex-col gap-0.5;}.ng-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414];}.ng-option:hover,.ng-option.marked,.ng-option.selected{@apply bg-[#F8F8F8] rounded-md;}.ng-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.ng-value-chip.remaining-count{@apply bg-gray-200 text-gray-600 font-semibold cursor-default;}.select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.select-all-option:hover{@apply bg-gray-100;}.custom-ng-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}::-webkit-scrollbar-thumb:hover{background:#909090}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllText", required: false }] }], iconAlt: [{
                 type: Input
             }], label: [{
@@ -3415,5 +3415,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BkSelect, BrickclayIcons, BrickclayLib, ButtonGroup, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, GridComponent, PillComponent, RadioComponent, ScheduledDatePickerComponent, Spinner, Textarea, TimePickerComponent, ToggleComponent, UiButton, UiIconButton };
+export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkIconButton, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, GridComponent };
 //# sourceMappingURL=brickclay-org-ui.mjs.map