@brickclay-org/ui 0.0.88 → 0.0.90

package/fesm2022/brickclay-org-ui.mjs

@@ -4241,7 +4241,9 @@ class BkSelect {
         return key && typeof item === 'object' ? item[key] : null;
     }
     getRemainingItems() {
-        return this.selectedOptions().slice(this.maxLabels()).map((x) => x.label);
+        return this.selectedOptions()
+            .slice(this.maxLabels())
+            .map((x) => this.resolveLabel(x));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkSelect, isStandalone: true, selector: "bk-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxLabels: { classPropertyName: "maxLabels", publicName: "maxLabels", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allSelect: { classPropertyName: "allSelect", publicName: "allSelect", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: false, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: false, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", open: "open", close: "close", focus: "focus", blur: "blur", search: "search", clear: "clear", change: "change", scrollToEnd: "scrollToEnd" }, host: { listeners: { "window:scroll": "onWindowEvents()", "window:resize": "onWindowEvents()", "document:click": "onClickOutside($event)" } }, providers: [
@@ -4250,7 +4252,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\">\r\n\r\n  @if(label){\r\n  <label\r\n    class=\"bk-select-label\"\r\n    (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\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\">\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)\">{{ resolveLabel(opt) }}</span>\r\n\r\n              <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n                  <path d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\" stroke=\"#BBBDC5\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\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\"><span\r\n              class=\"bk-multi-badge-item-text\" bkTooltipPosition=\"top\" [bkTooltip]=\"getRemainingItems()\">+{{ selectedOptions().length - maxLabels() }}</span></div>\r\n\r\n\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]) }}</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 xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\"\r\n                                                                                                           y1=\"6\" x2=\"6\"\r\n                                                                                                           y2=\"18\"></line><line\r\n            x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path\r\n          d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"bk-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n      [class.bk-grouped]=\"groupBy()\"\r\n    >\r\n\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 class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\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 #searchInput type=\"text\" class=\"bk-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\"\r\n                   (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"bk-options-list\">\r\n        @if (loading()) {\r\n          <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()){\r\n\r\n          @if (multiple() && filteredItems().length > 0) {\r\n            <div class=\"bk-option\" (mousedown)=\"toggleSelectAll($event)\" [class.bk-selected]=\"isAllSelected()\">\r\n              <div class=\"flex-1 flex justify-between\">\r\n                <span>Select All</span>\r\n                @if (isAllSelected()) {\r\n                  <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                       stroke=\"currentColor\" stroke-width=\"2.5\">\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\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 #optionsRef class=\"bk-option\" [class.bk-selected]=\"isItemSelected(item)\" [class.bk-marked]=\"$index === markedIndex()\" (click)=\"handleSelection(item, $event)\">\r\n                <div class=\"flex-1 flex justify-between\">\r\n                  <span [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\r\n\r\n                  @if (isItemSelected(item)) {\r\n                    <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\"\r\n                         fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\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\r\n          @if (filteredItems().length === 0) {\r\n            <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\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\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 px-3 py-2.5 cursor-pointer;}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;}.bk-select-control.bk-disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.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-sm truncate w-full pointer-events-none;}.bk-value-label-single{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full;}.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];}.bk-multi-badge-item-text{@apply text-[10px] leading-[14px] font-normal text-[#6B7080];}.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-auto 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];}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.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;}\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\">\r\n\r\n  @if(label){\r\n  <label\r\n    class=\"bk-select-label\"\r\n    (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\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\">\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)\">{{ resolveLabel(opt) }}</span>\r\n\r\n              <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n                  <path d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\" stroke=\"#BBBDC5\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\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\"><span\r\n              class=\"bk-multi-badge-item-text\"\r\n              bkTooltipPosition=\"top\"\r\n              [bkTooltip]=\"getRemainingItems()\">+{{ selectedOptions().length - maxLabels() }}</span></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]) }}</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 xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\"\r\n                                                                                                           y1=\"6\" x2=\"6\"\r\n                                                                                                           y2=\"18\"></line><line\r\n            x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path\r\n          d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"bk-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n      [class.bk-grouped]=\"groupBy()\"\r\n    >\r\n\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 class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\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 #searchInput type=\"text\" class=\"bk-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\"\r\n                   (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"bk-options-list\">\r\n        @if (loading()) {\r\n          <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()){\r\n\r\n          @if (multiple() && filteredItems().length > 0) {\r\n            <div class=\"bk-option\" (mousedown)=\"toggleSelectAll($event)\" [class.bk-selected]=\"isAllSelected()\">\r\n              <div class=\"flex-1 flex justify-between\">\r\n                <span>Select All</span>\r\n                @if (isAllSelected()) {\r\n                  <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                       stroke=\"currentColor\" stroke-width=\"2.5\">\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\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 #optionsRef class=\"bk-option\" [class.bk-selected]=\"isItemSelected(item)\" [class.bk-marked]=\"$index === markedIndex()\" (click)=\"handleSelection(item, $event)\">\r\n                <div class=\"flex-1 flex justify-between\">\r\n                  <span [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\r\n\r\n                  @if (isItemSelected(item)) {\r\n                    <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\"\r\n                         fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\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\r\n          @if (filteredItems().length === 0) {\r\n            <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\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\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 px-3 py-2.5 cursor-pointer;}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;}.bk-select-control.bk-disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.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-sm truncate w-full pointer-events-none;}.bk-value-label-single{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full;}.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];}.bk-multi-badge-item-text{@apply text-[10px] leading-[14px] font-normal text-[#6B7080];}.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-auto 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];}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.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;}\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,
@@ -4260,7 +4262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkSelect),
                             multi: true
                         }
-                    ], template: "<div class=\"bk-select-container\">\r\n\r\n  @if(label){\r\n  <label\r\n    class=\"bk-select-label\"\r\n    (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\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\">\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)\">{{ resolveLabel(opt) }}</span>\r\n\r\n              <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n                  <path d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\" stroke=\"#BBBDC5\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\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\"><span\r\n              class=\"bk-multi-badge-item-text\" bkTooltipPosition=\"top\" [bkTooltip]=\"getRemainingItems()\">+{{ selectedOptions().length - maxLabels() }}</span></div>\r\n\r\n\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]) }}</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 xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\"\r\n                                                                                                           y1=\"6\" x2=\"6\"\r\n                                                                                                           y2=\"18\"></line><line\r\n            x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path\r\n          d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"bk-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n      [class.bk-grouped]=\"groupBy()\"\r\n    >\r\n\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 class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\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 #searchInput type=\"text\" class=\"bk-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\"\r\n                   (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"bk-options-list\">\r\n        @if (loading()) {\r\n          <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()){\r\n\r\n          @if (multiple() && filteredItems().length > 0) {\r\n            <div class=\"bk-option\" (mousedown)=\"toggleSelectAll($event)\" [class.bk-selected]=\"isAllSelected()\">\r\n              <div class=\"flex-1 flex justify-between\">\r\n                <span>Select All</span>\r\n                @if (isAllSelected()) {\r\n                  <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                       stroke=\"currentColor\" stroke-width=\"2.5\">\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\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 #optionsRef class=\"bk-option\" [class.bk-selected]=\"isItemSelected(item)\" [class.bk-marked]=\"$index === markedIndex()\" (click)=\"handleSelection(item, $event)\">\r\n                <div class=\"flex-1 flex justify-between\">\r\n                  <span [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\r\n\r\n                  @if (isItemSelected(item)) {\r\n                    <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\"\r\n                         fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\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\r\n          @if (filteredItems().length === 0) {\r\n            <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\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\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 px-3 py-2.5 cursor-pointer;}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;}.bk-select-control.bk-disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.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-sm truncate w-full pointer-events-none;}.bk-value-label-single{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full;}.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];}.bk-multi-badge-item-text{@apply text-[10px] leading-[14px] font-normal text-[#6B7080];}.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-auto 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];}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.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;}\n"] }]
+                    ], template: "<div class=\"bk-select-container\">\r\n\r\n  @if(label){\r\n  <label\r\n    class=\"bk-select-label\"\r\n    (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\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\">\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)\">{{ resolveLabel(opt) }}</span>\r\n\r\n              <button type=\"button\" (mousedown)=\"removeOption(opt, $event)\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n                  <path d=\"M6.625 0.625L0.625 6.625M0.625 0.625L6.625 6.625\" stroke=\"#BBBDC5\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\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\"><span\r\n              class=\"bk-multi-badge-item-text\"\r\n              bkTooltipPosition=\"top\"\r\n              [bkTooltip]=\"getRemainingItems()\">+{{ selectedOptions().length - maxLabels() }}</span></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]) }}</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 xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\"\r\n                                                                                                           y1=\"6\" x2=\"6\"\r\n                                                                                                           y2=\"18\"></line><line\r\n            x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n        </span>\r\n      }\r\n      <span class=\"bk-arrow-wrapper\" [class.bk-open]=\"isOpen()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path\r\n          d=\"m6 9 6 6 6-6\"/></svg>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div\r\n      #dropdownPanel\r\n      class=\"bk-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      (scroll)=\"onScroll($event)\"\r\n\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getTop()\"\r\n      [style.bottom]=\"getBottom()\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\"\r\n      [class.bk-grouped]=\"groupBy()\"\r\n    >\r\n\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 class=\"text-[#BBBDC5] mr-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                 viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                 stroke-linejoin=\"round\">\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 #searchInput type=\"text\" class=\"bk-search-input\" [value]=\"searchTerm()\" [placeholder]=\"'Search...'\"\r\n                   (input)=\"onSearchInput($event)\" (keydown)=\"onKeyDown($event)\" (click)=\"$event.stopPropagation()\">\r\n          </div>\r\n        </div>\r\n      }\r\n      <div #optionsListContainer class=\"bk-options-list\">\r\n        @if (loading()) {\r\n          <div class=\"bk-option-disabled\">{{ loadingText() }}</div>\r\n        } @else {\r\n          @if (allSelect()){\r\n\r\n          @if (multiple() && filteredItems().length > 0) {\r\n            <div class=\"bk-option\" (mousedown)=\"toggleSelectAll($event)\" [class.bk-selected]=\"isAllSelected()\">\r\n              <div class=\"flex-1 flex justify-between\">\r\n                <span>Select All</span>\r\n                @if (isAllSelected()) {\r\n                  <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                       stroke=\"currentColor\" stroke-width=\"2.5\">\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\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 #optionsRef class=\"bk-option\" [class.bk-selected]=\"isItemSelected(item)\" [class.bk-marked]=\"$index === markedIndex()\" (click)=\"handleSelection(item, $event)\">\r\n                <div class=\"flex-1 flex justify-between\">\r\n                  <span [style.color]=\"resolveColor(item)\">{{ resolveLabel(item) }}</span>\r\n\r\n                  @if (isItemSelected(item)) {\r\n                    <svg class=\"text-[#141414]\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\"\r\n                         fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\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\r\n          @if (filteredItems().length === 0) {\r\n            <div class=\"bk-option-disabled\">{{ notFoundText() }}</div>\r\n          }\r\n        }\r\n      </div>\r\n\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\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 px-3 py-2.5 cursor-pointer;}.bk-select-control.bk-focused{@apply border-[#6B7080] shadow-none z-10;}.bk-select-control.bk-disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.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-sm truncate w-full pointer-events-none;}.bk-value-label-single{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full;}.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];}.bk-multi-badge-item-text{@apply text-[10px] leading-[14px] font-normal text-[#6B7080];}.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-auto 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];}.bk-option:hover,.bk-option.bk-marked,.bk-option.bk-selected{@apply bg-[#F8F8F8] rounded-md;}.bk-grouped .bk-option{@apply ps-5;}.bk-option-disabled{@apply px-3 py-2 text-gray-400 cursor-default;}.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;}\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: [{
@@ -7518,12 +7520,21 @@ class BkPagination {
         const totalPages = Math.ceil(this.total / this.pageSize);
         return totalPages;
     }
-    // ✅ Added method
+    // Visible window: startingPage/endingPage reflect the two page numbers shown in the control
     updateStartEndPages() {
-        this.startingPage = this.pages.length > 0 ? this.pages[0] : 0;
-        this.endingPage = this.pages.length > 0
-            ? Math.min(this.startingPage + 2, this.pages[this.pages.length - 1])
-            : 0;
+        const totalPages = this.getTotalPages();
+        if (totalPages <= 0) {
+            this.startingPage = 0;
+            this.endingPage = 0;
+            return;
+        }
+        if (totalPages === 1) {
+            this.startingPage = 1;
+            this.endingPage = 1;
+            return;
+        }
+        this.startingPage = this.activePage;
+        this.endingPage = Math.min(this.activePage + 1, totalPages);
     }
     getPageCount() {
         let totalPage = 0;
@@ -7543,14 +7554,22 @@ class BkPagination {
         }
         return pageArray;
     }
+    /** Returns exactly 2 visible page numbers: current and next (e.g. 1-2, then 2-3 on click of 2). */
     paginate() {
-        var from = this.activePage === 1 ? this.activePage - 1 : this.activePage - 2;
-        return this.pages.slice(from, this.activePage + 4);
+        const totalPages = this.getTotalPages();
+        if (totalPages <= 0)
+            return [];
+        if (totalPages === 1)
+            return [1];
+        const start = this.activePage;
+        const end = Math.min(this.activePage + 1, totalPages);
+        return this.pages.slice(start - 1, end);
     }
     onClickPage(pageNumber) {
         if (this.activePage !== pageNumber) {
             if (pageNumber >= 1 && pageNumber <= this.pages.length) {
                 this.activePage = pageNumber;
+                this.updateStartEndPages();
                 this.pageChanged.emit(this.activePage);
             }
         }
@@ -7581,11 +7600,11 @@ class BkPagination {
         return this.getPageCount();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPagination, isStandalone: true, selector: "bk-pagination", inputs: { pageSize: "pageSize", total: "total", activePage: "activePage" }, outputs: { changePageSize: "changePageSize", pageChanged: "pageChanged", activePageChange: "activePageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n    <div class=\"flex gap-3 items-center\">\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          >\r\n        </bk-select>\r\n    </div>\r\n\r\n    <!-- showing entries -->\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n\r\n    <!-- Pagination main -->\r\n    <nav class=\"flex gap-1.5 items-center\">\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span>\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(startingPage)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate() | slice:0:2\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n", styles: [""], 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: "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: BkSelect, selector: "bk-select", inputs: ["items", "bindLabel", "bindValue", "placeholder", "notFoundText", "loadingText", "clearAllText", "groupBy", "colorKey", "iconAlt", "label", "required", "iconSrc", "multiple", "maxLabels", "searchable", "allSelect", "clearable", "readonly", "disabled", "loading", "closeOnSelect", "dropdownPosition", "hasError", "errorMessage", "appendToBody", "compareWith"], outputs: ["disabledChange", "open", "close", "focus", "blur", "search", "clear", "change", "scrollToEnd"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkPagination, isStandalone: true, selector: "bk-pagination", inputs: { pageSize: "pageSize", total: "total", activePage: "activePage" }, outputs: { changePageSize: "changePageSize", pageChanged: "pageChanged", activePageChange: "activePageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n    <div class=\"flex gap-3 items-center\">\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          >\r\n        </bk-select>\r\n    </div>\r\n\r\n    <!-- showing entries -->\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n\r\n    <!-- Pagination main -->\r\n    <nav class=\"flex gap-1.5 items-center\">\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span>\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate()\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n", styles: [""], 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: "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: BkSelect, selector: "bk-select", inputs: ["items", "bindLabel", "bindValue", "placeholder", "notFoundText", "loadingText", "clearAllText", "groupBy", "colorKey", "iconAlt", "label", "required", "iconSrc", "multiple", "maxLabels", "searchable", "allSelect", "clearable", "readonly", "disabled", "loading", "closeOnSelect", "dropdownPosition", "hasError", "errorMessage", "appendToBody", "compareWith"], outputs: ["disabledChange", "open", "close", "focus", "blur", "search", "clear", "change", "scrollToEnd"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkPagination, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-pagination', imports: [CommonModule, FormsModule, BkSelect], standalone: true, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n    <div class=\"flex gap-3 items-center\">\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          >\r\n        </bk-select>\r\n    </div>\r\n\r\n    <!-- showing entries -->\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n\r\n    <!-- Pagination main -->\r\n    <nav class=\"flex gap-1.5 items-center\">\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span>\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(startingPage)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate() | slice:0:2\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'bk-pagination', imports: [CommonModule, FormsModule, BkSelect], standalone: true, template: "<div class=\"md:px-4 px-2 md:py-3 py-2 border-t border-[#EBEDF3] rounded-b-xl\">\r\n  <div class=\"flex flex-row items-center justify-between md:gap-3 gap-1\">\r\n\r\n    <!-- Page size dropdown -->\r\n\r\n    <div class=\"flex gap-3 items-center\">\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">Rows per page</p>\r\n        <bk-select\r\n          [items]=\"pageSizesList\"\r\n          [searchable]=\"false\"\r\n          bindLabel=\"key\"\r\n          bindValue=\"value\"\r\n          [clearable]=\"false\"\r\n          [(ngModel)]=\"pageSize\"\r\n          [dropdownPosition]=\"'top'\"\r\n          (change)=\"changeSize($event)\"\r\n          >\r\n        </bk-select>\r\n    </div>\r\n\r\n    <!-- showing entries -->\r\n    <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n      Showing <span>{{ startIndex }}</span> to\r\n      <span>{{ endIndex > totalItems ? totalItems : endIndex }}</span> of\r\n      <span>{{ totalItems }}</span> Records\r\n    </p>\r\n\r\n    <!-- Pagination main -->\r\n    <nav class=\"flex gap-1.5 items-center\">\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:block hidden\">\r\n        <span>{{ startingPage || 0 }}</span> -\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n\r\n      <!-- Page count (optional like DoPlanar top numbers) mobile version -->\r\n      <p class=\"text-xs text-[#141414] font-medium md:hidden block\">\r\n      <span>{{ startingPage || 0 }}</span>\r\n        <span>{{ endingPage || 0 }}</span> of\r\n        <span>{{ getTotalPages() || 0 }}</span>\r\n      </p>\r\n\r\n      <ul class=\"flex items-center space-x-1 text-[13px] text-[#B9BBC6]\">\r\n\r\n        <!-- Previous -->\r\n        <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n            @if(activePage === 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-gray.svg\"\r\n                alt=\"Left Arrow Disabled\"\r\n              />\r\n            }\r\n            @if(activePage !== 1){\r\n              <img\r\n                src=\"../../assets/icons/arrow-left-double-black.svg\"\r\n                alt=\"Left Arrow\"\r\n              />\r\n            }\r\n          </a>\r\n        </li>\r\n        <!-- Previous -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage - 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === 1}\"\r\n          >\r\n          @if(activePage === 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-gray.svg\"\r\n              alt=\"Left Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== 1){\r\n            <img\r\n              src=\"../../assets/icons/pagination-left-black.svg\"\r\n              alt=\"Left Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Page Numbers -->\r\n        <li *ngFor=\"let item of paginate()\">\r\n          <a\r\n            (click)=\"onClickPage(item)\"\r\n            href=\"javascript:void(0)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 leading-6 rounded-lg\"\r\n            [ngClass]=\"item === activePage\r\n              ? 'text-[#15191E] bg-[#F8F8FA] hover:bg-[#F8F8FA]'\r\n              : 'hover:bg-[#F8F8FA] hover:text-[#15191E]'\">\r\n            {{ item }}\r\n          </a>\r\n        </li>\r\n\r\n        <!-- Next -->\r\n        <li>\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(activePage + 1)\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/pagination-right-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n                src=\"../../assets/icons/pagination-right-black.svg\"\r\n                alt=\"Right Arrow\"\r\n              />\r\n          }\r\n          </a>\r\n        </li>\r\n        <!-- next double arrow  -->\r\n                 <li class=\"md:block hidden\">\r\n          <a\r\n            href=\"javascript:void(0)\"\r\n            (click)=\"onClickPage(getTotalPages())\"\r\n            class=\"flex items-center justify-center md:size-7 size-6 text-[13px] leading-6 text-[#15191E] rounded-md hover:bg-[#F8F8FA]\"\r\n            [ngClass]=\"{'cursor-not-allowed': activePage === getTotalPages()}\"\r\n          >\r\n          @if(activePage === getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-gray.svg\"\r\n              alt=\"Right Arrow Disabled\"\r\n            />\r\n          }\r\n          @if(activePage !== getTotalPages()){\r\n            <img\r\n              src=\"../../assets/icons/arrow-right-double-black.svg\"\r\n              alt=\"Right Arrow\"\r\n            />\r\n          }\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { pageSize: [{
                 type: Input
             }], total: [{