@brickclay-org/ui 0.0.10 → 0.0.14

package/fesm2022/brickclay-org-ui.mjs

@@ -0,0 +1,2473 @@
+import * as i0 from '@angular/core';
+import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import moment from 'moment';
+import { Subject } from 'rxjs';
+
+// 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 TimePickerComponent {
+    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: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TimePickerComponent, isStandalone: true, selector: "brickclay-time-picker", inputs: { value: "value", label: "label", placeholder: "placeholder", position: "position", pickerId: "pickerId", closePicker: "closePicker", timeFormat: "timeFormat", showSeconds: "showSeconds" }, outputs: { timeChange: "timeChange", pickerOpened: "pickerOpened", pickerClosed: "pickerClosed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "timeScrollElements", predicate: ["timeScroll"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"time-picker-wrapper\">\r\n  <div class=\"time-input-group\">\r\n    <label *ngIf=\"label\">{{ label }}</label>\r\n    <div class=\"time-input-wrapper\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"time-input\"\r\n        [value]=\"value\"\r\n        [placeholder]=\"placeholder\"\r\n        readonly\r\n        (click)=\"togglePicker()\">\r\n      <span class=\"time-icon\">\r\n        <img alt=\"timer\" class=\"timer-icon\" [src]='brickclayIcons.timerIcon'/>\r\n      </span>\r\n      <div class=\"custom-time-picker-dropdown\" *ngIf=\"showPicker\">\r\n        <div class=\"custom-time-picker\" [ngClass]=\"position === 'left' ? 'left-position' : 'right-position'\">\r\n          <!-- Hours Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                (click)=\"onHourChange(h)\">\r\n                {{ h.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <!-- Minutes Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let m of getMinutes()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === m\"\r\n                (click)=\"onMinuteChange(m)\">\r\n                {{ m.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <!-- AM/PM Column -->\r\n          <div class=\"time-column ampm-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let ap of getAMPMOptions()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentAMPM === ap\"\r\n                (click)=\"onAMPMChange(ap)\">\r\n                {{ ap }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".time-picker-wrapper{width:100%;font-family:Inter,sans-serif}.time-input-group{display:flex;flex-direction:column;gap:4px}.time-input-group label{font-size:11px;font-weight:500;color:#15191e;text-transform:uppercase;letter-spacing:-.28px}.time-input-wrapper{position:relative;display:flex;align-items:center}.time-input{padding:8px 40px 8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:12px;font-family:Inter,sans-serif;color:#6f737b;background:#fff;transition:all .2s;width:100%;box-sizing:border-box;cursor:pointer}.time-input:focus{outline:none;border-color:#111827;box-shadow:0 0 0 3px #1118271a}.time-input:hover{border-color:#9ca3af}.time-icon{position:absolute;right:12px;font-size:16px;pointer-events:none;color:#9ca3af;cursor:pointer}.custom-time-picker-wrapper{width:100%;display:flex;justify-content:center}.custom-time-picker{display:flex;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:10px;box-shadow:0 4px 12px #00000026;width:182px;position:absolute;top:calc(100% + 4px);z-index:1000}.custom-time-picker.left-position{left:0}.custom-time-picker.right-position{right:0}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:95px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;scrollbar-width:none;-ms-overflow-style:none}.time-scroll::-webkit-scrollbar{display:none}.time-scroll::-webkit-scrollbar-track{background:transparent}.time-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}.time-item{min-width:40px;width:40px;height:32px;min-height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;color:#374151;cursor:pointer;border-radius:4px;transition:all .15s ease;-webkit-user-select:none;user-select:none;font-family:Inter,sans-serif}.time-item:hover{background:#f3f4f6}.time-item.selected{background:#111827;color:#fff;font-weight:500;box-shadow:0 1px 2px #2563eb4d}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-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 CustomCalendarComponent {
+    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 = {
+            startDate: this.startDate,
+            endDate: this.endDate
+        };
+        if (this.multiDateSelection) {
+            selection.selectedDates = [...this.selectedDates];
+        }
+        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 TimePickerComponent (single calendar)
+    getSingleTimePickerDisplay() {
+        const hour = this.selectedHour || 12;
+        const minuteStr = this.selectedMinute.toString().padStart(2, '0');
+        const ampm = this.selectedAMPM || 'AM';
+        return `${hour}:${minuteStr} ${ampm}`;
+    }
+    // NEW: Helper to build display value for TimePickerComponent (dual calendar)
+    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 TimePickerComponent 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 TimePickerComponent
+    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 TimePickerComponent 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 TimePickerComponent 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');
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomCalendarComponent, deps: [{ token: CalendarManagerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CustomCalendarComponent, isStandalone: true, selector: "brickclay-custom-calendar", inputs: { enableTimepicker: "enableTimepicker", autoApply: "autoApply", closeOnAutoApply: "closeOnAutoApply", showCancel: "showCancel", linkedCalendars: "linkedCalendars", singleDatePicker: "singleDatePicker", showWeekNumbers: "showWeekNumbers", showISOWeekNumbers: "showISOWeekNumbers", customRangeDirection: "customRangeDirection", lockStartDate: "lockStartDate", position: "position", drop: "drop", dualCalendar: "dualCalendar", showRanges: "showRanges", timeFormat: "timeFormat", enableSeconds: "enableSeconds", customRanges: "customRanges", multiDateSelection: "multiDateSelection", maxDate: "maxDate", minDate: "minDate", placeholder: "placeholder", opens: "opens", inline: "inline", isDisplayCrossIcon: "isDisplayCrossIcon", selectedValue: "selectedValue", displayFormat: "displayFormat" }, outputs: { selected: "selected", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\">\r\n  <!-- Input field -->\r\n  <div class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"toggle()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\r\n      class=\"calendar-input\">\r\n      <!-- *ngIf=\"!getDisplayValue()\" -->\r\n\r\n    <span class=\"calendar-icon\" >\r\n      <img alt=\"calendar\" class=\"calendar-icon-img\" [src]='brickclayIcons.calenderIcon'/>\r\n    </span>\r\n    <button class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && opens === 'right',\r\n         'position-center': !inline && opens === 'center',\r\n         'drop-up': !inline && drop === 'up',\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\">\r\n      <button\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        [disabled]=\"rangeKey === 'Custom Range'\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\">\r\n        <thead>\r\n          <tr>\r\n            <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\r\n              (click)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && selectDate(dayObj.day)\"\r\n              (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n              (mouseleave)=\"onDateLeave()\"\r\n              [class.active]=\"dayObj.currentMonth && isDateSelected(year, month, dayObj.day)\"\r\n              [class.in-range]=\"dayObj.currentMonth && isDateInRange(year, month, dayObj.day)\"\r\n              [class.other-month]=\"!dayObj.currentMonth\"\r\n              [class.disabled]=\"isDateDisabled(year, month, dayObj.day)\"\r\n              [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(year, month, dayObj.day)\"\r\n              [class.today]=\"dayObj.currentMonth && isToday(year, month, dayObj.day)\"\r\n              class=\"calendar-day\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <brickclay-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          </brickclay-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            <brickclay-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            </brickclay-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            <brickclay-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            </brickclay-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".calendar-container,.calendar-container *{font-family:Inter,sans-serif!important}.calendar-container{position:relative;display:inline-block;width:100%}.input-wrapper{position:relative;display:flex;align-items:center}.calendar-input{width:100%;padding:9px 14px 9px 40px;border:1px solid #ddd;border-radius:8px;font-size:14px;cursor:pointer;background:#fff;transition:all .2s}.calendar-input:hover{border-color:#999}.calendar-input:focus{outline:none;border-color:#999;box-shadow:0 0 0 3px #6a6a6a1a}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{position:absolute;top:110%;left:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.dual-calendar-mode.has-ranges .dual-calendar{border-left:1px solid #eee}.calendar-popup.drop-up{top:auto;bottom:110%;animation:slideUp .2s ease-out}.calendar-popup.position-right{left:auto;right:0}.calendar-popup.position-center{left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ranges{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #eee;min-width:150px;padding-right:8px}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px;border-left:1px solid #eee}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;text-align:center;text-transform:capitalize}.nav-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:11.5px 14px;color:#666;border-radius:4px;transition:all .2s;line-height:1;height:30px;width:30px;display:flex;justify-content:center;align-items:center}.nav-btn:hover{background:#f0f0f0;color:#000}.nav-btn img{width:auto;max-width:none!important}.calendar-table{width:100%;border-collapse:collapse;text-align:center}.weekday-header{font-size:12px;color:#7e7e7e;font-weight:600;padding:8px 4px;letter-spacing:.3px}.calendar-day{padding:8px 4px;font-size:14px;cursor:pointer;border-radius:6px;transition:all .2s;position:relative;color:#333;font-weight:500;line-height:1.5}.calendar-day:hover:not(.disabled):not(.other-month){background:#efefef;color:#000}.calendar-day.other-month{color:#ccc;cursor:default}.calendar-day.disabled{color:#ddd;cursor:not-allowed;opacity:.5}.calendar-day.active{background:#000!important;color:#fff!important;font-weight:600}.calendar-day.today{font-weight:600}.calendar-day.today:not(.active){background:#e5e4e4}.calendar-day.active:hover{background:#000!important}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%;border-left:1px solid #eee}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-cancel:hover{background:#f5f5f5;border-color:#bbb}.btn-apply{background:#000;color:#fff}.btn-apply:hover{background:#333}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.dual-calendar{flex-direction:column}.time-input-group{flex-wrap:wrap;justify-content:center}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TimePickerComponent, selector: "brickclay-time-picker", inputs: ["value", "label", "placeholder", "position", "pickerId", "closePicker", "timeFormat", "showSeconds"], outputs: ["timeChange", "pickerOpened", "pickerClosed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-custom-calendar', standalone: true, imports: [CommonModule, FormsModule, TimePickerComponent], template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\">\r\n  <!-- Input field -->\r\n  <div class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"toggle()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\r\n      class=\"calendar-input\">\r\n      <!-- *ngIf=\"!getDisplayValue()\" -->\r\n\r\n    <span class=\"calendar-icon\" >\r\n      <img alt=\"calendar\" class=\"calendar-icon-img\" [src]='brickclayIcons.calenderIcon'/>\r\n    </span>\r\n    <button class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && opens === 'right',\r\n         'position-center': !inline && opens === 'center',\r\n         'drop-up': !inline && drop === 'up',\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\">\r\n      <button\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        [disabled]=\"rangeKey === 'Custom Range'\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\">\r\n        <thead>\r\n          <tr>\r\n            <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\r\n              (click)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && selectDate(dayObj.day)\"\r\n              (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n              (mouseleave)=\"onDateLeave()\"\r\n              [class.active]=\"dayObj.currentMonth && isDateSelected(year, month, dayObj.day)\"\r\n              [class.in-range]=\"dayObj.currentMonth && isDateInRange(year, month, dayObj.day)\"\r\n              [class.other-month]=\"!dayObj.currentMonth\"\r\n              [class.disabled]=\"isDateDisabled(year, month, dayObj.day)\"\r\n              [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(year, month, dayObj.day)\"\r\n              [class.today]=\"dayObj.currentMonth && isToday(year, month, dayObj.day)\"\r\n              class=\"calendar-day\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <brickclay-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          </brickclay-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            <brickclay-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            </brickclay-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            <brickclay-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            </brickclay-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
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class ScheduledDatePickerComponent {
+    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 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: ScheduledDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ScheduledDatePickerComponent, isStandalone: true, selector: "brickclay-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        <brickclay-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        </brickclay-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Multiple Dates Calendar -->\r\n      <div *ngIf=\"activeTab === 'multiple'\" class=\"calendar-wrapper-inline\">\r\n        <brickclay-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        </brickclay-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Date Range Calendar -->\r\n      <div *ngIf=\"activeTab === 'range'\" class=\"calendar-wrapper-inline\">\r\n        <brickclay-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        </brickclay-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            <brickclay-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            </brickclay-time-picker>\r\n            <brickclay-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            </brickclay-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            <brickclay-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            </brickclay-time-picker>\r\n            <brickclay-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            </brickclay-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          <brickclay-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          </brickclay-time-picker>\r\n          <brickclay-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          </brickclay-time-picker>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"activeTab === 'range' && (!rangeStartDate || !rangeEndDate)\" class=\"no-selection\">\r\n        <p>No date range selected. Select a date range from the calendar.</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Action Buttons -->\r\n  <div class=\"action-buttons\">\r\n    <button class=\"btn-clear\" (click)=\"clear()\">Clear</button>\r\n    <button class=\"btn-apply\" (click)=\"apply()\">Apply</button>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".scheduled-date-picker-container{font-family:Inter,sans-serif;background:#fff;border-radius:12px;padding:0;box-shadow:0 2px 8px #0000001a;overflow:hidden;width:100%;max-width:100%;box-sizing:border-box}.scheduled-header{padding:24px 24px 16px;border-bottom:1px solid #e5e7eb;background:#fff}.scheduled-title{font-size:18px;font-weight:500;line-height:26px;color:#111827;letter-spacing:-.28px;margin:0 0 16px}.tabs{display:flex;margin-bottom:16px;border-radius:6px;padding:3px;background-color:#54578e12}.tab-button{padding:5px 11px;border:none;background:transparent;color:#6b7080;font-size:11px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .2s;font-family:Inter,sans-serif;flex:1;border-radius:4px}.tab-button.active{color:#15191e;border-color:#42578a26;background:#fff}.scheduled-content{display:flex;gap:0;align-items:stretch}.calendar-section{flex:0 0 55%;max-width:55%;padding:12px;border-right:1px solid #e5e7eb;background:#fff;box-sizing:border-box}.calendar-wrapper-inline{width:100%}.calendar-wrapper-inline app-custom-calendar{width:100%}.time-config-section{flex:0 0 45%;max-width:45%;padding:12px;background:#fff;overflow-y:auto;max-height:600px;box-sizing:border-box}.time-config-title{font-size:16px;font-weight:600;color:#111827;margin:17px 0 14px}.time-config-item{padding:14px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}.time-config-header{display:flex;justify-content:space-between;align-items:center}.date-label{font-size:12px;font-weight:500;color:#15191e;letter-spacing:-.28px}.all-day-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;-webkit-user-select:none;user-select:none}.all-day-toggle input[type=checkbox]{width:28px;height:16px;appearance:none;background:#bbbdc5;border-radius:10px;position:relative;cursor:pointer;transition:background .2s;margin:0}.all-day-toggle input[type=checkbox]:checked{background:#22973f}.all-day-toggle input[type=checkbox]:before{content:\"\";position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;top:1.5px;left:2.5px;transition:transform .2s;box-shadow:0 1px 3px #0003}.all-day-toggle input[type=checkbox]:checked:before{transform:translate(12px)}.toggle-label{font-size:12px;font-weight:500;color:#111827}.all-day-toggle input[type=checkbox]:checked+.toggle-label{color:#111827}.time-inputs{display:flex;gap:14px;margin-top:12px}.time-config-list{display:flex;flex-direction:column;gap:14px;max-height:350px;overflow-y:auto;padding-right:4px}.time-config-list::-webkit-scrollbar{width:6px;height:6px}.time-config-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.time-config-list::-webkit-scrollbar-thumb{background:#b4b4b4;border-radius:3px}.time-config-list::-webkit-scrollbar-thumb:hover{background:#9b9b9b}.no-selection{padding:24px;text-align:center;color:#9ca3af;font-size:14px}.action-buttons{display:flex;justify-content:flex-end;gap:12px;padding:12px;border-top:1px solid #e5e7eb;background:#fff}.btn-clear,.btn-apply{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;font-family:Inter,sans-serif;min-width:80px}.btn-clear{background:#fff;color:#6b7280;border:1px solid #d1d5db}.btn-clear:hover{background:#f9fafb;border-color:#9ca3af}.btn-apply{background:#111827;color:#fff}.btn-apply:hover{background:#374151}@media (max-width: 1200px){.calendar-section{flex:0 0 52%;max-width:52%}.time-config-section{flex:0 0 48%;max-width:48%}}@media (max-width: 1024px){.scheduled-content{flex-direction:column}.calendar-section{flex:1 1 auto;max-width:100%;border-right:none;border-bottom:1px solid #e5e7eb}.time-config-section{flex:1 1 auto;max-width:100%;max-height:none}.time-config-list{max-height:320px}}@media (max-width: 768px){.scheduled-date-picker-container{border-radius:0}.scheduled-header{padding:16px}.calendar-section,.time-config-section{padding:12px 16px}.tabs{overflow-x:auto}.tab-button{white-space:nowrap;font-size:12px;padding:6px 10px}.time-inputs{flex-direction:column}.time-config-item{padding:12px}.action-buttons{padding:10px}}@media (max-width: 480px){.scheduled-title{font-size:16px}.time-config-title{font-size:14px}.date-label{font-size:11px}.time-config-list{max-height:260px}.btn-clear,.btn-apply{padding:8px 14px;font-size:13px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CustomCalendarComponent, selector: "brickclay-custom-calendar", inputs: ["enableTimepicker", "autoApply", "closeOnAutoApply", "showCancel", "linkedCalendars", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "customRangeDirection", "lockStartDate", "position", "drop", "dualCalendar", "showRanges", "timeFormat", "enableSeconds", "customRanges", "multiDateSelection", "maxDate", "minDate", "placeholder", "opens", "inline", "isDisplayCrossIcon", "selectedValue", "displayFormat"], outputs: ["selected", "opened", "closed"] }, { kind: "component", type: TimePickerComponent, selector: "brickclay-time-picker", inputs: ["value", "label", "placeholder", "position", "pickerId", "closePicker", "timeFormat", "showSeconds"], outputs: ["timeChange", "pickerOpened", "pickerClosed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ScheduledDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-scheduled-date-picker', standalone: true, imports: [CommonModule, FormsModule, CustomCalendarComponent, TimePickerComponent], template: "<div class=\"scheduled-date-picker-container\">\r\n  <!-- Header with Tabs -->\r\n\r\n\r\n  <!-- Main Content Area -->\r\n\r\n  <div class=\"scheduled-content\">\r\n    <!-- Left Side: Calendar -->\r\n    <div class=\"calendar-section\">\r\n      <h2 class=\"scheduled-title\">Scheduled Dates</h2>\r\n      <div class=\"tabs\">\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'single'\"\r\n          (click)=\"onTabChange('single')\">\r\n          Single Date\r\n        </button>\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'multiple'\"\r\n          (click)=\"onTabChange('multiple')\">\r\n          Multiple Dates\r\n        </button>\r\n        <button\r\n          class=\"tab-button\"\r\n          [class.active]=\"activeTab === 'range'\"\r\n          (click)=\"onTabChange('range')\">\r\n          Date Range\r\n        </button>\r\n      </div>\r\n      <!-- Single Date Calendar -->\r\n      <div *ngIf=\"activeTab === 'single'\" class=\"calendar-wrapper-inline\">\r\n        <brickclay-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        </brickclay-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Multiple Dates Calendar -->\r\n      <div *ngIf=\"activeTab === 'multiple'\" class=\"calendar-wrapper-inline\">\r\n        <brickclay-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        </brickclay-custom-calendar>\r\n      </div>\r\n\r\n      <!-- Date Range Calendar -->\r\n      <div *ngIf=\"activeTab === 'range'\" class=\"calendar-wrapper-inline\">\r\n        <brickclay-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        </brickclay-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            <brickclay-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            </brickclay-time-picker>\r\n            <brickclay-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            </brickclay-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            <brickclay-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            </brickclay-time-picker>\r\n            <brickclay-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            </brickclay-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          <brickclay-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          </brickclay-time-picker>\r\n          <brickclay-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          </brickclay-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,
+            CustomCalendarComponent,
+            ScheduledDatePickerComponent,
+            TimePickerComponent], exports: [CustomCalendarComponent,
+            ScheduledDatePickerComponent,
+            TimePickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarModule, imports: [CommonModule,
+            CustomCalendarComponent,
+            ScheduledDatePickerComponent,
+            TimePickerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CustomCalendarComponent,
+                        ScheduledDatePickerComponent,
+                        TimePickerComponent
+                    ],
+                    exports: [
+                        CustomCalendarComponent,
+                        ScheduledDatePickerComponent,
+                        TimePickerComponent
+                    ]
+                }]
+        }] });
+
+class ToggleComponent {
+    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: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ToggleComponent, isStandalone: true, selector: "brickclay-toggle", inputs: { label: "label", disabled: "disabled", toggleClass: "toggleClass" }, outputs: { change: "change" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ToggleComponent),
+                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;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-toggle', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ToggleComponent),
+                            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;}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], toggleClass: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class CheckboxComponent {
+    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: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CheckboxComponent, isStandalone: true, selector: "brickclay-checkbox", inputs: { checkboxClass: "checkboxClass", label: "label", labelClass: "labelClass", disabled: "disabled" }, outputs: { change: "change" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckboxComponent),
+                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\"\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: [".xsm{@apply size-[14px];}.sm{@apply size-[16px];}.md{@apply size-[18px];}.lg{@apply size-[20px];}.xsm svg{@apply size-[10.5px];}.sm svg{@apply size-[12px];}.md svg{@apply size-[13.5px];}.lg svg{@apply size-[14px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-checkbox', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            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\"\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: [".xsm{@apply size-[14px];}.sm{@apply size-[16px];}.md{@apply size-[18px];}.lg{@apply size-[20px];}.xsm svg{@apply size-[10.5px];}.sm svg{@apply size-[12px];}.md svg{@apply size-[13.5px];}.lg svg{@apply size-[14px];}\n"] }]
+        }], propDecorators: { checkboxClass: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class RadioComponent {
+    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: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RadioComponent, isStandalone: true, selector: "brickclay-radio-button", inputs: { radioClass: "radioClass", label: "label", labelClass: "labelClass", value: "value", disabled: "disabled", variant: "variant" }, outputs: { change: "change" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioComponent),
+                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\r\n           group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2\"\r\n    [ngClass]=\"[\r\n      radioClass,\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n      variant === 'dot' && isChecked && !disabled ? 'border-black bg-white' : '',\r\n      variant === 'tick' && isChecked && !disabled ? 'bg-black border-black' : '',\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\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\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        <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n      </svg>\r\n    }\r\n\r\n  </div>\r\n\r\n  @if (label) {\r\n    <span\r\n      class=\"font-medium text-xs text-[#1B223A] select-none\"\r\n      [ngClass]=\"[labelClass, disabled ? 'text-gray-400' : '']\">\r\n      {{ label }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".xsm{@apply size-[14px];}.sm{@apply size-[16px];}.md{@apply size-[18px];}.lg{@apply size-[19px];}.xsm .dot{@apply size-[6px];}.sm .dot{@apply size-[8px];}.md .dot{@apply size-[10px];}.lg .dot{@apply size-[11px];}.xsm .tick{@apply size-[8px];}.sm .tick{@apply size-[9px];}.md .tick{@apply size-[12px];}.lg .tick{@apply size-[13px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-radio-button', standalone: true, imports: [CommonModule, FormsModule], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioComponent),
+                            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\r\n           group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2\"\r\n    [ngClass]=\"[\r\n      radioClass,\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n      variant === 'dot' && isChecked && !disabled ? 'border-black bg-white' : '',\r\n      variant === 'tick' && isChecked && !disabled ? 'bg-black border-black' : '',\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\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\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        <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n      </svg>\r\n    }\r\n\r\n  </div>\r\n\r\n  @if (label) {\r\n    <span\r\n      class=\"font-medium text-xs text-[#1B223A] select-none\"\r\n      [ngClass]=\"[labelClass, disabled ? 'text-gray-400' : '']\">\r\n      {{ label }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".xsm{@apply size-[14px];}.sm{@apply size-[16px];}.md{@apply size-[18px];}.lg{@apply size-[19px];}.xsm .dot{@apply size-[6px];}.sm .dot{@apply size-[8px];}.md .dot{@apply size-[10px];}.lg .dot{@apply size-[11px];}.xsm .tick{@apply size-[8px];}.sm .tick{@apply size-[9px];}.md .tick{@apply size-[12px];}.lg .tick{@apply size-[13px];}\n"] }]
+        }], propDecorators: { radioClass: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of brickclay-lib
+ */
+//Icons
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, RadioComponent, ScheduledDatePickerComponent, TimePickerComponent, ToggleComponent };
+//# sourceMappingURL=brickclay-org-ui.mjs.map