npm - @brickclay-org/ui - Versions diffs - 0.1.71 → 0.1.72 - Mend

@brickclay-org/ui 0.1.71 → 0.1.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/fesm2022/brickclay-org-ui.mjs +301 -19
package/fesm2022/brickclay-org-ui.mjs.map +1 -1
package/index.d.ts +127 -5
package/package.json +1 -1
package/src/assets/icons/alert-circle-red.svg +12 -0
package/src/lib/menu/menu.css +255 -0
package/src/lib/tabs/tabs.css +22 -1

package/fesm2022/brickclay-org-ui.mjs CHANGED Viewed

@@ -43,6 +43,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }] });
 class BkTimePicker {
+    renderer;
     required = false;
     /** @deprecated Prefer [(ngModel)] */
     value = null;
@@ -100,6 +101,40 @@ class BkTimePicker {
     activeSecond = 0;
     _modelValue = null;
     brickclayIcons = BrickclayIcons;
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    /* ---------------- appendToBody dropdown relocation ---------------- */
+    /**
+     * `appendToBody` anchors the dropdown with `position: fixed`, which only tracks the viewport when
+     * NO ancestor establishes a containing block (transform / filter / perspective / will-change /
+     * contain / backdrop-filter). Inside such an ancestor the fixed coordinates resolve against that
+     * ancestor instead and the dropdown drifts off-position. To be robust we physically move the panel
+     * to <body> while open (Angular keeps managing it by reference) and move it back before *ngIf
+     * tears it down. The panel carries a `tp-compact` self-class so its `default`-variation sizing —
+     * otherwise scoped under the `.time-input-group.default` ancestor it just left — still applies.
+     */
+    dropdownMovedToBody = false;
+    dropdownOriginalParent = null;
+    moveDropdownToBody() {
+        const el = this.tpDropdown?.nativeElement;
+        if (!el || this.dropdownMovedToBody)
+            return;
+        this.dropdownOriginalParent = el.parentElement;
+        this.renderer.appendChild(document.body, el);
+        this.dropdownMovedToBody = true;
+    }
+    /** Return the dropdown to its original slot so *ngIf can destroy it cleanly (safe to call twice). */
+    restoreDropdownFromBody() {
+        if (!this.dropdownMovedToBody)
+            return;
+        const el = this.tpDropdown?.nativeElement;
+        if (el && this.dropdownOriginalParent) {
+            this.renderer.appendChild(this.dropdownOriginalParent, el);
+        }
+        this.dropdownMovedToBody = false;
+        this.dropdownOriginalParent = null;
+    }
     /* ---------------- CVA ---------------- */
     writeValue(value) {
         if (!value) {
@@ -254,7 +289,13 @@ class BkTimePicker {
             if (this.autoPosition || this.appendToBody) {
                 this.attachViewportListeners();
                 // Measure once the dropdown is in the DOM, before it becomes visible to the user.
-                setTimeout(() => this.updatePosition(), 0);
+                setTimeout(() => {
+                    // Relocate to <body> first so no transformed/overflow ancestor can re-anchor the fixed
+                    // dropdown, then compute viewport coordinates.
+                    if (this.appendToBody)
+                        this.moveDropdownToBody();
+                    this.updatePosition();
+                }, 0);
             }
             setTimeout(() => this.scrollToSelectedTimes(), 100);
         }
@@ -266,6 +307,9 @@ class BkTimePicker {
     dismiss() {
         if (!this.showPicker)
             return;
+        // Put the dropdown back before showPicker=false so *ngIf removes it from the right parent on the
+        // next change-detection pass (avoids leaving an orphan node in <body>).
+        this.restoreDropdownFromBody();
         this.showPicker = false;
         this.detachViewportListeners();
         this.markAsTouched();
@@ -326,8 +370,14 @@ class BkTimePicker {
     }
     /* ---------------- Outside click ---------------- */
     onDocumentClick(event) {
+        if (!this.showPicker)
+            return;
         const target = event.target;
-        if (!target.closest('.time-picker-wrapper') && this.showPicker) {
+        // When appendToBody has relocated the dropdown to <body>, it is no longer inside
+        // .time-picker-wrapper, so also treat clicks within the dropdown itself as "inside".
+        const dropdownEl = this.tpDropdown?.nativeElement;
+        const insideDropdown = !!dropdownEl && (dropdownEl === target || dropdownEl.contains(target));
+        if (!target.closest('.time-picker-wrapper') && !insideDropdown) {
             this.dismiss();
         }
     }
@@ -407,14 +457,14 @@ class BkTimePicker {
                     bottom: `${window.innerHeight - rect.top + gap}px`,
                     left: `${left}px`,
                     right: 'auto',
-                    'z-index': '10000',
+                    'z-index': '100000',
                 }
                 : {
                     position: 'fixed',
                     top: `${rect.bottom + gap}px`,
                     left: `${left}px`,
                     right: 'auto',
-                    'z-index': '10000',
+                    'z-index': '100000',
                 };
         }
         else {
@@ -489,15 +539,18 @@ class BkTimePicker {
     }
     ngOnDestroy() {
         this.detachViewportListeners();
+        // If destroyed while open with the dropdown relocated to <body>, put it back so Angular's
+        // teardown removes it from the expected parent instead of leaving an orphan node in <body>.
+        this.restoreDropdownFromBody();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTimePicker, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTimePicker, isStandalone: true, selector: "bk-time-picker", inputs: { required: "required", value: "value", label: "label", placeholder: "placeholder", clearable: "clearable", position: "position", variation: "variation", pickerId: "pickerId", closePicker: "closePicker", timeFormat: "timeFormat", showSeconds: "showSeconds", autoPosition: "autoPosition", appendToBody: "appendToBody", disabled: "disabled" }, outputs: { change: "change", timeChange: "timeChange", pickerOpened: "pickerOpened", pickerClosed: "pickerClosed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkTimePicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "hourScrollEl", first: true, predicate: ["hourScroll"], descendants: true }, { propertyName: "minuteScrollEl", first: true, predicate: ["minuteScroll"], descendants: true }, { propertyName: "secondScrollEl", first: true, predicate: ["secondScroll"], descendants: true }, { propertyName: "tpWrapper", first: true, predicate: ["tpWrapper"], descendants: true }, { propertyName: "tpDropdown", first: true, predicate: ["tpDropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"time-picker-wrapper\">\r\n  <div class=\"time-input-group\" [ngClass]=\"variation\">\r\n    @if (label) {\r\n      <label>{{ label }}</label>\r\n    }\r\n    <div class=\"time-input-wrapper\" [class.has-value]=\"hasValue\" #tpWrapper>\r\n      <input\r\n        type=\"text\"\r\n        class=\"time-input\"\r\n        [value]=\"getDisplayValue()\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled ? true : null\"\r\n        readonly\r\n        (click)=\"!disabled && togglePicker()\"\r\n        (blur)=\"markAsTouched()\"\r\n      />\r\n      <span class=\"time-icon\">\r\n        <img alt=\"timer\" class=\"timer-icon\" [src]=\"brickclayIcons.timerIcon\" />\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"time-clear-btn\"\r\n        *ngIf=\"clearable && hasValue && !disabled\"\r\n        (click)=\"clear(); $event.stopPropagation()\"\r\n        title=\"Clear time\"\r\n        aria-label=\"Clear time\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"14\"\r\n          height=\"14\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n        </svg>\r\n      </button>\r\n      <div class=\"custom-time-picker-dropdown\" *ngIf=\"showPicker\">\r\n        <div\r\n          #tpDropdown\r\n          class=\"custom-time-picker\"\r\n          [ngStyle]=\"dropdownStyle\"\r\n          [class.tp-above]=\"placeAbove\"\r\n          [class.append-to-body]=\"appendToBody\"\r\n          [ngClass]=\"{\r\n            'left-position': resolvedPosition === 'left',\r\n            'right-position': resolvedPosition === 'right',\r\n            'format-24': timeFormat === 24,\r\n          }\"\r\n        >\r\n          <!-- Hours Column (finite list, no loop) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #hourScroll (scroll)=\"onHourScroll()\">\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                [class.active]=\"activeHour === h\"\r\n                (click)=\"onHourChange(h)\"\r\n              >\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 (finite list, no loop) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #minuteScroll (scroll)=\"onMinuteScroll()\">\r\n              <div\r\n                *ngFor=\"let m of minutes\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === m\"\r\n                [class.active]=\"activeMinute === m\"\r\n                (click)=\"onMinuteChange(m)\"\r\n              >\r\n                {{ m.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          @if (showSeconds) {\r\n            <span class=\"time-separator\">:</span>\r\n            <!-- Seconds Column (finite list, no loop) -->\r\n            <div class=\"time-column\">\r\n              <div class=\"time-scroll\" #secondScroll (scroll)=\"onSecondScroll()\">\r\n                <div\r\n                  *ngFor=\"let s of seconds\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentSecond === s\"\r\n                  [class.active]=\"activeSecond === s\"\r\n                  (click)=\"onSecondChange(s)\"\r\n                >\r\n                  {{ s.toString().padStart(2, '0') }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n          <!-- AM/PM Column (only in 12-hour format) -->\r\n          @if (timeFormat === 12) {\r\n            <span class=\"time-separator\">:</span>\r\n            <div class=\"time-column ampm-column\">\r\n              <div class=\"time-scroll\">\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                >\r\n                  {{ ap }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\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-wrapper.has-value .time-input{padding-right:56px}.time-input{border:1px solid #d1d5db;border-radius:4px;font-family:Inter,sans-serif;color:#707280;background:#fff;transition:all .2s;width:100%;box-sizing:border-box;cursor:pointer}.time-input::placeholder{color:#6b7080}.time-input-group.default .time-input{font-size:12px;padding:6px 40px 5px 12px}.time-input-group.lg .time-input{font-size:14px;line-height:18px;padding:10px 40px 10px 12px}.time-input:focus{outline:none;border-color:#111827}.time-input:hover{border-color:#9ca3af}.time-clear-btn{position:absolute;right:26px;background:none;border:none;font-size:18px;color:#9ca3af;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1}.time-clear-btn:hover{color:#374151}.time-input-group.default .time-clear-btn{top:5px}.time-input-group.lg .time-clear-btn{top:10px}.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;align-items:flex-start;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.format-24{width:124px}.custom-time-picker.left-position{left:0}.custom-time-picker.right-position{right:0}.custom-time-picker.tp-above:not(.append-to-body){top:auto;bottom:calc(100% + 4px)}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:96px;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y proximity;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;scroll-snap-align:center;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}.time-item.active:not(.selected){background:#eef2ff;color:#111827;font-weight:500}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}.time-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.time-input-group.default .custom-time-picker{width:fit-content;gap:6px;padding:8px}.time-input-group.default .custom-time-picker.format-24{width:fit-content}.time-input-group.default .time-scroll{max-height:84px}.time-input-group.default .time-item{min-width:26px;width:26px;height:28px;min-height:28px;font-size:12px}.time-input-group.default .ampm-column .time-item{min-width:26px;width:26px}.time-input-group.default .time-separator{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], viewQueries: [{ propertyName: "hourScrollEl", first: true, predicate: ["hourScroll"], descendants: true }, { propertyName: "minuteScrollEl", first: true, predicate: ["minuteScroll"], descendants: true }, { propertyName: "secondScrollEl", first: true, predicate: ["secondScroll"], descendants: true }, { propertyName: "tpWrapper", first: true, predicate: ["tpWrapper"], descendants: true }, { propertyName: "tpDropdown", first: true, predicate: ["tpDropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"time-picker-wrapper\">\r\n  <div class=\"time-input-group\" [ngClass]=\"variation\">\r\n    @if (label) {\r\n      <label>{{ label }}</label>\r\n    }\r\n    <div class=\"time-input-wrapper\" [class.has-value]=\"hasValue\" #tpWrapper>\r\n      <input\r\n        type=\"text\"\r\n        class=\"time-input\"\r\n        [value]=\"getDisplayValue()\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled ? true : null\"\r\n        readonly\r\n        (click)=\"!disabled && togglePicker()\"\r\n        (blur)=\"markAsTouched()\"\r\n      />\r\n      <span class=\"time-icon\">\r\n        <img alt=\"timer\" class=\"timer-icon\" [src]=\"brickclayIcons.timerIcon\" />\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"time-clear-btn\"\r\n        *ngIf=\"clearable && hasValue && !disabled\"\r\n        (click)=\"clear(); $event.stopPropagation()\"\r\n        title=\"Clear time\"\r\n        aria-label=\"Clear time\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"14\"\r\n          height=\"14\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n        </svg>\r\n      </button>\r\n      <div class=\"custom-time-picker-dropdown\" *ngIf=\"showPicker\">\r\n        <div\r\n          #tpDropdown\r\n          class=\"custom-time-picker\"\r\n          [ngStyle]=\"dropdownStyle\"\r\n          [class.tp-above]=\"placeAbove\"\r\n          [class.append-to-body]=\"appendToBody\"\r\n          [ngClass]=\"{\r\n            'left-position': resolvedPosition === 'left',\r\n            'right-position': resolvedPosition === 'right',\r\n            'format-24': timeFormat === 24,\r\n            'tp-compact': variation === 'default',\r\n          }\"\r\n        >\r\n          <!-- Hours Column (finite list, no loop) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #hourScroll (scroll)=\"onHourScroll()\">\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                [class.active]=\"activeHour === h\"\r\n                (click)=\"onHourChange(h)\"\r\n              >\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 (finite list, no loop) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #minuteScroll (scroll)=\"onMinuteScroll()\">\r\n              <div\r\n                *ngFor=\"let m of minutes\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === m\"\r\n                [class.active]=\"activeMinute === m\"\r\n                (click)=\"onMinuteChange(m)\"\r\n              >\r\n                {{ m.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          @if (showSeconds) {\r\n            <span class=\"time-separator\">:</span>\r\n            <!-- Seconds Column (finite list, no loop) -->\r\n            <div class=\"time-column\">\r\n              <div class=\"time-scroll\" #secondScroll (scroll)=\"onSecondScroll()\">\r\n                <div\r\n                  *ngFor=\"let s of seconds\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentSecond === s\"\r\n                  [class.active]=\"activeSecond === s\"\r\n                  (click)=\"onSecondChange(s)\"\r\n                >\r\n                  {{ s.toString().padStart(2, '0') }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n          <!-- AM/PM Column (only in 12-hour format) -->\r\n          @if (timeFormat === 12) {\r\n            <span class=\"time-separator\">:</span>\r\n            <div class=\"time-column ampm-column\">\r\n              <div class=\"time-scroll\">\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                >\r\n                  {{ ap }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\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-wrapper.has-value .time-input{padding-right:56px}.time-input{border:1px solid #d1d5db;border-radius:4px;font-family:Inter,sans-serif;color:#707280;background:#fff;transition:all .2s;width:100%;box-sizing:border-box;cursor:pointer}.time-input::placeholder{color:#6b7080}.time-input-group.default .time-input{font-size:12px;padding:6px 40px 5px 12px}.time-input-group.lg .time-input{font-size:14px;line-height:18px;padding:10px 40px 10px 12px}.time-input:focus{outline:none;border-color:#111827}.time-input:hover{border-color:#9ca3af}.time-clear-btn{position:absolute;right:26px;background:none;border:none;font-size:18px;color:#9ca3af;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1}.time-clear-btn:hover{color:#374151}.time-input-group.default .time-clear-btn{top:5px}.time-input-group.lg .time-clear-btn{top:10px}.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;align-items:flex-start;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.format-24{width:124px}.custom-time-picker.left-position{left:0}.custom-time-picker.right-position{right:0}.custom-time-picker.tp-above:not(.append-to-body){top:auto;bottom:calc(100% + 4px)}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:96px;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y proximity;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;scroll-snap-align:center;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}.time-item.active:not(.selected){background:#eef2ff;color:#111827;font-weight:500}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}.time-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.time-input-group.default .custom-time-picker{width:fit-content;gap:6px;padding:8px}.time-input-group.default .custom-time-picker.format-24{width:fit-content}.time-input-group.default .time-scroll{max-height:84px}.time-input-group.default .time-item{min-width:26px;width:26px;height:28px;min-height:28px;font-size:12px}.time-input-group.default .ampm-column .time-item{min-width:26px;width:26px}.time-input-group.default .time-separator{font-size:14px}.custom-time-picker.append-to-body{font-family:Inter,sans-serif}.custom-time-picker.tp-compact{width:fit-content;gap:6px;padding:8px}.custom-time-picker.tp-compact.format-24{width:fit-content}.custom-time-picker.tp-compact .time-scroll{max-height:84px}.custom-time-picker.tp-compact .time-item{min-width:26px;width:26px;height:28px;min-height:28px;font-size:12px}.custom-time-picker.tp-compact .ampm-column .time-item{min-width:26px;width:26px}.custom-time-picker.tp-compact .time-separator{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTimePicker, decorators: [{
             type: Component,
@@ -507,8 +560,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkTimePicker),
                             multi: true,
                         },
-                    ], template: "<div class=\"time-picker-wrapper\">\r\n  <div class=\"time-input-group\" [ngClass]=\"variation\">\r\n    @if (label) {\r\n      <label>{{ label }}</label>\r\n    }\r\n    <div class=\"time-input-wrapper\" [class.has-value]=\"hasValue\" #tpWrapper>\r\n      <input\r\n        type=\"text\"\r\n        class=\"time-input\"\r\n        [value]=\"getDisplayValue()\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled ? true : null\"\r\n        readonly\r\n        (click)=\"!disabled && togglePicker()\"\r\n        (blur)=\"markAsTouched()\"\r\n      />\r\n      <span class=\"time-icon\">\r\n        <img alt=\"timer\" class=\"timer-icon\" [src]=\"brickclayIcons.timerIcon\" />\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"time-clear-btn\"\r\n        *ngIf=\"clearable && hasValue && !disabled\"\r\n        (click)=\"clear(); $event.stopPropagation()\"\r\n        title=\"Clear time\"\r\n        aria-label=\"Clear time\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"14\"\r\n          height=\"14\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n        </svg>\r\n      </button>\r\n      <div class=\"custom-time-picker-dropdown\" *ngIf=\"showPicker\">\r\n        <div\r\n          #tpDropdown\r\n          class=\"custom-time-picker\"\r\n          [ngStyle]=\"dropdownStyle\"\r\n          [class.tp-above]=\"placeAbove\"\r\n          [class.append-to-body]=\"appendToBody\"\r\n          [ngClass]=\"{\r\n            'left-position': resolvedPosition === 'left',\r\n            'right-position': resolvedPosition === 'right',\r\n            'format-24': timeFormat === 24,\r\n          }\"\r\n        >\r\n          <!-- Hours Column (finite list, no loop) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #hourScroll (scroll)=\"onHourScroll()\">\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                [class.active]=\"activeHour === h\"\r\n                (click)=\"onHourChange(h)\"\r\n              >\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 (finite list, no loop) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #minuteScroll (scroll)=\"onMinuteScroll()\">\r\n              <div\r\n                *ngFor=\"let m of minutes\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === m\"\r\n                [class.active]=\"activeMinute === m\"\r\n                (click)=\"onMinuteChange(m)\"\r\n              >\r\n                {{ m.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          @if (showSeconds) {\r\n            <span class=\"time-separator\">:</span>\r\n            <!-- Seconds Column (finite list, no loop) -->\r\n            <div class=\"time-column\">\r\n              <div class=\"time-scroll\" #secondScroll (scroll)=\"onSecondScroll()\">\r\n                <div\r\n                  *ngFor=\"let s of seconds\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentSecond === s\"\r\n                  [class.active]=\"activeSecond === s\"\r\n                  (click)=\"onSecondChange(s)\"\r\n                >\r\n                  {{ s.toString().padStart(2, '0') }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n          <!-- AM/PM Column (only in 12-hour format) -->\r\n          @if (timeFormat === 12) {\r\n            <span class=\"time-separator\">:</span>\r\n            <div class=\"time-column ampm-column\">\r\n              <div class=\"time-scroll\">\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                >\r\n                  {{ ap }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\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-wrapper.has-value .time-input{padding-right:56px}.time-input{border:1px solid #d1d5db;border-radius:4px;font-family:Inter,sans-serif;color:#707280;background:#fff;transition:all .2s;width:100%;box-sizing:border-box;cursor:pointer}.time-input::placeholder{color:#6b7080}.time-input-group.default .time-input{font-size:12px;padding:6px 40px 5px 12px}.time-input-group.lg .time-input{font-size:14px;line-height:18px;padding:10px 40px 10px 12px}.time-input:focus{outline:none;border-color:#111827}.time-input:hover{border-color:#9ca3af}.time-clear-btn{position:absolute;right:26px;background:none;border:none;font-size:18px;color:#9ca3af;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1}.time-clear-btn:hover{color:#374151}.time-input-group.default .time-clear-btn{top:5px}.time-input-group.lg .time-clear-btn{top:10px}.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;align-items:flex-start;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.format-24{width:124px}.custom-time-picker.left-position{left:0}.custom-time-picker.right-position{right:0}.custom-time-picker.tp-above:not(.append-to-body){top:auto;bottom:calc(100% + 4px)}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:96px;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y proximity;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;scroll-snap-align:center;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}.time-item.active:not(.selected){background:#eef2ff;color:#111827;font-weight:500}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}.time-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.time-input-group.default .custom-time-picker{width:fit-content;gap:6px;padding:8px}.time-input-group.default .custom-time-picker.format-24{width:fit-content}.time-input-group.default .time-scroll{max-height:84px}.time-input-group.default .time-item{min-width:26px;width:26px;height:28px;min-height:28px;font-size:12px}.time-input-group.default .ampm-column .time-item{min-width:26px;width:26px}.time-input-group.default .time-separator{font-size:14px}\n"] }]
-        }], propDecorators: { required: [{
+                    ], template: "<div class=\"time-picker-wrapper\">\r\n  <div class=\"time-input-group\" [ngClass]=\"variation\">\r\n    @if (label) {\r\n      <label>{{ label }}</label>\r\n    }\r\n    <div class=\"time-input-wrapper\" [class.has-value]=\"hasValue\" #tpWrapper>\r\n      <input\r\n        type=\"text\"\r\n        class=\"time-input\"\r\n        [value]=\"getDisplayValue()\"\r\n        [placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled ? true : null\"\r\n        readonly\r\n        (click)=\"!disabled && togglePicker()\"\r\n        (blur)=\"markAsTouched()\"\r\n      />\r\n      <span class=\"time-icon\">\r\n        <img alt=\"timer\" class=\"timer-icon\" [src]=\"brickclayIcons.timerIcon\" />\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"time-clear-btn\"\r\n        *ngIf=\"clearable && hasValue && !disabled\"\r\n        (click)=\"clear(); $event.stopPropagation()\"\r\n        title=\"Clear time\"\r\n        aria-label=\"Clear time\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"14\"\r\n          height=\"14\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n        </svg>\r\n      </button>\r\n      <div class=\"custom-time-picker-dropdown\" *ngIf=\"showPicker\">\r\n        <div\r\n          #tpDropdown\r\n          class=\"custom-time-picker\"\r\n          [ngStyle]=\"dropdownStyle\"\r\n          [class.tp-above]=\"placeAbove\"\r\n          [class.append-to-body]=\"appendToBody\"\r\n          [ngClass]=\"{\r\n            'left-position': resolvedPosition === 'left',\r\n            'right-position': resolvedPosition === 'right',\r\n            'format-24': timeFormat === 24,\r\n            'tp-compact': variation === 'default',\r\n          }\"\r\n        >\r\n          <!-- Hours Column (finite list, no loop) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #hourScroll (scroll)=\"onHourScroll()\">\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                [class.active]=\"activeHour === h\"\r\n                (click)=\"onHourChange(h)\"\r\n              >\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 (finite list, no loop) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #minuteScroll (scroll)=\"onMinuteScroll()\">\r\n              <div\r\n                *ngFor=\"let m of minutes\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === m\"\r\n                [class.active]=\"activeMinute === m\"\r\n                (click)=\"onMinuteChange(m)\"\r\n              >\r\n                {{ m.toString().padStart(2, '0') }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          @if (showSeconds) {\r\n            <span class=\"time-separator\">:</span>\r\n            <!-- Seconds Column (finite list, no loop) -->\r\n            <div class=\"time-column\">\r\n              <div class=\"time-scroll\" #secondScroll (scroll)=\"onSecondScroll()\">\r\n                <div\r\n                  *ngFor=\"let s of seconds\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentSecond === s\"\r\n                  [class.active]=\"activeSecond === s\"\r\n                  (click)=\"onSecondChange(s)\"\r\n                >\r\n                  {{ s.toString().padStart(2, '0') }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n          <!-- AM/PM Column (only in 12-hour format) -->\r\n          @if (timeFormat === 12) {\r\n            <span class=\"time-separator\">:</span>\r\n            <div class=\"time-column ampm-column\">\r\n              <div class=\"time-scroll\">\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                >\r\n                  {{ ap }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\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-wrapper.has-value .time-input{padding-right:56px}.time-input{border:1px solid #d1d5db;border-radius:4px;font-family:Inter,sans-serif;color:#707280;background:#fff;transition:all .2s;width:100%;box-sizing:border-box;cursor:pointer}.time-input::placeholder{color:#6b7080}.time-input-group.default .time-input{font-size:12px;padding:6px 40px 5px 12px}.time-input-group.lg .time-input{font-size:14px;line-height:18px;padding:10px 40px 10px 12px}.time-input:focus{outline:none;border-color:#111827}.time-input:hover{border-color:#9ca3af}.time-clear-btn{position:absolute;right:26px;background:none;border:none;font-size:18px;color:#9ca3af;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1}.time-clear-btn:hover{color:#374151}.time-input-group.default .time-clear-btn{top:5px}.time-input-group.lg .time-clear-btn{top:10px}.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;align-items:flex-start;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.format-24{width:124px}.custom-time-picker.left-position{left:0}.custom-time-picker.right-position{right:0}.custom-time-picker.tp-above:not(.append-to-body){top:auto;bottom:calc(100% + 4px)}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:96px;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y proximity;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;scroll-snap-align:center;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}.time-item.active:not(.selected){background:#eef2ff;color:#111827;font-weight:500}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}.time-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.time-input-group.default .custom-time-picker{width:fit-content;gap:6px;padding:8px}.time-input-group.default .custom-time-picker.format-24{width:fit-content}.time-input-group.default .time-scroll{max-height:84px}.time-input-group.default .time-item{min-width:26px;width:26px;height:28px;min-height:28px;font-size:12px}.time-input-group.default .ampm-column .time-item{min-width:26px;width:26px}.time-input-group.default .time-separator{font-size:14px}.custom-time-picker.append-to-body{font-family:Inter,sans-serif}.custom-time-picker.tp-compact{width:fit-content;gap:6px;padding:8px}.custom-time-picker.tp-compact.format-24{width:fit-content}.custom-time-picker.tp-compact .time-scroll{max-height:84px}.custom-time-picker.tp-compact .time-item{min-width:26px;width:26px;height:28px;min-height:28px;font-size:12px}.custom-time-picker.tp-compact .ampm-column .time-item{min-width:26px;width:26px}.custom-time-picker.tp-compact .time-separator{font-size:14px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { required: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -686,6 +739,7 @@ class CalendarSelection {
 }
 class BkCustomCalendar {
     calendarManager;
+    renderer;
     // Basic Options
     enableTimepicker = false;
     autoApply = false;
@@ -798,8 +852,52 @@ class BkCustomCalendar {
     unregisterFn;
     closeAllSubscription;
     closeFn;
-    constructor(calendarManager) {
+    constructor(calendarManager, renderer) {
         this.calendarManager = calendarManager;
+        this.renderer = renderer;
+    }
+    /**
+     * appendToBody popup relocation.
+     *
+     * `appendToBody` uses `position: fixed`, which only anchors to the viewport when NO ancestor
+     * establishes a containing block (transform / filter / perspective / will-change / contain /
+     * backdrop-filter). Consumers frequently place the calendar inside such an ancestor (an animated
+     * panel, a CSS-transformed modal, etc.), which silently re-anchors the fixed popup and pushes it
+     * off-position. To be robust everywhere we physically move the popup node to <body> while it is
+     * open, then move it back before Angular's *ngIf tears it down. Angular keeps managing the node by
+     * reference after the move, so its event bindings, change detection, and emulated-encapsulation
+     * styles all continue to work.
+     */
+    popupMovedToBody = false;
+    popupOriginalParent = null;
+    popupOriginalNextSibling = null;
+    movePopupToBody() {
+        const el = this.calendarPopupRef?.nativeElement;
+        if (!el || this.popupMovedToBody)
+            return;
+        this.popupOriginalParent = el.parentElement;
+        this.popupOriginalNextSibling = el.nextSibling;
+        this.renderer.appendChild(document.body, el);
+        this.popupMovedToBody = true;
+    }
+    /** Return the popup to its original DOM slot so *ngIf can destroy it cleanly (safe to call twice). */
+    restorePopupFromBody() {
+        if (!this.popupMovedToBody)
+            return;
+        const el = this.calendarPopupRef?.nativeElement;
+        const parent = this.popupOriginalParent;
+        if (el && parent) {
+            const ref = this.popupOriginalNextSibling;
+            if (ref && ref.parentNode === parent) {
+                this.renderer.insertBefore(parent, el, ref);
+            }
+            else {
+                this.renderer.appendChild(parent, el);
+            }
+        }
+        this.popupMovedToBody = false;
+        this.popupOriginalParent = null;
+        this.popupOriginalNextSibling = null;
     }
     /** Weekday headers; falls back to Mon–Sun if the input is not length 7. */
     get resolvedWeekDayLabels() {
@@ -837,6 +935,9 @@ class BkCustomCalendar {
             return;
         this.detachViewportListeners();
         this.revertSingleDateDraftIfNeeded();
+        // Put the popup back in its original slot BEFORE show=false so *ngIf removes it from the right
+        // parent on the next change-detection pass (avoids leaving an orphan node in <body>).
+        this.restorePopupFromBody();
         this.show = false;
         this.onTouched();
         this.closed.emit();
@@ -1070,8 +1171,14 @@ class BkCustomCalendar {
         if (this.inline) {
             return;
         }
+        if (!this.show)
+            return;
         const target = event.target;
-        if (this.show && !target.closest('.calendar-container')) {
+        // When appendToBody has relocated the popup to <body>, it is no longer a descendant of
+        // .calendar-container, so also treat clicks within the popup element itself as "inside".
+        const popupEl = this.calendarPopupRef?.nativeElement;
+        const insidePopup = !!popupEl && (popupEl === target || popupEl.contains(target));
+        if (!target.closest('.calendar-container') && !insidePopup) {
             this.close();
         }
     }
@@ -1228,6 +1335,9 @@ class BkCustomCalendar {
     ngOnDestroy() {
         // Ensure global scroll/resize listeners never outlive the component
         this.detachViewportListeners();
+        // If destroyed while open with the popup relocated to <body>, put it back so Angular's teardown
+        // removes it from the expected parent instead of leaving an orphan node in <body>.
+        this.restorePopupFromBody();
         // Unregister this calendar instance
         if (this.unregisterFn) {
             this.unregisterFn();
@@ -1315,6 +1425,9 @@ class BkCustomCalendar {
                 this.initKeyboardFocus();
                 this.calendarPopupRef?.nativeElement?.focus({ preventScroll: true });
                 if (this.appendToBody && this.inputWrapper?.nativeElement) {
+                    // Move the popup out to <body> first so any transformed/overflow ancestor can no longer
+                    // re-anchor or clip its fixed positioning, then compute viewport coordinates.
+                    this.movePopupToBody();
                     this.updatePosition();
                 }
                 else if (!this.inline) {
@@ -2931,7 +3044,7 @@ class BkCustomCalendar {
         const dd = date.getDate().toString().padStart(2, '0');
         return `${yyyy}-${mm}-${dd}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCustomCalendar, deps: [{ token: BkCalendarManagerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCustomCalendar, deps: [{ token: BkCalendarManagerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkCustomCalendar, isStandalone: true, selector: "bk-custom-calendar", inputs: { enableTimepicker: "enableTimepicker", autoApply: "autoApply", closeOnAutoApply: "closeOnAutoApply", showCancel: "showCancel", linkedCalendars: "linkedCalendars", singleDatePicker: "singleDatePicker", showWeekNumbers: "showWeekNumbers", showISOWeekNumbers: "showISOWeekNumbers", customRangeDirection: "customRangeDirection", lockStartDate: "lockStartDate", position: "position", popupPosition: "popupPosition", drop: "drop", dualCalendar: "dualCalendar", showRanges: "showRanges", timeFormat: "timeFormat", clearableTime: "clearableTime", enableSeconds: "enableSeconds", customRanges: "customRanges", weekDayLabels: "weekDayLabels", multiDateSelection: "multiDateSelection", maxDate: "maxDate", minDate: "minDate", placeholder: "placeholder", opens: "opens", inline: "inline", compact: "compact", autoPosition: "autoPosition", appendToBody: "appendToBody", isDisplayCrossIcon: "isDisplayCrossIcon", hasError: "hasError", errorMessage: "errorMessage", showCancelApply: "showCancelApply", selectedValue: "selectedValue", displayFormat: "displayFormat", required: "required", rangeOrder: "rangeOrder" }, outputs: { selected: "selected", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2943,7 +3056,7 @@ class BkCustomCalendar {
                 useExisting: forwardRef(() => BkCustomCalendar),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }, { propertyName: "calendarPopupRef", first: true, predicate: ["calendarPopup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\" [class.disabled]=\"disabled\">\r\n  <!-- Input field -->\r\n  <div #inputWrapper class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"!disabled && toggle()\"\r\n      (keydown.enter)=\"$event.preventDefault()\"\r\n      (blur)=\"markAsTouched()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\r\n      [attr.disabled]=\"disabled ? true : null\"\r\n      [class.hasError]=\"hasError\"\r\n      class=\"calendar-input\">\r\n      <!-- *ngIf=\"!getDisplayValue()\" -->\r\n\r\n    <span class=\"calendar-icon\" >\r\n      <img alt=\"calendar\" class=\"calendar-icon-img\" [src]='brickclayIcons.calenderIcon'/>\r\n    </span>\r\n    <button type=\"button\" class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon && !disabled\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div #calendarPopup\r\n       class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [class.append-to-body]=\"appendToBody && !inline\"\r\n       [style.position]=\"appendToBody && !inline ? 'fixed' : null\"\r\n       [style.top]=\"appendToBody && !inline && !popupPlacementAbove ? dropdownStyle.top : null\"\r\n       [style.bottom]=\"appendToBody && !inline && popupPlacementAbove ? dropdownStyle.bottom : null\"\r\n       [style.left]=\"appendToBody && !inline ? dropdownStyle.left : null\"\r\n       tabindex=\"0\"\r\n       (keydown)=\"onCalendarPopupKeydown($event)\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && !appendToBody && opens === 'right',\r\n         'position-center': !inline && !appendToBody && opens === 'center',\r\n         'drop-up': !inline && popupPlacementAbove,\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar,\r\n         'compact': compact\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\" role=\"listbox\" aria-label=\"Date ranges\">\r\n      <button\r\n        type=\"button\"\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        (keydown)=\"onRangeButtonKeydown($event, rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"activeRange === rangeKey\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1 border-l border-[#eee]' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(month) + ' ' + year\">\r\n        <thead>\r\n          <tr role=\"row\">\r\n            <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\" role=\"row\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\r\n              role=\"gridcell\"\r\n              (click)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && selectDate(dayObj.day)\"\r\n              (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n              (mouseleave)=\"onDateLeave()\"\r\n              [class.active]=\"dayObj.currentMonth && isDateSelected(year, month, dayObj.day)\"\r\n              [class.in-range]=\"dayObj.currentMonth && isDateInRange(year, month, dayObj.day)\"\r\n              [class.other-month]=\"!dayObj.currentMonth\"\r\n              [class.disabled]=\"isDateDisabled(year, month, dayObj.day)\"\r\n              [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(year, month, dayObj.day)\"\r\n              [class.today]=\"dayObj.currentMonth && isToday(year, month, dayObj.day)\"\r\n              [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(year, month, dayObj.day)\"\r\n              class=\"calendar-day\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [variation]=\"compact ? 'default' : 'lg'\"\r\n            [timeFormat]=\"timeFormat\"\r\n            [clearable]=\"clearableTime\"\r\n            [label]=\"''\"\r\n            [ngModel]=\"singleTimeModel\"\r\n            (ngModelChange)=\"onSingleTimePickerChange($event); singleTimeModel=$event\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(leftMonth) + ' ' + leftYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of leftCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && selectDate(dayObj.day, false)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(leftYear, leftMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(leftYear, leftMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(leftYear, leftMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(leftYear, leftMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(leftYear, leftMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(leftYear, leftMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"startTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, true); startTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(rightMonth) + ' ' + rightYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of rightCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && selectDate(dayObj.day, true)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && onDateHover(dayObj.day, true)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(rightYear, rightMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(rightYear, rightMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(rightYear, rightMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(rightYear, rightMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(rightYear, rightMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(rightYear, rightMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"endTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, false); endTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline && showCancelApply\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\" [disabled]=\"disabled || isDualRangeApplyBlocked\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n@if (hasError){\r\n<p class=\"calender-error\">{{errorMessage}}</p>\r\n}\r\n", styles: [".calendar-container,.calendar-container *{font-family:Inter,sans-serif!important}.calendar-container{position:relative;display:inline-block;width:100%}.input-wrapper{position:relative;display:flex;align-items:center}.calendar-input{width:100%;padding:9px 14px 9px 40px;border:1px solid #ddd;border-radius:8px;font-size:14px;cursor:pointer;background:#fff;transition:all .2s}.calendar-input:hover{border-color:#999}.calendar-input:focus{outline:none;border-color:#999}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{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:focus-visible{outline:0!important}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.drop-up{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}.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%}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-apply{background:#000;color:#fff}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px;max-height:300px;overflow:auto}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.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}.calendar-input.calendar-input-has-error{@apply border-[#d11e14];}.calendar-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.btn-apply:disabled{cursor:not-allowed!important;opacity:.7}.calendar-day.calendar-day-keyboard-focus:not(.disabled):not(.other-month){outline:0px solid #000}.calendar-popup.compact{width:240px}.calendar-popup.compact.has-ranges{width:380px}.calendar-popup.compact.dual-calendar-mode{width:480px}.calendar-popup.compact.dual-calendar-mode.has-ranges{width:600px}.calendar-popup.compact .header{padding:8px 0}.calendar-popup.compact .month-year{font-size:13px}.calendar-popup.compact .nav-btn{height:24px;width:24px;padding:6px 8px}.calendar-popup.compact .calendar-wrapper,.calendar-popup.compact .calendar-left,.calendar-popup.compact .calendar-right{padding:0 8px 8px}.calendar-popup.compact .weekday-header{font-size:11px;padding:4px 2px}.calendar-popup.compact .calendar-day{font-size:12px;padding:5px 2px;line-height:1.3}.calendar-popup.compact .ranges{min-width:120px;gap:2px;margin-bottom:8px;padding-bottom:8px}.calendar-popup.compact.has-ranges .ranges{padding:6px}.calendar-popup.compact .range-btn{font-size:12px;padding:5px 8px}.calendar-popup.compact .timepicker-section{margin-top:8px;padding-top:8px}.calendar-popup.compact .timepicker-label{font-size:11px}.calendar-popup.compact .footer{padding:8px;gap:6px}.calendar-popup.compact .btn-cancel,.calendar-popup.compact .btn-apply{font-size:11px;padding:6px 12px;min-width:64px}\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: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkTimePicker, selector: "bk-time-picker", inputs: ["required", "value", "label", "placeholder", "clearable", "position", "variation", "pickerId", "closePicker", "timeFormat", "showSeconds", "autoPosition", "appendToBody", "disabled"], outputs: ["change", "timeChange", "pickerOpened", "pickerClosed"] }] });
+        ], viewQueries: [{ propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }, { propertyName: "calendarPopupRef", first: true, predicate: ["calendarPopup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\" [class.disabled]=\"disabled\">\r\n  <!-- Input field -->\r\n  <div #inputWrapper class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"!disabled && toggle()\"\r\n      (keydown.enter)=\"$event.preventDefault()\"\r\n      (blur)=\"markAsTouched()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\r\n      [attr.disabled]=\"disabled ? true : null\"\r\n      [class.hasError]=\"hasError\"\r\n      class=\"calendar-input\">\r\n      <!-- *ngIf=\"!getDisplayValue()\" -->\r\n\r\n    <span class=\"calendar-icon\" >\r\n      <img alt=\"calendar\" class=\"calendar-icon-img\" [src]='brickclayIcons.calenderIcon'/>\r\n    </span>\r\n    <button type=\"button\" class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon && !disabled\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div #calendarPopup\r\n       class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [class.append-to-body]=\"appendToBody && !inline\"\r\n       [style.position]=\"appendToBody && !inline ? 'fixed' : null\"\r\n       [style.top]=\"appendToBody && !inline && !popupPlacementAbove ? dropdownStyle.top : null\"\r\n       [style.bottom]=\"appendToBody && !inline && popupPlacementAbove ? dropdownStyle.bottom : null\"\r\n       [style.left]=\"appendToBody && !inline ? dropdownStyle.left : null\"\r\n       tabindex=\"0\"\r\n       (keydown)=\"onCalendarPopupKeydown($event)\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && !appendToBody && opens === 'right',\r\n         'position-center': !inline && !appendToBody && opens === 'center',\r\n         'drop-up': !inline && popupPlacementAbove,\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar,\r\n         'compact': compact\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\" role=\"listbox\" aria-label=\"Date ranges\">\r\n      <button\r\n        type=\"button\"\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        (keydown)=\"onRangeButtonKeydown($event, rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"activeRange === rangeKey\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1 border-l border-[#eee]' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(month) + ' ' + year\">\r\n        <thead>\r\n          <tr role=\"row\">\r\n            <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\" role=\"row\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\r\n              role=\"gridcell\"\r\n              (click)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && selectDate(dayObj.day)\"\r\n              (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n              (mouseleave)=\"onDateLeave()\"\r\n              [class.active]=\"dayObj.currentMonth && isDateSelected(year, month, dayObj.day)\"\r\n              [class.in-range]=\"dayObj.currentMonth && isDateInRange(year, month, dayObj.day)\"\r\n              [class.other-month]=\"!dayObj.currentMonth\"\r\n              [class.disabled]=\"isDateDisabled(year, month, dayObj.day)\"\r\n              [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(year, month, dayObj.day)\"\r\n              [class.today]=\"dayObj.currentMonth && isToday(year, month, dayObj.day)\"\r\n              [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(year, month, dayObj.day)\"\r\n              class=\"calendar-day\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [variation]=\"compact ? 'default' : 'lg'\"\r\n            [timeFormat]=\"timeFormat\"\r\n            [clearable]=\"clearableTime\"\r\n            [label]=\"''\"\r\n            [ngModel]=\"singleTimeModel\"\r\n            (ngModelChange)=\"onSingleTimePickerChange($event); singleTimeModel=$event\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(leftMonth) + ' ' + leftYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of leftCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && selectDate(dayObj.day, false)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(leftYear, leftMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(leftYear, leftMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(leftYear, leftMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(leftYear, leftMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(leftYear, leftMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(leftYear, leftMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"startTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, true); startTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(rightMonth) + ' ' + rightYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of rightCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && selectDate(dayObj.day, true)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && onDateHover(dayObj.day, true)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(rightYear, rightMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(rightYear, rightMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(rightYear, rightMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(rightYear, rightMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(rightYear, rightMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(rightYear, rightMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"endTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, false); endTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline && showCancelApply\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\" [disabled]=\"disabled || isDualRangeApplyBlocked\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n@if (hasError){\r\n<p class=\"calender-error\">{{errorMessage}}</p>\r\n}\r\n", styles: [".calendar-container,.calendar-container *{font-family:Inter,sans-serif!important}.calendar-container{position:relative;display:inline-block;width:100%}.input-wrapper{position:relative;display:flex;align-items:center}.calendar-input{width:100%;padding:9px 14px 9px 40px;border:1px solid #ddd;border-radius:8px;font-size:14px;cursor:pointer;background:#fff;transition:all .2s}.calendar-input:hover{border-color:#999}.calendar-input:focus{outline:none;border-color:#999}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{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:focus-visible{outline:0!important}.calendar-popup.append-to-body{font-family:Inter,sans-serif;z-index:100000}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.drop-up{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}.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%}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-apply{background:#000;color:#fff}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px;max-height:300px;overflow:auto}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.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}.calendar-input.calendar-input-has-error{@apply border-[#d11e14];}.calendar-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.btn-apply:disabled{cursor:not-allowed!important;opacity:.7}.calendar-day.calendar-day-keyboard-focus:not(.disabled):not(.other-month){outline:0px solid #000}.calendar-popup.compact{width:240px}.calendar-popup.compact.has-ranges{width:380px}.calendar-popup.compact.dual-calendar-mode{width:480px}.calendar-popup.compact.dual-calendar-mode.has-ranges{width:600px}.calendar-popup.compact .header{padding:8px 0}.calendar-popup.compact .month-year{font-size:13px}.calendar-popup.compact .nav-btn{height:24px;width:24px;padding:6px 8px}.calendar-popup.compact .calendar-wrapper,.calendar-popup.compact .calendar-left,.calendar-popup.compact .calendar-right{padding:0 8px 8px}.calendar-popup.compact .weekday-header{font-size:11px;padding:4px 2px}.calendar-popup.compact .calendar-day{font-size:12px;padding:5px 2px;line-height:1.3}.calendar-popup.compact .ranges{min-width:120px;gap:2px;margin-bottom:8px;padding-bottom:8px}.calendar-popup.compact.has-ranges .ranges{padding:6px}.calendar-popup.compact .range-btn{font-size:12px;padding:5px 8px}.calendar-popup.compact .timepicker-section{margin-top:8px;padding-top:8px}.calendar-popup.compact .timepicker-label{font-size:11px}.calendar-popup.compact .footer{padding:8px;gap:6px}.calendar-popup.compact .btn-cancel,.calendar-popup.compact .btn-apply{font-size:11px;padding:6px 12px;min-width:64px}\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: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkTimePicker, selector: "bk-time-picker", inputs: ["required", "value", "label", "placeholder", "clearable", "position", "variation", "pickerId", "closePicker", "timeFormat", "showSeconds", "autoPosition", "appendToBody", "disabled"], outputs: ["change", "timeChange", "pickerOpened", "pickerClosed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCustomCalendar, decorators: [{
             type: Component,
@@ -2958,8 +3071,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkCustomCalendar),
                             multi: true,
                         },
-                    ], template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\" [class.disabled]=\"disabled\">\r\n  <!-- Input field -->\r\n  <div #inputWrapper class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"!disabled && toggle()\"\r\n      (keydown.enter)=\"$event.preventDefault()\"\r\n      (blur)=\"markAsTouched()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\r\n      [attr.disabled]=\"disabled ? true : null\"\r\n      [class.hasError]=\"hasError\"\r\n      class=\"calendar-input\">\r\n      <!-- *ngIf=\"!getDisplayValue()\" -->\r\n\r\n    <span class=\"calendar-icon\" >\r\n      <img alt=\"calendar\" class=\"calendar-icon-img\" [src]='brickclayIcons.calenderIcon'/>\r\n    </span>\r\n    <button type=\"button\" class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon && !disabled\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div #calendarPopup\r\n       class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [class.append-to-body]=\"appendToBody && !inline\"\r\n       [style.position]=\"appendToBody && !inline ? 'fixed' : null\"\r\n       [style.top]=\"appendToBody && !inline && !popupPlacementAbove ? dropdownStyle.top : null\"\r\n       [style.bottom]=\"appendToBody && !inline && popupPlacementAbove ? dropdownStyle.bottom : null\"\r\n       [style.left]=\"appendToBody && !inline ? dropdownStyle.left : null\"\r\n       tabindex=\"0\"\r\n       (keydown)=\"onCalendarPopupKeydown($event)\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && !appendToBody && opens === 'right',\r\n         'position-center': !inline && !appendToBody && opens === 'center',\r\n         'drop-up': !inline && popupPlacementAbove,\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar,\r\n         'compact': compact\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\" role=\"listbox\" aria-label=\"Date ranges\">\r\n      <button\r\n        type=\"button\"\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        (keydown)=\"onRangeButtonKeydown($event, rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"activeRange === rangeKey\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1 border-l border-[#eee]' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(month) + ' ' + year\">\r\n        <thead>\r\n          <tr role=\"row\">\r\n            <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\" role=\"row\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\r\n              role=\"gridcell\"\r\n              (click)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && selectDate(dayObj.day)\"\r\n              (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n              (mouseleave)=\"onDateLeave()\"\r\n              [class.active]=\"dayObj.currentMonth && isDateSelected(year, month, dayObj.day)\"\r\n              [class.in-range]=\"dayObj.currentMonth && isDateInRange(year, month, dayObj.day)\"\r\n              [class.other-month]=\"!dayObj.currentMonth\"\r\n              [class.disabled]=\"isDateDisabled(year, month, dayObj.day)\"\r\n              [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(year, month, dayObj.day)\"\r\n              [class.today]=\"dayObj.currentMonth && isToday(year, month, dayObj.day)\"\r\n              [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(year, month, dayObj.day)\"\r\n              class=\"calendar-day\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [variation]=\"compact ? 'default' : 'lg'\"\r\n            [timeFormat]=\"timeFormat\"\r\n            [clearable]=\"clearableTime\"\r\n            [label]=\"''\"\r\n            [ngModel]=\"singleTimeModel\"\r\n            (ngModelChange)=\"onSingleTimePickerChange($event); singleTimeModel=$event\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(leftMonth) + ' ' + leftYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of leftCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && selectDate(dayObj.day, false)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(leftYear, leftMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(leftYear, leftMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(leftYear, leftMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(leftYear, leftMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(leftYear, leftMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(leftYear, leftMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"startTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, true); startTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(rightMonth) + ' ' + rightYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of rightCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && selectDate(dayObj.day, true)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && onDateHover(dayObj.day, true)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(rightYear, rightMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(rightYear, rightMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(rightYear, rightMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(rightYear, rightMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(rightYear, rightMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(rightYear, rightMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"endTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, false); endTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline && showCancelApply\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\" [disabled]=\"disabled || isDualRangeApplyBlocked\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n@if (hasError){\r\n<p class=\"calender-error\">{{errorMessage}}</p>\r\n}\r\n", styles: [".calendar-container,.calendar-container *{font-family:Inter,sans-serif!important}.calendar-container{position:relative;display:inline-block;width:100%}.input-wrapper{position:relative;display:flex;align-items:center}.calendar-input{width:100%;padding:9px 14px 9px 40px;border:1px solid #ddd;border-radius:8px;font-size:14px;cursor:pointer;background:#fff;transition:all .2s}.calendar-input:hover{border-color:#999}.calendar-input:focus{outline:none;border-color:#999}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{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:focus-visible{outline:0!important}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.drop-up{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}.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%}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-apply{background:#000;color:#fff}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px;max-height:300px;overflow:auto}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.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}.calendar-input.calendar-input-has-error{@apply border-[#d11e14];}.calendar-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.btn-apply:disabled{cursor:not-allowed!important;opacity:.7}.calendar-day.calendar-day-keyboard-focus:not(.disabled):not(.other-month){outline:0px solid #000}.calendar-popup.compact{width:240px}.calendar-popup.compact.has-ranges{width:380px}.calendar-popup.compact.dual-calendar-mode{width:480px}.calendar-popup.compact.dual-calendar-mode.has-ranges{width:600px}.calendar-popup.compact .header{padding:8px 0}.calendar-popup.compact .month-year{font-size:13px}.calendar-popup.compact .nav-btn{height:24px;width:24px;padding:6px 8px}.calendar-popup.compact .calendar-wrapper,.calendar-popup.compact .calendar-left,.calendar-popup.compact .calendar-right{padding:0 8px 8px}.calendar-popup.compact .weekday-header{font-size:11px;padding:4px 2px}.calendar-popup.compact .calendar-day{font-size:12px;padding:5px 2px;line-height:1.3}.calendar-popup.compact .ranges{min-width:120px;gap:2px;margin-bottom:8px;padding-bottom:8px}.calendar-popup.compact.has-ranges .ranges{padding:6px}.calendar-popup.compact .range-btn{font-size:12px;padding:5px 8px}.calendar-popup.compact .timepicker-section{margin-top:8px;padding-top:8px}.calendar-popup.compact .timepicker-label{font-size:11px}.calendar-popup.compact .footer{padding:8px;gap:6px}.calendar-popup.compact .btn-cancel,.calendar-popup.compact .btn-apply{font-size:11px;padding:6px 12px;min-width:64px}\n"] }]
-        }], ctorParameters: () => [{ type: BkCalendarManagerService }], propDecorators: { enableTimepicker: [{
+                    ], template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\" [class.disabled]=\"disabled\">\r\n  <!-- Input field -->\r\n  <div #inputWrapper class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"!disabled && toggle()\"\r\n      (keydown.enter)=\"$event.preventDefault()\"\r\n      (blur)=\"markAsTouched()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\r\n      [attr.disabled]=\"disabled ? true : null\"\r\n      [class.hasError]=\"hasError\"\r\n      class=\"calendar-input\">\r\n      <!-- *ngIf=\"!getDisplayValue()\" -->\r\n\r\n    <span class=\"calendar-icon\" >\r\n      <img alt=\"calendar\" class=\"calendar-icon-img\" [src]='brickclayIcons.calenderIcon'/>\r\n    </span>\r\n    <button type=\"button\" class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon && !disabled\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div #calendarPopup\r\n       class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [class.append-to-body]=\"appendToBody && !inline\"\r\n       [style.position]=\"appendToBody && !inline ? 'fixed' : null\"\r\n       [style.top]=\"appendToBody && !inline && !popupPlacementAbove ? dropdownStyle.top : null\"\r\n       [style.bottom]=\"appendToBody && !inline && popupPlacementAbove ? dropdownStyle.bottom : null\"\r\n       [style.left]=\"appendToBody && !inline ? dropdownStyle.left : null\"\r\n       tabindex=\"0\"\r\n       (keydown)=\"onCalendarPopupKeydown($event)\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && !appendToBody && opens === 'right',\r\n         'position-center': !inline && !appendToBody && opens === 'center',\r\n         'drop-up': !inline && popupPlacementAbove,\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar,\r\n         'compact': compact\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\" role=\"listbox\" aria-label=\"Date ranges\">\r\n      <button\r\n        type=\"button\"\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        (keydown)=\"onRangeButtonKeydown($event, rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"activeRange === rangeKey\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1 border-l border-[#eee]' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(month) + ' ' + year\">\r\n        <thead>\r\n          <tr role=\"row\">\r\n            <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\" role=\"row\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\r\n              role=\"gridcell\"\r\n              (click)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && selectDate(dayObj.day)\"\r\n              (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n              (mouseleave)=\"onDateLeave()\"\r\n              [class.active]=\"dayObj.currentMonth && isDateSelected(year, month, dayObj.day)\"\r\n              [class.in-range]=\"dayObj.currentMonth && isDateInRange(year, month, dayObj.day)\"\r\n              [class.other-month]=\"!dayObj.currentMonth\"\r\n              [class.disabled]=\"isDateDisabled(year, month, dayObj.day)\"\r\n              [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(year, month, dayObj.day)\"\r\n              [class.today]=\"dayObj.currentMonth && isToday(year, month, dayObj.day)\"\r\n              [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(year, month, dayObj.day)\"\r\n              class=\"calendar-day\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [variation]=\"compact ? 'default' : 'lg'\"\r\n            [timeFormat]=\"timeFormat\"\r\n            [clearable]=\"clearableTime\"\r\n            [label]=\"''\"\r\n            [ngModel]=\"singleTimeModel\"\r\n            (ngModelChange)=\"onSingleTimePickerChange($event); singleTimeModel=$event\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(leftMonth) + ' ' + leftYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of leftCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && selectDate(dayObj.day, false)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(leftYear, leftMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(leftYear, leftMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(leftYear, leftMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(leftYear, leftMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(leftYear, leftMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(leftYear, leftMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"startTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, true); startTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\" role=\"grid\" [attr.aria-label]=\"getMonthName(rightMonth) + ' ' + rightYear\">\r\n          <thead>\r\n            <tr role=\"row\">\r\n              <th *ngFor=\"let d of resolvedWeekDayLabels\" class=\"weekday-header\" scope=\"col\" role=\"columnheader\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of rightCalendar\" role=\"row\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                role=\"gridcell\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && selectDate(dayObj.day, true)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && onDateHover(dayObj.day, true)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(rightYear, rightMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(rightYear, rightMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(rightYear, rightMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(rightYear, rightMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(rightYear, rightMonth, dayObj.day)\"\r\n                [class.calendar-day-keyboard-focus]=\"dayObj.currentMonth && isKeyboardFocusedCell(rightYear, rightMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [variation]=\"compact ? 'default' : 'lg'\"\r\n              [timeFormat]=\"timeFormat\"\r\n              [clearable]=\"clearableTime\"\r\n              [label]=\"''\"\r\n              [ngModel]=\"endTimeModel\"\r\n              (ngModelChange)=\"onDualTimePickerChange($event, false); endTimeModel=$event\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline && showCancelApply\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\" [disabled]=\"disabled || isDualRangeApplyBlocked\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n@if (hasError){\r\n<p class=\"calender-error\">{{errorMessage}}</p>\r\n}\r\n", styles: [".calendar-container,.calendar-container *{font-family:Inter,sans-serif!important}.calendar-container{position:relative;display:inline-block;width:100%}.input-wrapper{position:relative;display:flex;align-items:center}.calendar-input{width:100%;padding:9px 14px 9px 40px;border:1px solid #ddd;border-radius:8px;font-size:14px;cursor:pointer;background:#fff;transition:all .2s}.calendar-input:hover{border-color:#999}.calendar-input:focus{outline:none;border-color:#999}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{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:focus-visible{outline:0!important}.calendar-popup.append-to-body{font-family:Inter,sans-serif;z-index:100000}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.drop-up{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}.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%}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-apply{background:#000;color:#fff}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px;max-height:300px;overflow:auto}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.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}.calendar-input.calendar-input-has-error{@apply border-[#d11e14];}.calendar-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}.btn-apply:disabled{cursor:not-allowed!important;opacity:.7}.calendar-day.calendar-day-keyboard-focus:not(.disabled):not(.other-month){outline:0px solid #000}.calendar-popup.compact{width:240px}.calendar-popup.compact.has-ranges{width:380px}.calendar-popup.compact.dual-calendar-mode{width:480px}.calendar-popup.compact.dual-calendar-mode.has-ranges{width:600px}.calendar-popup.compact .header{padding:8px 0}.calendar-popup.compact .month-year{font-size:13px}.calendar-popup.compact .nav-btn{height:24px;width:24px;padding:6px 8px}.calendar-popup.compact .calendar-wrapper,.calendar-popup.compact .calendar-left,.calendar-popup.compact .calendar-right{padding:0 8px 8px}.calendar-popup.compact .weekday-header{font-size:11px;padding:4px 2px}.calendar-popup.compact .calendar-day{font-size:12px;padding:5px 2px;line-height:1.3}.calendar-popup.compact .ranges{min-width:120px;gap:2px;margin-bottom:8px;padding-bottom:8px}.calendar-popup.compact.has-ranges .ranges{padding:6px}.calendar-popup.compact .range-btn{font-size:12px;padding:5px 8px}.calendar-popup.compact .timepicker-section{margin-top:8px;padding-top:8px}.calendar-popup.compact .timepicker-label{font-size:11px}.calendar-popup.compact .footer{padding:8px;gap:6px}.calendar-popup.compact .btn-cancel,.calendar-popup.compact .btn-apply{font-size:11px;padding:6px 12px;min-width:64px}\n"] }]
+        }], ctorParameters: () => [{ type: BkCalendarManagerService }, { type: i0.Renderer2 }], propDecorators: { enableTimepicker: [{
                 type: Input
             }], autoApply: [{
                 type: Input
@@ -6107,6 +6220,14 @@ class BkTabs {
     orientation = 'horizontal';
     variant = 'default';
     colors = {};
+    /**
+     * When true, if the currently active tab is in an error state, navigation to
+     * the other tabs is blocked (they render disabled) until the error clears.
+     * Optional — defaults to false, so navigation stays free unless opted in.
+     */
+    lockNavigationOnError = false;
+    /** Fallback error icon used when a tab has `showErrorIcon` but no `errorIcon`. */
+    defaultErrorIcon = '../../assets/icons/alert-circle-red.svg';
     // Convenience getters for template class bindings
     get isVertical() {
         return this.orientation === 'vertical';
@@ -6130,9 +6251,18 @@ class BkTabs {
         return this.colors.inactive ?? '';
     }
     change = new EventEmitter();
+    // True when the currently active tab is flagged with an error.
+    get activeTabHasError() {
+        return this.list.some(t => t.id === this.activeTabId && !!t.error);
+    }
+    // A tab is locked when navigation-on-error is enabled, the active tab has an
+    // error, and this tab is not the active one. Locked tabs render disabled.
+    isLocked(tab) {
+        return this.lockNavigationOnError && this.activeTabHasError && tab.id !== this.activeTabId;
+    }
     // Set active tab and emit change event
     setActiveTab(tab) {
-        if (tab?.disabled || this.disabled)
+        if (tab?.disabled || this.disabled || this.isLocked(tab))
             return;
         this.activeTabId = tab.id;
         this.change.emit(tab);
@@ -6141,19 +6271,25 @@ class BkTabs {
     isActive(tabId) {
         return this.activeTabId === tabId;
     }
-    // Get the appropriate icon for a tab based on its active state
+    // Get the appropriate icon for a tab based on its active/error state.
+    // In an error state, when the tab opts into an error icon, show the custom
+    // `errorIcon` or the component default error icon — this replaces the tab's
+    // own decorative `icon` so the error is always what's surfaced.
     getTabIcon(tab) {
+        if (tab.error && tab.showErrorIcon) {
+            return tab.errorIcon ?? this.defaultErrorIcon;
+        }
         if (this.isActive(tab.id) && tab.iconActive) {
             return tab.iconActive;
         }
         return tab.icon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTabs, isStandalone: true, selector: "bk-tabs", inputs: { list: "list", activeTabId: "activeTabId", disabled: "disabled", orientation: "orientation", variant: "variant", colors: "colors" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"tabs-container\" [class.tabs-container--segmented]=\"isSegmented\"\r\n  [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n  <ul class=\"tabs-list\" [class.tabs-list--segmented]=\"isSegmented\"\r\n    [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n    [class.tabs-list--vertical]=\"isVertical && !isSegmented\" [attr.aria-orientation]=\"orientation\" role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n    <li class=\"tabs-item\" role=\"presentation\">\r\n      <!--\r\n          Tooltip logic:\r\n          - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n          - No icon + error state      \u2192 tooltip on the button\r\n          - No icon + no error         \u2192 no tooltip\r\n        -->\r\n      <button type=\"button\" [id]=\"'tab-' + tab.id\" [attr.aria-selected]=\"isActive(tab.id)\"\r\n        [attr.aria-controls]=\"'panel-' + tab.id\" [disabled]=\"tab.disabled\"\r\n        [class.tabs-button--active]=\"isActive(tab.id)\" [class.tabs-button--error]=\"tab.error\"\r\n        [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n        [class.tabs-button--icon-right]=\"tab.direction === 'right'\" [class.tabs-button--segmented]=\"isSegmented\"\r\n        [ngClass]=\"[\r\n            isSegmented ? segmentedTabClass(tab) : '',\r\n            (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n          ]\" [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n        [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" class=\"tabs-button\" (click)=\"setActiveTab(tab)\"\r\n        role=\"tab\">\r\n        <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n        <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n          [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n          class=\"tabs-icon\">\r\n        <span class=\"tabs-label\">{{ tab.label }}</span>\r\n        <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n        <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n          [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n          class=\"tabs-icon\">\r\n      </button>\r\n    </li>\r\n    }\r\n  </ul>\r\n</div>", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkTabs, isStandalone: true, selector: "bk-tabs", inputs: { list: "list", activeTabId: "activeTabId", disabled: "disabled", orientation: "orientation", variant: "variant", colors: "colors", lockNavigationOnError: "lockNavigationOnError" }, outputs: { change: "change" }, ngImport: i0, template: "<div\r\n  class=\"tabs-container\"\r\n  [class.tabs-container--segmented]=\"isSegmented\"\r\n  [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n  <ul\r\n    class=\"tabs-list\"\r\n    [class.tabs-list--segmented]=\"isSegmented\"\r\n    [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n    [class.tabs-list--vertical]=\"isVertical && !isSegmented\"\r\n    [attr.aria-orientation]=\"orientation\"\r\n    role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <!--\r\n          Tooltip logic:\r\n          - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n          - No icon + error state      \u2192 tooltip on the button\r\n          - No icon + no error         \u2192 no tooltip\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--error]=\"tab.error\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--icon-right]=\"tab.direction === 'right'\"\r\n          [class.tabs-button--segmented]=\"isSegmented\"\r\n          [ngClass]=\"[\r\n            isSegmented ? segmentedTabClass(tab) : '',\r\n            (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n          ]\"\r\n          [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n            class=\"tabs-icon\">\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n          <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n            class=\"tabs-icon\">\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--error{background:#fee2e2;border-color:#fca5a5;color:#c10007}.tabs-button--segmented.tabs-button--error.tabs-button--active{background:#fff;border-color:#c10007;color:#c10007}.tabs-button--segmented.tabs-button--error:hover:not(:disabled):not(.tabs-button--active){background:#fee2e2;border-color:#c10007;color:#c10007}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipSize", "bkTooltipAutoHeight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTabs, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule, BKTooltipDirective], template: "<div class=\"tabs-container\" [class.tabs-container--segmented]=\"isSegmented\"\r\n  [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n  <ul class=\"tabs-list\" [class.tabs-list--segmented]=\"isSegmented\"\r\n    [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n    [class.tabs-list--vertical]=\"isVertical && !isSegmented\" [attr.aria-orientation]=\"orientation\" role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n    <li class=\"tabs-item\" role=\"presentation\">\r\n      <!--\r\n          Tooltip logic:\r\n          - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n          - No icon + error state      \u2192 tooltip on the button\r\n          - No icon + no error         \u2192 no tooltip\r\n        -->\r\n      <button type=\"button\" [id]=\"'tab-' + tab.id\" [attr.aria-selected]=\"isActive(tab.id)\"\r\n        [attr.aria-controls]=\"'panel-' + tab.id\" [disabled]=\"tab.disabled\"\r\n        [class.tabs-button--active]=\"isActive(tab.id)\" [class.tabs-button--error]=\"tab.error\"\r\n        [class.tabs-button--disabled]=\"disabled || tab.disabled\"\r\n        [class.tabs-button--icon-right]=\"tab.direction === 'right'\" [class.tabs-button--segmented]=\"isSegmented\"\r\n        [ngClass]=\"[\r\n            isSegmented ? segmentedTabClass(tab) : '',\r\n            (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n          ]\" [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n        [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" class=\"tabs-button\" (click)=\"setActiveTab(tab)\"\r\n        role=\"tab\">\r\n        <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n        <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n          [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n          class=\"tabs-icon\">\r\n        <span class=\"tabs-label\">{{ tab.label }}</span>\r\n        <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n        <img [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\" [attr.src]=\"getTabIcon(tab)\"\r\n          [alt]=\"tab.iconAlt || tab.label\" [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n          class=\"tabs-icon\">\r\n      </button>\r\n    </li>\r\n    }\r\n  </ul>\r\n</div>", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"] }]
+            args: [{ selector: 'bk-tabs', standalone: true, imports: [CommonModule, BKTooltipDirective], template: "<div\r\n  class=\"tabs-container\"\r\n  [class.tabs-container--segmented]=\"isSegmented\"\r\n  [ngClass]=\"isSegmented ? wrapperClass : (isVertical ? 'w-auto' : 'overflow-x-auto whitespace-nowrap')\">\r\n  <ul\r\n    class=\"tabs-list\"\r\n    [class.tabs-list--segmented]=\"isSegmented\"\r\n    [class.tabs-list--segmented-vertical]=\"isSegmented && isVertical\"\r\n    [class.tabs-list--vertical]=\"isVertical && !isSegmented\"\r\n    [attr.aria-orientation]=\"orientation\"\r\n    role=\"tablist\">\r\n    @for (tab of list; track tab.id; let i = $index) {\r\n      <li class=\"tabs-item\" role=\"presentation\">\r\n        <!--\r\n          Tooltip logic:\r\n          - Icon present (error or not) \u2192 tooltip on the icon, button gets no tooltip\r\n          - No icon + error state      \u2192 tooltip on the button\r\n          - No icon + no error         \u2192 no tooltip\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"'tab-' + tab.id\"\r\n          [attr.aria-selected]=\"isActive(tab.id)\"\r\n          [attr.aria-controls]=\"'panel-' + tab.id\"\r\n          [disabled]=\"tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--active]=\"isActive(tab.id)\"\r\n          [class.tabs-button--error]=\"tab.error\"\r\n          [class.tabs-button--disabled]=\"disabled || tab.disabled || isLocked(tab)\"\r\n          [class.tabs-button--icon-right]=\"tab.direction === 'right'\"\r\n          [class.tabs-button--segmented]=\"isSegmented\"\r\n          [ngClass]=\"[\r\n            isSegmented ? segmentedTabClass(tab) : '',\r\n            (isVertical && !isSegmented) ? 'w-full justify-start' : ''\r\n          ]\"\r\n          [bkTooltip]=\"(!getTabIcon(tab) && tab.error) ? (tab.iconTooltip || []) : []\"\r\n          [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n          class=\"tabs-button\"\r\n          (click)=\"setActiveTab(tab)\"\r\n          role=\"tab\">\r\n          <!-- Left icon: tooltip lives on the icon when an icon is present -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction === 'right'\"\r\n            class=\"tabs-icon\">\r\n          <span class=\"tabs-label\">{{ tab.label }}</span>\r\n          <!-- Right icon: same tooltip rule, shown when direction is 'right' -->\r\n          <img\r\n            [bkTooltip]=\"getTabIcon(tab) ? (tab.iconTooltip || []) : []\" [bkTooltipPosition]=\"tab.iconTooltipDirection || 'top'\"\r\n            [attr.src]=\"getTabIcon(tab)\"\r\n            [alt]=\"tab.iconAlt || tab.label\"\r\n            [class.tabs-icon--hidden]=\"!getTabIcon(tab) || tab.direction !== 'right'\"\r\n            class=\"tabs-icon\">\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".tabs-container{@apply w-full;}.tabs-list{@apply grid grid-flow-col auto-cols-max gap-[4px] list-none m-0 px-0 py-0.5;}.tabs-item{@apply min-w-0;}.tabs-list--vertical{@apply grid-cols-1 grid-flow-row auto-rows-max;}.tabs-button{@apply flex items-center gap-[6px] px-3 py-2 rounded-md border-0 bg-transparent cursor-pointer transition-all duration-100 outline-none;@apply text-sm leading-[11px] font-medium text-[#141414] tracking-[-.28];}.tabs-button:hover:not(:disabled):not(.tabs-button--active){@apply text-[#141414] bg-[#EDEEF0];}.tabs-list--vertical .tabs-button{@apply py-[9px];}.tabs-button--active{@apply bg-[#141414] text-white;}.tabs-button--error{@apply bg-[#C10007] text-white border-0;}.tabs-button--disabled{@apply opacity-50 cursor-not-allowed;}.tabs-icon{@apply size-4 flex-shrink-0;max-width:1rem;opacity:1;overflow:hidden;transition:max-width .2s ease,opacity .2s ease}.tabs-icon--hidden{max-width:0;opacity:0}.tabs-label{@apply whitespace-nowrap;}.tabs-container--segmented{@apply p-[3px] rounded-md w-full md:w-auto overflow-x-auto;background:#54578e12}.tabs-list--segmented{@apply grid grid-flow-col items-center gap-2 rounded-md font-medium text-sm leading-4 w-full sm:w-auto py-0;grid-auto-columns:minmax(max-content,1fr);color:#6b7080}.tabs-button--segmented{@apply border border-transparent px-3 sm:min-w-[5rem] py-1.5 w-full text-center justify-center rounded;color:#6b7080}.tabs-button--segmented:hover:not(:disabled):not(.tabs-button--active){border-color:#42578a26;background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--active{background:#fff;color:#15191e}.tabs-button--segmented.tabs-button--error{background:#fee2e2;border-color:#fca5a5;color:#c10007}.tabs-button--segmented.tabs-button--error.tabs-button--active{background:#fff;border-color:#c10007;color:#c10007}.tabs-button--segmented.tabs-button--error:hover:not(:disabled):not(.tabs-button--active){background:#fee2e2;border-color:#c10007;color:#c10007}.tabs-list--segmented-vertical{@apply grid-cols-1 grid-flow-row auto-rows-max gap-1;}.tabs-list--segmented-vertical .tabs-button--segmented{@apply justify-start text-left;}\n"] }]
         }], propDecorators: { list: [{
                 type: Input
             }], activeTabId: [{
@@ -6166,6 +6302,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], colors: [{
                 type: Input
+            }], lockNavigationOnError: [{
+                type: Input
             }], change: [{
                 type: Output
             }] } });
@@ -9399,6 +9537,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['document:keydown.escape']
             }] } });
+/**
+ * A simple, responsive navigation menu. Styled to match the default `bk-tabs`
+ * theme (dark active pill, light hover).
+ *
+ * - Orientation: `vertical` (stacked) / `horizontal` (menubar row).
+ * - Items with `children` are expandable, shown with a chevron that rotates
+ *   open/closed.
+ * - Submenus render inline (accordion) or as pop-ups. Pop-ups adapt to the
+ *   orientation: they drop *below* a horizontal top-level item and fly out to
+ *   the *right* for vertical menus / deeper levels.
+ */
+class BkMenu {
+    host;
+    items = [];
+    orientation = 'vertical';
+    submenuMode = 'inline';
+    /**
+     * Keep only one submenu open per level: opening a parent collapses its
+     * siblings (and their descendants) so the menu stays compact. Pop-up mode
+     * always behaves this way; this input adds it to inline (accordion) mode.
+     */
+    singleOpen = false;
+    /** Id of the currently selected leaf item. Two-way bindable. */
+    activeItemId = '';
+    /** Tint item icons: dark by default, white on the active (dark) row. */
+    tintIcons = true;
+    activeItemIdChange = new EventEmitter();
+    itemClick = new EventEmitter();
+    /** Ids of currently expanded/opened parent nodes. */
+    openIds = new Set();
+    constructor(host) {
+        this.host = host;
+    }
+    get isVertical() { return this.orientation === 'vertical'; }
+    get isPopup() { return this.submenuMode === 'popup'; }
+    hasChildren(item) {
+        return !!item.children && item.children.length > 0;
+    }
+    isOpen(item) {
+        return this.openIds.has(item.id);
+    }
+    isActive(item) {
+        return this.activeItemId === item.id;
+    }
+    // True when the active leaf lives somewhere inside this item's subtree, so a
+    // parent shows the active state even after its pop-up closes.
+    isActiveAncestor(item) {
+        return !!item.children && item.children.some(child => child.id === this.activeItemId || this.isActiveAncestor(child));
+    }
+    // Highlight = the item itself is active. In pop-up mode a parent also lights
+    // up when one of its descendants is active (so the section stays marked after
+    // the fly-out closes); inline mode highlights the selected leaf only.
+    isHighlighted(item) {
+        return this.isActive(item) || (this.isPopup && this.isActiveAncestor(item));
+    }
+    // Left indent for inline nested items (vertical only).
+    inlineIndent(level) {
+        return this.isVertical && !this.isPopup ? 16 + level * 16 : null;
+    }
+    // Handle a click on any menu button.
+    // Leaves select + emit. Parents toggle in inline mode; in pop-up mode they
+    // are opened by hover, so a click on a parent does nothing.
+    onItemClick(item, siblings, event) {
+        event.stopPropagation();
+        if (item.disabled)
+            return;
+        if (this.hasChildren(item)) {
+            if (!this.isPopup)
+                this.toggle(item, siblings);
+            return;
+        }
+        this.activeItemId = item.id;
+        this.activeItemIdChange.emit(item.id);
+        this.itemClick.emit(item);
+        if (this.isPopup)
+            this.openIds.clear(); // dismiss pop-ups after picking a leaf
+    }
+    // Pop-up mode: open a parent's fly-out on hover (and close its siblings).
+    onItemEnter(item, siblings) {
+        if (!this.isPopup || item.disabled || !this.hasChildren(item))
+            return;
+        for (const sibling of siblings) {
+            if (sibling.id !== item.id)
+                this.closeBranch(sibling);
+        }
+        this.openIds.add(item.id);
+    }
+    // Pop-up mode: close the fly-out (and any nested ones) when the pointer leaves.
+    onItemLeave(item) {
+        if (!this.isPopup || !this.hasChildren(item))
+            return;
+        this.closeBranch(item);
+    }
+    toggle(item, siblings) {
+        const wasOpen = this.openIds.has(item.id);
+        if (this.isPopup || this.singleOpen) {
+            // Keep a single open branch per level — collapse siblings (and their
+            // descendants) first so the menu stays compact.
+            for (const sibling of siblings)
+                this.closeBranch(sibling);
+        }
+        if (wasOpen)
+            this.closeBranch(item);
+        else
+            this.openIds.add(item.id);
+    }
+    // Remove an item and all of its descendants from the open set.
+    closeBranch(item) {
+        this.openIds.delete(item.id);
+        item.children?.forEach(child => this.closeBranch(child));
+    }
+    // Pop-up mode: click outside the menu closes any open fly-outs.
+    onDocumentClick(event) {
+        if (this.isPopup && !this.host.nativeElement.contains(event.target)) {
+            this.openIds.clear();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkMenu, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkMenu, isStandalone: true, selector: "bk-menu", inputs: { items: "items", orientation: "orientation", submenuMode: "submenuMode", singleOpen: "singleOpen", activeItemId: "activeItemId", tintIcons: "tintIcons" }, outputs: { activeItemIdChange: "activeItemIdChange", itemClick: "itemClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul class=\"bk-menu__list\">\r\n    <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0 }\"></ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level, level = depth. -->\r\n<ng-template #itemTpl let-items let-level=\"level\">\r\n  @for (item of items; track item.id) {\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"isPopup && (isVertical || level > 0)\"\r\n            viewBox=\"0 0 24 24\"\r\n            width=\"16\"\r\n            height=\"16\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--popup-right]=\"isPopup && (isVertical || level > 0)\"\r\n          [class.bk-menu__submenu--popup-down]=\"isPopup && !isVertical && level === 0\"\r\n          role=\"menu\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl; context: { $implicit: item.children, level: level + 1 }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;display:block;width:100%;font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:-.28px;background:var(--menu-bg);color:var(--menu-text);border:1px solid var(--menu-border);border-radius:var(--menu-radius)}.bk-menu:not(.bk-menu--popup){overflow:hidden}.bk-menu--popup.bk-menu--vertical>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{border-radius:8px 8px 0 0}.bk-menu--popup.bk-menu--vertical>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{border-radius:0 0 8px 8px}.bk-menu--popup.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{border-radius:8px 0 0 8px}.bk-menu--popup.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{border-radius:0 8px 8px 0}.bk-menu__list,.bk-menu__submenu{list-style:none;margin:0;padding:0}.bk-menu--horizontal>.bk-menu__list{display:flex;flex-direction:row;align-items:stretch}.bk-menu--horizontal:not(.bk-menu--popup)>.bk-menu__list{overflow-x:auto}.bk-menu__item{position:relative}.bk-menu__button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;white-space:nowrap;border-radius:6px;transition:background .1s ease,color .1s ease}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:auto}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){background:var(--menu-hover-bg);color:var(--menu-hover-text)}.bk-menu__button--active{background:var(--menu-active-bg);color:var(--menu-active-text)}.bk-menu__button--disabled,.bk-menu__button:disabled{opacity:var(--menu-disabled);cursor:not-allowed}.bk-menu__submenu .bk-menu__button{color:var(--menu-subtext);font-weight:400}.bk-menu__submenu .bk-menu__button--active{color:var(--menu-active-text)}.bk-menu__icon{width:16px;height:16px;flex-shrink:0;object-fit:contain}.bk-menu--tint .bk-menu__icon{filter:brightness(0) saturate(0)}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{filter:brightness(0) invert(1)}.bk-menu__label{flex:1 1 auto;min-width:0}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{flex:0 0 auto}.bk-menu__chevron{flex-shrink:0;transition:transform .18s ease;opacity:.8}.bk-menu__chevron--open{transform:rotate(180deg)}.bk-menu__chevron--right{transform:rotate(-90deg)}.bk-menu__submenu--inline{overflow:hidden;max-height:0;transition:max-height .2s ease}.bk-menu__submenu--inline.bk-menu__submenu--open{max-height:1000px}.bk-menu__submenu--popup{position:absolute;z-index:50;min-width:200px;background:var(--menu-bg);border:1px solid var(--menu-border);border-radius:12px;box-shadow:var(--menu-shadow);padding:4px;display:none}.bk-menu__submenu--popup.bk-menu__submenu--open{display:block}.bk-menu__submenu--popup-right{top:0;left:100%;margin-left:4px}.bk-menu__submenu--popup-down{top:100%;left:0;margin-top:4px}.bk-menu__submenu--popup-right:before{content:\"\";position:absolute;top:0;left:-6px;width:6px;height:100%}.bk-menu__submenu--popup-down:before{content:\"\";position:absolute;top:-6px;left:0;width:100%;height:6px}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{flex-direction:column;overflow-x:visible}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:100%}.bk-menu--horizontal .bk-menu__submenu--popup-down{position:static;box-shadow:none;border:0;margin:0;border-radius:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-menu', imports: [CommonModule], template: "<nav\r\n  class=\"bk-menu\"\r\n  [class.bk-menu--vertical]=\"isVertical\"\r\n  [class.bk-menu--horizontal]=\"!isVertical\"\r\n  [class.bk-menu--popup]=\"isPopup\"\r\n  [class.bk-menu--tint]=\"tintIcons\"\r\n  role=\"menubar\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n  <ul class=\"bk-menu__list\">\r\n    <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: items, level: 0 }\"></ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<!-- Recursive item renderer. Context: $implicit = items at this level, level = depth. -->\r\n<ng-template #itemTpl let-items let-level=\"level\">\r\n  @for (item of items; track item.id) {\r\n    <li\r\n      class=\"bk-menu__item\"\r\n      [class.bk-menu__item--has-children]=\"hasChildren(item)\"\r\n      [class.bk-menu__item--open]=\"isOpen(item)\"\r\n      (mouseenter)=\"onItemEnter(item, items)\"\r\n      (mouseleave)=\"onItemLeave(item)\"\r\n      role=\"none\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"bk-menu__button\"\r\n        [class.bk-menu__button--active]=\"isHighlighted(item)\"\r\n        [class.bk-menu__button--disabled]=\"item.disabled\"\r\n        [class.bk-menu__button--parent]=\"hasChildren(item)\"\r\n        [style.paddingLeft.px]=\"inlineIndent(level)\"\r\n        [disabled]=\"item.disabled\"\r\n        [attr.aria-haspopup]=\"hasChildren(item) ? 'true' : null\"\r\n        [attr.aria-expanded]=\"hasChildren(item) ? isOpen(item) : null\"\r\n        role=\"menuitem\"\r\n        (click)=\"onItemClick(item, items, $event)\">\r\n        @if (item.icon) {\r\n          <img class=\"bk-menu__icon\" [attr.src]=\"item.icon\" [alt]=\"item.iconAlt || item.label\" />\r\n        }\r\n        <span class=\"bk-menu__label\">{{ item.label }}</span>\r\n        @if (hasChildren(item)) {\r\n          <svg\r\n            class=\"bk-menu__chevron\"\r\n            [class.bk-menu__chevron--open]=\"!isPopup && isOpen(item)\"\r\n            [class.bk-menu__chevron--right]=\"isPopup && (isVertical || level > 0)\"\r\n            viewBox=\"0 0 24 24\"\r\n            width=\"16\"\r\n            height=\"16\"\r\n            fill=\"none\"\r\n            aria-hidden=\"true\">\r\n            <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        }\r\n      </button>\r\n\r\n      @if (hasChildren(item)) {\r\n        <ul\r\n          class=\"bk-menu__submenu\"\r\n          [class.bk-menu__submenu--inline]=\"!isPopup\"\r\n          [class.bk-menu__submenu--popup]=\"isPopup\"\r\n          [class.bk-menu__submenu--open]=\"isOpen(item)\"\r\n          [class.bk-menu__submenu--popup-right]=\"isPopup && (isVertical || level > 0)\"\r\n          [class.bk-menu__submenu--popup-down]=\"isPopup && !isVertical && level === 0\"\r\n          role=\"menu\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTpl; context: { $implicit: item.children, level: level + 1 }\">\r\n          </ng-container>\r\n        </ul>\r\n      }\r\n    </li>\r\n  }\r\n</ng-template>\r\n", styles: [".bk-menu{--menu-bg: #ffffff;--menu-text: #141414;--menu-subtext: #6b7080;--menu-hover-bg: #edeef0;--menu-hover-text: #141414;--menu-active-bg: #141414;--menu-active-text: #ffffff;--menu-border: #efeff1;--menu-shadow: 0 7px 18px 0 rgba(0, 0, 0, .09);--menu-radius: 8px;--menu-disabled: .5;display:block;width:100%;font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:-.28px;background:var(--menu-bg);color:var(--menu-text);border:1px solid var(--menu-border);border-radius:var(--menu-radius)}.bk-menu:not(.bk-menu--popup){overflow:hidden}.bk-menu--popup.bk-menu--vertical>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{border-radius:8px 8px 0 0}.bk-menu--popup.bk-menu--vertical>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{border-radius:0 0 8px 8px}.bk-menu--popup.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:first-child>.bk-menu__button{border-radius:8px 0 0 8px}.bk-menu--popup.bk-menu--horizontal>.bk-menu__list>.bk-menu__item:last-child>.bk-menu__button{border-radius:0 8px 8px 0}.bk-menu__list,.bk-menu__submenu{list-style:none;margin:0;padding:0}.bk-menu--horizontal>.bk-menu__list{display:flex;flex-direction:row;align-items:stretch}.bk-menu--horizontal:not(.bk-menu--popup)>.bk-menu__list{overflow-x:auto}.bk-menu__item{position:relative}.bk-menu__button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;white-space:nowrap;border-radius:6px;transition:background .1s ease,color .1s ease}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:auto}.bk-menu__button:hover:not(:disabled):not(.bk-menu__button--active){background:var(--menu-hover-bg);color:var(--menu-hover-text)}.bk-menu__button--active{background:var(--menu-active-bg);color:var(--menu-active-text)}.bk-menu__button--disabled,.bk-menu__button:disabled{opacity:var(--menu-disabled);cursor:not-allowed}.bk-menu__submenu .bk-menu__button{color:var(--menu-subtext);font-weight:400}.bk-menu__submenu .bk-menu__button--active{color:var(--menu-active-text)}.bk-menu__icon{width:16px;height:16px;flex-shrink:0;object-fit:contain}.bk-menu--tint .bk-menu__icon{filter:brightness(0) saturate(0)}.bk-menu--tint .bk-menu__button--active .bk-menu__icon{filter:brightness(0) invert(1)}.bk-menu__label{flex:1 1 auto;min-width:0}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button>.bk-menu__label{flex:0 0 auto}.bk-menu__chevron{flex-shrink:0;transition:transform .18s ease;opacity:.8}.bk-menu__chevron--open{transform:rotate(180deg)}.bk-menu__chevron--right{transform:rotate(-90deg)}.bk-menu__submenu--inline{overflow:hidden;max-height:0;transition:max-height .2s ease}.bk-menu__submenu--inline.bk-menu__submenu--open{max-height:1000px}.bk-menu__submenu--popup{position:absolute;z-index:50;min-width:200px;background:var(--menu-bg);border:1px solid var(--menu-border);border-radius:12px;box-shadow:var(--menu-shadow);padding:4px;display:none}.bk-menu__submenu--popup.bk-menu__submenu--open{display:block}.bk-menu__submenu--popup-right{top:0;left:100%;margin-left:4px}.bk-menu__submenu--popup-down{top:100%;left:0;margin-top:4px}.bk-menu__submenu--popup-right:before{content:\"\";position:absolute;top:0;left:-6px;width:6px;height:100%}.bk-menu__submenu--popup-down:before{content:\"\";position:absolute;top:-6px;left:0;width:100%;height:6px}@media (max-width: 640px){.bk-menu--horizontal>.bk-menu__list{flex-direction:column;overflow-x:visible}.bk-menu--horizontal>.bk-menu__list>.bk-menu__item>.bk-menu__button{width:100%}.bk-menu--horizontal .bk-menu__submenu--popup-down{position:static;box-shadow:none;border:0;margin:0;border-radius:0}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], submenuMode: [{
+                type: Input
+            }], singleOpen: [{
+                type: Input
+            }], activeItemId: [{
+                type: Input
+            }], tintIcons: [{
+                type: Input
+            }], activeItemIdChange: [{
+                type: Output
+            }], itemClick: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
 /*
  * Public API Surface of brickclay-lib
  */
@@ -9408,5 +9690,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map