@brickclay-org/ui 0.1.32 → 0.1.34

package/fesm2022/brickclay-org-ui.mjs

@@ -352,7 +352,7 @@ class BkTimePicker {
                 useExisting: forwardRef(() => BkTimePicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "timeScrollElements", predicate: ["timeScroll"], descendants: true }, { propertyName: "minuteScrollElements", predicate: ["minuteScroll"], descendants: true }, { propertyName: "secondScrollElements", predicate: ["secondScroll"], 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\">\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          class=\"custom-time-picker\"\r\n          [ngClass]=\"{\r\n            'left-position': position === 'left',\r\n            'right-position': position === 'right',\r\n            'format-24': timeFormat === 24,\r\n          }\"\r\n        >\r\n          <!-- Hours Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                (click)=\"onHourChange(h)\"\r\n              >\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 (cyclic wheel: 59 -> 00) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll time-wheel\" #minuteScroll (scroll)=\"onMinuteWheelScroll()\">\r\n              <div\r\n                *ngFor=\"let m of wheelMinutes\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === 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 (cyclic wheel: 59 -> 00) -->\r\n            <div class=\"time-column\">\r\n              <div class=\"time-scroll time-wheel\" #secondScroll (scroll)=\"onSecondWheelScroll()\">\r\n                <div\r\n                  *ngFor=\"let s of wheelSeconds\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentSecond === 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\" #timeScroll>\r\n                <div\r\n                  *ngFor=\"let ap of getAMPMOptions()\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentAMPM === ap\"\r\n                  (click)=\"onAMPMChange(ap)\"\r\n                >\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;padding:10px 40px 10px 12px}.time-input:focus{outline:none;border-color:#111827;box-shadow:0 0 0 3px #1118271a}.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}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:95px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;scrollbar-width:none;-ms-overflow-style:none}.time-scroll::-webkit-scrollbar{display:none}.time-scroll::-webkit-scrollbar-track{background:transparent}.time-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}.time-item{min-width:40px;width:40px;height:32px;min-height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;color:#374151;cursor:pointer;border-radius:4px;transition:all .15s ease;-webkit-user-select:none;user-select:none;font-family:Inter,sans-serif}.time-item:hover{background:#f3f4f6}.time-item.selected{background:#111827;color:#fff;font-weight:500;box-shadow:0 1px 2px #2563eb4d}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], viewQueries: [{ propertyName: "timeScrollElements", predicate: ["timeScroll"], descendants: true }, { propertyName: "minuteScrollElements", predicate: ["minuteScroll"], descendants: true }, { propertyName: "secondScrollElements", predicate: ["secondScroll"], 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\">\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          class=\"custom-time-picker\"\r\n          [ngClass]=\"{\r\n            'left-position': position === 'left',\r\n            'right-position': position === 'right',\r\n            'format-24': timeFormat === 24,\r\n          }\"\r\n        >\r\n          <!-- Hours Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                (click)=\"onHourChange(h)\"\r\n              >\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 (cyclic wheel: 59 -> 00) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll time-wheel\" #minuteScroll (scroll)=\"onMinuteWheelScroll()\">\r\n              <div\r\n                *ngFor=\"let m of wheelMinutes\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === 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 (cyclic wheel: 59 -> 00) -->\r\n            <div class=\"time-column\">\r\n              <div class=\"time-scroll time-wheel\" #secondScroll (scroll)=\"onSecondWheelScroll()\">\r\n                <div\r\n                  *ngFor=\"let s of wheelSeconds\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentSecond === 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\" #timeScroll>\r\n                <div\r\n                  *ngFor=\"let ap of getAMPMOptions()\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentAMPM === ap\"\r\n                  (click)=\"onAMPMChange(ap)\"\r\n                >\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;box-shadow:0 0 0 3px #1118271a}.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}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:95px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;scrollbar-width:none;-ms-overflow-style:none}.time-scroll::-webkit-scrollbar{display:none}.time-scroll::-webkit-scrollbar-track{background:transparent}.time-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}.time-item{min-width:40px;width:40px;height:32px;min-height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;color:#374151;cursor:pointer;border-radius:4px;transition:all .15s ease;-webkit-user-select:none;user-select:none;font-family:Inter,sans-serif}.time-item:hover{background:#f3f4f6}.time-item.selected{background:#111827;color:#fff;font-weight:500;box-shadow:0 1px 2px #2563eb4d}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}.time-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}\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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkTimePicker, decorators: [{
             type: Component,
@@ -362,7 +362,7 @@ 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\">\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          class=\"custom-time-picker\"\r\n          [ngClass]=\"{\r\n            'left-position': position === 'left',\r\n            'right-position': position === 'right',\r\n            'format-24': timeFormat === 24,\r\n          }\"\r\n        >\r\n          <!-- Hours Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                (click)=\"onHourChange(h)\"\r\n              >\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 (cyclic wheel: 59 -> 00) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll time-wheel\" #minuteScroll (scroll)=\"onMinuteWheelScroll()\">\r\n              <div\r\n                *ngFor=\"let m of wheelMinutes\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === 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 (cyclic wheel: 59 -> 00) -->\r\n            <div class=\"time-column\">\r\n              <div class=\"time-scroll time-wheel\" #secondScroll (scroll)=\"onSecondWheelScroll()\">\r\n                <div\r\n                  *ngFor=\"let s of wheelSeconds\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentSecond === 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\" #timeScroll>\r\n                <div\r\n                  *ngFor=\"let ap of getAMPMOptions()\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentAMPM === ap\"\r\n                  (click)=\"onAMPMChange(ap)\"\r\n                >\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;padding:10px 40px 10px 12px}.time-input:focus{outline:none;border-color:#111827;box-shadow:0 0 0 3px #1118271a}.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}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:95px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;scrollbar-width:none;-ms-overflow-style:none}.time-scroll::-webkit-scrollbar{display:none}.time-scroll::-webkit-scrollbar-track{background:transparent}.time-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}.time-item{min-width:40px;width:40px;height:32px;min-height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;color:#374151;cursor:pointer;border-radius:4px;transition:all .15s ease;-webkit-user-select:none;user-select:none;font-family:Inter,sans-serif}.time-item:hover{background:#f3f4f6}.time-item.selected{background:#111827;color:#fff;font-weight:500;box-shadow:0 1px 2px #2563eb4d}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}\n"] }]
+                    ], 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\">\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          class=\"custom-time-picker\"\r\n          [ngClass]=\"{\r\n            'left-position': position === 'left',\r\n            'right-position': position === 'right',\r\n            'format-24': timeFormat === 24,\r\n          }\"\r\n        >\r\n          <!-- Hours Column -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll\" #timeScroll>\r\n              <div\r\n                *ngFor=\"let h of getHours()\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentHour === h\"\r\n                (click)=\"onHourChange(h)\"\r\n              >\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 (cyclic wheel: 59 -> 00) -->\r\n          <div class=\"time-column\">\r\n            <div class=\"time-scroll time-wheel\" #minuteScroll (scroll)=\"onMinuteWheelScroll()\">\r\n              <div\r\n                *ngFor=\"let m of wheelMinutes\"\r\n                class=\"time-item\"\r\n                [class.selected]=\"currentMinute === 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 (cyclic wheel: 59 -> 00) -->\r\n            <div class=\"time-column\">\r\n              <div class=\"time-scroll time-wheel\" #secondScroll (scroll)=\"onSecondWheelScroll()\">\r\n                <div\r\n                  *ngFor=\"let s of wheelSeconds\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentSecond === 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\" #timeScroll>\r\n                <div\r\n                  *ngFor=\"let ap of getAMPMOptions()\"\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"currentAMPM === ap\"\r\n                  (click)=\"onAMPMChange(ap)\"\r\n                >\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;box-shadow:0 0 0 3px #1118271a}.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}.time-column{display:flex;flex-direction:column;position:relative}.time-scroll{display:flex;flex-direction:column;max-height:95px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;scrollbar-width:none;-ms-overflow-style:none}.time-scroll::-webkit-scrollbar{display:none}.time-scroll::-webkit-scrollbar-track{background:transparent}.time-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}.time-item{min-width:40px;width:40px;height:32px;min-height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;color:#374151;cursor:pointer;border-radius:4px;transition:all .15s ease;-webkit-user-select:none;user-select:none;font-family:Inter,sans-serif}.time-item:hover{background:#f3f4f6}.time-item.selected{background:#111827;color:#fff;font-weight:500;box-shadow:0 1px 2px #2563eb4d}.ampm-column .time-item{min-width:40px;width:40px}.time-separator{font-size:16px;font-weight:600;color:#6b7280;margin:5px 0 0}.time-input:disabled{cursor:not-allowed;border-color:#e3e3e7;background-color:#f4f4f6;color:#a1a3ae}\n"] }]
         }], propDecorators: { required: [{
                 type: Input
             }], value: [{
@@ -4506,6 +4506,9 @@ class BkSelect {
         const list = this.filteredItems();
         const current = this.markedIndex();
         switch (event.key) {
+            case 'Tab':
+                this.closeDropdown();
+                break;
             case 'ArrowDown':
                 event.preventDefault();
                 if (current < list.length - 1) {
@@ -4625,7 +4628,7 @@ class BkSelect {
                 useExisting: forwardRef(() => BkSelect),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "optionsRef", predicate: ["optionsRef"], descendants: true }], ngImport: i0, template: "<div class=\"bk-select-container\" [ngClass]=\"variation\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"bk-select-control\"\r\n    [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [class.bk-focused]=\"isOpen()\"\r\n    [class.bk-disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if (iconSrc) {\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n    }\r\n    <div class=\"bk-value-container\">\r\n      @if (selectedOptions().length === 0) {\r\n        <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n      }\r\n      @if (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-chips flex gap-0.5 flex-wrap h-[18px] overflow-y-auto\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"bk-multi-badge-item me-0.5\">\r\n              <span class=\"bk-multi-badge-item-text\" [style.color]=\"resolveColor(opt)\">{{\r\n                resolveLabel(opt)\r\n              }}</span>\r\n\r\n              <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                <svg\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  width=\"8\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 8 8\"\r\n                  fill=\"none\"\r\n                >\r\n                  <path\r\n                    d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                    stroke=\"#BBBDC5\"\r\n                    stroke-width=\"1.25\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"bk-multi-badge-item\">\r\n              <span\r\n                class=\"bk-multi-badge-item-text\"\r\n                bkTooltipPosition=\"top\"\r\n                [bkTooltip]=\"getRemainingItems()\"\r\n                >+{{ selectedOptions().length - maxLabels() }}</span\r\n              >\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\">\r\n          {{ resolveLabel(selectedOptions()[0]) }}\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"bk-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\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        </span>\r\n      }\r\n      <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"18\"\r\n          height=\"18\"\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          <path d=\"m6 9 6 6 6-6\" />\r\n        </svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"bk-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n      [class.bk-grouped]=\"groupBy()\"\r\n    >\r\n      @if (searchable()) {\r\n        <div class=\"bk-dropdown-search mb-1\">\r\n          <div class=\"bk-search-wrapper\">\r\n            <svg\r\n              class=\"text-[#BBBDC5] mr-2\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"20\"\r\n              height=\"20\"\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              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"bk-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"'Search...'\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (keydown)=\"onKeyDown($event)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"bk-options-list\" (scroll)=\"onScroll($event)\">\r\n        @if (loading()) {\r\n          <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()) {\r\n            @if (multiple() && filteredItems().length > 0) {\r\n              <div\r\n                class=\"bk-option\"\r\n                (mousedown)=\"toggleSelectAll($event)\"\r\n                [class.bk-selected]=\"isAllSelected()\"\r\n              >\r\n                <div class=\"flex-1 flex justify-between\">\r\n                  <span class=\"line-clamp-1\" >Select All</span>\r\n                  @if (isAllSelected()) {\r\n                    <svg\r\n                      class=\"text-[#141414]\"\r\n                      width=\"17\"\r\n                      height=\"17\"\r\n                      viewBox=\"0 0 24 24\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"2.5\"\r\n                    >\r\n                      <polyline points=\"20 6 9 17 4 12\" />\r\n                    </svg>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          }\r\n          @for (group of groupedItems(); track $index) {\r\n            @if (group.group) {\r\n              <div class=\"bk-option-group\">\r\n                {{ group.group }}\r\n              </div>\r\n            }\r\n\r\n            @for (item of group.items; track $index) {\r\n              <div\r\n                #optionsRef\r\n                class=\"bk-option\"\r\n                [class.bk-selected]=\"isItemSelected(item)\"\r\n                [class.bk-marked]=\"$index === markedIndex()\"\r\n                (click)=\"handleSelection(item, $event)\"\r\n              >\r\n                <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                  <span class=\"bk-option-label min-w-0\" [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\r\n\r\n                  @if (isItemSelected(item)) {\r\n                    <svg\r\n                      class=\"text-[#141414] shrink-0\"\r\n                      width=\"17\"\r\n                      height=\"17\"\r\n                      viewBox=\"0 0 24 24\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"2.5\"\r\n                    >\r\n                      <polyline points=\"20 6 9 17 4 12\" />\r\n                    </svg>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          }\r\n\r\n          @if (filteredItems().length === 0) {\r\n            <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 cursor-pointer focus:border-transparent focus-visible:!outline-[.5px] focus-visible:!outline-[#6B7080];box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7;background-color:#f4f4f6}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{@apply border-[#d11e14];}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs;}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply max-h-60 overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsListContainer", first: true, predicate: ["optionsListContainer"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }, { propertyName: "optionsRef", predicate: ["optionsRef"], descendants: true }], ngImport: i0, template: "<div class=\"bk-select-container\" [ngClass]=\"variation\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"bk-select-control\"\r\n    [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [class.bk-focused]=\"isOpen()\"\r\n    [class.bk-disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if (iconSrc) {\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n    }\r\n    <div class=\"bk-value-container\">\r\n      @if (selectedOptions().length === 0) {\r\n        <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n      }\r\n      @if (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-chips flex gap-0.5 flex-wrap h-[18px] overflow-y-auto\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"bk-multi-badge-item me-0.5\">\r\n              <span class=\"bk-multi-badge-item-text\" [style.color]=\"resolveColor(opt)\">{{\r\n                resolveLabel(opt)\r\n              }}</span>\r\n\r\n              <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                <svg\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  width=\"8\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 8 8\"\r\n                  fill=\"none\"\r\n                >\r\n                  <path\r\n                    d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                    stroke=\"#BBBDC5\"\r\n                    stroke-width=\"1.25\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"bk-multi-badge-item\">\r\n              <span\r\n                class=\"bk-multi-badge-item-text\"\r\n                bkTooltipPosition=\"top\"\r\n                [bkTooltip]=\"getRemainingItems()\"\r\n                >+{{ selectedOptions().length - maxLabels() }}</span\r\n              >\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\">\r\n          {{ resolveLabel(selectedOptions()[0]) }}\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"bk-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\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        </span>\r\n      }\r\n      <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"18\"\r\n          height=\"18\"\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          <path d=\"m6 9 6 6 6-6\" />\r\n        </svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      tabindex=\"-1\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      class=\"bk-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n      [class.bk-grouped]=\"groupBy()\"\r\n    >\r\n      @if (searchable()) {\r\n        <div class=\"bk-dropdown-search mb-1\">\r\n          <div class=\"bk-search-wrapper\">\r\n            <svg\r\n              class=\"text-[#BBBDC5] mr-2\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"20\"\r\n              height=\"20\"\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              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              tabindex=\"-1\"\r\n              type=\"text\"\r\n              class=\"bk-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"'Search...'\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (keydown)=\"onKeyDown($event)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer tabindex=\"-1\" class=\"bk-options-list\" (scroll)=\"onScroll($event)\">\r\n        @if (loading()) {\r\n          <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()) {\r\n            @if (multiple() && filteredItems().length > 0) {\r\n              <div\r\n                class=\"bk-option\"\r\n                (mousedown)=\"toggleSelectAll($event)\"\r\n                [class.bk-selected]=\"isAllSelected()\"\r\n              >\r\n                <div class=\"flex-1 flex justify-between\">\r\n                  <span class=\"line-clamp-1\" >Select All</span>\r\n                  @if (isAllSelected()) {\r\n                    <svg\r\n                      class=\"text-[#141414]\"\r\n                      width=\"17\"\r\n                      height=\"17\"\r\n                      viewBox=\"0 0 24 24\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"2.5\"\r\n                    >\r\n                      <polyline points=\"20 6 9 17 4 12\" />\r\n                    </svg>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          }\r\n          @for (group of groupedItems(); track $index) {\r\n            @if (group.group) {\r\n              <div class=\"bk-option-group\">\r\n                {{ group.group }}\r\n              </div>\r\n            }\r\n\r\n            @for (item of group.items; track $index) {\r\n              <div\r\n                #optionsRef\r\n                tabindex=\"-1\"\r\n                class=\"bk-option\"\r\n                [class.bk-selected]=\"isItemSelected(item)\"\r\n                [class.bk-marked]=\"$index === markedIndex()\"\r\n                (click)=\"handleSelection(item, $event)\"\r\n              >\r\n                <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                  <span class=\"bk-option-label min-w-0\" [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\r\n\r\n                  @if (isItemSelected(item)) {\r\n                    <svg\r\n                      class=\"text-[#141414] shrink-0\"\r\n                      width=\"17\"\r\n                      height=\"17\"\r\n                      viewBox=\"0 0 24 24\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"2.5\"\r\n                    >\r\n                      <polyline points=\"20 6 9 17 4 12\" />\r\n                    </svg>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          }\r\n\r\n          @if (filteredItems().length === 0) {\r\n            <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 cursor-pointer focus:border-transparent focus-visible:!outline-[.5px] focus-visible:!outline-[#6B7080];box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7;background-color:#f4f4f6}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{@apply border-[#d11e14];}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs;}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply max-h-60 overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, decorators: [{
             type: Component,
@@ -4635,7 +4638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkSelect),
                             multi: true
                         }
-                    ], template: "<div class=\"bk-select-container\" [ngClass]=\"variation\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"bk-select-control\"\r\n    [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [class.bk-focused]=\"isOpen()\"\r\n    [class.bk-disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if (iconSrc) {\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n    }\r\n    <div class=\"bk-value-container\">\r\n      @if (selectedOptions().length === 0) {\r\n        <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n      }\r\n      @if (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-chips flex gap-0.5 flex-wrap h-[18px] overflow-y-auto\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"bk-multi-badge-item me-0.5\">\r\n              <span class=\"bk-multi-badge-item-text\" [style.color]=\"resolveColor(opt)\">{{\r\n                resolveLabel(opt)\r\n              }}</span>\r\n\r\n              <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                <svg\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  width=\"8\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 8 8\"\r\n                  fill=\"none\"\r\n                >\r\n                  <path\r\n                    d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                    stroke=\"#BBBDC5\"\r\n                    stroke-width=\"1.25\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"bk-multi-badge-item\">\r\n              <span\r\n                class=\"bk-multi-badge-item-text\"\r\n                bkTooltipPosition=\"top\"\r\n                [bkTooltip]=\"getRemainingItems()\"\r\n                >+{{ selectedOptions().length - maxLabels() }}</span\r\n              >\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\">\r\n          {{ resolveLabel(selectedOptions()[0]) }}\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"bk-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\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        </span>\r\n      }\r\n      <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"18\"\r\n          height=\"18\"\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          <path d=\"m6 9 6 6 6-6\" />\r\n        </svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"bk-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n      [class.bk-grouped]=\"groupBy()\"\r\n    >\r\n      @if (searchable()) {\r\n        <div class=\"bk-dropdown-search mb-1\">\r\n          <div class=\"bk-search-wrapper\">\r\n            <svg\r\n              class=\"text-[#BBBDC5] mr-2\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"20\"\r\n              height=\"20\"\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              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"bk-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"'Search...'\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (keydown)=\"onKeyDown($event)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"bk-options-list\" (scroll)=\"onScroll($event)\">\r\n        @if (loading()) {\r\n          <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()) {\r\n            @if (multiple() && filteredItems().length > 0) {\r\n              <div\r\n                class=\"bk-option\"\r\n                (mousedown)=\"toggleSelectAll($event)\"\r\n                [class.bk-selected]=\"isAllSelected()\"\r\n              >\r\n                <div class=\"flex-1 flex justify-between\">\r\n                  <span class=\"line-clamp-1\" >Select All</span>\r\n                  @if (isAllSelected()) {\r\n                    <svg\r\n                      class=\"text-[#141414]\"\r\n                      width=\"17\"\r\n                      height=\"17\"\r\n                      viewBox=\"0 0 24 24\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"2.5\"\r\n                    >\r\n                      <polyline points=\"20 6 9 17 4 12\" />\r\n                    </svg>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          }\r\n          @for (group of groupedItems(); track $index) {\r\n            @if (group.group) {\r\n              <div class=\"bk-option-group\">\r\n                {{ group.group }}\r\n              </div>\r\n            }\r\n\r\n            @for (item of group.items; track $index) {\r\n              <div\r\n                #optionsRef\r\n                class=\"bk-option\"\r\n                [class.bk-selected]=\"isItemSelected(item)\"\r\n                [class.bk-marked]=\"$index === markedIndex()\"\r\n                (click)=\"handleSelection(item, $event)\"\r\n              >\r\n                <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                  <span class=\"bk-option-label min-w-0\" [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\r\n\r\n                  @if (isItemSelected(item)) {\r\n                    <svg\r\n                      class=\"text-[#141414] shrink-0\"\r\n                      width=\"17\"\r\n                      height=\"17\"\r\n                      viewBox=\"0 0 24 24\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"2.5\"\r\n                    >\r\n                      <polyline points=\"20 6 9 17 4 12\" />\r\n                    </svg>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          }\r\n\r\n          @if (filteredItems().length === 0) {\r\n            <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 cursor-pointer focus:border-transparent focus-visible:!outline-[.5px] focus-visible:!outline-[#6B7080];box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7;background-color:#f4f4f6}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{@apply border-[#d11e14];}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs;}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply max-h-60 overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}\n"] }]
+                    ], template: "<div class=\"bk-select-container\" [ngClass]=\"variation\">\r\n  @if (label) {\r\n    <label class=\"bk-select-label\" (click)=\"openFromLabel($event)\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"bk-select-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div\r\n    #controlWrapper\r\n    class=\"bk-select-control\"\r\n    [ngClass]=\"{ 'bk-has-error': hasError }\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [class.bk-focused]=\"isOpen()\"\r\n    [class.bk-disabled]=\"disabled()\"\r\n    (mousedown)=\"toggleDropdown($event)\"\r\n  >\r\n    <!-- Icon (Always visible if set) -->\r\n    @if (iconSrc) {\r\n      <img [src]=\"iconSrc\" [alt]=\"iconAlt\" class=\"shrink-0\" />\r\n    }\r\n    <div class=\"bk-value-container\">\r\n      @if (selectedOptions().length === 0) {\r\n        <div class=\"bk-placeholder\">{{ placeholder() }}</div>\r\n      }\r\n      @if (multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-chips flex gap-0.5 flex-wrap h-[18px] overflow-y-auto\">\r\n          @for (opt of selectedOptions().slice(0, maxLabels()); track $index) {\r\n            <div class=\"bk-multi-badge-item me-0.5\">\r\n              <span class=\"bk-multi-badge-item-text\" [style.color]=\"resolveColor(opt)\">{{\r\n                resolveLabel(opt)\r\n              }}</span>\r\n\r\n              <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                <svg\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                  width=\"8\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 8 8\"\r\n                  fill=\"none\"\r\n                >\r\n                  <path\r\n                    d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\"\r\n                    stroke=\"#BBBDC5\"\r\n                    stroke-width=\"1.25\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          }\r\n          @if (selectedOptions().length > maxLabels()) {\r\n            <div class=\"bk-multi-badge-item\">\r\n              <span\r\n                class=\"bk-multi-badge-item-text\"\r\n                bkTooltipPosition=\"top\"\r\n                [bkTooltip]=\"getRemainingItems()\"\r\n                >+{{ selectedOptions().length - maxLabels() }}</span\r\n              >\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n      @if (!multiple() && selectedOptions().length > 0) {\r\n        <div class=\"bk-value-label-single\" [style.color]=\"resolveColor(selectedOptions()[0])\">\r\n          {{ resolveLabel(selectedOptions()[0]) }}\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"bk-actions\">\r\n      @if (clearable() && selectedOptions().length > 0 && !disabled()) {\r\n        <span class=\"bk-clear-wrapper\" (mousedown)=\"handleClear($event)\" title=\"Clear\">\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        </span>\r\n      }\r\n      <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"18\"\r\n          height=\"18\"\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          <path d=\"m6 9 6 6 6-6\" />\r\n        </svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      tabindex=\"-1\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      class=\"bk-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n      [class.bk-grouped]=\"groupBy()\"\r\n    >\r\n      @if (searchable()) {\r\n        <div class=\"bk-dropdown-search mb-1\">\r\n          <div class=\"bk-search-wrapper\">\r\n            <svg\r\n              class=\"text-[#BBBDC5] mr-2\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"20\"\r\n              height=\"20\"\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              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input\r\n              #searchInput\r\n              tabindex=\"-1\"\r\n              type=\"text\"\r\n              class=\"bk-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"'Search...'\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (keydown)=\"onKeyDown($event)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer tabindex=\"-1\" class=\"bk-options-list\" (scroll)=\"onScroll($event)\">\r\n        @if (loading()) {\r\n          <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()) {\r\n            @if (multiple() && filteredItems().length > 0) {\r\n              <div\r\n                class=\"bk-option\"\r\n                (mousedown)=\"toggleSelectAll($event)\"\r\n                [class.bk-selected]=\"isAllSelected()\"\r\n              >\r\n                <div class=\"flex-1 flex justify-between\">\r\n                  <span class=\"line-clamp-1\" >Select All</span>\r\n                  @if (isAllSelected()) {\r\n                    <svg\r\n                      class=\"text-[#141414]\"\r\n                      width=\"17\"\r\n                      height=\"17\"\r\n                      viewBox=\"0 0 24 24\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"2.5\"\r\n                    >\r\n                      <polyline points=\"20 6 9 17 4 12\" />\r\n                    </svg>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          }\r\n          @for (group of groupedItems(); track $index) {\r\n            @if (group.group) {\r\n              <div class=\"bk-option-group\">\r\n                {{ group.group }}\r\n              </div>\r\n            }\r\n\r\n            @for (item of group.items; track $index) {\r\n              <div\r\n                #optionsRef\r\n                tabindex=\"-1\"\r\n                class=\"bk-option\"\r\n                [class.bk-selected]=\"isItemSelected(item)\"\r\n                [class.bk-marked]=\"$index === markedIndex()\"\r\n                (click)=\"handleSelection(item, $event)\"\r\n              >\r\n                <div class=\"flex-1 flex justify-between gap-2 min-w-0\">\r\n                  <span class=\"bk-option-label min-w-0\" [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\r\n\r\n                  @if (isItemSelected(item)) {\r\n                    <svg\r\n                      class=\"text-[#141414] shrink-0\"\r\n                      width=\"17\"\r\n                      height=\"17\"\r\n                      viewBox=\"0 0 24 24\"\r\n                      fill=\"none\"\r\n                      stroke=\"currentColor\"\r\n                      stroke-width=\"2.5\"\r\n                    >\r\n                      <polyline points=\"20 6 9 17 4 12\" />\r\n                    </svg>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          }\r\n\r\n          @if (filteredItems().length === 0) {\r\n            <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (hasError) {\r\n    @if (errorMessage) {\r\n      <p class=\"bk-select-error\">{{ errorMessage }}</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".bk-select-container{@apply relative w-full box-border flex flex-col gap-1.5;}.bk-select-control{@apply flex items-center justify-between gap-2 w-full bg-white border border-[#E3E3E7] rounded transition-all duration-200 cursor-pointer focus:border-transparent focus-visible:!outline-[.5px] focus-visible:!outline-[#6B7080];box-shadow:0 1px 2px #1018280d}.bk-select-control:focus-visible{outline-style:solid!important}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;}.bk-select-control.bk-disabled{@apply cursor-not-allowed;border-color:#e3e3e7;background-color:#f4f4f6}.bk-select-control.bk-disabled .bk-placeholder{color:#a1a3ae}.bk-select-container.default .bk-select-control{@apply px-3 py-2.5;}.bk-select-container.sm .bk-select-control{@apply px-3 py-[5px];}.bk-select-control.bk-has-error{@apply border-[#d11e14];}.bk-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full;}.bk-placeholder{@apply text-[#6B7080] font-normal text-[14px] truncate w-full pointer-events-none !leading-[18px];}.bk-value-label-single{@apply font-normal text-[#141414] truncate w-full;}.bk-select-container.default .bk-select-control .bk-value-label-single{@apply text-[14px] !leading-[18px];}.bk-select-container.sm .bk-select-control .bk-value-label-single{@apply text-xs;}.bk-multi-badge-item{@apply inline-flex items-center gap-1.5 px-1.5 py-0.5 bg-white border border-[#E3E3E7] rounded-[4px];max-width:120px;min-width:0}.bk-multi-badge-item-text{@apply text-[10px] leading-[12px] font-normal text-[#6B7080];white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bk-multi-badge-close{@apply cursor-pointer outline-none w-3 h-3;}.bk-actions{@apply flex items-center gap-0.5 flex-shrink-0;}.bk-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.bk-arrow-wrapper{@apply text-gray-400 transition-transform duration-200;}.bk-arrow-wrapper.bk-open{@apply rotate-180;}.bk-dropdown-panel{@apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.bk-dropdown-search{@apply px-2 pt-2;}.bk-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.bk-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.bk-options-list{@apply max-h-60 overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}.bk-option{@apply flex items-center p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] min-w-0;}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-option .bk-option-label{@apply line-clamp-1 break-all;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.bk-select-all-option{@apply sticky top-0 z-20 flex items-center px-3 py-2 cursor-pointer border-b border-[#E3E6EE] bg-gray-50 text-[#15191E];}.bk-select-all-option:hover{@apply bg-gray-100;}.bk-dropdown-panel[data-position=top]{margin-top:0;margin-bottom:4px}.bk-select-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] inline-block;}.bk-select-label-required{@apply text-[#E7000B];}.bk-options-list ::-webkit-scrollbar{width:10px}.bk-options-list ::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.bk-options-list ::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.bk-options-list ::-webkit-scrollbar-thumb:hover{background:#909090}.bk-option-group{@apply px-2.5 py-1 font-bold text-[13px] leading-5 text-[#141414];}.bk-option-group:not(:first-child){@apply mt-4;}.bk-select-error{@apply text-xs text-[#E7000B] font-normal;}.bk-select-hint{@apply text-xs text-[#868997] font-normal;}.bk-search-input:focus-visible{outline:2px solid transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllText", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], iconAlt: [{
                 type: Input
             }], label: [{