@brickclay-org/ui 0.0.3 → 0.0.5

package/fesm2022/brickclay-org-ui.mjs

@@ -32,7 +32,6 @@ class TimePickerComponent {
     closePicker = 0; // Close counter from parent (triggers close when changed)
     timeFormat = 12; // Visual mode: 12h or 24h
     showSeconds = false; // Whether to show/edit seconds
-    assetsPath = 'assets/calender'; // Base path for calendar assets
     timeChange = new EventEmitter();
     pickerOpened = new EventEmitter(); // Notify parent when opened
     pickerClosed = new EventEmitter(); // Notify parent when closed
@@ -227,13 +226,6 @@ class TimePickerComponent {
             }
         }
     }
-    /**
-     * Get the asset path for calendar icons
-     * Supports both local development and npm package installation
-     */
-    getAssetPath(filename) {
-        return `${this.assetsPath}/${filename}`;
-    }
     // Basic keyboard support on the input (combobox behavior)
     onInputKeydown(event) {
         const key = event.key;
@@ -270,11 +262,11 @@ class TimePickerComponent {
         }
     }
     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", assetsPath: "assetsPath" }, 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 [src]=\"getAssetPath('timer.svg')\" alt=\"timer\" class=\"timer-icon\">\r\n      </span>\r\n      <div class=\"custom-time-picker-dropdown\" *ngIf=\"showPicker\">\r\n        <div class=\"custom-time-picker\" [ngClass]=\"position === 'left' ? 'left-position' : 'right-position'\">\r\n          <!-- Hours Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                (click)=\"onHourChange(h)\">\r\n                {{ h.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <!-- Minutes Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let m of getMinutes()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === m\"\r\n                (click)=\"onMinuteChange(m)\">\r\n                {{ m.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <!-- AM/PM Column -->\r\n          <div class=\"time-column ampm-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let ap of getAMPMOptions()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentAMPM === ap\"\r\n                (click)=\"onAMPMChange(ap)\">\r\n                {{ ap }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".time-picker-wrapper{width:100%;font-family:Inter,sans-serif}.time-input-group{display:flex;flex-direction:column;gap:4px}.time-input-group label{font-size:11px;font-weight:500;color:#15191e;text-transform:uppercase;letter-spacing:-.28px}.time-input-wrapper{position:relative;display:flex;align-items:center}.time-input{padding:8px 40px 8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:12px;font-family:Inter,sans-serif;color:#6f737b;background:#fff;transition:all .2s;width:100%;box-sizing:border-box;cursor:pointer}.time-input:focus{outline:none;border-color:#111827;box-shadow:0 0 0 3px #1118271a}.time-input:hover{border-color:#9ca3af}.time-icon{position:absolute;right:12px;font-size:16px;pointer-events:none;color:#9ca3af;cursor:pointer}.custom-time-picker-wrapper{width:100%;display:flex;justify-content:center}.custom-time-picker{display:flex;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:10px;box-shadow:0 4px 12px #00000026;width:182px;position:absolute;top:calc(100% + 4px);z-index:1000}.custom-time-picker.left-position{left:0}.custom-time-picker.right-position{right:0}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:95px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;scrollbar-width:none;-ms-overflow-style:none}.time-scroll::-webkit-scrollbar{display:none}.time-scroll::-webkit-scrollbar-track{background:transparent}.time-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}.time-item{min-width:40px;width:40px;height:32px;min-height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;color:#374151;cursor:pointer;border-radius:4px;transition:all .15s ease;-webkit-user-select:none;user-select:none;font-family:Inter,sans-serif}.time-item:hover{background:#f3f4f6}.time-item.selected{background:#111827;color:#fff;font-weight:500;box-shadow:0 1px 2px #2563eb4d}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵ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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik03IDE0QzEwLjg1OTMgMTQgMTQgMTAuODU5MyAxNCA3QzE0IDMuMTQwNjcgMTAuODU5NCAwIDcgMEMzLjE0MDYzIDAgMCAzLjE0MDY3IDAgN0MwIDEwLjg1OTMgMy4xNDA2NyAxNCA3IDE0Wk03IDAuOTMzMzE4QzEwLjM0NiAwLjkzMzMxOCAxMy4wNjY3IDMuNjUzOTggMTMuMDY2NyA3QzEzLjA2NjcgMTAuMzQ2IDEwLjM0NiAxMy4wNjY3IDcgMTMuMDY2N0MzLjY1Mzk4IDEzLjA2NjcgMC45MzMzMTggMTAuMzQ2IDAuOTMzMzE4IDdDMC45MzMzMTggMy42NTM5OCAzLjY1NDAxIDAuOTMzMzE4IDcgMC45MzMzMThaIiBmaWxsPSIjQkJCREM1Ii8+DQo8cGF0aCBkPSJNOS4wNDE1MyA5LjIzMDcxQzkuMTI3ODggOS4zMDA3IDkuMjMwNTIgOS4zMzMzOSA5LjMzMzIgOS4zMzMzOUM5LjQ3MDg2IDkuMzMzMzkgOS42MDYxOSA5LjI3MjcyIDkuNjk3MTggOS4xNTgzOUM5Ljg1ODE5IDguOTU3NzIgOS44MjU0OSA4LjY2MzcyIDkuNjI0ODYgOC41MDI3MUw3LjQ2NjUyIDYuNzc2MDRWMy4yNjY3MUM3LjQ2NjUyIDMuMDEwMDQgNy4yNTY1MyAyLjgwMDA1IDYuOTk5ODYgMi44MDAwNUM2Ljc0MzE5IDIuODAwMDUgNi41MzMyIDMuMDEwMDQgNi41MzMyIDMuMjY2NzFWNy4wMDAwNkM2LjUzMzIgNy4xNDI0IDYuNTk4NTUgNy4yNzUzOSA2LjcwODIgNy4zNjQwNEw5LjA0MTUzIDkuMjMwNzFaIiBmaWxsPSIjQkJCREM1Ii8+DQo8L3N2Zz4NCg=='/>\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 [src]=\"getAssetPath('timer.svg')\" alt=\"timer\" class=\"timer-icon\">\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"] }]
+            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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik03IDE0QzEwLjg1OTMgMTQgMTQgMTAuODU5MyAxNCA3QzE0IDMuMTQwNjcgMTAuODU5NCAwIDcgMEMzLjE0MDYzIDAgMCAzLjE0MDY3IDAgN0MwIDEwLjg1OTMgMy4xNDA2NyAxNCA3IDE0Wk03IDAuOTMzMzE4QzEwLjM0NiAwLjkzMzMxOCAxMy4wNjY3IDMuNjUzOTggMTMuMDY2NyA3QzEzLjA2NjcgMTAuMzQ2IDEwLjM0NiAxMy4wNjY3IDcgMTMuMDY2N0MzLjY1Mzk4IDEzLjA2NjcgMC45MzMzMTggMTAuMzQ2IDAuOTMzMzE4IDdDMC45MzMzMTggMy42NTM5OCAzLjY1NDAxIDAuOTMzMzE4IDcgMC45MzMzMThaIiBmaWxsPSIjQkJCREM1Ii8+DQo8cGF0aCBkPSJNOS4wNDE1MyA5LjIzMDcxQzkuMTI3ODggOS4zMDA3IDkuMjMwNTIgOS4zMzMzOSA5LjMzMzIgOS4zMzMzOUM5LjQ3MDg2IDkuMzMzMzkgOS42MDYxOSA5LjI3MjcyIDkuNjk3MTggOS4xNTgzOUM5Ljg1ODE5IDguOTU3NzIgOS44MjU0OSA4LjY2MzcyIDkuNjI0ODYgOC41MDI3MUw3LjQ2NjUyIDYuNzc2MDRWMy4yNjY3MUM3LjQ2NjUyIDMuMDEwMDQgNy4yNTY1MyAyLjgwMDA1IDYuOTk5ODYgMi44MDAwNUM2Ljc0MzE5IDIuODAwMDUgNi41MzMyIDMuMDEwMDQgNi41MzMyIDMuMjY2NzFWNy4wMDAwNkM2LjUzMzIgNy4xNDI0IDYuNTk4NTUgNy4yNzUzOSA2LjcwODIgNy4zNjQwNEw5LjA0MTUzIDkuMjMwNzFaIiBmaWxsPSIjQkJCREM1Ii8+DQo8L3N2Zz4NCg=='/>\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: [{
@@ -291,8 +283,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], showSeconds: [{
                 type: Input
-            }], assetsPath: [{
-                type: Input
             }], timeChange: [{
                 type: Output
             }], pickerOpened: [{
@@ -375,7 +365,6 @@ class CustomCalendarComponent {
     opens = 'left'; // NEW: Popup position
     inline = false; // NEW: Always show calendar inline (no popup)
     isDisplayCrossIcon = true; // NEW: Show/Hide clear (X) icon
-    assetsPath = 'assets/calender'; // Base path for calendar assets
     selected = new EventEmitter();
     opened = new EventEmitter();
     closed = new EventEmitter();
@@ -1582,13 +1571,6 @@ class CustomCalendarComponent {
         const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
         return months[month];
     }
-    /**
-     * Get the asset path for calendar icons
-     * Supports both local development and npm package installation
-     */
-    getAssetPath(filename) {
-        return `${this.assetsPath}/${filename}`;
-    }
     // Input handlers for direct hour/minute input (12-hour format only)
     onHourInput(event, isStart = true, isSingle = false) {
         const inputValue = event.target.value;
@@ -1856,11 +1838,11 @@ class CustomCalendarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomCalendarComponent, deps: [{ token: CalendarManagerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CustomCalendarComponent, isStandalone: true, selector: "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", assetsPath: "assetsPath", 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\">\n  <!-- Input field -->\n  <div class=\"input-wrapper\" *ngIf=\"!inline\">\n    <input\n      type=\"text\"\n      (click)=\"toggle()\"\n      readonly\n      [value]=\"getDisplayValue()\"\n      [placeholder]=\"placeholder\"\n      class=\"calendar-input\">\n      <!-- *ngIf=\"!getDisplayValue()\" -->\n\n    <span class=\"calendar-icon\" >\n      <img [src]=\"getAssetPath('calender.svg')\" alt=\"calendar\" class=\"calendar-icon-img\">\n    </span>\n    <button class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\n  </div>\n\n  <!-- Calendar Popup / Inline -->\n  <div class=\"calendar-popup\"\n       [class.inline-calendar]=\"inline\"\n       [ngClass]=\"{\n         'position-right': !inline && opens === 'right',\n         'position-center': !inline && opens === 'center',\n         'drop-up': !inline && drop === 'up',\n         'has-ranges': showRanges && customRanges,\n         'dual-calendar-mode': dualCalendar\n       }\"\n       *ngIf=\"inline || show\">\n\n    <!-- RANGES -->\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\">\n      <button\n        *ngFor=\"let rangeKey of rangeOrder\"\n        (click)=\"chooseRange(rangeKey)\"\n        [class.active]=\"activeRange === rangeKey\"\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\n        class=\"range-btn\"\n        [disabled]=\"rangeKey === 'Custom Range'\">\n        {{ rangeKey }}\n      </button>\n    </div>\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1' : ''\">\n\n\n    <!-- SINGLE CALENDAR -->\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\n      <div class=\"header\">\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\n        </button> -->\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\n                    >\n                    <img [src]=\"getAssetPath('chevron-left.svg')\" alt=\"prev\" class=\"h-3 w-3\" />\n                </button>\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\n        </button> -->\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\n                    >\n                    <img [src]=\"getAssetPath('chevron-right.svg')\" alt=\"next\" class=\"h-3 w-3\" />\n                    <!--<img [src]=\"getAssetPath('pagination-right-gray.svg')\" alt=\"next\" class=\"h-3 w-3\" /> -->\n                </button>\n      </div>\n\n      <table class=\"calendar-table\">\n        <thead>\n          <tr>\n            <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let week of calendar\">\n            <td\n              *ngFor=\"let dayObj of week\"\n              (click)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && selectDate(dayObj.day)\"\n              (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && onDateHover(dayObj.day, false)\"\n              (mouseleave)=\"onDateLeave()\"\n              [class.active]=\"dayObj.currentMonth && isDateSelected(year, month, dayObj.day)\"\n              [class.in-range]=\"dayObj.currentMonth && isDateInRange(year, month, dayObj.day)\"\n              [class.other-month]=\"!dayObj.currentMonth\"\n              [class.disabled]=\"isDateDisabled(year, month, dayObj.day)\"\n              [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(year, month, dayObj.day)\"\n              [class.today]=\"dayObj.currentMonth && isToday(year, month, dayObj.day)\"\n              class=\"calendar-day\">\n              {{ dayObj.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n\n      <!-- Single Calendar Time Picker -->\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\n        <div class=\"timepicker-label\">Time</div>\n        <div class=\"timepicker-controls\">\n          <brickclay-time-picker\n            pickerId=\"single-time\"\n            [label]=\"''\"\n            [value]=\"getSingleTimePickerDisplay()\"\n            [closePicker]=\"shouldClosePicker('single-time')\"\n            (timeChange)=\"onSingleTimePickerChange($event)\"\n            (pickerOpened)=\"onTimePickerOpened($event)\"\n            (pickerClosed)=\"onTimePickerClosed($event)\">\n          </brickclay-time-picker>\n        </div>\n      </div>\n    </div>\n\n    <!-- DUAL CALENDAR -->\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\n      <!-- LEFT CALENDAR -->\n      <div class=\"calendar-left\">\n        <div class=\"header\">\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\n            <img [src]=\"getAssetPath('chevron-left.svg')\" alt=\"arrow-left\" class=\"arrow-left\">\n          </button>\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\n            <img [src]=\"getAssetPath('chevron-right.svg')\" alt=\"arrow-right\" class=\"arrow-right\">\n          </button>\n        </div>\n        <table class=\"calendar-table\">\n          <thead>\n            <tr>\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let week of leftCalendar\">\n              <td\n                *ngFor=\"let dayObj of week\"\n                (click)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && selectDate(dayObj.day, false)\"\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && onDateHover(dayObj.day, false)\"\n                (mouseleave)=\"onDateLeave()\"\n                [class.active]=\"dayObj.currentMonth && isDateSelected(leftYear, leftMonth, dayObj.day)\"\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(leftYear, leftMonth, dayObj.day)\"\n                [class.other-month]=\"!dayObj.currentMonth\"\n                [class.disabled]=\"isDateDisabled(leftYear, leftMonth, dayObj.day)\"\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(leftYear, leftMonth, dayObj.day)\"\n                [class.today]=\"dayObj.currentMonth && isToday(leftYear, leftMonth, dayObj.day)\"\n                class=\"calendar-day\">\n                {{ dayObj.day }}\n              </td>\n            </tr>\n          </tbody>\n        </table>\n\n        <!-- Start Time Picker for Dual Calendar -->\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\n          <div class=\"timepicker-label\">Start Time</div>\n          <div class=\"timepicker-controls\">\n            <brickclay-time-picker\n              pickerId=\"dual-start\"\n              [label]=\"''\"\n              [value]=\"getDualTimePickerDisplay(true)\"\n              [closePicker]=\"shouldClosePicker('dual-start')\"\n              (timeChange)=\"onDualTimePickerChange($event, true)\"\n              (pickerOpened)=\"onTimePickerOpened($event)\"\n              (pickerClosed)=\"onTimePickerClosed($event)\">\n            </brickclay-time-picker>\n          </div>\n        </div>\n      </div>\n\n      <!-- RIGHT CALENDAR -->\n      <div class=\"calendar-right\">\n        <div class=\"header\">\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\n            <img [src]=\"getAssetPath('chevron-left.svg')\" alt=\"arrow-left\" class=\"arrow-left\">\n          </button>\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\n            <img [src]=\"getAssetPath('chevron-right.svg')\" alt=\"arrow-right\" class=\"arrow-right\">\n          </button>\n        </div>\n        <table class=\"calendar-table\">\n          <thead>\n            <tr>\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let week of rightCalendar\">\n              <td\n                *ngFor=\"let dayObj of week\"\n                (click)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && selectDate(dayObj.day, true)\"\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && onDateHover(dayObj.day, true)\"\n                (mouseleave)=\"onDateLeave()\"\n                [class.active]=\"dayObj.currentMonth && isDateSelected(rightYear, rightMonth, dayObj.day)\"\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(rightYear, rightMonth, dayObj.day)\"\n                [class.other-month]=\"!dayObj.currentMonth\"\n                [class.disabled]=\"isDateDisabled(rightYear, rightMonth, dayObj.day)\"\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(rightYear, rightMonth, dayObj.day)\"\n                [class.today]=\"dayObj.currentMonth && isToday(rightYear, rightMonth, dayObj.day)\"\n                class=\"calendar-day\">\n                {{ dayObj.day }}\n              </td>\n            </tr>\n          </tbody>\n        </table>\n\n        <!-- End Time Picker for Dual Calendar -->\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\n          <div class=\"timepicker-label\">End Time</div>\n          <div class=\"timepicker-controls\">\n            <brickclay-time-picker\n              pickerId=\"dual-end\"\n              [label]=\"''\"\n              [value]=\"getDualTimePickerDisplay(false)\"\n              [closePicker]=\"shouldClosePicker('dual-end')\"\n              (timeChange)=\"onDualTimePickerChange($event, false)\"\n              (pickerOpened)=\"onTimePickerOpened($event)\"\n              (pickerClosed)=\"onTimePickerClosed($event)\">\n            </brickclay-time-picker>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- FOOTER -->\n    <div class=\"footer\" *ngIf=\"!inline\">\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\">Apply</button>\n    </div>\n\n  </div>\n\n  </div>\n</div>\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", "assetsPath"], outputs: ["timeChange", "pickerOpened", "pickerClosed"] }] });
+    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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8zNzk3XzQ2MzA5KSI+DQo8cGF0aCBkPSJNMTQuNTQ1IDUuNDU0NDhWMTEuNjM2M0MxNC41NDUgMTMuODE4MSAxMy40NTQxIDE1LjI3MjcgMTAuOTA4NiAxNS4yNzI3SDUuMDkwNDdDMi41NDUwMSAxNS4yNzI3IDEuNDU0MSAxMy44MTgxIDEuNDU0MSAxMS42MzYzVjUuNDU0NDhDMS40NTQxIDMuMjcyNjYgMi41NDUwMSAxLjgxODEyIDUuMDkwNDcgMS44MTgxMkgxMC45MDg2QzEzLjQ1NDEgMS44MTgxMiAxNC41NDUgMy4yNzI2NiAxNC41NDUgNS40NTQ0OFoiIHN0cm9rZT0iIzE0MTQxNCIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8cGF0aCBkPSJNNS4wOTA4MiAwLjcyNzI5NVYyLjkwOTExIiBzdHJva2U9IiMxNDE0MTQiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPHBhdGggZD0iTTEwLjkwOTIgMC43MjcyOTVWMi45MDkxMSIgc3Ryb2tlPSIjMTQxNDE0IiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjxwYXRoIGQ9Ik0xLjgxODM2IDUuODgzNTRIMTQuMTgyIiBzdHJva2U9IiMxNDE0MTQiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPHBhdGggZD0iTTEwLjY4NjggOS4yMzYxOUgxMC42OTMzIiBzdHJva2U9IiMxNDE0MTQiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjxwYXRoIGQ9Ik0xMC42ODY4IDExLjQxODFIMTAuNjkzMyIgc3Ryb2tlPSIjMTQxNDE0IiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8cGF0aCBkPSJNNy45OTYzNiA5LjIzNjE5SDguMDAyODkiIHN0cm9rZT0iIzE0MTQxNCIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPHBhdGggZD0iTTcuOTk2MzYgMTEuNDE4MUg4LjAwMjg5IiBzdHJva2U9IiMxNDE0MTQiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjxwYXRoIGQ9Ik01LjMwNDk1IDkuMjM2NDRINS4zMTE0OSIgc3Ryb2tlPSIjMTQxNDE0IiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8cGF0aCBkPSJNNS4zMDQ5NSAxMS40MTgxSDUuMzExNDkiIHN0cm9rZT0iIzE0MTQxNCIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9nPg0KPGRlZnM+DQo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM3OTdfNDYzMDkiPg0KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPg0KPC9jbGlwUGF0aD4NCjwvZGVmcz4NCjwvc3ZnPg0K'/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNNS44MzM5OCAwLjgzMzMxM0wwLjgzMzk4NCA1LjgzMzMxTDUuODMzOTggMTAuODMzMyIgc3Ryb2tlPSIjNkI3MDgwIiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+DQo='/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMC44MzM5ODQgMTAuODMzM0w1LjgzMzk4IDUuODMzMzFMMC44MzM5ODQgMC44MzMzMTMiIHN0cm9rZT0iIzZCNzA4MCIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg0K'/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNNS44MzM5OCAwLjgzMzMxM0wwLjgzMzk4NCA1LjgzMzMxTDUuODMzOTggMTAuODMzMyIgc3Ryb2tlPSIjNkI3MDgwIiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+DQo='/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMC44MzM5ODQgMTAuODMzM0w1LjgzMzk4IDUuODMzMzFMMC44MzM5ODQgMC44MzMzMTMiIHN0cm9rZT0iIzZCNzA4MCIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg0K'/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNNS44MzM5OCAwLjgzMzMxM0wwLjgzMzk4NCA1LjgzMzMxTDUuODMzOTggMTAuODMzMyIgc3Ryb2tlPSIjNkI3MDgwIiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+DQo='/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMC44MzM5ODQgMTAuODMzM0w1LjgzMzk4IDUuODMzMzFMMC44MzM5ODQgMC44MzMzMTMiIHN0cm9rZT0iIzZCNzA4MCIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg0K'/>\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\">\n  <!-- Input field -->\n  <div class=\"input-wrapper\" *ngIf=\"!inline\">\n    <input\n      type=\"text\"\n      (click)=\"toggle()\"\n      readonly\n      [value]=\"getDisplayValue()\"\n      [placeholder]=\"placeholder\"\n      class=\"calendar-input\">\n      <!-- *ngIf=\"!getDisplayValue()\" -->\n\n    <span class=\"calendar-icon\" >\n      <img [src]=\"getAssetPath('calender.svg')\" alt=\"calendar\" class=\"calendar-icon-img\">\n    </span>\n    <button class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\n  </div>\n\n  <!-- Calendar Popup / Inline -->\n  <div class=\"calendar-popup\"\n       [class.inline-calendar]=\"inline\"\n       [ngClass]=\"{\n         'position-right': !inline && opens === 'right',\n         'position-center': !inline && opens === 'center',\n         'drop-up': !inline && drop === 'up',\n         'has-ranges': showRanges && customRanges,\n         'dual-calendar-mode': dualCalendar\n       }\"\n       *ngIf=\"inline || show\">\n\n    <!-- RANGES -->\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\">\n      <button\n        *ngFor=\"let rangeKey of rangeOrder\"\n        (click)=\"chooseRange(rangeKey)\"\n        [class.active]=\"activeRange === rangeKey\"\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\n        class=\"range-btn\"\n        [disabled]=\"rangeKey === 'Custom Range'\">\n        {{ rangeKey }}\n      </button>\n    </div>\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1' : ''\">\n\n\n    <!-- SINGLE CALENDAR -->\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\n      <div class=\"header\">\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\n        </button> -->\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\n                    >\n                    <img [src]=\"getAssetPath('chevron-left.svg')\" alt=\"prev\" class=\"h-3 w-3\" />\n                </button>\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\n        </button> -->\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\n                    >\n                    <img [src]=\"getAssetPath('chevron-right.svg')\" alt=\"next\" class=\"h-3 w-3\" />\n                    <!--<img [src]=\"getAssetPath('pagination-right-gray.svg')\" alt=\"next\" class=\"h-3 w-3\" /> -->\n                </button>\n      </div>\n\n      <table class=\"calendar-table\">\n        <thead>\n          <tr>\n            <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let week of calendar\">\n            <td\n              *ngFor=\"let dayObj of week\"\n              (click)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && selectDate(dayObj.day)\"\n              (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && onDateHover(dayObj.day, false)\"\n              (mouseleave)=\"onDateLeave()\"\n              [class.active]=\"dayObj.currentMonth && isDateSelected(year, month, dayObj.day)\"\n              [class.in-range]=\"dayObj.currentMonth && isDateInRange(year, month, dayObj.day)\"\n              [class.other-month]=\"!dayObj.currentMonth\"\n              [class.disabled]=\"isDateDisabled(year, month, dayObj.day)\"\n              [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(year, month, dayObj.day)\"\n              [class.today]=\"dayObj.currentMonth && isToday(year, month, dayObj.day)\"\n              class=\"calendar-day\">\n              {{ dayObj.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n\n      <!-- Single Calendar Time Picker -->\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\n        <div class=\"timepicker-label\">Time</div>\n        <div class=\"timepicker-controls\">\n          <brickclay-time-picker\n            pickerId=\"single-time\"\n            [label]=\"''\"\n            [value]=\"getSingleTimePickerDisplay()\"\n            [closePicker]=\"shouldClosePicker('single-time')\"\n            (timeChange)=\"onSingleTimePickerChange($event)\"\n            (pickerOpened)=\"onTimePickerOpened($event)\"\n            (pickerClosed)=\"onTimePickerClosed($event)\">\n          </brickclay-time-picker>\n        </div>\n      </div>\n    </div>\n\n    <!-- DUAL CALENDAR -->\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\n      <!-- LEFT CALENDAR -->\n      <div class=\"calendar-left\">\n        <div class=\"header\">\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\n            <img [src]=\"getAssetPath('chevron-left.svg')\" alt=\"arrow-left\" class=\"arrow-left\">\n          </button>\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\n            <img [src]=\"getAssetPath('chevron-right.svg')\" alt=\"arrow-right\" class=\"arrow-right\">\n          </button>\n        </div>\n        <table class=\"calendar-table\">\n          <thead>\n            <tr>\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let week of leftCalendar\">\n              <td\n                *ngFor=\"let dayObj of week\"\n                (click)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && selectDate(dayObj.day, false)\"\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && onDateHover(dayObj.day, false)\"\n                (mouseleave)=\"onDateLeave()\"\n                [class.active]=\"dayObj.currentMonth && isDateSelected(leftYear, leftMonth, dayObj.day)\"\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(leftYear, leftMonth, dayObj.day)\"\n                [class.other-month]=\"!dayObj.currentMonth\"\n                [class.disabled]=\"isDateDisabled(leftYear, leftMonth, dayObj.day)\"\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(leftYear, leftMonth, dayObj.day)\"\n                [class.today]=\"dayObj.currentMonth && isToday(leftYear, leftMonth, dayObj.day)\"\n                class=\"calendar-day\">\n                {{ dayObj.day }}\n              </td>\n            </tr>\n          </tbody>\n        </table>\n\n        <!-- Start Time Picker for Dual Calendar -->\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\n          <div class=\"timepicker-label\">Start Time</div>\n          <div class=\"timepicker-controls\">\n            <brickclay-time-picker\n              pickerId=\"dual-start\"\n              [label]=\"''\"\n              [value]=\"getDualTimePickerDisplay(true)\"\n              [closePicker]=\"shouldClosePicker('dual-start')\"\n              (timeChange)=\"onDualTimePickerChange($event, true)\"\n              (pickerOpened)=\"onTimePickerOpened($event)\"\n              (pickerClosed)=\"onTimePickerClosed($event)\">\n            </brickclay-time-picker>\n          </div>\n        </div>\n      </div>\n\n      <!-- RIGHT CALENDAR -->\n      <div class=\"calendar-right\">\n        <div class=\"header\">\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\n            <img [src]=\"getAssetPath('chevron-left.svg')\" alt=\"arrow-left\" class=\"arrow-left\">\n          </button>\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\n            <img [src]=\"getAssetPath('chevron-right.svg')\" alt=\"arrow-right\" class=\"arrow-right\">\n          </button>\n        </div>\n        <table class=\"calendar-table\">\n          <thead>\n            <tr>\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let week of rightCalendar\">\n              <td\n                *ngFor=\"let dayObj of week\"\n                (click)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && selectDate(dayObj.day, true)\"\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && onDateHover(dayObj.day, true)\"\n                (mouseleave)=\"onDateLeave()\"\n                [class.active]=\"dayObj.currentMonth && isDateSelected(rightYear, rightMonth, dayObj.day)\"\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(rightYear, rightMonth, dayObj.day)\"\n                [class.other-month]=\"!dayObj.currentMonth\"\n                [class.disabled]=\"isDateDisabled(rightYear, rightMonth, dayObj.day)\"\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(rightYear, rightMonth, dayObj.day)\"\n                [class.today]=\"dayObj.currentMonth && isToday(rightYear, rightMonth, dayObj.day)\"\n                class=\"calendar-day\">\n                {{ dayObj.day }}\n              </td>\n            </tr>\n          </tbody>\n        </table>\n\n        <!-- End Time Picker for Dual Calendar -->\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\n          <div class=\"timepicker-label\">End Time</div>\n          <div class=\"timepicker-controls\">\n            <brickclay-time-picker\n              pickerId=\"dual-end\"\n              [label]=\"''\"\n              [value]=\"getDualTimePickerDisplay(false)\"\n              [closePicker]=\"shouldClosePicker('dual-end')\"\n              (timeChange)=\"onDualTimePickerChange($event, false)\"\n              (pickerOpened)=\"onTimePickerOpened($event)\"\n              (pickerClosed)=\"onTimePickerClosed($event)\">\n            </brickclay-time-picker>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- FOOTER -->\n    <div class=\"footer\" *ngIf=\"!inline\">\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\">Apply</button>\n    </div>\n\n  </div>\n\n  </div>\n</div>\n", styles: [".calendar-container,.calendar-container *{font-family:Inter,sans-serif!important}.calendar-container{position:relative;display:inline-block;width:100%}.input-wrapper{position:relative;display:flex;align-items:center}.calendar-input{width:100%;padding:9px 14px 9px 40px;border:1px solid #ddd;border-radius:8px;font-size:14px;cursor:pointer;background:#fff;transition:all .2s}.calendar-input:hover{border-color:#999}.calendar-input:focus{outline:none;border-color:#999;box-shadow:0 0 0 3px #6a6a6a1a}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{position:absolute;top:110%;left:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.dual-calendar-mode.has-ranges .dual-calendar{border-left:1px solid #eee}.calendar-popup.drop-up{top:auto;bottom:110%;animation:slideUp .2s ease-out}.calendar-popup.position-right{left:auto;right:0}.calendar-popup.position-center{left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ranges{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #eee;min-width:150px;padding-right:8px}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px;border-left:1px solid #eee}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;text-align:center;text-transform:capitalize}.nav-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:11.5px 14px;color:#666;border-radius:4px;transition:all .2s;line-height:1;height:30px;width:30px;display:flex;justify-content:center;align-items:center}.nav-btn:hover{background:#f0f0f0;color:#000}.nav-btn img{width:auto;max-width:none!important}.calendar-table{width:100%;border-collapse:collapse;text-align:center}.weekday-header{font-size:12px;color:#7e7e7e;font-weight:600;padding:8px 4px;letter-spacing:.3px}.calendar-day{padding:8px 4px;font-size:14px;cursor:pointer;border-radius:6px;transition:all .2s;position:relative;color:#333;font-weight:500;line-height:1.5}.calendar-day:hover:not(.disabled):not(.other-month){background:#efefef;color:#000}.calendar-day.other-month{color:#ccc;cursor:default}.calendar-day.disabled{color:#ddd;cursor:not-allowed;opacity:.5}.calendar-day.active{background:#000!important;color:#fff!important;font-weight:600}.calendar-day.today{font-weight:600}.calendar-day.today:not(.active){background:#e5e4e4}.calendar-day.active:hover{background:#000!important}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%;border-left:1px solid #eee}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-cancel:hover{background:#f5f5f5;border-color:#bbb}.btn-apply{background:#000;color:#fff}.btn-apply:hover{background:#333}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.dual-calendar{flex-direction:column}.time-input-group{flex-wrap:wrap;justify-content:center}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}\n"] }]
+            args: [{ selector: '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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8zNzk3XzQ2MzA5KSI+DQo8cGF0aCBkPSJNMTQuNTQ1IDUuNDU0NDhWMTEuNjM2M0MxNC41NDUgMTMuODE4MSAxMy40NTQxIDE1LjI3MjcgMTAuOTA4NiAxNS4yNzI3SDUuMDkwNDdDMi41NDUwMSAxNS4yNzI3IDEuNDU0MSAxMy44MTgxIDEuNDU0MSAxMS42MzYzVjUuNDU0NDhDMS40NTQxIDMuMjcyNjYgMi41NDUwMSAxLjgxODEyIDUuMDkwNDcgMS44MTgxMkgxMC45MDg2QzEzLjQ1NDEgMS44MTgxMiAxNC41NDUgMy4yNzI2NiAxNC41NDUgNS40NTQ0OFoiIHN0cm9rZT0iIzE0MTQxNCIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8cGF0aCBkPSJNNS4wOTA4MiAwLjcyNzI5NVYyLjkwOTExIiBzdHJva2U9IiMxNDE0MTQiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPHBhdGggZD0iTTEwLjkwOTIgMC43MjcyOTVWMi45MDkxMSIgc3Ryb2tlPSIjMTQxNDE0IiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjxwYXRoIGQ9Ik0xLjgxODM2IDUuODgzNTRIMTQuMTgyIiBzdHJva2U9IiMxNDE0MTQiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPHBhdGggZD0iTTEwLjY4NjggOS4yMzYxOUgxMC42OTMzIiBzdHJva2U9IiMxNDE0MTQiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjxwYXRoIGQ9Ik0xMC42ODY4IDExLjQxODFIMTAuNjkzMyIgc3Ryb2tlPSIjMTQxNDE0IiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8cGF0aCBkPSJNNy45OTYzNiA5LjIzNjE5SDguMDAyODkiIHN0cm9rZT0iIzE0MTQxNCIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPHBhdGggZD0iTTcuOTk2MzYgMTEuNDE4MUg4LjAwMjg5IiBzdHJva2U9IiMxNDE0MTQiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjxwYXRoIGQ9Ik01LjMwNDk1IDkuMjM2NDRINS4zMTE0OSIgc3Ryb2tlPSIjMTQxNDE0IiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8cGF0aCBkPSJNNS4zMDQ5NSAxMS40MTgxSDUuMzExNDkiIHN0cm9rZT0iIzE0MTQxNCIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9nPg0KPGRlZnM+DQo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM3OTdfNDYzMDkiPg0KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPg0KPC9jbGlwUGF0aD4NCjwvZGVmcz4NCjwvc3ZnPg0K'/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNNS44MzM5OCAwLjgzMzMxM0wwLjgzMzk4NCA1LjgzMzMxTDUuODMzOTggMTAuODMzMyIgc3Ryb2tlPSIjNkI3MDgwIiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+DQo='/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMC44MzM5ODQgMTAuODMzM0w1LjgzMzk4IDUuODMzMzFMMC44MzM5ODQgMC44MzMzMTMiIHN0cm9rZT0iIzZCNzA4MCIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg0K'/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNNS44MzM5OCAwLjgzMzMxM0wwLjgzMzk4NCA1LjgzMzMxTDUuODMzOTggMTAuODMzMyIgc3Ryb2tlPSIjNkI3MDgwIiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+DQo='/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMC44MzM5ODQgMTAuODMzM0w1LjgzMzk4IDUuODMzMzFMMC44MzM5ODQgMC44MzMzMTMiIHN0cm9rZT0iIzZCNzA4MCIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg0K'/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNNS44MzM5OCAwLjgzMzMxM0wwLjgzMzk4NCA1LjgzMzMxTDUuODMzOTggMTAuODMzMyIgc3Ryb2tlPSIjNkI3MDgwIiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+DQo='/>\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='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMC44MzM5ODQgMTAuODMzM0w1LjgzMzk4IDUuODMzMzFMMC44MzM5ODQgMC44MzMzMTMiIHN0cm9rZT0iIzZCNzA4MCIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg0K'/>\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: [{
@@ -1909,8 +1891,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], isDisplayCrossIcon: [{
                 type: Input
-            }], assetsPath: [{
-                type: Input
             }], selected: [{
                 type: Output
             }], opened: [{
@@ -2217,7 +2197,7 @@ class ScheduledDatePickerComponent {
         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", "assetsPath", "selectedValue", "displayFormat"], outputs: ["selected", "opened", "closed"] }, { kind: "component", type: TimePickerComponent, selector: "brickclay-time-picker", inputs: ["value", "label", "placeholder", "position", "pickerId", "closePicker", "timeFormat", "showSeconds", "assetsPath"], outputs: ["timeChange", "pickerOpened", "pickerClosed"] }] });
+    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,
@@ -2334,6 +2314,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class CheckboxComponent {
+    // Mapping: sm=14px, md=16px, lg=18px, xl=20px
+    size = 'md';
+    label = '';
+    disabled = false;
+    changed = new EventEmitter();
+    isChecked = false;
+    onChange = (_) => { };
+    onTouched = () => { };
+    toggle() {
+        if (this.disabled)
+            return;
+        this.isChecked = !this.isChecked;
+        this.onChange(this.isChecked);
+        this.onTouched();
+        this.changed.emit(this.isChecked);
+    }
+    writeValue(value) {
+        this.isChecked = 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: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CheckboxComponent, isStandalone: true, selector: "brickclay-checkbox", inputs: { size: "size", label: "label", disabled: "disabled" }, outputs: { changed: "changed" }, 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  [class.cursor-not-allowed]=\"disabled\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n\r\n  <div\r\n    class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out\"\r\n    [ngClass]=\"[\r\n      size === 'sm' ? 'rounded-[3px]' : '',\r\n      size === 'md' ? 'rounded' : '',\r\n      size === 'lg' ? 'rounded' : '',\r\n      size === 'xl' ? 'rounded-md' : '',\r\n\r\n      size === 'sm' ? 'w-[14px] h-[14px]' : '',\r\n      size === 'md' ? 'w-[16px] h-[16px]' : '',\r\n      size === 'lg' ? 'w-[18px] h-[18px]' : '',\r\n      size === 'xl' ? 'w-[20px] h-[20px]' : '',\r\n\r\n      isChecked && !disabled ? 'bg-black border-black' : '',\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n      disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n\r\n      'group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2'\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    [class.w-[10.5px]]=\"size === 'sm'\"\r\n    [class.w-[12px]]=\"size === 'md'\"\r\n    [class.w-[13.5px]]=\"size === 'lg'\"\r\n    [class.w-[14px]]=\"size === 'xl'\"\r\n    >\r\n    <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n  </div>\r\n\r\n  <span\r\n    *ngIf=\"label\"\r\n    class=\"font-medium select-none\"\r\n    [class.text-xs]=\"size === 'sm'\"\r\n    [class.text-sm]=\"size !== 'sm'\"\r\n    [class.text-gray-900]=\"!disabled\"\r\n    [class.text-gray-400]=\"disabled\"\r\n  >\r\n    {{ label }}\r\n  </span>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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  [class.cursor-not-allowed]=\"disabled\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n\r\n  <div\r\n    class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out\"\r\n    [ngClass]=\"[\r\n      size === 'sm' ? 'rounded-[3px]' : '',\r\n      size === 'md' ? 'rounded' : '',\r\n      size === 'lg' ? 'rounded' : '',\r\n      size === 'xl' ? 'rounded-md' : '',\r\n\r\n      size === 'sm' ? 'w-[14px] h-[14px]' : '',\r\n      size === 'md' ? 'w-[16px] h-[16px]' : '',\r\n      size === 'lg' ? 'w-[18px] h-[18px]' : '',\r\n      size === 'xl' ? 'w-[20px] h-[20px]' : '',\r\n\r\n      isChecked && !disabled ? 'bg-black border-black' : '',\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n      disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n\r\n      'group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2'\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    [class.w-[10.5px]]=\"size === 'sm'\"\r\n    [class.w-[12px]]=\"size === 'md'\"\r\n    [class.w-[13.5px]]=\"size === 'lg'\"\r\n    [class.w-[14px]]=\"size === 'xl'\"\r\n    >\r\n    <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n  </div>\r\n\r\n  <span\r\n    *ngIf=\"label\"\r\n    class=\"font-medium select-none\"\r\n    [class.text-xs]=\"size === 'sm'\"\r\n    [class.text-sm]=\"size !== 'sm'\"\r\n    [class.text-gray-900]=\"!disabled\"\r\n    [class.text-gray-400]=\"disabled\"\r\n  >\r\n    {{ label }}\r\n  </span>\r\n</div>\r\n" }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -2342,5 +2379,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BrickclayLib, CalendarManagerService, CalendarModule, CustomCalendarComponent, ScheduledDatePickerComponent, TimePickerComponent, ToggleComponent };
+export { BrickclayLib, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, ScheduledDatePickerComponent, TimePickerComponent, ToggleComponent };
 //# sourceMappingURL=brickclay-org-ui.mjs.map