@brickclay-org/ui 0.0.38 → 0.0.39

package/fesm2022/brickclay-org-ui.mjs

@@ -0,0 +1,4035 @@
+import * as i0 from '@angular/core';
+import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import moment from 'moment';
+import { Subject } from 'rxjs';
+import * as i2 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+
+// Icon paths that will be resolved relative to the library's assets folder
+// When published to npm, users will need to configure their angular.json to include these assets
+const BrickclayIcons = {
+    arrowleft: 'assets/icons/chevron-left.svg',
+    arrowRight: 'assets/icons/chevron-right.svg',
+    calenderIcon: 'assets/icons/calender.svg',
+    timerIcon: 'assets/icons/timer.svg',
+};
+
+class BrickclayLib {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrickclayLib, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BrickclayLib, isStandalone: true, selector: "lib-brickclay-lib", ngImport: i0, template: `
+    <p>
+      brickclay-lib works!
+    </p>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrickclayLib, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-brickclay-lib', imports: [], template: `
+    <p>
+      brickclay-lib works!
+    </p>
+  ` }]
+        }] });
+
+class BkTimePicker {
+    value = '1:00 AM'; // Time in format "H:MM AM/PM"
+    label = 'Time';
+    placeholder = 'Select time';
+    position = 'left';
+    pickerId = ''; // Unique ID for this picker
+    closePicker = 0; // Close counter from parent (triggers close when changed)
+    timeFormat = 12; // Visual mode: 12h or 24h
+    showSeconds = false; // Whether to show/edit seconds
+    timeChange = new EventEmitter();
+    pickerOpened = new EventEmitter(); // Notify parent when opened
+    pickerClosed = new EventEmitter(); // Notify parent when closed
+    timeScrollElements;
+    showPicker = false;
+    currentHour = 1;
+    currentMinute = 0;
+    currentAMPM = 'AM';
+    currentSecond = 0;
+    brickclayIcons = BrickclayIcons;
+    ngOnInit() {
+        this.parseTimeValue();
+    }
+    ngAfterViewInit() {
+        if (this.showPicker) {
+            setTimeout(() => {
+                this.scrollToSelectedTimes();
+            }, 100);
+        }
+    }
+    parseTimeValue() {
+        const parsed = this.parseTimeStringToComponents(this.value);
+        this.currentHour = parsed.hour;
+        this.currentMinute = parsed.minute;
+        this.currentSecond = parsed.second;
+        this.currentAMPM = parsed.ampm;
+    }
+    getHours() {
+        // 12-hour: 1-12, 24-hour: 0-23
+        if (this.timeFormat === 24) {
+            return Array.from({ length: 24 }, (_, i) => i);
+        }
+        return Array.from({ length: 12 }, (_, i) => i + 1);
+    }
+    getMinutes() {
+        return Array.from({ length: 60 }, (_, i) => i);
+    }
+    getSeconds() {
+        return Array.from({ length: 60 }, (_, i) => i);
+    }
+    getAMPMOptions() {
+        return ['AM', 'PM'];
+    }
+    parseTimeStringToComponents(timeStr) {
+        // Supports:
+        // - "H:MM AM/PM"
+        // - "H:MM:SS AM/PM"
+        // - "HH:MM" (24h)
+        // - "HH:MM:SS" (24h)
+        if (!timeStr) {
+            return {
+                hour: this.timeFormat === 24 ? 0 : 12,
+                minute: 0,
+                second: 0,
+                ampm: this.timeFormat === 24 ? '' : 'AM'
+            };
+        }
+        const parts = timeStr.trim().split(' ');
+        const timePart = parts[0] || (this.timeFormat === 24 ? '00:00' : '12:00');
+        let ampm = (parts[1] || '').toUpperCase();
+        const [hoursStr, minutesStr, secondsStr] = timePart.split(':');
+        let hour = parseInt(hoursStr || (this.timeFormat === 24 ? '0' : '12'), 10);
+        const minute = parseInt(minutesStr || '0', 10);
+        const second = parseInt(secondsStr || '0', 10);
+        if (this.timeFormat === 24) {
+            // In 24-hour mode we ignore AM/PM and keep hour as 0-23
+            return {
+                hour: isNaN(hour) ? 0 : Math.min(Math.max(hour, 0), 23),
+                minute: isNaN(minute) ? 0 : Math.min(Math.max(minute, 0), 59),
+                second: isNaN(second) ? 0 : Math.min(Math.max(second, 0), 59),
+                ampm: ''
+            };
+        }
+        // 12-hour mode: normalize AM/PM and convert 24h inputs if needed
+        let ampmValue = ampm === 'PM' || ampm === 'AM' ? ampm : '';
+        if (!ampmValue) {
+            // No AM/PM provided -> interpret as 24-hour and convert to 12-hour with AM/PM
+            if (hour >= 12) {
+                ampmValue = 'PM';
+                if (hour > 12)
+                    hour -= 12;
+            }
+            else {
+                ampmValue = 'AM';
+                if (hour === 0)
+                    hour = 12;
+            }
+        }
+        // Clamp to 1-12 range
+        if (hour < 1)
+            hour = 1;
+        if (hour > 12)
+            hour = 12;
+        return {
+            hour,
+            minute: isNaN(minute) ? 0 : Math.min(Math.max(minute, 0), 59),
+            second: isNaN(second) ? 0 : Math.min(Math.max(second, 0), 59),
+            ampm: ampmValue
+        };
+    }
+    formatTimeFromComponents(hour, minute, second, ampm) {
+        const hStr = hour.toString().padStart(2, '0');
+        const minuteStr = minute.toString().padStart(2, '0');
+        const secondStr = second.toString().padStart(2, '0');
+        if (this.timeFormat === 24) {
+            // "HH:mm" or "HH:mm:ss"
+            return this.showSeconds
+                ? `${hStr}:${minuteStr}:${secondStr}`
+                : `${hStr}:${minuteStr}`;
+        }
+        // 12-hour: "H:MM" or "H:MM:SS" with AM/PM
+        const displayHour = hour; // already 1-12
+        return this.showSeconds
+            ? `${displayHour}:${minuteStr}:${secondStr} ${ampm}`
+            : `${displayHour}:${minuteStr} ${ampm}`;
+    }
+    togglePicker() {
+        if (!this.showPicker) {
+            this.showPicker = true;
+            this.parseTimeValue();
+            this.pickerOpened.emit(this.pickerId);
+            setTimeout(() => {
+                this.scrollToSelectedTimes();
+            }, 100);
+        }
+        else {
+            this.showPicker = false;
+            this.pickerClosed.emit(this.pickerId);
+        }
+    }
+    onHourChange(hour) {
+        this.currentHour = hour;
+        this.updateTime();
+        setTimeout(() => {
+            this.scrollToSelectedTimes();
+        }, 50);
+    }
+    onMinuteChange(minute) {
+        this.currentMinute = minute;
+        this.updateTime();
+        setTimeout(() => {
+            this.scrollToSelectedTimes();
+        }, 50);
+    }
+    onSecondChange(second) {
+        this.currentSecond = second;
+        this.updateTime();
+        setTimeout(() => {
+            this.scrollToSelectedTimes();
+        }, 50);
+    }
+    onAMPMChange(ampm) {
+        this.currentAMPM = ampm;
+        this.updateTime();
+        setTimeout(() => {
+            this.scrollToSelectedTimes();
+        }, 50);
+    }
+    updateTime() {
+        const newTime = this.formatTimeFromComponents(this.currentHour, this.currentMinute, this.currentSecond, this.currentAMPM);
+        this.value = newTime;
+        this.timeChange.emit(newTime);
+    }
+    scrollToSelectedTimes() {
+        this.timeScrollElements.forEach((elementRef) => {
+            const element = elementRef.nativeElement;
+            const selectedItem = element.querySelector('.time-item.selected');
+            if (selectedItem) {
+                const scrollTop = selectedItem.offsetTop - element.offsetHeight / 40 + selectedItem.offsetHeight / 40;
+                element.scrollTop = scrollTop;
+            }
+        });
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        if (!target.closest('.time-picker-wrapper') && this.showPicker) {
+            this.showPicker = false;
+            this.pickerClosed.emit(this.pickerId);
+        }
+    }
+    previousCloseCounter = 0;
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue) {
+            this.parseTimeValue();
+        }
+        if (changes['closePicker'] && this.showPicker) {
+            const newCounter = changes['closePicker'].currentValue;
+            // If counter increased, close the picker
+            if (newCounter > this.previousCloseCounter) {
+                this.showPicker = false;
+                this.pickerClosed.emit(this.pickerId);
+                this.previousCloseCounter = newCounter;
+            }
+        }
+    }
+    // Basic keyboard support on the input (combobox behavior)
+    onInputKeydown(event) {
+        const key = event.key;
+        if (key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            this.togglePicker();
+            return;
+        }
+        if (key === 'Escape' && this.showPicker) {
+            this.showPicker = false;
+            this.pickerClosed.emit(this.pickerId);
+            return;
+        }
+        // Simple hour increment/decrement when closed
+        if (!this.showPicker && (key === 'ArrowUp' || key === 'ArrowDown')) {
+            event.preventDefault();
+            if (this.timeFormat === 24) {
+                if (key === 'ArrowUp') {
+                    this.currentHour = (this.currentHour + 1) % 24;
+                }
+                else {
+                    this.currentHour = this.currentHour <= 0 ? 23 : this.currentHour - 1;
+                }
+            }
+            else {
+                if (key === 'ArrowUp') {
+                    this.currentHour = this.currentHour >= 12 ? 1 : this.currentHour + 1;
+                }
+                else {
+                    this.currentHour = this.currentHour <= 1 ? 12 : this.currentHour - 1;
+                }
+            }
+            this.updateTime();
+        }
+    }
+    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: 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: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], pickerId: [{
+                type: Input
+            }], closePicker: [{
+                type: Input
+            }], timeFormat: [{
+                type: Input
+            }], showSeconds: [{
+                type: Input
+            }], timeChange: [{
+                type: Output
+            }], pickerOpened: [{
+                type: Output
+            }], pickerClosed: [{
+                type: Output
+            }], timeScrollElements: [{
+                type: ViewChildren,
+                args: ['timeScroll']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class CalendarManagerService {
+    calendarInstances = new Set();
+    closeAllSubject = new Subject();
+    closeAll$ = this.closeAllSubject.asObservable();
+    /**
+     * Register a calendar instance with its close function
+     */
+    register(closeFn) {
+        this.calendarInstances.add(closeFn);
+        // Return unregister function
+        return () => {
+            this.calendarInstances.delete(closeFn);
+        };
+    }
+    /**
+     * Close all calendars except the one being opened
+     */
+    closeAllExcept(exceptCloseFn) {
+        this.calendarInstances.forEach(closeFn => {
+            if (closeFn !== exceptCloseFn) {
+                closeFn();
+            }
+        });
+    }
+    /**
+     * Close all calendars
+     */
+    closeAll() {
+        this.closeAllSubject.next();
+        this.calendarInstances.forEach(closeFn => closeFn());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarManagerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class BkCustomCalendar {
+    calendarManager;
+    // Basic Options
+    enableTimepicker = false;
+    autoApply = false;
+    closeOnAutoApply = false;
+    showCancel = true;
+    linkedCalendars = false;
+    singleDatePicker = false;
+    showWeekNumbers = false;
+    showISOWeekNumbers = false;
+    customRangeDirection = false;
+    lockStartDate = false;
+    position = 'left';
+    drop = 'down';
+    dualCalendar = false;
+    showRanges = true;
+    timeFormat = 24;
+    enableSeconds = false;
+    customRanges;
+    multiDateSelection = false; // NEW: Enable multi-date selection
+    maxDate; // NEW: Maximum selectable date
+    minDate; // NEW: Minimum selectable date
+    placeholder = 'Select date range'; // NEW: Custom placeholder
+    opens = 'left'; // NEW: Popup position
+    inline = false; // NEW: Always show calendar inline (no popup)
+    isDisplayCrossIcon = true; // NEW: Show/Hide clear (X) icon
+    selected = new EventEmitter();
+    opened = new EventEmitter();
+    closed = new EventEmitter();
+    /**
+     * External value passed from parent. If provided, component will select these dates on init / change.
+     * Accepts { startDate: Date|null, endDate: Date|null, selectedDates?: Date[] }
+     */
+    selectedValue = null;
+    /** Optional display format for the input value. Uses moment formatting tokens. */
+    displayFormat = 'MM/DD/YYYY';
+    brickclayIcons = BrickclayIcons;
+    show = false;
+    today = new Date();
+    month = this.today.getMonth();
+    year = this.today.getFullYear();
+    calendar = [];
+    leftMonth;
+    leftYear;
+    rightMonth;
+    rightYear;
+    leftCalendar = [];
+    rightCalendar = [];
+    startDate = null;
+    endDate = null;
+    selectedDates = []; // NEW: For multi-date selection
+    disableHighlight = false;
+    hoveredDate = null; // For hover preview
+    // Track raw input values for minutes to allow free typing
+    minuteInputValues = {};
+    // Time picker for single calendar (12-hour format: 1-12)
+    selectedHour = 1;
+    selectedMinute = 0;
+    selectedSecond = 0;
+    selectedAMPM = 'AM';
+    // NEW: Separate time pickers for dual calendar (12-hour format: 1-12)
+    startHour = 1;
+    startMinute = 0;
+    startSecond = 0;
+    startAMPM = 'AM';
+    endHour = 2;
+    endMinute = 0;
+    endSecond = 0;
+    endAMPM = 'AM';
+    // Track open time-picker within this calendar (for single-open behavior)
+    openTimePickerId = null;
+    closePickerCounter = {};
+    defaultRanges = {};
+    activeRange = null; // Track which range is currently active
+    rangeOrder = []; // Maintain order of ranges
+    unregisterFn;
+    closeAllSubscription;
+    closeFn;
+    constructor(calendarManager) {
+        this.calendarManager = calendarManager;
+    }
+    onClickOutside(event) {
+        // Don't handle click outside if inline mode is enabled
+        if (this.inline) {
+            return;
+        }
+        const target = event.target;
+        if (this.show && !target.closest('.calendar-container')) {
+            this.close();
+        }
+    }
+    ngOnInit() {
+        if (!this.customRanges) {
+            this.initializeDefaultRanges();
+        }
+        else {
+            // If customRanges is provided via @Input, set the order based on the keys
+            // Maintain the desired order if keys match, otherwise use provided order
+            const desiredOrder = ['Today', 'Yesterday', 'Last 7 Days', 'Last 30 Days', 'This Month', 'Last Month', 'Custom Range'];
+            const providedKeys = Object.keys(this.customRanges);
+            // Check if Custom Range exists, if not add it
+            if (!this.customRanges['Custom Range']) {
+                this.customRanges['Custom Range'] = { start: new Date(), end: new Date() };
+            }
+            // Build order: first add desired order items that exist, then add any remaining
+            this.rangeOrder = desiredOrder.filter(key => providedKeys.includes(key) || key === 'Custom Range');
+            const remaining = providedKeys.filter(key => !this.rangeOrder.includes(key));
+            this.rangeOrder = [...this.rangeOrder, ...remaining];
+        }
+        if (this.dualCalendar)
+            this.initializeDual();
+        else
+            this.generateCalendar();
+        // Initialize time from existing dates if available
+        if (this.startDate) {
+            this.initializeTimeFromDate(this.startDate, true);
+        }
+        if (this.endDate) {
+            this.initializeTimeFromDate(this.endDate, false);
+        }
+        // Check if current dates match any predefined range
+        if (this.startDate && this.endDate) {
+            this.checkAndSetActiveRange();
+        }
+        // If inline mode, always show calendar
+        if (this.inline) {
+            this.show = true;
+        }
+        // Register this calendar instance with the manager service
+        this.closeFn = () => {
+            if (this.show && !this.inline) {
+                this.close();
+            }
+        };
+        this.unregisterFn = this.calendarManager.register(this.closeFn);
+        // Subscribe to close all events (skip if inline)
+        this.closeAllSubscription = this.calendarManager.closeAll$.subscribe(() => {
+            if (this.show && !this.inline) {
+                this.close();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['selectedValue'] && this.selectedValue) {
+            // Normalize incoming values to Date or null
+            const s = this.selectedValue;
+            this.startDate = s.startDate ? new Date(s.startDate) : null;
+            this.endDate = s.endDate ? new Date(s.endDate) : null;
+            this.selectedDates = (s.selectedDates || []).map((d) => new Date(d));
+            // Update calendar month/year to show the start date (or end date if start missing)
+            const focusDate = this.startDate ?? this.endDate ?? new Date();
+            this.month = focusDate.getMonth();
+            this.year = focusDate.getFullYear();
+            if (this.dualCalendar) {
+                this.initializeDual();
+            }
+            else {
+                this.generateCalendar();
+            }
+            // Re-evaluate active range if any
+            this.checkAndSetActiveRange();
+        }
+    }
+    ngOnDestroy() {
+        // Unregister this calendar instance
+        if (this.unregisterFn) {
+            this.unregisterFn();
+        }
+        // Unsubscribe from close all events
+        if (this.closeAllSubscription) {
+            this.closeAllSubscription.unsubscribe();
+        }
+    }
+    checkAndSetActiveRange() {
+        if (!this.customRanges || !this.startDate || !this.endDate)
+            return;
+        // Normalize dates for comparison (ignore time)
+        const normalizeDate = (date) => {
+            const d = new Date(date);
+            d.setHours(0, 0, 0, 0);
+            return d;
+        };
+        const start = normalizeDate(this.startDate);
+        const end = normalizeDate(this.endDate);
+        // Check each range (except Custom Range)
+        for (const key of this.rangeOrder) {
+            if (key === 'Custom Range')
+                continue;
+            const range = this.customRanges[key];
+            if (range) {
+                const rangeStart = normalizeDate(range.start);
+                const rangeEnd = normalizeDate(range.end);
+                if (start.getTime() === rangeStart.getTime() && end.getTime() === rangeEnd.getTime()) {
+                    this.activeRange = key;
+                    return;
+                }
+            }
+        }
+        // If no match found, it's a custom range
+        this.activeRange = 'Custom Range';
+    }
+    initializeDefaultRanges() {
+        const today = new Date();
+        this.customRanges = {
+            'Today': { start: new Date(today.getFullYear(), today.getMonth(), today.getDate()), end: new Date(today.getFullYear(), today.getMonth(), today.getDate()) },
+            'Yesterday': { start: this.addDays(today, -1), end: this.addDays(today, -1) },
+            'Last 7 Days': { start: this.addDays(today, -6), end: today },
+            'Last 30 Days': { start: this.addDays(today, -29), end: today },
+            'This Month': { start: new Date(today.getFullYear(), today.getMonth(), 1), end: today },
+            'Last Month': { start: new Date(today.getFullYear(), today.getMonth() - 1, 1), end: new Date(today.getFullYear(), today.getMonth(), 0) },
+            'Custom Range': { start: new Date(), end: new Date() }, // Placeholder, won't be used for selection
+        };
+        // Set the order of ranges
+        this.rangeOrder = ['Today', 'Yesterday', 'Last 7 Days', 'Last 30 Days', 'This Month', 'Last Month', 'Custom Range'];
+    }
+    initializeTimeFromDate(date, isStart) {
+        // Always use 12-hour format
+        const hours24 = date.getHours();
+        const minutes = date.getMinutes();
+        const seconds = date.getSeconds();
+        if (isStart) {
+            this.startMinute = minutes;
+            this.startSecond = seconds;
+            if (hours24 >= 12) {
+                this.startAMPM = 'PM';
+                this.startHour = hours24 > 12 ? hours24 - 12 : 12;
+            }
+            else {
+                this.startAMPM = 'AM';
+                this.startHour = hours24 === 0 ? 12 : hours24;
+            }
+        }
+        else {
+            this.endMinute = minutes;
+            this.endSecond = seconds;
+            if (hours24 >= 12) {
+                this.endAMPM = 'PM';
+                this.endHour = hours24 > 12 ? hours24 - 12 : 12;
+            }
+            else {
+                this.endAMPM = 'AM';
+                this.endHour = hours24 === 0 ? 12 : hours24;
+            }
+        }
+    }
+    toggle() {
+        // Don't toggle if inline mode is enabled
+        if (this.inline) {
+            return;
+        }
+        const wasOpen = this.show;
+        this.show = !this.show;
+        if (this.show) {
+            // If opening, close all other calendars first
+            if (!wasOpen && this.closeFn) {
+                this.calendarManager.closeAllExcept(this.closeFn);
+            }
+            this.disableHighlight = false;
+            this.opened.emit();
+        }
+        else {
+            this.closed.emit();
+        }
+    }
+    close() {
+        // Don't close if inline mode is enabled
+        if (this.inline) {
+            return;
+        }
+        this.show = false;
+        this.closed.emit();
+    }
+    onDateHover(day, fromRight = false) {
+        if (!day || this.singleDatePicker || this.multiDateSelection) {
+            this.hoveredDate = null;
+            return;
+        }
+        // Only show hover preview if start date is selected but end date is not
+        if (!this.startDate || this.endDate) {
+            this.hoveredDate = null;
+            return;
+        }
+        if (!this.dualCalendar) {
+            this.hoveredDate = new Date(this.year, this.month, day);
+        }
+        else {
+            this.hoveredDate = fromRight
+                ? new Date(this.rightYear, this.rightMonth, day)
+                : new Date(this.leftYear, this.leftMonth, day);
+        }
+    }
+    onDateLeave() {
+        this.hoveredDate = null;
+    }
+    selectDate(day, fromRight = false) {
+        if (!day)
+            return;
+        let selected;
+        if (!this.dualCalendar) {
+            selected = new Date(this.year, this.month, day);
+        }
+        else {
+            selected = fromRight
+                ? new Date(this.rightYear, this.rightMonth, day)
+                : new Date(this.leftYear, this.leftMonth, day);
+        }
+        // Clear hover on selection
+        this.hoveredDate = null;
+        // Check min/max date constraints
+        if (this.minDate && selected < this.minDate)
+            return;
+        if (this.maxDate && selected > this.maxDate)
+            return;
+        // Multi-date selection mode
+        if (this.multiDateSelection) {
+            this.handleMultiDateSelection(selected);
+            return;
+        }
+        // Apply time if timepicker is enabled (convert 12-hour to 24-hour)
+        if (this.enableTimepicker) {
+            if (this.dualCalendar) {
+                // For dual calendar, use separate start/end times
+                // If no startDate OR endDate exists, we're selecting start date
+                const isStart = !this.startDate || !!this.endDate;
+                this.applyTimeToDate(selected, isStart);
+            }
+            else {
+                // For single calendar, always use selected time for start
+                this.applyTimeToDate(selected, true);
+            }
+        }
+        // Single date picker mode
+        if (this.singleDatePicker) {
+            this.startDate = selected;
+            this.endDate = null;
+            // Activate Custom Range when manually selecting dates
+            this.activeRange = 'Custom Range';
+            // Apply time immediately if timepicker is enabled
+            if (this.enableTimepicker) {
+                this.applyTimeToDate(this.startDate, true);
+            }
+            if (this.autoApply) {
+                this.apply();
+                if (this.closeOnAutoApply && !this.inline)
+                    this.close();
+            }
+            else {
+                // Always emit selection event even if autoApply is false (especially for inline calendars)
+                this.emitSelection();
+            }
+            return;
+        }
+        // Range selection mode
+        if (!this.startDate || this.endDate) {
+            this.startDate = selected;
+            this.endDate = null;
+            // Activate Custom Range when manually selecting dates
+            this.activeRange = 'Custom Range';
+            // Keep left calendar on the selected month for better UX
+            if (this.dualCalendar) {
+                this.leftMonth = selected.getMonth();
+                this.leftYear = selected.getFullYear();
+                // Reset right calendar to original position (next month after left) when end date is cleared
+                this.rightMonth = this.leftMonth + 1;
+                this.rightYear = this.leftYear;
+                if (this.rightMonth > 11) {
+                    this.rightMonth = 0;
+                    this.rightYear++;
+                }
+                this.generateDualCalendars();
+            }
+            // Don't overwrite time picker values - keep current values and apply them to the date
+            // Time picker values are already set by user, we just apply them to the selected date
+        }
+        else {
+            if (selected < this.startDate && !this.customRangeDirection) {
+                this.endDate = this.startDate;
+                this.startDate = selected;
+                // Activate Custom Range when manually selecting dates
+                this.activeRange = 'Custom Range';
+                // Swap times if needed
+                if (this.dualCalendar && this.enableTimepicker) {
+                    [this.startHour, this.endHour] = [this.endHour, this.startHour];
+                    [this.startMinute, this.endMinute] = [this.endMinute, this.startMinute];
+                    [this.startSecond, this.endSecond] = [this.endSecond, this.startSecond];
+                    [this.startAMPM, this.endAMPM] = [this.endAMPM, this.startAMPM];
+                }
+                // Keep left calendar on the selected month
+                if (this.dualCalendar) {
+                    this.leftMonth = selected.getMonth();
+                    this.leftYear = selected.getFullYear();
+                    this.leftCalendar = this.buildCalendar(this.leftYear, this.leftMonth);
+                }
+            }
+            else {
+                this.endDate = selected;
+                // Activate Custom Range when manually selecting dates
+                this.activeRange = 'Custom Range';
+                // Only move right calendar if end date is in a different month than start date
+                if (this.dualCalendar) {
+                    if (this.startDate) {
+                        const startMonth = this.startDate.getMonth();
+                        const startYear = this.startDate.getFullYear();
+                        const endMonth = selected.getMonth();
+                        const endYear = selected.getFullYear();
+                        // Only move right calendar if end date is in a different month
+                        if (endMonth !== startMonth || endYear !== startYear) {
+                            this.rightMonth = endMonth;
+                            this.rightYear = endYear;
+                            this.rightCalendar = this.buildCalendar(this.rightYear, this.rightMonth);
+                        }
+                        // If both dates are in same month, keep right calendar in its current position
+                    }
+                    else {
+                        // If no start date, move right calendar to end date month
+                        this.rightMonth = selected.getMonth();
+                        this.rightYear = selected.getFullYear();
+                        this.rightCalendar = this.buildCalendar(this.rightYear, this.rightMonth);
+                    }
+                }
+                // Don't overwrite time picker values - keep current end time values
+                // Time picker values are already set by user
+            }
+            if (this.autoApply) {
+                this.apply();
+                if (this.closeOnAutoApply && !this.inline)
+                    this.close();
+            }
+            else {
+                // Check if the selection matches a predefined range
+                this.checkAndSetActiveRange();
+                // Always emit selection event for inline calendars
+                if (this.inline) {
+                    this.emitSelection();
+                }
+            }
+        }
+    }
+    handleMultiDateSelection(selected) {
+        const dateStr = this.getDateString(selected);
+        const existingIndex = this.selectedDates.findIndex(d => this.getDateString(d) === dateStr);
+        if (existingIndex >= 0) {
+            // Deselect if already selected
+            this.selectedDates.splice(existingIndex, 1);
+        }
+        else {
+            // Add to selection
+            this.selectedDates.push(new Date(selected));
+            this.selectedDates.sort((a, b) => a.getTime() - b.getTime());
+        }
+        // Update startDate and endDate for compatibility
+        if (this.selectedDates.length > 0) {
+            this.startDate = new Date(this.selectedDates[0]);
+            this.endDate = new Date(this.selectedDates[this.selectedDates.length - 1]);
+            // Activate Custom Range when manually selecting dates
+            this.activeRange = 'Custom Range';
+        }
+        else {
+            this.startDate = null;
+            this.endDate = null;
+            this.activeRange = null;
+        }
+        // Always emit selection event for inline calendars or when autoApply is true
+        if (this.autoApply || this.inline) {
+            this.emitSelection();
+            if (this.closeOnAutoApply && !this.inline)
+                this.close();
+        }
+    }
+    getDateString(date) {
+        return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+    }
+    isDateInMultiSelection(year, month, day) {
+        if (!this.multiDateSelection || this.selectedDates.length === 0)
+            return false;
+        const cellDate = new Date(year, month, day);
+        return this.selectedDates.some(d => this.getDateString(d) === this.getDateString(cellDate));
+    }
+    apply() {
+        // Format minute inputs to 2 digits before applying
+        this.formatAllMinuteInputs();
+        // Apply time to dates
+        if (this.enableTimepicker) {
+            if (this.dualCalendar) {
+                // Dual calendar with separate start/end times (always 12-hour format)
+                if (this.startDate) {
+                    this.applyTimeToDate(this.startDate, true);
+                }
+                if (this.endDate) {
+                    this.applyTimeToDate(this.endDate, false);
+                }
+            }
+            else {
+                // Single calendar with time (always 12-hour format)
+                if (this.startDate) {
+                    this.applyTimeToDate(this.startDate, true);
+                }
+                if (this.endDate && !this.singleDatePicker) {
+                    this.applyTimeToDate(this.endDate, true);
+                }
+            }
+        }
+        // Check if the selection matches a predefined range
+        this.checkAndSetActiveRange();
+        this.emitSelection();
+        this.disableHighlight = true;
+        this.close();
+    }
+    cancel() {
+        this.startDate = null;
+        this.endDate = null;
+        this.selectedDates = [];
+        this.close();
+    }
+    clear() {
+        this.startDate = null;
+        this.endDate = null;
+        this.selectedDates = [];
+        this.activeRange = null; // Clear active range
+        // Reset right calendar to original position (next month after left) when end date is cleared
+        if (this.dualCalendar && !this.endDate) {
+            this.rightMonth = this.leftMonth + 1;
+            this.rightYear = this.leftYear;
+            if (this.rightMonth > 11) {
+                this.rightMonth = 0;
+                this.rightYear++;
+            }
+            this.generateDualCalendars();
+        }
+        this.emitSelection();
+    }
+    chooseRange(key) {
+        if (!this.customRanges)
+            return;
+        // Don't allow selecting "Custom Range" directly - it's only activated when manually selecting dates
+        if (key === 'Custom Range')
+            return;
+        const r = this.customRanges[key];
+        if (!r)
+            return;
+        this.startDate = new Date(r.start);
+        this.endDate = new Date(r.end);
+        this.selectedDates = [];
+        this.activeRange = key; // Set active range
+        // Navigate calendars to show the selected date range
+        if (this.dualCalendar) {
+            // For dual calendar: left always shows start date month
+            if (this.startDate) {
+                this.leftMonth = this.startDate.getMonth();
+                this.leftYear = this.startDate.getFullYear();
+            }
+            // Right calendar logic
+            if (this.endDate && this.startDate) {
+                const startMonth = this.startDate.getMonth();
+                const startYear = this.startDate.getFullYear();
+                const endMonth = this.endDate.getMonth();
+                const endYear = this.endDate.getFullYear();
+                // Only move right calendar if end date is in a different month than start date
+                if (endMonth !== startMonth || endYear !== startYear) {
+                    this.rightMonth = endMonth;
+                    this.rightYear = endYear;
+                }
+                else {
+                    // If both dates are in same month, reset right calendar to default position (next month after left)
+                    this.rightMonth = this.leftMonth + 1;
+                    this.rightYear = this.leftYear;
+                    if (this.rightMonth > 11) {
+                        this.rightMonth = 0;
+                        this.rightYear++;
+                    }
+                }
+            }
+            else if (this.endDate && !this.startDate) {
+                // If only end date exists, show it in right calendar
+                this.rightMonth = this.endDate.getMonth();
+                this.rightYear = this.endDate.getFullYear();
+            }
+            else {
+                // If no end date, reset right calendar to default position
+                this.rightMonth = this.leftMonth + 1;
+                this.rightYear = this.leftYear;
+                if (this.rightMonth > 11) {
+                    this.rightMonth = 0;
+                    this.rightYear++;
+                }
+            }
+            this.generateDualCalendars();
+        }
+        else {
+            // For single calendar: show the start date month (or end date if only end date exists)
+            if (this.startDate) {
+                this.month = this.startDate.getMonth();
+                this.year = this.startDate.getFullYear();
+            }
+            else if (this.endDate) {
+                this.month = this.endDate.getMonth();
+                this.year = this.endDate.getFullYear();
+            }
+            this.generateCalendar();
+        }
+        this.emitSelection();
+        if (this.autoApply || this.closeOnAutoApply) {
+            this.close();
+        }
+    }
+    // emitSelection() {
+    //   const selection: CalendarSelection = {
+    //     startDate: this.startDate,
+    //     endDate: this.endDate
+    //   };
+    //   if (this.multiDateSelection) {
+    //     selection.selectedDates = [...this.selectedDates];
+    //   }
+    //   this.selected.emit(selection);
+    // }
+    emitSelection() {
+        const selection = {
+            startDate: this.startDate ? this.formatDateToString(this.startDate) : null,
+            endDate: this.endDate ? this.formatDateToString(this.endDate) : null,
+        };
+        if (this.multiDateSelection && this.selectedDates.length > 0) {
+            selection.selectedDates = this.selectedDates.map(d => this.formatDateToString(d));
+        }
+        this.selected.emit(selection);
+    }
+    addDays(date, days) {
+        const d = new Date(date);
+        d.setDate(d.getDate() + days);
+        return d;
+    }
+    generateCalendar() {
+        this.calendar = this.buildCalendar(this.year, this.month);
+    }
+    nextMonth() {
+        if (!this.dualCalendar) {
+            this.month++;
+            if (this.month > 11) {
+                this.month = 0;
+                this.year++;
+            }
+            this.generateCalendar();
+            return;
+        }
+        // For dual calendar, this should not be used - use nextLeftMonth or nextRightMonth instead
+        this.nextLeftMonth();
+    }
+    prevMonth() {
+        if (!this.dualCalendar) {
+            this.month--;
+            if (this.month < 0) {
+                this.month = 11;
+                this.year--;
+            }
+            this.generateCalendar();
+            return;
+        }
+        // For dual calendar, this should not be used - use prevLeftMonth or prevRightMonth instead
+        this.prevLeftMonth();
+    }
+    // Independent navigation for left calendar
+    nextLeftMonth() {
+        this.leftMonth++;
+        if (this.leftMonth > 11) {
+            this.leftMonth = 0;
+            this.leftYear++;
+        }
+        this.leftCalendar = this.buildCalendar(this.leftYear, this.leftMonth);
+    }
+    prevLeftMonth() {
+        this.leftMonth--;
+        if (this.leftMonth < 0) {
+            this.leftMonth = 11;
+            this.leftYear--;
+        }
+        this.leftCalendar = this.buildCalendar(this.leftYear, this.leftMonth);
+    }
+    // Independent navigation for right calendar
+    nextRightMonth() {
+        this.rightMonth++;
+        if (this.rightMonth > 11) {
+            this.rightMonth = 0;
+            this.rightYear++;
+        }
+        this.rightCalendar = this.buildCalendar(this.rightYear, this.rightMonth);
+    }
+    prevRightMonth() {
+        this.rightMonth--;
+        if (this.rightMonth < 0) {
+            this.rightMonth = 11;
+            this.rightYear--;
+        }
+        this.rightCalendar = this.buildCalendar(this.rightYear, this.rightMonth);
+    }
+    initializeDual() {
+        this.leftMonth = this.today.getMonth();
+        this.leftYear = this.today.getFullYear();
+        // Initialize right calendar to next month, but they can move independently
+        this.rightMonth = this.leftMonth + 1;
+        this.rightYear = this.leftYear;
+        if (this.rightMonth > 11) {
+            this.rightMonth = 0;
+            this.rightYear++;
+        }
+        this.generateDualCalendars();
+    }
+    generateDualCalendars() {
+        this.leftCalendar = this.buildCalendar(this.leftYear, this.leftMonth);
+        this.rightCalendar = this.buildCalendar(this.rightYear, this.rightMonth);
+    }
+    buildCalendar(year, month) {
+        const firstDay = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const prevMonthDays = new Date(year, month, 0).getDate();
+        const grid = [];
+        let row = [];
+        // Adjust first day (0 = Sunday, 1 = Monday, etc.)
+        const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1; // Make Monday = 0
+        for (let i = adjustedFirstDay - 1; i >= 0; i--) {
+            row.push({ day: prevMonthDays - i, currentMonth: false });
+        }
+        for (let d = 1; d <= daysInMonth; d++) {
+            row.push({ day: d, currentMonth: true });
+            if (row.length === 7) {
+                grid.push(row);
+                row = [];
+            }
+        }
+        let nextMonthDay = 1;
+        while (row.length > 0 && row.length < 7) {
+            row.push({ day: nextMonthDay++, currentMonth: false });
+        }
+        if (row.length)
+            grid.push(row);
+        // Ensure we always have 6 rows (42 cells total) for consistent layout
+        while (grid.length < 6) {
+            const newRow = [];
+            for (let i = 0; i < 7; i++) {
+                newRow.push({ day: nextMonthDay++, currentMonth: false });
+            }
+            grid.push(newRow);
+        }
+        return grid;
+    }
+    isDateSelected(year, month, day) {
+        if (this.disableHighlight)
+            return false;
+        if (!day)
+            return false;
+        // Multi-date selection
+        if (this.multiDateSelection) {
+            return this.isDateInMultiSelection(year, month, day);
+        }
+        const cellDate = new Date(year, month, day);
+        // Check if it's today (highlight today by default if no date selected)
+        const today = new Date();
+        const isToday = cellDate.getFullYear() === today.getFullYear() &&
+            cellDate.getMonth() === today.getMonth() &&
+            cellDate.getDate() === today.getDate();
+        // If no startDate is set and it's today, highlight it
+        if (!this.startDate && isToday) {
+            return true;
+        }
+        if (!this.startDate)
+            return false;
+        // Check if date is disabled
+        if (this.minDate && cellDate < this.minDate)
+            return false;
+        if (this.maxDate && cellDate > this.maxDate)
+            return false;
+        const sameDay = cellDate.getFullYear() === this.startDate.getFullYear() &&
+            cellDate.getMonth() === this.startDate.getMonth() &&
+            cellDate.getDate() === this.startDate.getDate();
+        if (this.singleDatePicker)
+            return sameDay;
+        // For range selection: only highlight start and end dates (not in-between)
+        if (this.startDate && this.endDate) {
+            const start = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate());
+            const end = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate());
+            return cellDate.getTime() === start.getTime() || cellDate.getTime() === end.getTime();
+        }
+        // If only start date is selected and hovering, check if this is start or hovered end
+        if (this.startDate && !this.endDate && this.hoveredDate) {
+            const start = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate());
+            const hovered = new Date(this.hoveredDate.getFullYear(), this.hoveredDate.getMonth(), this.hoveredDate.getDate());
+            // Show both start and hovered date as selected (circular black)
+            return cellDate.getTime() === start.getTime() || cellDate.getTime() === hovered.getTime();
+        }
+        return sameDay;
+    }
+    isDateInRange(year, month, day) {
+        if (this.disableHighlight || !day)
+            return false;
+        if (this.singleDatePicker)
+            return false;
+        if (this.multiDateSelection)
+            return false;
+        const cellDate = new Date(year, month, day);
+        // If both start and end are selected, show gray background for dates in between
+        if (this.startDate && this.endDate) {
+            const start = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate());
+            const end = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate());
+            return cellDate > start && cellDate < end;
+        }
+        // If only start is selected and hovering, show preview range
+        if (this.startDate && !this.endDate && this.hoveredDate) {
+            const start = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate());
+            const hovered = new Date(this.hoveredDate.getFullYear(), this.hoveredDate.getMonth(), this.hoveredDate.getDate());
+            // Determine which is earlier - show gray background for dates between them
+            const minDate = hovered < start ? hovered : start;
+            const maxDate = hovered >= start ? hovered : start;
+            return cellDate > minDate && cellDate < maxDate;
+        }
+        return false;
+    }
+    isDateDisabled(year, month, day) {
+        if (!day)
+            return false;
+        const cellDate = new Date(year, month, day);
+        if (this.minDate && cellDate < this.minDate)
+            return true;
+        if (this.maxDate && cellDate > this.maxDate)
+            return true;
+        return false;
+    }
+    isToday(year, month, day) {
+        if (!day)
+            return false;
+        const today = new Date();
+        const cellDate = new Date(year, month, day);
+        return cellDate.getFullYear() === today.getFullYear() &&
+            cellDate.getMonth() === today.getMonth() &&
+            cellDate.getDate() === today.getDate();
+    }
+    getDisplayValue() {
+        if (this.multiDateSelection && this.selectedDates.length > 0) {
+            if (this.selectedDates.length === 1) {
+                return moment(this.selectedDates[0]).format(this.displayFormat);
+            }
+            return `${this.selectedDates.length} dates selected`;
+        }
+        if (!this.startDate)
+            return '';
+        // Prefer moment formatting for consistent display
+        let dateStr = moment(this.startDate).format(this.displayFormat);
+        if (this.enableTimepicker && !this.dualCalendar) {
+            const hr = this.startDate.getHours().toString().padStart(2, '0');
+            const min = this.startDate.getMinutes().toString().padStart(2, '0');
+            dateStr += ` ${hr}:${min}`;
+            if (this.enableSeconds) {
+                const sec = this.startDate.getSeconds().toString().padStart(2, '0');
+                dateStr += `:${sec}`;
+            }
+        }
+        if (this.endDate && !this.singleDatePicker) {
+            let endStr = moment(this.endDate).format(this.displayFormat);
+            if (this.enableTimepicker) {
+                if (this.dualCalendar) {
+                    const startHr = this.startDate.getHours().toString().padStart(2, '0');
+                    const startMin = this.startDate.getMinutes().toString().padStart(2, '0');
+                    dateStr += ` ${startHr}:${startMin}`;
+                    if (this.enableSeconds) {
+                        const startSec = this.startDate.getSeconds().toString().padStart(2, '0');
+                        dateStr += `:${startSec}`;
+                    }
+                }
+                const endHr = this.endDate.getHours().toString().padStart(2, '0');
+                const endMin = this.endDate.getMinutes().toString().padStart(2, '0');
+                endStr += ` ${endHr}:${endMin}`;
+                if (this.enableSeconds) {
+                    const endSec = this.endDate.getSeconds().toString().padStart(2, '0');
+                    endStr += `:${endSec}`;
+                }
+            }
+            return `${dateStr} - ${endStr}`;
+        }
+        return dateStr;
+    }
+    // Time picker helpers
+    getTimeInputValue(isStart = true) {
+        const h = isStart ? this.startHour : this.endHour;
+        const m = isStart ? this.startMinute : this.endMinute;
+        return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+    }
+    getSingleTimeInputValue() {
+        return `${this.selectedHour.toString().padStart(2, '0')}:${this.selectedMinute.toString().padStart(2, '0')}`;
+    }
+    // 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 BkTimePicker (dual calendar)
+    getDualTimePickerDisplay(isStart = true) {
+        const hour = isStart ? (this.startHour || 12) : (this.endHour || 12);
+        const minute = isStart ? this.startMinute : this.endMinute;
+        const ampm = isStart ? (this.startAMPM || 'AM') : (this.endAMPM || 'AM');
+        const minuteStr = minute.toString().padStart(2, '0');
+        return `${hour}:${minuteStr} ${ampm}`;
+    }
+    // Coordination helpers for embedded BkTimePicker instances
+    onTimePickerOpened(pickerId) {
+        // Close previously open picker inside this calendar
+        if (this.openTimePickerId && this.openTimePickerId !== pickerId) {
+            if (!this.closePickerCounter[this.openTimePickerId]) {
+                this.closePickerCounter[this.openTimePickerId] = 0;
+            }
+            this.closePickerCounter[this.openTimePickerId]++;
+        }
+        this.openTimePickerId = pickerId;
+    }
+    onTimePickerClosed(pickerId) {
+        if (this.openTimePickerId === pickerId) {
+            this.openTimePickerId = null;
+        }
+    }
+    shouldClosePicker(pickerId) {
+        return this.closePickerCounter[pickerId] || 0;
+    }
+    // NEW: Parse "H:MM AM/PM" (or "HH:MM" 24h) from BkTimePicker
+    parsePickerTimeString(timeStr) {
+        if (!timeStr) {
+            return { hour12: 12, minute: 0, ampm: 'AM' };
+        }
+        const parts = timeStr.trim().split(' ');
+        const timePart = parts[0] || '12:00';
+        let ampmPart = (parts[1] || '').toUpperCase();
+        const [hourStr, minuteStr] = timePart.split(':');
+        let hour = parseInt(hourStr || '12', 10);
+        const minute = parseInt(minuteStr || '0', 10);
+        if (ampmPart !== 'AM' && ampmPart !== 'PM') {
+            // Interpret as 24-hour input and convert
+            if (hour >= 12) {
+                ampmPart = 'PM';
+                if (hour > 12)
+                    hour -= 12;
+            }
+            else {
+                ampmPart = 'AM';
+                if (hour === 0)
+                    hour = 12;
+            }
+        }
+        // Clamp to 1-12 range just in case
+        if (hour < 1)
+            hour = 1;
+        if (hour > 12)
+            hour = 12;
+        return { hour12: hour, minute, ampm: ampmPart };
+    }
+    // NEW: Handle BkTimePicker change for single calendar
+    onSingleTimePickerChange(time) {
+        const { hour12, minute, ampm } = this.parsePickerTimeString(time);
+        this.selectedHour = hour12;
+        this.selectedMinute = minute;
+        this.selectedAMPM = ampm;
+        if (this.startDate) {
+            let h24 = hour12;
+            if (ampm === 'PM' && h24 < 12)
+                h24 += 12;
+            if (ampm === 'AM' && h24 === 12)
+                h24 = 0;
+            this.startDate.setHours(h24, minute, this.selectedSecond);
+            this.emitSelection();
+        }
+    }
+    // NEW: Handle BkTimePicker change for dual calendar
+    onDualTimePickerChange(time, isStart = true) {
+        const { hour12, minute, ampm } = this.parsePickerTimeString(time);
+        if (isStart) {
+            this.startHour = hour12;
+            this.startMinute = minute;
+            this.startAMPM = ampm;
+            if (this.startDate) {
+                let h24 = hour12;
+                if (ampm === 'PM' && h24 < 12)
+                    h24 += 12;
+                if (ampm === 'AM' && h24 === 12)
+                    h24 = 0;
+                this.startDate.setHours(h24, minute, this.startSecond);
+            }
+        }
+        else {
+            this.endHour = hour12;
+            this.endMinute = minute;
+            this.endAMPM = ampm;
+            if (this.endDate) {
+                let h24 = hour12;
+                if (ampm === 'PM' && h24 < 12)
+                    h24 += 12;
+                if (ampm === 'AM' && h24 === 12)
+                    h24 = 0;
+                this.endDate.setHours(h24, minute, this.endSecond);
+            }
+        }
+        this.emitSelection();
+    }
+    onTimeChange(event, isStart = true) {
+        const [h, m] = event.target.value.split(':').map(Number);
+        if (isStart) {
+            this.startHour = h;
+            this.startMinute = m;
+            if (this.startDate) {
+                this.startDate.setHours(h, m, this.startSecond);
+                this.emitSelection();
+            }
+        }
+        else {
+            this.endHour = h;
+            this.endMinute = m;
+            if (this.endDate) {
+                this.endDate.setHours(h, m, this.endSecond);
+                this.emitSelection();
+            }
+        }
+    }
+    onSingleTimeChange(event) {
+        const [h, m] = event.target.value.split(':').map(Number);
+        this.selectedHour = h;
+        this.selectedMinute = m;
+        if (this.startDate) {
+            this.startDate.setHours(h, m, this.selectedSecond);
+            this.emitSelection();
+        }
+    }
+    // Custom time picker controls
+    incrementHour(isStart = true) {
+        // 12-hour format: 1-12
+        if (isStart) {
+            this.startHour = this.startHour >= 12 ? 1 : this.startHour + 1;
+            // Toggle AM/PM at 12
+            if (this.startHour === 12) {
+                this.startAMPM = this.startAMPM === 'AM' ? 'PM' : 'AM';
+            }
+            if (this.startDate) {
+                let h = this.startHour;
+                if (this.startAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.startAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.startDate.setHours(h, this.startMinute, this.startSecond);
+            }
+        }
+        else {
+            this.endHour = this.endHour >= 12 ? 1 : this.endHour + 1;
+            // Toggle AM/PM at 12
+            if (this.endHour === 12) {
+                this.endAMPM = this.endAMPM === 'AM' ? 'PM' : 'AM';
+            }
+            if (this.endDate) {
+                let h = this.endHour;
+                if (this.endAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.endAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.endDate.setHours(h, this.endMinute, this.endSecond);
+            }
+        }
+        this.emitSelection();
+    }
+    decrementHour(isStart = true) {
+        // 12-hour format: 1-12
+        if (isStart) {
+            this.startHour = this.startHour <= 1 ? 12 : this.startHour - 1;
+            // Toggle AM/PM at 12
+            if (this.startHour === 12) {
+                this.startAMPM = this.startAMPM === 'AM' ? 'PM' : 'AM';
+            }
+            if (this.startDate) {
+                let h = this.startHour;
+                if (this.startAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.startAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.startDate.setHours(h, this.startMinute, this.startSecond);
+            }
+        }
+        else {
+            this.endHour = this.endHour <= 1 ? 12 : this.endHour - 1;
+            // Toggle AM/PM at 12
+            if (this.endHour === 12) {
+                this.endAMPM = this.endAMPM === 'AM' ? 'PM' : 'AM';
+            }
+            if (this.endDate) {
+                let h = this.endHour;
+                if (this.endAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.endAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.endDate.setHours(h, this.endMinute, this.endSecond);
+            }
+        }
+        this.emitSelection();
+    }
+    incrementMinute(isStart = true) {
+        if (isStart) {
+            this.startMinute = (this.startMinute + 1) % 60;
+            if (this.startDate) {
+                let h = this.startHour;
+                if (this.startAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.startAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.startDate.setHours(h, this.startMinute, this.startSecond);
+            }
+        }
+        else {
+            this.endMinute = (this.endMinute + 1) % 60;
+            if (this.endDate) {
+                let h = this.endHour;
+                if (this.endAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.endAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.endDate.setHours(h, this.endMinute, this.endSecond);
+            }
+        }
+        this.emitSelection();
+    }
+    decrementMinute(isStart = true) {
+        if (isStart) {
+            this.startMinute = this.startMinute <= 0 ? 59 : this.startMinute - 1;
+            if (this.startDate) {
+                let h = this.startHour;
+                if (this.startAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.startAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.startDate.setHours(h, this.startMinute, this.startSecond);
+            }
+        }
+        else {
+            this.endMinute = this.endMinute <= 0 ? 59 : this.endMinute - 1;
+            if (this.endDate) {
+                let h = this.endHour;
+                if (this.endAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.endAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.endDate.setHours(h, this.endMinute, this.endSecond);
+            }
+        }
+        this.emitSelection();
+    }
+    toggleAMPM(isStart = true) {
+        if (isStart) {
+            this.startAMPM = this.startAMPM === 'AM' ? 'PM' : 'AM';
+            if (this.startDate) {
+                let h = this.startHour;
+                if (this.startAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.startAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.startDate.setHours(h, this.startMinute, this.startSecond);
+            }
+        }
+        else {
+            this.endAMPM = this.endAMPM === 'AM' ? 'PM' : 'AM';
+            if (this.endDate) {
+                let h = this.endHour;
+                if (this.endAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.endAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.endDate.setHours(h, this.endMinute, this.endSecond);
+            }
+        }
+        this.emitSelection();
+    }
+    // Single calendar time picker controls (12-hour format: 1-12)
+    incrementSingleHour() {
+        this.selectedHour = this.selectedHour >= 12 ? 1 : this.selectedHour + 1;
+        // Toggle AM/PM at 12
+        if (this.selectedHour === 12) {
+            this.selectedAMPM = this.selectedAMPM === 'AM' ? 'PM' : 'AM';
+        }
+        if (this.startDate) {
+            let h = this.selectedHour;
+            if (this.selectedAMPM === 'PM' && h < 12)
+                h += 12;
+            if (this.selectedAMPM === 'AM' && h === 12)
+                h = 0;
+            this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
+            this.emitSelection();
+        }
+    }
+    decrementSingleHour() {
+        this.selectedHour = this.selectedHour <= 1 ? 12 : this.selectedHour - 1;
+        // Toggle AM/PM at 12
+        if (this.selectedHour === 12) {
+            this.selectedAMPM = this.selectedAMPM === 'AM' ? 'PM' : 'AM';
+        }
+        if (this.startDate) {
+            let h = this.selectedHour;
+            if (this.selectedAMPM === 'PM' && h < 12)
+                h += 12;
+            if (this.selectedAMPM === 'AM' && h === 12)
+                h = 0;
+            this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
+            this.emitSelection();
+        }
+    }
+    incrementSingleMinute() {
+        this.selectedMinute = (this.selectedMinute + 1) % 60;
+        if (this.startDate) {
+            let h = this.selectedHour;
+            if (this.selectedAMPM === 'PM' && h < 12)
+                h += 12;
+            if (this.selectedAMPM === 'AM' && h === 12)
+                h = 0;
+            this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
+            this.emitSelection();
+        }
+    }
+    decrementSingleMinute() {
+        this.selectedMinute = this.selectedMinute <= 0 ? 59 : this.selectedMinute - 1;
+        if (this.startDate) {
+            let h = this.selectedHour;
+            if (this.selectedAMPM === 'PM' && h < 12)
+                h += 12;
+            if (this.selectedAMPM === 'AM' && h === 12)
+                h = 0;
+            this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
+            this.emitSelection();
+        }
+    }
+    toggleSingleAMPM() {
+        this.selectedAMPM = this.selectedAMPM === 'AM' ? 'PM' : 'AM';
+        if (this.startDate) {
+            let h = this.selectedHour;
+            if (this.selectedAMPM === 'PM' && h < 12)
+                h += 12;
+            if (this.selectedAMPM === 'AM' && h === 12)
+                h = 0;
+            this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
+            this.emitSelection();
+        }
+    }
+    getMonthName(month) {
+        const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+        return months[month];
+    }
+    // Input handlers for direct hour/minute input (12-hour format only)
+    onHourInput(event, isStart = true, isSingle = false) {
+        const inputValue = event.target.value;
+        // Allow empty input while typing
+        if (inputValue === '' || inputValue === null || inputValue === undefined) {
+            return;
+        }
+        let value = parseInt(inputValue) || 0;
+        // Validate: 1-12 for 12-hour format
+        if (value < 1)
+            value = 1;
+        if (value > 12)
+            value = 12;
+        if (isSingle) {
+            this.selectedHour = value;
+            if (this.startDate) {
+                let h = value;
+                if (this.selectedAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.selectedAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
+                this.emitSelection();
+            }
+        }
+        else if (isStart) {
+            this.startHour = value;
+            if (this.startDate) {
+                let h = value;
+                if (this.startAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.startAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.startDate.setHours(h, this.startMinute, this.startSecond);
+                this.emitSelection();
+            }
+        }
+        else {
+            this.endHour = value;
+            if (this.endDate) {
+                let h = value;
+                if (this.endAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.endAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.endDate.setHours(h, this.endMinute, this.endSecond);
+                this.emitSelection();
+            }
+        }
+        // Don't format during input, only on blur
+        event.target.value = value.toString();
+    }
+    onHourBlur(event, isStart = true, isSingle = false) {
+        const inputValue = event.target.value;
+        if (inputValue === '' || inputValue === null || inputValue === undefined) {
+            // If empty, set to current value
+            const currentValue = isSingle ? this.selectedHour : (isStart ? this.startHour : this.endHour);
+            event.target.value = currentValue.toString();
+            return;
+        }
+        let value = parseInt(inputValue) || 0;
+        if (value < 1)
+            value = 1;
+        if (value > 12)
+            value = 12;
+        // Format to single digit (no padding for hours in 12-hour format)
+        event.target.value = value.toString();
+        // Update the value
+        if (isSingle) {
+            this.selectedHour = value;
+            if (this.startDate) {
+                let h = value;
+                if (this.selectedAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.selectedAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
+                this.emitSelection();
+            }
+        }
+        else if (isStart) {
+            this.startHour = value;
+            if (this.startDate) {
+                let h = value;
+                if (this.startAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.startAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.startDate.setHours(h, this.startMinute, this.startSecond);
+                this.emitSelection();
+            }
+        }
+        else {
+            this.endHour = value;
+            if (this.endDate) {
+                let h = value;
+                if (this.endAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.endAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.endDate.setHours(h, this.endMinute, this.endSecond);
+                this.emitSelection();
+            }
+        }
+    }
+    onMinuteInput(event, isStart = true, isSingle = false) {
+        const inputValue = event.target.value;
+        const key = `${isStart ? 'start' : 'end'}_${isSingle ? 'single' : 'dual'}`;
+        // Remove any non-digit characters
+        const digitsOnly = inputValue.replace(/\D/g, '');
+        // Store raw input value for display
+        this.minuteInputValues[key] = digitsOnly;
+        // Allow empty input while typing
+        if (digitsOnly === '' || digitsOnly === null || digitsOnly === undefined) {
+            return; // Don't modify the input, let user clear it
+        }
+        // Allow typing up to 2 digits without formatting
+        let value = parseInt(digitsOnly) || 0;
+        // If user types more than 2 digits, take only first 2
+        if (digitsOnly.length > 2) {
+            value = parseInt(digitsOnly.substring(0, 2));
+            this.minuteInputValues[key] = digitsOnly.substring(0, 2);
+            event.target.value = digitsOnly.substring(0, 2);
+        }
+        // If value exceeds 59, clamp it to 59
+        if (value > 59) {
+            value = 59;
+            this.minuteInputValues[key] = '59';
+            event.target.value = '59';
+        }
+        // Update the internal value silently (don't emit during typing to avoid re-rendering)
+        if (isSingle) {
+            this.selectedMinute = value;
+        }
+        else if (isStart) {
+            this.startMinute = value;
+        }
+        else {
+            this.endMinute = value;
+        }
+        // Don't update dates or emit during typing - wait for blur or apply
+    }
+    onMinuteBlur(event, isStart = true, isSingle = false) {
+        const key = `${isStart ? 'start' : 'end'}_${isSingle ? 'single' : 'dual'}`;
+        const inputValue = event.target.value;
+        if (inputValue === '' || inputValue === null || inputValue === undefined) {
+            // If empty, set to current value
+            const currentValue = isSingle ? this.selectedMinute : (isStart ? this.startMinute : this.endMinute);
+            event.target.value = currentValue.toString().padStart(2, '0');
+            delete this.minuteInputValues[key];
+            return;
+        }
+        const digitsOnly = inputValue.replace(/\D/g, '');
+        let value = parseInt(digitsOnly) || 0;
+        if (value < 0)
+            value = 0;
+        if (value > 59)
+            value = 59;
+        // Format to 2 digits on blur (01-09 becomes 01-09, 10-59 stays as is)
+        event.target.value = value.toString().padStart(2, '0');
+        delete this.minuteInputValues[key]; // Clear raw input, use formatted value
+        // Update the value
+        if (isSingle) {
+            this.selectedMinute = value;
+            if (this.startDate) {
+                let h = this.selectedHour;
+                if (this.selectedAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.selectedAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.startDate.setHours(h, this.selectedMinute, this.selectedSecond);
+                this.emitSelection();
+            }
+        }
+        else if (isStart) {
+            this.startMinute = value;
+            if (this.startDate) {
+                let h = this.startHour;
+                if (this.startAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.startAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.startDate.setHours(h, this.startMinute, this.startSecond);
+                this.emitSelection();
+            }
+        }
+        else {
+            this.endMinute = value;
+            if (this.endDate) {
+                let h = this.endHour;
+                if (this.endAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.endAMPM === 'AM' && h === 12)
+                    h = 0;
+                this.endDate.setHours(h, this.endMinute, this.endSecond);
+                this.emitSelection();
+            }
+        }
+    }
+    // Get display value for hour (always 12-hour format)
+    getDisplayHour(hour) {
+        if (hour === 0)
+            return 12;
+        if (hour > 12)
+            return hour - 12;
+        return hour;
+    }
+    // Get display value for minute (formatted only when not actively typing)
+    getMinuteDisplayValue(isStart, isSingle) {
+        const key = `${isStart ? 'start' : 'end'}_${isSingle ? 'single' : 'dual'}`;
+        // If user is typing (has raw input), show that, otherwise show formatted value
+        if (this.minuteInputValues[key] !== undefined) {
+            return this.minuteInputValues[key];
+        }
+        // Otherwise return formatted value
+        const value = isSingle ? this.selectedMinute : (isStart ? this.startMinute : this.endMinute);
+        return value.toString().padStart(2, '0');
+    }
+    // Helper method to apply time picker values to a date
+    applyTimeToDate(date, isStart) {
+        if (this.dualCalendar) {
+            if (isStart) {
+                let h = this.startHour;
+                if (this.startAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.startAMPM === 'AM' && h === 12)
+                    h = 0;
+                date.setHours(h, this.startMinute, this.startSecond);
+            }
+            else {
+                let h = this.endHour;
+                if (this.endAMPM === 'PM' && h < 12)
+                    h += 12;
+                if (this.endAMPM === 'AM' && h === 12)
+                    h = 0;
+                date.setHours(h, this.endMinute, this.endSecond);
+            }
+        }
+        else {
+            let h = this.selectedHour;
+            if (this.selectedAMPM === 'PM' && h < 12)
+                h += 12;
+            if (this.selectedAMPM === 'AM' && h === 12)
+                h = 0;
+            date.setHours(h, this.selectedMinute, this.selectedSecond);
+        }
+    }
+    // Select all text on focus for easy replacement
+    onTimeInputFocus(event) {
+        event.target.select();
+    }
+    // Format all minute inputs to 2 digits (called before Apply)
+    formatAllMinuteInputs() {
+        // Format minute inputs in the DOM - find all minute inputs and format single digits
+        const inputs = document.querySelectorAll('.time-input');
+        inputs.forEach((input) => {
+            const value = parseInt(input.value);
+            // If it's a valid minute value (0-59) and not already formatted (single digit or 2 digits without leading zero)
+            if (!isNaN(value) && value >= 0 && value <= 59) {
+                // Format if it's a single digit (1-9) or if it's 2 digits but the first is not 0
+                if (input.value.length === 1 || (input.value.length === 2 && !input.value.startsWith('0') && value < 10)) {
+                    input.value = value.toString().padStart(2, '0');
+                }
+            }
+        });
+    }
+    formatDateToString(date) {
+        const yyyy = date.getFullYear();
+        const mm = (date.getMonth() + 1).toString().padStart(2, '0'); // month is 0-based
+        const dd = date.getDate().toString().padStart(2, '0');
+        return `${yyyy}-${mm}-${dd}`;
+    }
+    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", startDate: "startDate", endDate: "endDate" }, 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: BkCustomCalendar, decorators: [{
+            type: Component,
+            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: [{
+                type: Input
+            }], closeOnAutoApply: [{
+                type: Input
+            }], showCancel: [{
+                type: Input
+            }], linkedCalendars: [{
+                type: Input
+            }], singleDatePicker: [{
+                type: Input
+            }], showWeekNumbers: [{
+                type: Input
+            }], showISOWeekNumbers: [{
+                type: Input
+            }], customRangeDirection: [{
+                type: Input
+            }], lockStartDate: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], drop: [{
+                type: Input
+            }], dualCalendar: [{
+                type: Input
+            }], showRanges: [{
+                type: Input
+            }], timeFormat: [{
+                type: Input
+            }], enableSeconds: [{
+                type: Input
+            }], customRanges: [{
+                type: Input
+            }], multiDateSelection: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], opens: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], isDisplayCrossIcon: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], selectedValue: [{
+                type: Input
+            }], displayFormat: [{
+                type: Input
+            }], startDate: [{
+                type: Input
+            }], endDate: [{
+                type: Input
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class BkScheduledDatePicker {
+    timeFormat = 12;
+    enableSeconds = false;
+    scheduled = new EventEmitter();
+    cleared = new EventEmitter();
+    activeTab = 'single';
+    openTimePickerId = null; // Track which time picker is currently open
+    closePickerCounter = {}; // Track close signals for each picker
+    // Single Date
+    singleDate = null;
+    singleAllDay = false;
+    singleStartTime = '1:00 AM';
+    singleEndTime = '2:00 AM';
+    // Multiple Dates
+    multipleDates = [];
+    // Date Range
+    rangeStartDate = null;
+    rangeEndDate = null;
+    rangeAllDay = false;
+    rangeStartTime = '1:00 AM';
+    rangeEndTime = '2:00 AM';
+    ngOnInit() {
+        // Initialize with default time if needed
+    }
+    onTabChange(tab) {
+        this.activeTab = tab;
+        this.openTimePickerId = null; // Close any open pickers when switching tabs
+    }
+    onTimePickerOpened(pickerId) {
+        // Close all other pickers when one opens
+        if (this.openTimePickerId && this.openTimePickerId !== pickerId) {
+            // Increment close counter for the previously open picker
+            if (!this.closePickerCounter[this.openTimePickerId]) {
+                this.closePickerCounter[this.openTimePickerId] = 0;
+            }
+            this.closePickerCounter[this.openTimePickerId]++;
+        }
+        this.openTimePickerId = pickerId;
+    }
+    onTimePickerClosed(pickerId) {
+        // Reset open picker ID if this was the open one
+        if (this.openTimePickerId === pickerId) {
+            this.openTimePickerId = null;
+        }
+    }
+    shouldClosePicker(pickerId) {
+        // Return the counter value for this picker (triggers change detection)
+        return this.closePickerCounter[pickerId] || 0;
+    }
+    // Single Date Handlers
+    onSingleDateSelected(event) {
+        if (event.startDate) {
+            this.singleDate = new Date(event.startDate);
+            // Initialize time if not all day
+            if (!this.singleAllDay) {
+                this.updateSingleDateTimes();
+            }
+            this.emitScheduled();
+        }
+        else {
+            this.singleDate = null;
+        }
+    }
+    onSingleAllDayChange() {
+        this.singleAllDay = !this.singleAllDay;
+        if (this.singleDate) {
+            this.updateSingleDateTimes();
+            this.emitScheduled();
+        }
+    }
+    onSingleStartTimeChange(time) {
+        this.singleStartTime = time;
+        if (this.singleDate) {
+            this.updateSingleDateTimes();
+            this.emitScheduled();
+        }
+    }
+    onSingleEndTimeChange(time) {
+        this.singleEndTime = time;
+        if (this.singleDate) {
+            this.updateSingleDateTimes();
+            this.emitScheduled();
+        }
+    }
+    updateSingleDateTimes() {
+        if (!this.singleDate)
+            return;
+        if (this.singleAllDay) {
+            this.singleDate.setHours(0, 0, 0, 0);
+        }
+        else {
+            const startTime = this.parseTimeString(this.singleStartTime);
+            const endTime = this.parseTimeString(this.singleEndTime);
+            this.singleDate.setHours(startTime.hours, startTime.minutes, 0, 0);
+        }
+    }
+    // Multiple Dates Handlers
+    onMultipleDatesSelected(event) {
+        if (event.selectedDates && event.selectedDates.length > 0) {
+            const newDates = [];
+            event.selectedDates.forEach(date => {
+                // const dateStr = this.getDateString(date);
+                const dateStr = date;
+                const existing = this.multipleDates.find(d => this.getDateString(d.date) === dateStr);
+                if (existing) {
+                    newDates.push(existing);
+                }
+                else {
+                    // Create new time configuration for this date
+                    newDates.push({
+                        date: new Date(date),
+                        allDay: false,
+                        startTime: '1:00 AM',
+                        endTime: '2:00 AM'
+                    });
+                }
+            });
+            this.multipleDates = newDates;
+            this.emitScheduled();
+        }
+        else {
+            this.multipleDates = [];
+            this.emitScheduled();
+        }
+    }
+    onMultipleDateAllDayChange(index) {
+        if (this.multipleDates[index]) {
+            this.multipleDates[index].allDay = !this.multipleDates[index].allDay;
+            if (this.multipleDates[index].allDay) {
+                this.multipleDates[index].date.setHours(0, 0, 0, 0);
+            }
+            else {
+                const time = this.parseTimeString(this.multipleDates[index].startTime);
+                this.multipleDates[index].date.setHours(time.hours, time.minutes, 0, 0);
+            }
+            this.emitScheduled();
+        }
+    }
+    onMultipleDateStartTimeChange(index, time) {
+        if (this.multipleDates[index]) {
+            this.multipleDates[index].startTime = time;
+            if (!this.multipleDates[index].allDay) {
+                const parsed = this.parseTimeString(time);
+                this.multipleDates[index].date.setHours(parsed.hours, parsed.minutes, 0, 0);
+            }
+            this.emitScheduled();
+        }
+    }
+    onMultipleDateEndTimeChange(index, time) {
+        if (this.multipleDates[index]) {
+            this.multipleDates[index].endTime = time;
+            this.emitScheduled();
+        }
+    }
+    // Date Range Handlers
+    onRangeSelected(event) {
+        if (event.startDate && event.endDate) {
+            this.rangeStartDate = new Date(event.startDate);
+            this.rangeEndDate = new Date(event.endDate);
+            if (!this.rangeAllDay) {
+                this.updateRangeTimes();
+            }
+            this.emitScheduled();
+        }
+        else {
+            this.rangeStartDate = null;
+            this.rangeEndDate = null;
+        }
+    }
+    onRangeAllDayChange() {
+        this.rangeAllDay = !this.rangeAllDay;
+        if (this.rangeStartDate && this.rangeEndDate) {
+            this.updateRangeTimes();
+            this.emitScheduled();
+        }
+    }
+    onRangeStartTimeChange(time) {
+        this.rangeStartTime = time;
+        if (this.rangeStartDate && !this.rangeAllDay) {
+            this.updateRangeTimes();
+            this.emitScheduled();
+        }
+    }
+    onRangeEndTimeChange(time) {
+        this.rangeEndTime = time;
+        if (this.rangeEndDate && !this.rangeAllDay) {
+            this.updateRangeTimes();
+            this.emitScheduled();
+        }
+    }
+    updateRangeTimes() {
+        if (!this.rangeStartDate || !this.rangeEndDate)
+            return;
+        if (this.rangeAllDay) {
+            this.rangeStartDate.setHours(0, 0, 0, 0);
+            this.rangeEndDate.setHours(23, 59, 59, 999);
+        }
+        else {
+            const startTime = this.parseTimeString(this.rangeStartTime);
+            const endTime = this.parseTimeString(this.rangeEndTime);
+            this.rangeStartDate.setHours(startTime.hours, startTime.minutes, 0, 0);
+            this.rangeEndDate.setHours(endTime.hours, endTime.minutes, 0, 0);
+        }
+    }
+    // Utility Methods
+    parseTimeString(timeStr) {
+        // Parse time string like "7:01 AM" or "19:01"
+        const parts = timeStr.split(' ');
+        let timePart = parts[0];
+        const ampm = parts[1];
+        const [hoursStr, minutesStr] = timePart.split(':');
+        let hours = parseInt(hoursStr, 10);
+        const minutes = parseInt(minutesStr || '0', 10);
+        if (ampm) {
+            if (ampm.toUpperCase() === 'PM' && hours !== 12) {
+                hours += 12;
+            }
+            else if (ampm.toUpperCase() === 'AM' && hours === 12) {
+                hours = 0;
+            }
+        }
+        return { hours, minutes };
+    }
+    getDateString(date) {
+        return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+    }
+    formatDate(date) {
+        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        return `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+    }
+    emitScheduled() {
+        const selection = {
+            mode: this.activeTab
+        };
+        if (this.activeTab === 'single' && this.singleDate) {
+            // For single date, create startDate and endDate with same date but different times
+            const startDate = new Date(this.singleDate);
+            const endDate = new Date(this.singleDate);
+            if (!this.singleAllDay) {
+                const startTime = this.parseTimeString(this.singleStartTime);
+                const endTime = this.parseTimeString(this.singleEndTime);
+                startDate.setHours(startTime.hours, startTime.minutes, 0, 0);
+                endDate.setHours(endTime.hours, endTime.minutes, 0, 0);
+            }
+            else {
+                startDate.setHours(0, 0, 0, 0);
+                endDate.setHours(23, 59, 59, 999);
+            }
+            selection.singleDate = {
+                startDate: startDate,
+                endDate: endDate,
+                allDay: this.singleAllDay,
+                startTime: this.singleStartTime,
+                endTime: this.singleEndTime
+            };
+        }
+        else if (this.activeTab === 'multiple') {
+            selection.multipleDates = this.multipleDates.map(d => ({
+                date: new Date(d.date),
+                allDay: d.allDay,
+                startTime: d.startTime,
+                endTime: d.endTime
+            }));
+        }
+        else if (this.activeTab === 'range' && this.rangeStartDate && this.rangeEndDate) {
+            selection.dateRange = {
+                startDate: new Date(this.rangeStartDate),
+                endDate: new Date(this.rangeEndDate),
+                allDay: this.rangeAllDay,
+                startTime: this.rangeStartTime,
+                endTime: this.rangeEndTime
+            };
+        }
+        this.scheduled.emit(selection);
+    }
+    clear() {
+        this.singleDate = null;
+        this.multipleDates = [];
+        this.rangeStartDate = null;
+        this.rangeEndDate = null;
+        this.singleAllDay = false;
+        this.rangeAllDay = false;
+        this.singleStartTime = '1:00 AM';
+        this.singleEndTime = '2:00 AM';
+        this.rangeStartTime = '1:00 AM';
+        this.rangeEndTime = '2:00 AM';
+        this.cleared.emit();
+    }
+    apply() {
+        this.emitScheduled();
+    }
+    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", "startDate", "endDate"], 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: BkScheduledDatePicker, decorators: [{
+            type: Component,
+            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: [{
+                type: Input
+            }], scheduled: [{
+                type: Output
+            }], cleared: [{
+                type: Output
+            }] } });
+
+/**
+ * Optional NgModule wrapper for projects that prefer module-based usage.
+ *
+ * Note:
+ * - The components themselves are standalone, so you can also import them
+ *   directly into any standalone component without using this module.
+ * - This module is mainly for:
+ *   - Existing apps that still use feature modules
+ *   - Easier "plug-and-play" integration: import CalendarModule once and use
+ *     the three exported components anywhere in your templates.
+ */
+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,
+            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,
+            BkCustomCalendar,
+            BkScheduledDatePicker,
+            BkTimePicker] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        BkCustomCalendar,
+                        BkScheduledDatePicker,
+                        BkTimePicker
+                    ],
+                    exports: [
+                        BkCustomCalendar,
+                        BkScheduledDatePicker,
+                        BkTimePicker
+                    ]
+                }]
+        }] });
+
+class BkToggle {
+    label = '';
+    disabled = false;
+    toggleClass = 'toggle-md';
+    change = new EventEmitter();
+    isChecked = false;
+    // CVA callbacks (placeholders)
+    onChange = (_) => { };
+    onTouched = () => { };
+    toggle() {
+        if (this.disabled)
+            return;
+        this.isChecked = !this.isChecked;
+        this.onChange(this.isChecked); // Notify Forms API
+        this.onTouched(); // Notify Validation API
+        this.change.emit(this.isChecked); // Notify standard event listeners
+    }
+    // Called by Angular to write value to the view
+    writeValue(value) {
+        this.isChecked = value;
+    }
+    // Called by Angular to register the function to call when changed
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // Called by Angular to register the function to call when touched
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Called by Angular when the disabled state changes
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    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(() => 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: BkToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-toggle', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], toggleClass: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class BkCheckbox {
+    checkboxClass = '';
+    label = '';
+    labelClass = '';
+    disabled = false;
+    change = new EventEmitter();
+    // This is the value bound via ngModel
+    isChecked = false;
+    // ControlValueAccessor callbacks
+    onChange = (_) => { };
+    onTouched = () => { };
+    // Toggle function for click / keyboard
+    toggle() {
+        if (this.disabled)
+            return;
+        this.isChecked = !this.isChecked;
+        // Update ngModel value
+        this.onChange(this.isChecked);
+        this.onTouched();
+        // Emit the change event
+        this.change.emit(this.isChecked);
+    }
+    /** ------------------ ControlValueAccessor methods ------------------ */
+    writeValue(value) {
+        this.isChecked = value ?? false; // handle null/undefined safely
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    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(() => 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: BkCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-checkbox', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], propDecorators: { checkboxClass: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class BkRadioButton {
+    radioClass = '';
+    label = '';
+    labelClass = '';
+    value;
+    disabled = false;
+    variant = 'dot';
+    change = new EventEmitter();
+    modelValue;
+    onChange = (_) => { };
+    onTouched = () => { };
+    select() {
+        if (this.disabled)
+            return;
+        if (this.modelValue !== this.value) {
+            this.modelValue = this.value;
+            this.onChange(this.value);
+            this.onTouched();
+            this.change.emit(this.value);
+        }
+    }
+    get isChecked() {
+        return this.modelValue === this.value;
+    }
+    writeValue(value) {
+        this.modelValue = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    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(() => 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: BkRadioButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-radio-button', standalone: true, imports: [CommonModule, FormsModule], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], propDecorators: { radioClass: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class BkPill {
+    label = '';
+    variant = 'Light';
+    color = 'Gray';
+    size = 'md';
+    dot = 'none';
+    removable = false;
+    customClass = '';
+    clicked = new EventEmitter();
+    get containerClasses() {
+        // 1. Size Class
+        const sizeClass = `pill-${this.size}`;
+        // 2. Color/Variant Class (Dynamic Generation)
+        const styleClass = `${this.color}-${this.variant}`;
+        // 3. customClasses
+        const customClass = `${this.customClass}`;
+        return `pill ${sizeClass} ${styleClass} ${customClass}`;
+    }
+    onRemove(e) {
+        e.stopPropagation();
+        this.clicked.emit(this.label);
+    }
+    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: 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: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], dot: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class BkBadge {
+    label = '';
+    variant = 'Light';
+    color = 'Gray';
+    size = 'md';
+    dot = 'none';
+    removable = false;
+    customClass = '';
+    clicked = new EventEmitter();
+    get containerClasses() {
+        // 1. Size Class
+        const sizeClass = `badge-${this.size}`;
+        // 2. Color/Variant Class (Dynamic Generation)
+        const styleClass = `${this.color}-${this.variant}`;
+        // 3. customClasses
+        const customClass = `${this.customClass}`;
+        return `badge ${sizeClass} ${styleClass} ${customClass}`;
+    }
+    onRemove(e) {
+        e.stopPropagation();
+        this.clicked.emit(this.label);
+    }
+    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: 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: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], dot: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+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: 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: 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: [{
+                type: Input
+            }], show: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class BkButton {
+    // --- Inputs ---
+    // 1. Style & Size Inputs
+    variant = 'primary';
+    size = 'md';
+    // 2. Content Inputs
+    label = ''; // Pass text directly
+    leftIcon;
+    rightIcon;
+    iconAlt = 'icon';
+    // 3. State & Config
+    type = 'button';
+    loading = false;
+    disabled = false;
+    // 4. Customization (Optional overrides)
+    buttonClass = ''; // Append extra classes if needed
+    textClass = '';
+    spinnerClass = '';
+    // --- Outputs ---
+    clicked = new EventEmitter();
+    // --- Logic ---
+    onClick(event) {
+        if (!this.disabled && !this.loading) {
+            this.clicked.emit(true);
+        }
+    }
+    // Generate the class string based on Inputs
+    get buttonClasses() {
+        const variantClass = this.variant === 'primary' ? 'btn-primary' : 'btn-secondary';
+        // Combine: Variant + Size + Custom Classes
+        // 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: 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: 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: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], leftIcon: [{
+                type: Input
+            }], rightIcon: [{
+                type: Input
+            }], iconAlt: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], textClass: [{
+                type: Input
+            }], spinnerClass: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class BkIconButton {
+    // --- Inputs ---
+    icon; // Required icon path
+    alt = 'icon';
+    variant = 'primary';
+    size = 'md';
+    disabled = false;
+    // Custom classes
+    buttonClass = '';
+    clicked = new EventEmitter();
+    onClick(event) {
+        if (!this.disabled) {
+            this.clicked.emit(true);
+        }
+    }
+    get buttonClasses() {
+        // 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: 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: 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: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class BkButtonGroup {
+    // --- Inputs ---
+    items = [];
+    mode = 'single';
+    disabled = false;
+    // Holds the current selection.
+    // For 'single', it's a single value. For 'multiple', it's an array.
+    value = null;
+    // --- Outputs ---
+    valueChange = new EventEmitter();
+    // --- Logic ---
+    onItemClick(itemValue) {
+        if (this.disabled)
+            return;
+        if (this.mode === 'single') {
+            // 1. Single Mode: Just set the value
+            if (this.value !== itemValue) {
+                this.value = itemValue;
+                this.valueChange.emit(this.value);
+            }
+        }
+        else {
+            // 2. Multiple Mode: Toggle value in array
+            let currentValues = Array.isArray(this.value) ? [...this.value] : [];
+            if (currentValues.includes(itemValue)) {
+                // Remove if exists
+                currentValues = currentValues.filter(v => v !== itemValue);
+            }
+            else {
+                // Add if not exists
+                currentValues.push(itemValue);
+            }
+            this.value = currentValues;
+            this.valueChange.emit(this.value);
+        }
+    }
+    // Helper to check active state for UI
+    isActive(itemValue) {
+        if (this.mode === 'single') {
+            return this.value === itemValue;
+        }
+        else {
+            return Array.isArray(this.value) && this.value.includes(itemValue);
+        }
+    }
+    // --- Styles ---
+    get containerClass() {
+        return `group-container ${this.disabled ? 'disabled' : ''}`;
+    }
+    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: 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: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class BkTextarea {
+    ngControl;
+    autoComplete = 'off';
+    name;
+    id;
+    label = '';
+    placeholder = '';
+    rows = 4;
+    hint = '';
+    required = false;
+    maxlength = null;
+    minlength = null;
+    hasError = false;
+    disabled = false;
+    errorMessage = '';
+    tabIndex = null;
+    readOnly = false;
+    autoCapitalize = null;
+    inputMode = null;
+    input = new EventEmitter();
+    change = new EventEmitter();
+    blur = new EventEmitter();
+    focus = new EventEmitter();
+    value = '';
+    // --- ControlValueAccessor ---
+    onChange = (_) => { };
+    onTouched = () => { };
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    // --- Expose FormControl state ---
+    get control() {
+        return this.ngControl?.control;
+    }
+    get touched() {
+        return this.control?.touched;
+    }
+    get dirty() {
+        return this.control?.dirty;
+    }
+    get errors() {
+        return this.control?.errors;
+    }
+    handleFocus(event) {
+        this.focus.emit(event);
+    }
+    handleBlur(event) {
+        this.onTouched();
+        this.blur.emit(event);
+    }
+    handleInput(event) {
+        const val = event.target.value;
+        this.value = val; // update CVA value
+        this.onChange(val); // propagate to parent form
+        this.input.emit(event); // emit raw event
+    }
+    handleChange(event) {
+        this.change.emit(event); // emit raw change event
+    }
+    writeValue(value) {
+        this.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    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: { autoComplete: "autoComplete", name: "name", id: "id", label: "label", placeholder: "placeholder", rows: "rows", hint: "hint", required: "required", maxlength: "maxlength", minlength: "minlength", hasError: "hasError", disabled: "disabled", errorMessage: "errorMessage", tabIndex: "tabIndex", readOnly: "readOnly", autoCapitalize: "autoCapitalize", inputMode: "inputMode" }, outputs: { input: "input", change: "change", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n  @if (label) {\r\n    <label\r\n      class=\"text-sm font-medium text-[#141414] block\" [for]=\"id\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <textarea\r\n      [id]=\"id\"\r\n      [name]=\"name\"\r\n      [disabled]=\"disabled\"\r\n      [tabindex]=\"tabIndex\"\r\n      [readOnly]=\"readOnly\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [autocomplete]=\"autoComplete\"\r\n      [autocapitalize]=\"autoCapitalize\"\r\n      [inputMode]=\"inputMode\"\r\n      [value]=\"value\"\r\n      (input)=\"handleInput($event)\"\r\n      (change)=\"handleChange($event)\"\r\n      (blur)=\"handleBlur($event)\"\r\n      (focus)=\"handleFocus($event)\"\r\n      [placeholder]=\"placeholder\"\r\n\r\n      [autocomplete]=\"autoComplete\"\r\n\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 && !disabled,\r\n\r\n        'focus:border-[#6B7080] text-[#141414]': !hasError && !disabled,\r\n\r\n        'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': disabled\r\n      }\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n    <div class=\"flex-1\">\r\n      @if (hasError) {\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: 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\" [for]=\"id\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <textarea\r\n      [id]=\"id\"\r\n      [name]=\"name\"\r\n      [disabled]=\"disabled\"\r\n      [tabindex]=\"tabIndex\"\r\n      [readOnly]=\"readOnly\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [autocomplete]=\"autoComplete\"\r\n      [autocapitalize]=\"autoCapitalize\"\r\n      [inputMode]=\"inputMode\"\r\n      [value]=\"value\"\r\n      (input)=\"handleInput($event)\"\r\n      (change)=\"handleChange($event)\"\r\n      (blur)=\"handleBlur($event)\"\r\n      (focus)=\"handleFocus($event)\"\r\n      [placeholder]=\"placeholder\"\r\n\r\n      [autocomplete]=\"autoComplete\"\r\n\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 && !disabled,\r\n\r\n        'focus:border-[#6B7080] text-[#141414]': !hasError && !disabled,\r\n\r\n        'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': disabled\r\n      }\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n    <div class=\"flex-1\">\r\n      @if (hasError) {\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: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { autoComplete: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], autoCapitalize: [{
+                type: Input
+            }], inputMode: [{
+                type: Input
+            }], input: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class BkGrid {
+    draggable = false;
+    columns = [];
+    result;
+    actions = [];
+    actionClick = new EventEmitter();
+    sortChange = new EventEmitter();
+    dragDropChange = new EventEmitter();
+    sortColumn;
+    sortDirection = 'asc';
+    tableScrollContainer;
+    get firstVisibleColumnIndex() {
+        const index = this.columns.findIndex(col => col.visible !== false);
+        return index >= 0 ? index : 0;
+    }
+    /* ---------- Sorting ---------- */
+    sort(column, index) {
+        if (!column.sortable || !column.field)
+            return;
+        // Toggle sort direction
+        this.sortDirection =
+            this.sortColumn === column.field ? (this.sortDirection === 'asc' ? 'desc' : 'asc') : 'asc';
+        this.sortColumn = column.field;
+        // Emit sort change separately
+        this.sortChange.emit({
+            columnIndex: index,
+            column,
+            direction: this.sortDirection,
+        });
+    }
+    /* ---------- Visibility ---------- */
+    isColumnVisible(column) {
+        return column.visible !== false;
+    }
+    /* ---------- Cell Value ---------- */
+    getCellValue(row, column) {
+        if (column.formatter) {
+            return column.formatter(row);
+        }
+        if (column.field) {
+            return String(row[column.field] ?? '');
+        }
+        return '';
+    }
+    /* ---------- Actions ---------- */
+    emitAction(action, row) {
+        this.actionClick.emit({
+            action: action.name,
+            row,
+        });
+    }
+    dropList(event) {
+        if (!this.draggable || !this.result)
+            return;
+        moveItemInArray(this.result, event.previousIndex, event.currentIndex);
+        // Update existing sortOrder on T
+        this.result.forEach((item, index) => {
+            item.sortOrder = index + 1;
+        });
+        // Emit reordered list
+        this.dragDropChange.emit(this.result);
+    }
+    onDragMoved(event) {
+        if (!this.tableScrollContainer)
+            return;
+        const container = this.tableScrollContainer.nativeElement;
+        const rect = container.getBoundingClientRect();
+        const pointerY = event.pointerPosition.y - rect.top;
+        const threshold = 80;
+        const maxSpeed = 25;
+        if (pointerY < threshold) {
+            const intensity = 1 - pointerY / threshold;
+            container.scrollTop -= Math.min(maxSpeed, intensity * maxSpeed);
+        }
+        else if (pointerY > rect.height - threshold) {
+            const intensity = 1 - (rect.height - pointerY) / threshold;
+            container.scrollTop += Math.min(maxSpeed, intensity * maxSpeed);
+        }
+    }
+    onDragStart(event) {
+        const row = event.source.element.nativeElement;
+        const cells = Array.from(row.querySelectorAll('td'));
+        setTimeout(() => {
+            const preview = document.querySelector('.cdk-drag-preview');
+            if (!preview)
+                return;
+            const previewCells = preview.querySelectorAll('td');
+            cells.forEach((cell, index) => {
+                const width = cell.getBoundingClientRect().width + 'px';
+                const previewCell = previewCells[index];
+                if (previewCell) {
+                    previewCell.style.width = width;
+                    previewCell.style.minWidth = width;
+                    previewCell.style.maxWidth = width;
+                }
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions" }, outputs: { actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div\r\n  #tableScrollContainer\r\n  cdkScrollable\r\n  class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n    <!-- ================= HEADER ================= -->\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns; track col.header;let i=$index;) {\r\n        @if (isColumnVisible(col)) {\r\n          <th\r\n            class=\"grid-header sticky top-0 cursor-pointer\"\r\n            [class.action-sticky]=\"col.sticky\"\r\n            [class.z-10]=\"col.sticky\"\r\n            [ngClass]=\"col.headerClass\"\r\n            [ngClass]=\"col.cellClass\"\r\n            (click)=\"sort(col,i)\"\r\n          >\r\n            <span class=\"flex items-center gap-1\"\r\n              [ngClass]=\"sortColumn === col.field\r\n                ? (sortDirection === 'asc' ? 'grid-asc' : 'grid-desc')\r\n                : ''\">\r\n              {{ col.header }}\r\n              @if (col.sortable) {\r\n                <span class=\"grid-sort-icon\"></span>\r\n              }\r\n            </span>\r\n          </th>\r\n        }\r\n      }\r\n\r\n      @if (actions.length) {\r\n        <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20\">\r\n          Action\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\">\r\n\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\" [ngClass]=\"{ 'cursor-move ': draggable }\">\r\n\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\r\n                }\r\n                {{ getCellValue(row, col) }}\r\n              </td>\r\n            }\r\n          }\r\n\r\n       @if (actions.length) {\r\n          <td class=\"grid-cell action-sticky text-center\">\r\n            <div class=\"flex items-center justify-center gap-1.5\">\r\n              @for (action of actions; track action.name) {\r\n                @if (action.hasPermission) {\r\n                    <!-- appTooltip=\"{{ action.tooltip }}\"\r\n                    appTooltipPosition=\"top\"                   -->\r\n                  <button\r\n                    class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                    (click)=\"emitAction(action, row)\"\r\n\r\n                  >\r\n                    <img\r\n                      [src]=\"action.icon\"\r\n                      width=\"14\"\r\n                      height=\"14\"\r\n                      alt=\"action-icon\"\r\n                    />\r\n                  </button>\r\n                }\r\n              }\r\n            </div>\r\n          </td>\r\n        }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#FBFBFC] text-xs text-[#60646C] leading-5 font-semibold capitalize px-4 py-2 whitespace-nowrap;}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border border-[#EBEDF3] border-b-0;}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-grid', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule], template: "<div\r\n  #tableScrollContainer\r\n  cdkScrollable\r\n  class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n  <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n    <!-- ================= HEADER ================= -->\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns; track col.header;let i=$index;) {\r\n        @if (isColumnVisible(col)) {\r\n          <th\r\n            class=\"grid-header sticky top-0 cursor-pointer\"\r\n            [class.action-sticky]=\"col.sticky\"\r\n            [class.z-10]=\"col.sticky\"\r\n            [ngClass]=\"col.headerClass\"\r\n            [ngClass]=\"col.cellClass\"\r\n            (click)=\"sort(col,i)\"\r\n          >\r\n            <span class=\"flex items-center gap-1\"\r\n              [ngClass]=\"sortColumn === col.field\r\n                ? (sortDirection === 'asc' ? 'grid-asc' : 'grid-desc')\r\n                : ''\">\r\n              {{ col.header }}\r\n              @if (col.sortable) {\r\n                <span class=\"grid-sort-icon\"></span>\r\n              }\r\n            </span>\r\n          </th>\r\n        }\r\n      }\r\n\r\n      @if (actions.length) {\r\n        <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20\">\r\n          Action\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n\r\n    <!-- ================= BODY ================= -->\r\n    <tbody\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!draggable\"\r\n      [cdkDropListData]=\"result || []\"\r\n      (cdkDropListDropped)=\"dropList($event)\">\r\n\r\n      @for (row of result; track row; let rowIndex = $index) {\r\n        <tr\r\n          cdkDrag\r\n          cdkDragLockAxis=\"y\"\r\n          [cdkDragDisabled]=\"!draggable\"\r\n          (cdkDragStarted)=\"onDragStart($event)\"\r\n          (cdkDragMoved)=\"onDragMoved($event)\"\r\n          class=\"\" [ngClass]=\"{ 'cursor-move ': draggable }\">\r\n\r\n          @for (col of columns; track col.header; let colIndex = $index) {\r\n            @if (isColumnVisible(col)) {\r\n              <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n                @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n                  <span cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\r\n                }\r\n                {{ getCellValue(row, col) }}\r\n              </td>\r\n            }\r\n          }\r\n\r\n       @if (actions.length) {\r\n          <td class=\"grid-cell action-sticky text-center\">\r\n            <div class=\"flex items-center justify-center gap-1.5\">\r\n              @for (action of actions; track action.name) {\r\n                @if (action.hasPermission) {\r\n                    <!-- appTooltip=\"{{ action.tooltip }}\"\r\n                    appTooltipPosition=\"top\"                   -->\r\n                  <button\r\n                    class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n                    (click)=\"emitAction(action, row)\"\r\n\r\n                  >\r\n                    <img\r\n                      [src]=\"action.icon\"\r\n                      width=\"14\"\r\n                      height=\"14\"\r\n                      alt=\"action-icon\"\r\n                    />\r\n                  </button>\r\n                }\r\n              }\r\n            </div>\r\n          </td>\r\n        }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#FBFBFC] text-xs text-[#60646C] leading-5 font-semibold capitalize px-4 py-2 whitespace-nowrap;}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border border-[#EBEDF3] border-b-0;}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], propDecorators: { draggable: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], result: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], dragDropChange: [{
+                type: Output
+            }], tableScrollContainer: [{
+                type: ViewChild,
+                args: ['tableScrollContainer', { static: false }]
+            }] } });
+
+class BkSelect {
+    // --- Inputs ---
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    bindLabel = input('label', ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
+    bindValue = input('', ...(ngDevMode ? [{ debugName: "bindValue" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    notFoundText = input('No items found', ...(ngDevMode ? [{ debugName: "notFoundText" }] : []));
+    loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
+    clearAllText = input('Clear all', ...(ngDevMode ? [{ debugName: "clearAllText" }] : []));
+    // iconSrc = input<string>('Clear all');
+    iconAlt = 'icon';
+    label = 'Label';
+    required = false;
+    iconSrc; // optional icon
+    // Config
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    maxLabels = input(2, ...(ngDevMode ? [{ debugName: "maxLabels" }] : []));
+    searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    closeOnSelect = input(true, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : []));
+    dropdownPosition = input('bottom', ...(ngDevMode ? [{ debugName: "dropdownPosition" }] : []));
+    // 1. NEW INPUT: Toggle append-to-body behavior
+    appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
+    // --- Outputs ---
+    open = output();
+    close = output();
+    focus = output();
+    blur = output();
+    search = output();
+    clear = output();
+    change = output();
+    scrollToEnd = output();
+    // --- Refs ---
+    searchInput;
+    optionsListContainer;
+    optionsRef;
+    controlWrapper;
+    // --- State ---
+    _value = null;
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    selectedOptions = signal([], ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    markedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "markedIndex" }] : []));
+    dropdownStyle = signal({
+        left: '0px',
+        width: 'auto'
+    }, ...(ngDevMode ? [{ debugName: "dropdownStyle" }] : []));
+    filteredItems = computed(() => {
+        const term = this.searchTerm().toLowerCase();
+        const list = this.items();
+        if (!term || !this.searchable())
+            return list;
+        return list.filter(item => {
+            const label = this.resolveLabel(item).toLowerCase();
+            return label.includes(term);
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    isAllSelected = computed(() => {
+        const filtered = this.filteredItems();
+        const current = this.selectedOptions();
+        if (!filtered.length)
+            return false;
+        return filtered.every(item => this.isItemSelected(item));
+    }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    constructor() {
+        effect(() => {
+            const currentItems = this.items();
+            if (currentItems.length > 0 && this._value !== null) {
+                this.resolveSelectedOptions(this._value);
+            }
+        });
+    }
+    // --- Helpers ---
+    resolveLabel(item) {
+        if (!item)
+            return '';
+        const labelProp = this.bindLabel();
+        return labelProp && typeof item === 'object' ? item[labelProp] : String(item);
+    }
+    resolveValue(item) {
+        const valueProp = this.bindValue();
+        return valueProp && typeof item === 'object' ? item[valueProp] : item;
+    }
+    isItemSelected(item) {
+        const current = this.selectedOptions();
+        const compareFn = this.compareWith();
+        const itemVal = this.resolveValue(item);
+        return current.some(selected => compareFn(itemVal, this.resolveValue(selected)));
+    }
+    compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
+    // --- Actions ---
+    toggleDropdown(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (this.disabled() || this.readonly())
+            return;
+        this.isOpen() ? this.closeDropdown() : this.openDropdown();
+    }
+    openDropdown() {
+        if (this.isOpen())
+            return;
+        // Only calculate position if we are appending to body
+        if (this.appendToBody()) {
+            this.updatePosition();
+        }
+        this.isOpen.set(true);
+        // this.markedIndex.set(0);
+        this.open.emit();
+        this.focus.emit();
+        setTimeout(() => this.searchInput?.nativeElement.focus());
+    }
+    closeDropdown() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.searchTerm.set('');
+        this.onTouched();
+        this.close.emit();
+        this.blur.emit();
+    }
+    getTop() {
+        if (this.appendToBody()) {
+            return this.dropdownStyle().top ?? null;
+        }
+        // NOT appendToBody
+        return this.dropdownPosition() === 'bottom' ? '105%' : null;
+    }
+    getBottom() {
+        if (this.appendToBody()) {
+            return this.dropdownStyle().bottom ?? null;
+        }
+        // NOT appendToBody
+        return this.dropdownPosition() === 'top' ? '105%' : null;
+    }
+    updatePosition() {
+        const rect = this.controlWrapper.nativeElement.getBoundingClientRect();
+        if (this.dropdownPosition() === 'bottom') {
+            this.dropdownStyle.set({
+                top: `${rect.bottom + 4}px`,
+                bottom: undefined,
+                left: `${rect.left}px`,
+                width: `${rect.width}px`
+            });
+        }
+        else {
+            this.dropdownStyle.set({
+                top: undefined,
+                bottom: `${window.innerHeight - rect.top + 4}px`,
+                left: `${rect.left}px`,
+                width: `${rect.width}px`
+            });
+        }
+    }
+    // 2. FIXED: Removed ['$event'] argument
+    onWindowEvents() {
+        // Only close on scroll if we are in "fixed" mode (append to body)
+        if (this.isOpen() && this.appendToBody()) {
+            this.closeDropdown();
+        }
+    }
+    // ... (toggleSelectAll, handleSelection, removeOption, handleClear logic same as before) ...
+    toggleSelectAll(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const allSelected = this.isAllSelected();
+        const filtered = this.filteredItems();
+        let newSelection = [...this.selectedOptions()];
+        const compareFn = this.compareWith();
+        if (allSelected) {
+            newSelection = newSelection.filter(sel => {
+                const selVal = this.resolveValue(sel);
+                return !filtered.some(fItem => compareFn(this.resolveValue(fItem), selVal));
+            });
+        }
+        else {
+            filtered.forEach(item => {
+                if (!this.isItemSelected(item))
+                    newSelection.push(item);
+            });
+        }
+        this.updateModel(newSelection);
+    }
+    handleSelection(item, event) {
+        if (event)
+            event.stopPropagation();
+        if (this.multiple()) {
+            const isSelected = this.isItemSelected(item);
+            let newSelection = [...this.selectedOptions()];
+            const compareFn = this.compareWith();
+            if (isSelected) {
+                const itemVal = this.resolveValue(item);
+                newSelection = newSelection.filter(sel => !compareFn(this.resolveValue(sel), itemVal));
+            }
+            else {
+                newSelection.push(item);
+            }
+            this.updateModel(newSelection);
+            if (this.closeOnSelect())
+                this.closeDropdown();
+        }
+        else {
+            this.updateModel([item]);
+            if (this.closeOnSelect())
+                this.closeDropdown();
+        }
+    }
+    removeOption(item, event) {
+        event.stopPropagation();
+        const newSelection = this.selectedOptions().filter(i => i !== item);
+        this.updateModel(newSelection);
+    }
+    handleClear(event) {
+        event.stopPropagation();
+        this.updateModel([]);
+        this.clear.emit();
+    }
+    updateModel(items) {
+        this.selectedOptions.set(items);
+        if (this.multiple()) {
+            const values = items.map(i => this.resolveValue(i));
+            this._value = values;
+            this.onChange(values);
+            this.change.emit(values);
+        }
+        else {
+            const item = items[0] || null;
+            const value = item ? this.resolveValue(item) : null;
+            this._value = value;
+            this.onChange(value);
+            this.change.emit(value);
+        }
+    }
+    onSearchInput(event) {
+        const val = event.target.value;
+        this.searchTerm.set(val);
+        this.markedIndex.set(0);
+        this.search.emit({ term: val, items: this.filteredItems() });
+    }
+    onKeyDown(event) {
+        if (!this.isOpen())
+            return;
+        const list = this.filteredItems();
+        const current = this.markedIndex();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (current < list.length - 1) {
+                    this.markedIndex.set(current + 1);
+                    this.scrollToMarked();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (current > 0) {
+                    this.markedIndex.set(current - 1);
+                    this.scrollToMarked();
+                }
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (current >= 0 && list[current])
+                    this.handleSelection(list[current]);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.closeDropdown();
+                break;
+        }
+    }
+    onScroll(event) {
+        const target = event.target;
+        if (target.scrollHeight - target.scrollTop <= target.clientHeight + 10) {
+            this.scrollToEnd.emit();
+        }
+    }
+    scrollToMarked() {
+        setTimeout(() => {
+            const container = this.optionsListContainer?.nativeElement;
+            const options = this.optionsRef?.toArray();
+            const index = this.markedIndex();
+            if (container && options && options[index]) {
+                const el = options[index].nativeElement;
+                if (el.offsetTop < container.scrollTop) {
+                    container.scrollTop = el.offsetTop;
+                }
+                else if ((el.offsetTop + el.clientHeight) > (container.scrollTop + container.clientHeight)) {
+                    container.scrollTop = (el.offsetTop + el.clientHeight) - container.clientHeight;
+                }
+            }
+        });
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) { this._value = value; this.resolveSelectedOptions(value); }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(d) { this.disabled.set(d); }
+    resolveSelectedOptions(val) {
+        const list = this.items();
+        if (!list.length)
+            return;
+        if (val === null || val === undefined) {
+            this.selectedOptions.set([]);
+            return;
+        }
+        const valArray = Array.isArray(val) ? val : [val];
+        const bindVal = this.bindValue();
+        const compare = this.compareWith();
+        const matchedItems = list.filter(item => {
+            const itemVal = bindVal ? item[bindVal] : item;
+            return valArray.some(v => compare(v, itemVal));
+        });
+        this.selectedOptions.set(matchedItems);
+    }
+    el = inject(ElementRef);
+    onClickOutside(e) {
+        if (!this.el.nativeElement.contains(e.target))
+            this.closeDropdown();
+    }
+    openFromLabel(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled() || this.readonly())
+            return;
+        this.controlWrapper.nativeElement.focus();
+        this.openDropdown();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkSelect, isStandalone: true, selector: "bk-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxLabels: { classPropertyName: "maxLabels", publicName: "maxLabels", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", open: "open", close: "close", focus: "focus", blur: "blur", search: "search", clear: "clear", change: "change", scrollToEnd: "scrollToEnd" }, host: { listeners: { "window:scroll": "onWindowEvents()", "window:resize": "onWindowEvents()", "document:click": "onClickOutside($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BkSelect),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "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,
+            args: [{ selector: 'bk-select', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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()\" (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: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], iconSrc: [{
+                type: Input
+            }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabels", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], close: [{ type: i0.Output, args: ["close"] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }], search: [{ type: i0.Output, args: ["search"] }], clear: [{ type: i0.Output, args: ["clear"] }], change: [{ type: i0.Output, args: ["change"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], optionsListContainer: [{
+                type: ViewChild,
+                args: ['optionsListContainer']
+            }], optionsRef: [{
+                type: ViewChildren,
+                args: ['optionsRef']
+            }], controlWrapper: [{
+                type: ViewChild,
+                args: ['controlWrapper']
+            }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], onWindowEvents: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class BkInput {
+    // =================== Inputs (all your original ones) ===================
+    id;
+    name;
+    mask = null;
+    autoComplete = 'off';
+    label = 'Label';
+    placeholder = 'stephend@i2cinc.com';
+    hint = '';
+    required = false;
+    type = 'text';
+    value = '';
+    hasError = false;
+    showErrorIcon = false;
+    errorMessage = '';
+    disabled = false;
+    tabIndex = null;
+    readOnly = false;
+    autoCapitalize = null;
+    inputMode = null;
+    iconSrc;
+    iconAlt = 'icon';
+    showIcon = true;
+    phone = false;
+    countryCode = 'US';
+    countryOptions = [
+        { code: 'US', name: 'US', mask: '(000) 000-0000', prefix: '+1 ', placeholder: '(000) 000-0000' },
+        { code: 'MT', name: 'MT', mask: '(000) 000-0000', prefix: '+356 ', placeholder: '(000) 000-0000' },
+        { code: 'PL', name: 'PL', mask: '(000) 000-0000', prefix: '+48 ', placeholder: '(000) 000-0000' },
+        { code: 'CH', name: 'CH', mask: '(000) 000-0000', prefix: '+41 ', placeholder: '(000) 000-0000' },
+        { code: 'TR', name: 'TR', mask: '(000) 000-0000', prefix: '+90 ', placeholder: '(000) 000-0000' },
+        { code: 'UG', name: 'UG', mask: '(000) 000-0000', prefix: '+256 ', placeholder: '(000) 000-0000' },
+        { code: 'ZM', name: 'ZM', mask: '(000) 000-0000', prefix: '+260 ', placeholder: '(000) 000-0000' }
+    ];
+    selectedCountry = this.countryOptions[0];
+    iconOrientation = 'left';
+    password = false;
+    showPassword = false;
+    pattern;
+    max = null;
+    min = null;
+    step = null;
+    maxlength = null;
+    minlength = null;
+    // =================== ViewChild ===================
+    dropdownRef;
+    selectRef;
+    inputField;
+    // =================== Internal State ===================
+    isFocused = false;
+    inputValue = '';
+    isDropdownOpen = false;
+    // =================== Output Emitter ===================
+    input = new EventEmitter();
+    change = new EventEmitter();
+    focus = new EventEmitter();
+    blur = new EventEmitter();
+    clicked = new EventEmitter();
+    get placeHolderText() {
+        if (this.phone) {
+            const country = this.countryOptions.find(c => c.code === this.countryCode);
+            return country?.placeholder || '';
+        }
+        return this.placeholder;
+    }
+    get maskValue() {
+        if (this.mask)
+            return this.mask;
+        if (this.phone) {
+            const country = this.countryOptions.find(c => c.code === this.countryCode);
+            return country?.mask || '';
+        }
+        return '';
+    }
+    get maskPrefixValue() {
+        if (this.phone) {
+            const country = this.countryOptions.find(c => c.code === this.countryCode);
+            return country?.prefix || '';
+        }
+        return '';
+    }
+    // =================== CVA Callbacks ===================
+    onChange = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value || '';
+        this.inputValue = this.value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    // =================== Lifecycle ===================
+    closeAllDropdownsHandler = () => {
+        if (this.phone && this.isDropdownOpen)
+            this.isDropdownOpen = false;
+    };
+    ngOnInit() {
+        if (this.value)
+            this.inputValue = this.value;
+        if (this.password && this.type !== 'password')
+            this.type = 'password';
+        if (this.phone) {
+            const country = this.countryOptions.find(c => c.code === this.countryCode);
+            if (country)
+                this.selectedCountry = country;
+            document.addEventListener('closeAllPhoneDropdowns', this.closeAllDropdownsHandler);
+        }
+    }
+    ngOnDestroy() {
+        if (this.phone) {
+            document.removeEventListener('closeAllPhoneDropdowns', this.closeAllDropdownsHandler);
+        }
+    }
+    // =================== Host Listener ===================
+    onDocumentClick(event) {
+        if (this.phone && this.isDropdownOpen) {
+            const target = event.target;
+            if (this.selectRef?.nativeElement && this.dropdownRef?.nativeElement) {
+                const clickedInside = this.selectRef.nativeElement.contains(target) ||
+                    this.dropdownRef.nativeElement.contains(target);
+                if (!clickedInside)
+                    this.isDropdownOpen = false;
+            }
+        }
+    }
+    // =================== Event Handlers ===================
+    handleFocus(event) {
+        this.focus.emit(event);
+        if (!this.disabled)
+            this.isFocused = true;
+    }
+    handleBlur(event) {
+        this.isFocused = false;
+        this.onTouched();
+        this.blur.emit(event);
+    }
+    handleInput(event) {
+        const val = event.target.value;
+        this.inputValue = val;
+        this.value = val; // update CVA value
+        this.onChange(val); // propagate to parent form
+        this.input.emit(event); // emit raw event
+    }
+    handleClicked() {
+        this.clicked.emit(true);
+    }
+    handleChange(event) {
+        this.change.emit(event); // emit raw change event
+    }
+    toggleDropdown(event) {
+        if (!this.disabled && this.phone) {
+            if (!this.isDropdownOpen) {
+                document.dispatchEvent(new CustomEvent('closeAllPhoneDropdowns'));
+                setTimeout(() => (this.isDropdownOpen = true), 0);
+            }
+            else {
+                this.isDropdownOpen = false;
+            }
+            event?.stopPropagation();
+        }
+    }
+    selectCountry(country) {
+        const oldCountry = this.selectedCountry;
+        this.selectedCountry = country;
+        this.countryCode = country.code;
+        this.isDropdownOpen = false;
+        const currentRaw = this.inputField?.nativeElement?.value || this.inputValue;
+        let newPhone = '';
+        if (currentRaw && currentRaw.trim() !== '') {
+            // Input has some value → replace old prefix
+            if (oldCountry?.prefix && oldCountry.code !== country.code) {
+                const oldPrefixEscaped = oldCountry.prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                const regex = new RegExp(`^${oldPrefixEscaped}\\s?`);
+                const oldMaskedValue = currentRaw.replace(regex, '');
+                newPhone = country.prefix + oldMaskedValue;
+            }
+            else {
+                newPhone = country.prefix + currentRaw;
+            }
+        }
+        else {
+            // Input is empty → show only the new prefix OR empty
+            newPhone = ''; // optionally: newPhone = country.prefix;
+        }
+        this.inputValue = newPhone;
+        this.value = newPhone;
+        this.onChange(newPhone);
+        setTimeout(() => {
+            if (this.inputField?.nativeElement) {
+                this.inputField.nativeElement.value = newPhone;
+                this.inputField.nativeElement.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }, 0);
+    }
+    togglePasswordVisibility(event) {
+        if (!this.disabled && this.password) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.showPassword = !this.showPassword;
+            this.type = this.showPassword ? 'text' : 'password';
+        }
+    }
+    handleIconClick(event) {
+        if (this.disabled || this.readOnly) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.clicked.emit(true);
+    }
+    // =================== Getters ===================
+    get isFilled() {
+        return this.inputValue.length > 0;
+    }
+    get inputState() {
+        if (this.disabled)
+            return 'disabled';
+        if (this.hasError)
+            return 'error';
+        if (this.isFocused || this.isDropdownOpen)
+            return 'focused';
+        if (this.isFilled)
+            return 'filled';
+        return 'default';
+    }
+    get currentInputType() {
+        if (this.password)
+            return this.showPassword ? 'text' : 'password';
+        return this.type;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkInput, isStandalone: true, selector: "bk-input", inputs: { id: "id", name: "name", mask: "mask", autoComplete: "autoComplete", label: "label", placeholder: "placeholder", hint: "hint", required: "required", type: "type", value: "value", hasError: "hasError", showErrorIcon: "showErrorIcon", errorMessage: "errorMessage", disabled: "disabled", tabIndex: "tabIndex", readOnly: "readOnly", autoCapitalize: "autoCapitalize", inputMode: "inputMode", iconSrc: "iconSrc", iconAlt: "iconAlt", showIcon: "showIcon", phone: "phone", countryCode: "countryCode", countryOptions: "countryOptions", iconOrientation: "iconOrientation", password: "password", showPassword: "showPassword", pattern: "pattern", max: "max", min: "min", step: "step", maxlength: "maxlength", minlength: "minlength" }, outputs: { input: "input", change: "change", focus: "focus", blur: "blur", clicked: "clicked" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            provideNgxMask(),
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BkInput),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\">\r\n  <label [for]=\"id\" class=\"input-label\">\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 class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    <input\r\n      #inputField\r\n      [type]=\"currentInputType\"\r\n      [id]=\"id\"\r\n      [name]=\"name\"\r\n      [disabled]=\"disabled\"\r\n      [tabindex]=\"tabIndex\"\r\n      [readOnly]=\"readOnly\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [autocomplete]=\"autoComplete\"\r\n      [autocapitalize]=\"autoCapitalize\"\r\n\r\n      [attr.max]=\"max\"\r\n      [attr.min]=\"min\"\r\n      [attr.step]=\"step\"\r\n\r\n      [placeholder]=\"placeHolderText\"\r\n      [pattern]=\"pattern\"\r\n      [autocomplete]=\"autoComplete\"\r\n      [value]=\"inputValue\"\r\n\r\n\r\n\r\n      [mask]=\"maskValue\"\r\n      [prefix]=\"maskPrefixValue\"\r\n      [showMaskTyped]=\"false\"\r\n      [dropSpecialCharacters]=\"false\"\r\n      (change)=\"handleChange($event)\"\r\n      (input)=\"handleInput($event)\"\r\n      (focus)=\"handleFocus($event)\"\r\n      (blur)=\"handleBlur($event)\"\r\n      class=\"input-field\"\r\n\r\n      [ngClass]=\"{\r\n        'input-field--url': type === 'url',\r\n        'input-field--phone': phone,\r\n        'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n        'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n        'input-field--password': password,\r\n        'input-field--default': inputState === 'default',\r\n        'input-field--focused': inputState === 'focused',\r\n        'input-field--filled': inputState === 'filled',\r\n        'input-field--error': inputState === 'error',\r\n        'input-field--disabled': inputState === 'disabled'\r\n      }\">\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div #selectRef class=\"input-phone-selector\" [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n    }\r\n\r\n    @if(phone && isDropdownOpen){\r\n      <div #dropdownRef class=\"input-phone-dropdown\" (click)=\"$event.stopPropagation()\">\r\n        <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country); $event.stopPropagation()\">\r\n          {{ country.name }}\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-input', imports: [CommonModule, NgxMaskDirective, FormsModule], standalone: true, providers: [
+                        provideNgxMask(),
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BkInput),
+                            multi: true
+                        }
+                    ], template: "<div class=\"input-container\">\r\n  <label [for]=\"id\" class=\"input-label\">\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 class=\"input-wrapper\" [ngClass]=\"{\r\n    'input-wrapper--url': type === 'url',\r\n    'input-wrapper--phone': phone,\r\n    'input-wrapper--password': password,\r\n    'input-wrapper--icon': iconSrc && showIcon\r\n  }\">\r\n\r\n    <input\r\n      #inputField\r\n      [type]=\"currentInputType\"\r\n      [id]=\"id\"\r\n      [name]=\"name\"\r\n      [disabled]=\"disabled\"\r\n      [tabindex]=\"tabIndex\"\r\n      [readOnly]=\"readOnly\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [attr.minlength]=\"minlength\"\r\n      [autocomplete]=\"autoComplete\"\r\n      [autocapitalize]=\"autoCapitalize\"\r\n\r\n      [attr.max]=\"max\"\r\n      [attr.min]=\"min\"\r\n      [attr.step]=\"step\"\r\n\r\n      [placeholder]=\"placeHolderText\"\r\n      [pattern]=\"pattern\"\r\n      [autocomplete]=\"autoComplete\"\r\n      [value]=\"inputValue\"\r\n\r\n\r\n\r\n      [mask]=\"maskValue\"\r\n      [prefix]=\"maskPrefixValue\"\r\n      [showMaskTyped]=\"false\"\r\n      [dropSpecialCharacters]=\"false\"\r\n      (change)=\"handleChange($event)\"\r\n      (input)=\"handleInput($event)\"\r\n      (focus)=\"handleFocus($event)\"\r\n      (blur)=\"handleBlur($event)\"\r\n      class=\"input-field\"\r\n\r\n      [ngClass]=\"{\r\n        'input-field--url': type === 'url',\r\n        'input-field--phone': phone,\r\n        'input-field--icon-left': iconSrc && showIcon && iconOrientation === 'left',\r\n        'input-field--icon-right': iconSrc && showIcon && iconOrientation === 'right',\r\n        'input-field--password': password,\r\n        'input-field--default': inputState === 'default',\r\n        'input-field--focused': inputState === 'focused',\r\n        'input-field--filled': inputState === 'filled',\r\n        'input-field--error': inputState === 'error',\r\n        'input-field--disabled': inputState === 'disabled'\r\n      }\">\r\n\r\n    @if(iconSrc && showIcon){\r\n      <img (click)=\"handleIconClick($event)\" [src]=\"iconSrc\" [alt]=\"iconAlt\" [ngClass]=\"{\r\n        'input-search-icon--left': iconOrientation === 'left',\r\n        'input-search-icon--right': iconOrientation === 'right',\r\n        'cursor-pointer': !disabled && !readOnly\r\n      }\" class=\"input-search-icon\">\r\n    }\r\n\r\n    @if(showErrorIcon){\r\n       <img src=\"../../assets/images/icons/global/info-circle.svg\" class=\"input-search-icon input-search-icon--right\">\r\n    }\r\n\r\n    @if(password){\r\n      <button type=\"button\" (click)=\"togglePasswordVisibility($event)\" class=\"input-password-toggle\" [disabled]=\"disabled\" tabindex=\"-1\">\r\n        <img [src]=\"showPassword ? '../../assets/images/icons/global/eye-slash-icon.svg' : '../../assets/images/icons/global/eye-icon.svg'\" [alt]=\"showPassword ? 'Hide password' : 'Show password'\" class=\"input-password-icon\">\r\n      </button>\r\n    }\r\n\r\n    @if(phone){\r\n      <div #selectRef class=\"input-phone-selector\" [ngClass]=\"{\r\n        'input-phone-selector--default': inputState === 'default',\r\n        'input-phone-selector--focused': inputState === 'focused',\r\n        'input-phone-selector--filled': inputState === 'filled',\r\n        'input-phone-selector--error': inputState === 'error',\r\n        'input-phone-selector--disabled': inputState === 'disabled'\r\n      }\" (click)=\"toggleDropdown($event)\">\r\n        <span class=\"input-phone-selector-text\">{{ selectedCountry.name }}</span>\r\n        <img src=\"../../assets/images/icons/global/input-arrow-down.svg\" alt=\"Dropdown\" class=\"input-phone-selector-arrow\" [ngClass]=\"{'input-phone-selector-arrow--open': isDropdownOpen}\">\r\n      </div>\r\n    }\r\n\r\n    @if(phone && isDropdownOpen){\r\n      <div #dropdownRef class=\"input-phone-dropdown\" (click)=\"$event.stopPropagation()\">\r\n        <button *ngFor=\"let country of countryOptions\" type=\"button\" class=\"input-phone-dropdown-item\" [ngClass]=\"{'input-phone-dropdown-item--active': selectedCountry.code === country.code}\" (click)=\"selectCountry(country); $event.stopPropagation()\">\r\n          {{ country.name }}\r\n        </button>\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    @if(type === 'url'){\r\n      <span class=\"input-url-prefix\" [ngClass]=\"{\r\n        'input-url-prefix--default': inputState === 'default',\r\n        'input-url-prefix--focused': inputState === 'focused',\r\n        'input-url-prefix--filled': inputState === 'filled',\r\n        'input-url-prefix--error': inputState === 'error',\r\n        'input-url-prefix--disabled': inputState === 'disabled'\r\n      }\">https</span>\r\n    }\r\n  </div>\r\n\r\n  @if(hasError){\r\n    @if (errorMessage) {\r\n      <p class=\"input-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n  @if(!hasError){\r\n    @if(hint){\r\n      <p class=\"input-hint\">{{ hint }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".input-container{@apply flex flex-col gap-1.5;}.input-label{@apply text-sm font-medium text-[#141414];}.input-label-required{@apply text-[#E7000B] ml-0.5;}.input-wrapper{@apply relative;}.input-field{@apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;height:40px;box-sizing:border-box}.input-field--default{@apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];}.input-field--focused{@apply border-[#6B7080] text-[#141414];}.input-field--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-field--error{@apply border-[#E7000B] text-[#141414];}.input-field--disabled{@apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;}.input-field--icon{@apply pl-[48px];}.input-field--phone{@apply pl-[80px];}.input-field--url{@apply pl-[72px];}.input-field--icon-left{@apply pl-[48px];}.input-field--icon-right,.input-field--password{@apply pr-[48px];}.input-field--icon.input-field--url{@apply pl-[120px];}.input-field--phone.input-field--icon{@apply pl-[128px];}.input-phone-selector{@apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-phone-selector-text{@apply text-xs leading-[18px] text-[#A1A3AE] font-normal;}.input-phone-selector-arrow{@apply w-4 h-4 transition-transform duration-200;}.input-phone-selector-arrow--open{@apply rotate-180;}.input-phone-selector--default{@apply bg-white border-[#E3E3E7];}.input-phone-selector--focused{@apply bg-white border-[#6B7080];}.input-phone-selector--filled{@apply bg-white border-[#E3E3E7];}.input-phone-selector--error{@apply bg-white border-[#E7000B];}.input-phone-selector--disabled{@apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;}.input-phone-selector--disabled .input-phone-selector-text{@apply text-[#A1A3AE];}.input-phone-dropdown{@apply absolute left-0 top-full mt-1 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg z-50 max-h-48 overflow-y-auto;}.input-phone-dropdown-item{@apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent;}.input-phone-dropdown-item--active{@apply bg-[#F9FAFA] text-[#141414];}.input-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;}.input-wrapper--phone .input-icon{@apply left-[80px];}.input-search-icon{@apply absolute top-1/2 -translate-y-1/2 w-5 h-5;}.input-search-icon--left{@apply left-3;}.input-search-icon--right{@apply right-3;}.input-password-toggle{@apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;}.input-password-toggle:disabled{@apply cursor-not-allowed opacity-50;}.input-password-toggle:hover:not(:disabled){@apply opacity-70;}.input-password-icon{@apply w-5 h-5 pointer-events-none;}.input-url-prefix{@apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;border-top-left-radius:4px;border-bottom-left-radius:4px}.input-wrapper--icon .input-url-prefix{@apply left-[48px];}.input-url-prefix--default{@apply border-[#E3E3E7];}.input-url-prefix--focused{@apply border-[#6B7080];}.input-url-prefix--filled{@apply border-[#E3E3E7];}.input-url-prefix--error{@apply border-[#E7000B];}.input-url-prefix--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];}.input-hint{@apply text-xs text-[#868997] font-normal;}.input-error{@apply text-xs text-[#E7000B] font-normal;}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], mask: [{
+                type: Input
+            }], autoComplete: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], showErrorIcon: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], autoCapitalize: [{
+                type: Input
+            }], inputMode: [{
+                type: Input
+            }], iconSrc: [{
+                type: Input
+            }], iconAlt: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], phone: [{
+                type: Input
+            }], countryCode: [{
+                type: Input
+            }], countryOptions: [{
+                type: Input
+            }], iconOrientation: [{
+                type: Input
+            }], password: [{
+                type: Input
+            }], showPassword: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], dropdownRef: [{
+                type: ViewChild,
+                args: ['dropdownRef']
+            }], selectRef: [{
+                type: ViewChild,
+                args: ['selectRef']
+            }], inputField: [{
+                type: ViewChild,
+                args: ['inputField']
+            }], input: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], clicked: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class BkChips {
+    badgeInput;
+    fieldWrapper;
+    // --- Configuration Inputs ---
+    id;
+    name;
+    label = '';
+    placeholder = '';
+    hint = '';
+    required = false;
+    disabled = false;
+    readOnly = false;
+    /**
+     * If true, displays the component in an error state (red border).
+     * It also replaces the hint text with the error message.
+     */
+    hasError = false;
+    errorMessage = 'This is a error message';
+    // =================== Output Emitter ===================
+    input = new EventEmitter();
+    change = new EventEmitter();
+    focus = new EventEmitter();
+    blur = new EventEmitter();
+    // --- State Properties ---
+    badges = [];
+    inputValue = '';
+    isFocused = false;
+    needsScroll = false;
+    // --- ControlValueAccessor Methods ---
+    onChange = () => { };
+    onTouched = () => { };
+    // Get input state for styling variants
+    get inputState() {
+        if (this.disabled)
+            return 'disabled';
+        if (this.hasError)
+            return 'error';
+        if (this.isFocused)
+            return 'focused';
+        if (this.badges.length > 0 || this.inputValue.length > 0)
+            return 'filled';
+        return 'default';
+    }
+    // Handle keydown events (Enter to add badge, Backspace to remove)
+    onKeyDown(event) {
+        if (this.disabled)
+            return;
+        // Add badge on Enter or comma
+        if (event.key === 'Enter' || event.key === ',') {
+            event.preventDefault();
+            this.addBadge();
+        }
+        // Remove last badge on Backspace when input is empty
+        else if (event.key === 'Backspace' && this.inputValue === '' && this.badges.length > 0) {
+            this.removeBadge(this.badges.length - 1);
+        }
+    }
+    // Add a badge from the current input value
+    addBadge() {
+        const trimmedValue = this.inputValue.trim();
+        if (trimmedValue && !this.badges.includes(trimmedValue)) {
+            this.badges.push(trimmedValue);
+            this.inputValue = '';
+            this.updateValue();
+            // Check if scroll is needed after adding badge (with delay for DOM update)
+            setTimeout(() => this.checkScrollNeeded(), 10);
+        }
+        else if (trimmedValue && this.badges.includes(trimmedValue)) {
+            // Optionally show a message that badge already exists
+            this.inputValue = '';
+        }
+    }
+    // Remove a badge at the given index
+    removeBadge(index) {
+        if (this.disabled)
+            return;
+        this.badges.splice(index, 1);
+        this.updateValue();
+        // Check if scroll is needed after removing badge (with delay for DOM update)
+        setTimeout(() => {
+            this.checkScrollNeeded();
+            if (this.badgeInput) {
+                this.badgeInput.nativeElement.focus();
+            }
+        }, 10);
+    }
+    // Check if scrolling is needed (when content wraps)
+    checkScrollNeeded() {
+        if (this.fieldWrapper && this.fieldWrapper.nativeElement) {
+            const wrapper = this.fieldWrapper.nativeElement;
+            // Get all badge items
+            const badgeItems = wrapper.querySelectorAll('.input-badge-item');
+            if (badgeItems.length === 0) {
+                // No badges, no scroll needed
+                this.needsScroll = false;
+                return;
+            }
+            // Get the first badge's top position
+            const firstBadge = badgeItems[0];
+            const firstBadgeTop = firstBadge.offsetTop;
+            // Check if any badge is on a different line (different top position)
+            let hasWrapped = false;
+            for (let i = 1; i < badgeItems.length; i++) {
+                const badge = badgeItems[i];
+                // If a badge's top position is different, it means it wrapped to a new line
+                if (Math.abs(badge.offsetTop - firstBadgeTop) > 5) {
+                    hasWrapped = true;
+                    break;
+                }
+            }
+            // Also check if the input field is on a different line
+            if (!hasWrapped && this.badgeInput && this.badgeInput.nativeElement) {
+                const inputTop = this.badgeInput.nativeElement.offsetTop;
+                if (Math.abs(inputTop - firstBadgeTop) > 5) {
+                    hasWrapped = true;
+                }
+            }
+            // Only enable scroll if content actually wrapped
+            this.needsScroll = hasWrapped;
+        }
+    }
+    // Update the value and notify Angular Forms
+    updateValue() {
+        this.onChange([...this.badges]);
+        this.change.emit([...this.badges]);
+    }
+    // Focus the input field
+    focusInput() {
+        if (!this.disabled && this.badgeInput) {
+            this.badgeInput.nativeElement.focus();
+        }
+    }
+    ngAfterViewInit() {
+        // Check scroll after view initializes
+        setTimeout(() => this.checkScrollNeeded(), 10);
+    }
+    // Called when Angular writes a value TO the component (e.g. initial value)
+    writeValue(value) {
+        if (Array.isArray(value)) {
+            this.badges = [...value];
+        }
+        else {
+            this.badges = [];
+        }
+        this.inputValue = '';
+        // Check scroll after value is written (with delay for DOM update)
+        setTimeout(() => this.checkScrollNeeded(), 10);
+    }
+    // Register function to call when value changes
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // Register function to call when component is touched/blurred
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Called when the component is disabled via the form control
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    // =================== Event Handlers ===================
+    // Called when the value in the UI changes (user types)
+    handleInput(event) {
+        const input = event.target;
+        this.inputValue = input.value;
+    }
+    handleFocus(event) {
+        if (!this.disabled) {
+            this.isFocused = true;
+        }
+        this.onChange([...this.badges]);
+        this.focus.emit(event);
+    }
+    handleBlur(event) {
+        this.isFocused = false;
+        this.onTouched();
+        this.onChange([...this.badges]);
+        this.blur.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkChips, isStandalone: true, selector: "bk-chips", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", hint: "hint", required: "required", disabled: "disabled", readOnly: "readOnly", hasError: "hasError", errorMessage: "errorMessage" }, outputs: { input: "input", change: "change", focus: "focus", blur: "blur" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BkChips),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "badgeInput", first: true, predicate: ["badgeInput"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"input-badge-container\">\r\n  @if (label) {\r\n    <label\r\n      [for]=\"id\"\r\n      class=\"input-badge-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"input-badge-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-badge-wrapper\">\r\n    <div\r\n      #fieldWrapper\r\n      class=\"input-badge-field-wrapper\"\r\n      [ngClass]=\"{\r\n        'input-badge-field-wrapper--default': inputState === 'default',\r\n        'input-badge-field-wrapper--focused': inputState === 'focused',\r\n        'input-badge-field-wrapper--filled': inputState === 'filled',\r\n        'input-badge-field-wrapper--error': inputState === 'error',\r\n        'input-badge-field-wrapper--disabled': inputState === 'disabled',\r\n        'input-badge-field-wrapper--scrollable': needsScroll\r\n      }\"\r\n      (click)=\"focusInput()\"\r\n    >\r\n      <!-- Badges -->\r\n      @for (badge of badges; track badge; let i = $index) {\r\n        <div class=\"input-badge-item\">\r\n          <span class=\"input-badge-item-text\">{{ badge }}</span>\r\n          @if (!disabled) {\r\n            <button type=\"button\" (click)=\"removeBadge(i); $event.stopPropagation()\"class=\"input-badge-item-close\" >\r\n              <img src=\"../../../../assets/images/icons/global/badge-close.svg\" alt=\"Remove\" class=\"input-badge-item-close-icon\"/>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Input Field -->\r\n      <input\r\n        #badgeInput\r\n        type=\"text\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [value]=\"inputValue\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        [placeholder]=\"badges.length === 0 ? placeholder : ''\"\r\n        [disabled]=\"disabled\"\r\n        [readOnly]=\"readOnly\"\r\n        class=\"input-badge-input\"\r\n        [ngClass]=\"{\r\n          'input-badge-input--default': inputState === 'default',\r\n          'input-badge-input--focused': inputState === 'focused',\r\n          'input-badge-input--filled': inputState === 'filled',\r\n          'input-badge-input--error': inputState === 'error',\r\n          'input-badge-input--disabled': inputState === 'disabled'\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"input-badge-footer\">\r\n    <div class=\"input-badge-footer-content\">\r\n      @if (hasError) {\r\n        <span class=\"input-badge-error\"> {{ errorMessage }}</span>\r\n      } @else if (hint) {\r\n        <span class=\"input-badge-hint\"> {{ hint }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-badge-container{@apply flex flex-col gap-1.5 w-full;}.input-badge-label{@apply text-sm font-medium text-[#141414] block;}.input-badge-label-required{@apply text-[#E7000B] ml-0.5;}.input-badge-wrapper{@apply relative;}.input-badge-field-wrapper{@apply w-full px-3 py-2 text-sm border rounded-[4px] outline-none transition-colors duration-200 bg-white flex flex-wrap gap-2 items-start;height:40px;box-sizing:border-box;overflow-y:hidden;overflow-x:hidden}.input-badge-field-wrapper--scrollable{overflow-y:auto}.input-badge-field-wrapper--default{@apply border-[#E3E3E7] text-[#141414];}.input-badge-field-wrapper--default:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--focused{@apply border-[#6B7080] text-[#141414];}.input-badge-field-wrapper--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-badge-field-wrapper--filled:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--error{@apply border-[#FA727A] text-[#141414];}.input-badge-field-wrapper--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed;}.input-badge-item{@apply inline-flex items-center gap-1 px-2 py-[2.5px] bg-white border border-[#E3E3E7] rounded-[4px];}.input-badge-item-text{@apply text-sm leading-[18px] font-normal text-[#6B7080];}.input-badge-item-close{@apply cursor-pointer outline-none w-3 h-3;}.input-badge-input{@apply flex-1 min-w-[120px] outline-none bg-transparent text-[#141414] placeholder:text-[#6B7080] h-auto;flex-basis:120px}.input-badge-input--default,.input-badge-input--focused,.input-badge-input--filled,.input-badge-input--error{@apply text-[#141414];}.input-badge-input--disabled{@apply text-[#A1A3AE] cursor-not-allowed;}.input-badge-footer{@apply flex justify-between items-start font-normal text-sm;}.input-badge-footer-content{@apply flex-1;}.input-badge-hint{@apply text-xs text-[#868997] font-normal;}.input-badge-error{@apply text-xs text-[#F34050] font-normal;}\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: BkChips, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-chips', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BkChips),
+                            multi: true
+                        }
+                    ], template: "<div class=\"input-badge-container\">\r\n  @if (label) {\r\n    <label\r\n      [for]=\"id\"\r\n      class=\"input-badge-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"input-badge-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-badge-wrapper\">\r\n    <div\r\n      #fieldWrapper\r\n      class=\"input-badge-field-wrapper\"\r\n      [ngClass]=\"{\r\n        'input-badge-field-wrapper--default': inputState === 'default',\r\n        'input-badge-field-wrapper--focused': inputState === 'focused',\r\n        'input-badge-field-wrapper--filled': inputState === 'filled',\r\n        'input-badge-field-wrapper--error': inputState === 'error',\r\n        'input-badge-field-wrapper--disabled': inputState === 'disabled',\r\n        'input-badge-field-wrapper--scrollable': needsScroll\r\n      }\"\r\n      (click)=\"focusInput()\"\r\n    >\r\n      <!-- Badges -->\r\n      @for (badge of badges; track badge; let i = $index) {\r\n        <div class=\"input-badge-item\">\r\n          <span class=\"input-badge-item-text\">{{ badge }}</span>\r\n          @if (!disabled) {\r\n            <button type=\"button\" (click)=\"removeBadge(i); $event.stopPropagation()\"class=\"input-badge-item-close\" >\r\n              <img src=\"../../../../assets/images/icons/global/badge-close.svg\" alt=\"Remove\" class=\"input-badge-item-close-icon\"/>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Input Field -->\r\n      <input\r\n        #badgeInput\r\n        type=\"text\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [value]=\"inputValue\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        [placeholder]=\"badges.length === 0 ? placeholder : ''\"\r\n        [disabled]=\"disabled\"\r\n        [readOnly]=\"readOnly\"\r\n        class=\"input-badge-input\"\r\n        [ngClass]=\"{\r\n          'input-badge-input--default': inputState === 'default',\r\n          'input-badge-input--focused': inputState === 'focused',\r\n          'input-badge-input--filled': inputState === 'filled',\r\n          'input-badge-input--error': inputState === 'error',\r\n          'input-badge-input--disabled': inputState === 'disabled'\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"input-badge-footer\">\r\n    <div class=\"input-badge-footer-content\">\r\n      @if (hasError) {\r\n        <span class=\"input-badge-error\"> {{ errorMessage }}</span>\r\n      } @else if (hint) {\r\n        <span class=\"input-badge-hint\"> {{ hint }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-badge-container{@apply flex flex-col gap-1.5 w-full;}.input-badge-label{@apply text-sm font-medium text-[#141414] block;}.input-badge-label-required{@apply text-[#E7000B] ml-0.5;}.input-badge-wrapper{@apply relative;}.input-badge-field-wrapper{@apply w-full px-3 py-2 text-sm border rounded-[4px] outline-none transition-colors duration-200 bg-white flex flex-wrap gap-2 items-start;height:40px;box-sizing:border-box;overflow-y:hidden;overflow-x:hidden}.input-badge-field-wrapper--scrollable{overflow-y:auto}.input-badge-field-wrapper--default{@apply border-[#E3E3E7] text-[#141414];}.input-badge-field-wrapper--default:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--focused{@apply border-[#6B7080] text-[#141414];}.input-badge-field-wrapper--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-badge-field-wrapper--filled:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--error{@apply border-[#FA727A] text-[#141414];}.input-badge-field-wrapper--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed;}.input-badge-item{@apply inline-flex items-center gap-1 px-2 py-[2.5px] bg-white border border-[#E3E3E7] rounded-[4px];}.input-badge-item-text{@apply text-sm leading-[18px] font-normal text-[#6B7080];}.input-badge-item-close{@apply cursor-pointer outline-none w-3 h-3;}.input-badge-input{@apply flex-1 min-w-[120px] outline-none bg-transparent text-[#141414] placeholder:text-[#6B7080] h-auto;flex-basis:120px}.input-badge-input--default,.input-badge-input--focused,.input-badge-input--filled,.input-badge-input--error{@apply text-[#141414];}.input-badge-input--disabled{@apply text-[#A1A3AE] cursor-not-allowed;}.input-badge-footer{@apply flex justify-between items-start font-normal text-sm;}.input-badge-footer-content{@apply flex-1;}.input-badge-hint{@apply text-xs text-[#868997] font-normal;}.input-badge-error{@apply text-xs text-[#F34050] font-normal;}\n"] }]
+        }], propDecorators: { badgeInput: [{
+                type: ViewChild,
+                args: ['badgeInput']
+            }], fieldWrapper: [{
+                type: ViewChild,
+                args: ['fieldWrapper']
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], input: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }] } });
+
+class BkTabs {
+    list = [];
+    activeTabId = '';
+    disabled = false;
+    change = new EventEmitter();
+    // Set active tab and emit change event
+    setActiveTab(tab) {
+        debugger;
+        if (tab?.disabled || this.disabled)
+            return;
+        this.activeTabId = tab.id;
+        this.change.emit(tab);
+    }
+    // Check if a tab is active
+    isActive(tabId) {
+        return this.activeTabId === tabId;
+    }
+    // Get the appropriate icon for a tab based on its active state
+    getTabIcon(tab) {
+        if (this.isActive(tab.id) && tab.iconActive) {
+            return tab.iconActive;
+        }
+        return tab.icon;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTabs, isStandalone: true, selector: "bk-tabs", inputs: { list: "list", activeTabId: "activeTabId", disabled: "disabled" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"tabs-container\">\r\n  <ul class=\"tabs-list\" role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n          [class.tabs-button--no-icon]=\"!getTabIcon(tab)\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          @if (getTabIcon(tab)) {\r\n            <img\r\n              [src]=\"getTabIcon(tab)\"\r\n              [alt]=\"tab.iconAlt || tab.label\"\r\n              class=\"tabs-icon\">\r\n          }\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply flex gap-2 list-none m-0 p-0;}.tabs-item{@apply flex-shrink-0;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-200 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button--no-icon{@apply gap-0 px-3 py-[10.5px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;transition:opacity .2s ease}.tabs-label{@apply whitespace-nowrap;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule], template: "<div class=\"tabs-container\">\r\n  <ul class=\"tabs-list\" role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n          [class.tabs-button--no-icon]=\"!getTabIcon(tab)\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          @if (getTabIcon(tab)) {\r\n            <img\r\n              [src]=\"getTabIcon(tab)\"\r\n              [alt]=\"tab.iconAlt || tab.label\"\r\n              class=\"tabs-icon\">\r\n          }\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply flex gap-2 list-none m-0 p-0;}.tabs-item{@apply flex-shrink-0;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-200 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button--no-icon{@apply gap-0 px-3 py-[10.5px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;transition:opacity .2s ease}.tabs-label{@apply whitespace-nowrap;}\n"] }]
+        }], propDecorators: { list: [{
+                type: Input
+            }], activeTabId: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of brickclay-lib
+ */
+//Icons
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkChips, BkCustomCalendar, BkGrid, BkIconButton, BkInput, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule };
+//# sourceMappingURL=brickclay-org-ui.mjs.map