npm - @brickclay-org/ui - Versions diffs - 0.1.41 → 0.1.42 - Mend

@brickclay-org/ui 0.1.41 → 0.1.42

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

Files changed (7) hide show

package/fesm2022/brickclay-org-ui.mjs +71 -15
package/fesm2022/brickclay-org-ui.mjs.map +1 -1
package/index.d.ts +8 -3
package/package.json +1 -1
package/src/lib/hierarchical-select/hierarchical-select.css +16 -0
package/src/lib/select/select.css +8 -0
package/src/lib/tooltip/tooltip-directive.css +1 -1

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

@@ -4537,6 +4537,9 @@ class BkSelect {
         const itemVal = this.resolveValue(item);
         return current.some(selected => compareFn(itemVal, this.resolveValue(selected)));
     }
+    isItemDisabled(item) {
+        return !!item?.disabled;
+    }
     compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
     // --- Actions ---
     toggleDropdown(event) {
@@ -4634,12 +4637,12 @@ class BkSelect {
         if (allSelected) {
             newSelection = newSelection.filter(sel => {
                 const selVal = this.resolveValue(sel);
-                return !filtered.some(fItem => compareFn(this.resolveValue(fItem), selVal));
+                return !filtered.some(fItem => compareFn(this.resolveValue(fItem), selVal) && !this.isItemDisabled(fItem));
             });
         }
         else {
             filtered.forEach(item => {
-                if (!this.isItemSelected(item))
+                if (!this.isItemSelected(item) && !this.isItemDisabled(item))
                     newSelection.push(item);
             });
         }
@@ -4648,6 +4651,8 @@ class BkSelect {
     handleSelection(item, event) {
         if (event)
             event.stopPropagation();
+        if (this.isItemDisabled(item))
+            return;
         if (this.multiple()) {
             const isSelected = this.isItemSelected(item);
             let newSelection = [...this.selectedOptions()];
@@ -4839,7 +4844,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 class=\"relative\">\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)=\"onTabPress($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\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\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)\">{{\r\n                      resolveLabel(item)\r\n                    }}</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  </div>\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 cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;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;outline:none!important}.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 overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:165px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.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", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipAutoHeight"] }] });
+        ], 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 class=\"relative\">\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)=\"onTabPress($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\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\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                  [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                  [class.cursor-not-allowed]=\"isItemDisabled(item)\"\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)\">{{\r\n                      resolveLabel(item)\r\n                    }}</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  </div>\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 cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;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;outline:none!important}.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 overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:165px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.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-disabled{@apply opacity-50 cursor-not-allowed;}.bk-option.bk-option-disabled:hover{@apply bg-transparent;}.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", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipAutoHeight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkSelect, decorators: [{
             type: Component,
@@ -4849,7 +4854,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 class=\"relative\">\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)=\"onTabPress($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\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\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)\">{{\r\n                      resolveLabel(item)\r\n                    }}</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  </div>\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 cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;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;outline:none!important}.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 overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:165px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.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 class=\"relative\">\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)=\"onTabPress($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\r\n          #optionsListContainer\r\n          tabindex=\"-1\"\r\n          class=\"bk-options-list\"\r\n          (scroll)=\"onScroll($event)\"\r\n        >\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                  [class.bk-option-disabled]=\"isItemDisabled(item)\"\r\n                  [class.cursor-not-allowed]=\"isItemDisabled(item)\"\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)\">{{\r\n                      resolveLabel(item)\r\n                    }}</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  </div>\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 cursor-pointer focus:border-[#E3E3E7] focus-visible:!outline-[.1px] focus-visible:!outline-[#6B7080];transition:border-color .2s,box-shadow .2s;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;outline:none!important}.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 overflow-y-auto overflow-x-hidden relative flex flex-col gap-0.5;}@media (max-height: 700px){.bk-options-list{max-height:125px}}@media (min-height: 701px) and (max-height: 900px){.bk-options-list{max-height:165px}}@media (min-height: 901px){.bk-options-list{max-height:210px}}.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-disabled{@apply opacity-50 cursor-not-allowed;}.bk-option.bk-option-disabled:hover{@apply bg-transparent;}.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: [{
@@ -6848,7 +6853,7 @@ class BkAvatarUploader {
     /** Whether upload / remove actions are enabled */
     editable = true;
     /** Accepted file MIME types for the file picker */
-    accept = 'image/jpeg, image/png';
+    accept = 'image/jpeg, image/png, image/heic, image/heif, .heic, .heif';
     /** Max file size in KB (0 = no limit) */
     maxFileSizeKB = 0;
     /** Label shown on the upload button */
@@ -6859,6 +6864,7 @@ class BkAvatarUploader {
     loading = false;
     /** Whether the remove badge is shown when an image is present */
     removable = false;
+    removeableIconTooltip = 'Remove';
     // ---------- Form / CVA inputs ----------
     /** Label displayed above the avatar */
     label = '';
@@ -6917,8 +6923,9 @@ class BkAvatarUploader {
         }
         this.imageLoadFailed = false;
         this.corrupted = false;
-        // When the parent updates [src] via @Input (non-CVA usage), discard the local preview
-        if (changes['src'] && this.previewUrl) {
+        // When the parent updates [src] via @Input (non-CVA usage), discard the local preview,
+        // except when the incoming value is the same preview URL.
+        if (changes['src'] && this.previewUrl && this.src !== this.previewUrl) {
             this.revokePreview();
         }
     }
@@ -6962,6 +6969,7 @@ class BkAvatarUploader {
         if (!input.files?.length)
             return;
         const file = input.files[0];
+        const isHeicLike = this.isHeicFile(file);
         // Validate file type
         if (this.accept && !this.isFileTypeValid(file)) {
             this.fileError.emit(`Invalid file type. Accepted: ${this.accept}`);
@@ -6977,6 +6985,19 @@ class BkAvatarUploader {
         // Create a blob URL and verify the browser can actually decode it as an image
         this.revokePreview();
         const blobUrl = URL.createObjectURL(file);
+        if (isHeicLike) {
+            // HEIC/HEIF files are often valid but not decodable by the browser on Windows.
+            // Do not attach a blob preview URL for these formats; some browsers emit
+            // noisy blob fetch errors for unsupported decoders.
+            URL.revokeObjectURL(blobUrl);
+            this.corrupted = false;
+            this.previewUrl = null;
+            this.imageLoadFailed = false;
+            this.onTouched();
+            this.fileSelected.emit(event);
+            input.value = '';
+            return;
+        }
         this.validateImage(blobUrl).then(valid => {
             if (!valid) {
                 // Corrupted / undecodable file — show corrupted state, do NOT emit
@@ -7028,14 +7049,28 @@ class BkAvatarUploader {
         }
     }
     isFileTypeValid(file) {
-        const accepted = this.accept.split(',').map(t => t.trim());
+        const accepted = this.accept.split(',').map(t => t.trim().toLowerCase()).filter(Boolean);
+        const fileType = (file.type || '').toLowerCase();
+        const fileName = file.name.toLowerCase();
+        const fileExtension = fileName.includes('.') ? fileName.slice(fileName.lastIndexOf('.') + 1) : '';
         return accepted.some(type => {
             if (type.endsWith('/*')) {
-                return file.type.startsWith(type.replace('/*', '/'));
+                return fileType.startsWith(type.slice(0, -1));
+            }
+            if (type === 'image/heic' || type === 'image/heif' || type === '.heic' || type === '.heif' || type === 'heic' || type === 'heif') {
+                return fileType === 'image/heic' || fileType === 'image/heif' || fileExtension === 'heic' || fileExtension === 'heif';
             }
-            return file.type === type;
+            if (type.startsWith('.')) {
+                return fileExtension === type.slice(1);
+            }
+            return fileType === type;
         });
     }
+    isHeicFile(file) {
+        const fileType = (file.type || '').toLowerCase();
+        const fileName = file.name.toLowerCase();
+        return fileType === 'image/heic' || fileType === 'image/heif' || fileName.endsWith('.heic') || fileName.endsWith('.heif');
+    }
     getInitials(name) {
         const parts = name.trim().split(/\s+/);
         if (parts.length === 1) {
@@ -7044,7 +7079,7 @@ class BkAvatarUploader {
         return (parts[0][0] + parts.at(-1)[0]).toUpperCase();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatarUploader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkAvatarUploader, isStandalone: true, selector: "bk-avatar-uploader", inputs: { src: "src", alt: "alt", name: "name", size: "size", fallback: "fallback", editable: "editable", accept: "accept", maxFileSizeKB: "maxFileSizeKB", uploadLabel: "uploadLabel", hint: "hint", loading: "loading", removable: "removable", label: "label", required: "required", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled" }, outputs: { fileSelected: "fileSelected", removed: "removed", fileError: "fileError" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkAvatarUploader, isStandalone: true, selector: "bk-avatar-uploader", inputs: { src: "src", alt: "alt", name: "name", size: "size", fallback: "fallback", editable: "editable", accept: "accept", maxFileSizeKB: "maxFileSizeKB", uploadLabel: "uploadLabel", hint: "hint", loading: "loading", removable: "removable", removeableIconTooltip: "removeableIconTooltip", label: "label", required: "required", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled" }, outputs: { fileSelected: "fileSelected", removed: "removed", fileError: "fileError" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkAvatarUploader),
@@ -7055,7 +7090,7 @@ class BkAvatarUploader {
                 useExisting: forwardRef(() => BkAvatarUploader),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar-profile-container\" [ngClass]=\"sizeClasses\">\r\n  @if (label) {\r\n    <label class=\"avatar-profile-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"avatar-profile-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"flex gap-4 justify-end\">\r\n    <div\r\n    [ngClass]=\"containerClasses\"\r\n    [bkTooltip]=\"name\"\r\n    [bkTooltipPosition]=\"'top'\"\r\n  >\r\n\r\n      <!-- Loading overlay -->\r\n      @if (loading) {\r\n        <div class=\"absolute inset-0 flex items-center justify-center z-10 rounded-full bg-white/60\">\r\n          <div class=\"w-5 h-5 border-2 border-[#141414] border-t-transparent rounded-full animate-spin\"></div>\r\n        </div>\r\n      }\r\n\r\n      @if (corrupted) {\r\n        <!-- Corrupted file indicator -->\r\n        <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M19.3517 7.61665L15.3929 4.05375C14.2651 3.03868 13.7012 2.53114 13.0092 2.26562L13 5.00011C13 7.35713 13 8.53564 13.7322 9.26787C14.4645 10.0001 15.643 10.0001 18 10.0001H21.5801C21.2175 9.29588 20.5684 8.71164 19.3517 7.61665Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2.72548 20.3823 2.44924 19.8327 2.27818 19.1149C2.15904 18.6149 2.09948 18.3649 2.21429 18.0728C2.32911 17.7806 2.58217 17.6119 3.08829 17.2745L3.71429 16.8571C4.49285 16.3381 5.50715 16.3381 6.28571 16.8571C7.3238 17.5492 8.6762 17.5492 9.71429 16.8571C10.4929 16.3381 11.5071 16.3381 12.2857 16.8571C13.3238 17.5492 14.6762 17.5492 15.7143 16.8571C16.4929 16.3381 17.5071 16.3381 18.2857 16.8571C19.3238 17.5492 20.6762 17.5492 21.7143 16.8571C21.8241 16.7839 21.9705 16.8681 21.965 17C21.8873 18.8723 21.6366 20.0203 20.8284 20.8284C19.6569 22 17.7712 22 14 22Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M2 10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.23869 2 10.0298 2C10.6358 2 11.1214 2 11.53 2.01666C11.5166 2.09659 11.5095 2.17813 11.5092 2.26057L11.5 5.09497C11.4999 6.19207 11.4998 7.16164 11.6049 7.94316C11.7188 8.79028 11.9803 9.63726 12.6716 10.3285C13.3628 11.0198 14.2098 11.2813 15.0569 11.3952C15.8385 11.5003 16.808 11.5002 17.9051 11.5001L18 11.5001H21.9934V12.3273C21.9973 12.5399 21.8912 12.7392 21.7143 12.8571C20.6762 13.5492 19.3238 13.5492 18.2857 12.8571C17.5071 12.3381 16.4929 12.3381 15.7143 12.8571C14.6762 13.5492 13.3238 13.5492 12.2857 12.8571C11.5071 12.3381 10.4929 12.3381 9.71429 12.8571C8.6762 13.5492 7.3238 13.5492 6.28571 12.8571C5.50715 12.3381 4.49285 12.3381 3.71429 12.8571L3.5547 12.9635C2.87033 13.4198 2.52814 13.6479 2.26407 13.5066C2 13.3653 2 12.954 2 12.1315V10Z\" fill=\"#DC3545\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (displaySrc && !imageLoadFailed) {\r\n        <img\r\n          [src]=\"displaySrc\"\r\n          [alt]=\"alt\"\r\n          class=\"avatar-img\"\r\n          (error)=\"onImageError()\"\r\n        />\r\n      }\r\n\r\n      @else if (fallback === 'camera') {\r\n        <svg class=\"placeholder-icon\" width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M18.3843 4.66667C17.6726 4.66667 17.0193 4.25833 16.6926 3.62833L15.8526 1.93667C15.316 0.875 13.916 0 12.726 0H10.0543C8.85264 0 7.45264 0.875 6.91598 1.93667L6.07598 3.62833C5.74931 4.25833 5.09598 4.66667 4.38431 4.66667C1.85264 4.66667 -0.154023 6.80167 0.00931005 9.32167L0.615977 18.9583C0.755977 21.3617 2.05098 23.3333 5.27098 23.3333H17.4976C20.7176 23.3333 22.001 21.3617 22.1526 18.9583L22.7593 9.32167C22.9226 6.80167 20.916 4.66667 18.3843 4.66667ZM9.63431 6.125H13.1343C13.6126 6.125 14.0093 6.52167 14.0093 7C14.0093 7.47833 13.6126 7.875 13.1343 7.875H9.63431C9.15598 7.875 8.75931 7.47833 8.75931 7C8.75931 6.52167 9.15598 6.125 9.63431 6.125ZM11.3843 18.8067C9.21431 18.8067 7.44098 17.045 7.44098 14.8633C7.44098 12.6817 9.20264 10.92 11.3843 10.92C13.566 10.92 15.3276 12.6817 15.3276 14.8633C15.3276 17.045 13.5543 18.8067 11.3843 18.8067Z\" fill=\"#6B7080\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (showInitials) {\r\n        <span class=\"avatar-text\">\r\n      {{ initials }}\r\n    </span>\r\n      }\r\n\r\n      @else {\r\n        <svg class=\"placeholder-icon\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" > <g clip-path=\"url(#clip0)\"> <path d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> <path d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g> <defs> <clipPath id=\"clip0\"> <rect width=\"32\" height=\"32\" fill=\"white\" /> </clipPath> </defs> </svg>\r\n      }\r\n\r\n      <!-- Remove badge -->\r\n      @if (showRemoveButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"remove-badge\"\r\n          (click)=\"onRemove()\"\r\n          aria-label=\"Remove avatar\"\r\n        >\r\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"#6B7080\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n          </svg>\r\n        </button>\r\n      }\r\n\r\n    </div>\r\n    <div class=\"flex flex-col gap-2 justify-end items-start\">\r\n      @if (editable) {\r\n        <label class=\"upload-button cursor-pointer\">\r\n          {{ uploadLabel }}\r\n          <input\r\n            type=\"file\"\r\n            class=\"hidden\"\r\n            [accept]=\"accept\"\r\n            [disabled]=\"disabled\"\r\n            (change)=\"onFileSelected($event)\"\r\n          />\r\n        </label>\r\n      }\r\n      @if (!hasError && hint) {\r\n        <p class=\"profile-size\">{{ hint }}</p>\r\n      }\r\n      @if (hasError && errorMessage) {\r\n        <p class=\"avatar-profile-error\">{{ errorMessage }}</p>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".avatar-profile-container{@apply flex flex-col gap-1.5;}.avatar-profile-label{@apply text-sm font-medium text-[#141414];}.avatar-profile-label-required{@apply text-[#E7000B] ml-0.5;}.avatar-profile-error{@apply text-xs text-[#E7000B] font-normal;}.avatar-profile{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none shadow-lg transition-all duration-200 border-[3px] border-white bg-[#F9FAFA];}.avatar-profile .avatar-img{@apply w-full h-full object-cover rounded-full;}.upload-button{@apply font-medium text-[#6B7080] border border-[#E3E3E7] rounded shadow-sm;}.sm .upload-button{@apply text-[12px] leading-[18px] px-2 py-3;}.md .upload-button{@apply text-[14px] leading-[20px] px-[10px] py-2.5;}.lg .upload-button{@apply text-[16px] leading-[24px] px-[18px] py-2.5;}.xl .upload-button{@apply text-[16px] leading-[24px] px-5 py-3;}.profile-size{@apply font-medium text-[#6B7080];}.sm .profile-size{@apply text-[10px] leading-[14px];}.md .profile-size{@apply text-[12px] leading-[18px];}.lg .profile-size{@apply text-[14px] leading-[20px];}.xl .profile-size{@apply text-[16px] leading-[24px];}.avatar-profile.sm .avatar-text{@apply font-medium text-[30px] leading-[38px];}.avatar-profile.md .avatar-text{@apply font-medium text-[36px] leading-[44px];}.avatar-profile.lg .avatar-text{@apply font-medium text-[45px] leading-[55px];}.avatar-profile.xl .avatar-text{@apply font-medium text-[60px] leading-[72px];}.avatar-profile{@apply font-medium text-[#6B7080];}.avatar-profile.sm{@apply size-[72px] text-sm;}.avatar-profile.md{@apply size-[96px] text-base;}.avatar-profile.lg{@apply size-[120px] text-[18px] leading-[26px];}.avatar-profile.xl{@apply size-[160px] text-xl;}.avatar-profile.sm .placeholder-icon{@apply size-[28px];}.avatar-profile.md .placeholder-icon{@apply size-[42px];}.avatar-profile.lg .placeholder-icon{@apply size-[52px];}.avatar-profile.xl .placeholder-icon{@apply size-[65px];}.avatar-profile.corrupted{@apply border-[3px] border-[#E7000B];}.avatar-profile .corrupted-icon{@apply text-[#E7000B];}.avatar-profile.sm .corrupted-icon{@apply size-[28px];}.avatar-profile.md .corrupted-icon{@apply size-[42px];}.avatar-profile.lg .corrupted-icon{@apply size-[52px];}.avatar-profile.xl .corrupted-icon{@apply size-[65px];}.remove-badge{@apply absolute top-0 right-0 w-5 h-5 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-gray-50 transition z-20 border-0 p-0;}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipAutoHeight"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar-profile-container\" [ngClass]=\"sizeClasses\">\r\n  @if (label) {\r\n    <label class=\"avatar-profile-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"avatar-profile-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"flex gap-4 justify-end\">\r\n    <div\r\n    [ngClass]=\"containerClasses\"\r\n    [bkTooltip]=\"name\"\r\n    [bkTooltipPosition]=\"'top'\"\r\n  >\r\n\r\n      <!-- Loading overlay -->\r\n      @if (loading) {\r\n        <div class=\"absolute inset-0 flex items-center justify-center z-10 rounded-full bg-white/60\">\r\n          <div class=\"w-5 h-5 border-2 border-[#141414] border-t-transparent rounded-full animate-spin\"></div>\r\n        </div>\r\n      }\r\n\r\n      @if (corrupted) {\r\n        <!-- Corrupted file indicator -->\r\n        <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M19.3517 7.61665L15.3929 4.05375C14.2651 3.03868 13.7012 2.53114 13.0092 2.26562L13 5.00011C13 7.35713 13 8.53564 13.7322 9.26787C14.4645 10.0001 15.643 10.0001 18 10.0001H21.5801C21.2175 9.29588 20.5684 8.71164 19.3517 7.61665Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2.72548 20.3823 2.44924 19.8327 2.27818 19.1149C2.15904 18.6149 2.09948 18.3649 2.21429 18.0728C2.32911 17.7806 2.58217 17.6119 3.08829 17.2745L3.71429 16.8571C4.49285 16.3381 5.50715 16.3381 6.28571 16.8571C7.3238 17.5492 8.6762 17.5492 9.71429 16.8571C10.4929 16.3381 11.5071 16.3381 12.2857 16.8571C13.3238 17.5492 14.6762 17.5492 15.7143 16.8571C16.4929 16.3381 17.5071 16.3381 18.2857 16.8571C19.3238 17.5492 20.6762 17.5492 21.7143 16.8571C21.8241 16.7839 21.9705 16.8681 21.965 17C21.8873 18.8723 21.6366 20.0203 20.8284 20.8284C19.6569 22 17.7712 22 14 22Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M2 10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.23869 2 10.0298 2C10.6358 2 11.1214 2 11.53 2.01666C11.5166 2.09659 11.5095 2.17813 11.5092 2.26057L11.5 5.09497C11.4999 6.19207 11.4998 7.16164 11.6049 7.94316C11.7188 8.79028 11.9803 9.63726 12.6716 10.3285C13.3628 11.0198 14.2098 11.2813 15.0569 11.3952C15.8385 11.5003 16.808 11.5002 17.9051 11.5001L18 11.5001H21.9934V12.3273C21.9973 12.5399 21.8912 12.7392 21.7143 12.8571C20.6762 13.5492 19.3238 13.5492 18.2857 12.8571C17.5071 12.3381 16.4929 12.3381 15.7143 12.8571C14.6762 13.5492 13.3238 13.5492 12.2857 12.8571C11.5071 12.3381 10.4929 12.3381 9.71429 12.8571C8.6762 13.5492 7.3238 13.5492 6.28571 12.8571C5.50715 12.3381 4.49285 12.3381 3.71429 12.8571L3.5547 12.9635C2.87033 13.4198 2.52814 13.6479 2.26407 13.5066C2 13.3653 2 12.954 2 12.1315V10Z\" fill=\"#DC3545\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (displaySrc && !imageLoadFailed) {\r\n        <img\r\n          [src]=\"displaySrc\"\r\n          [alt]=\"alt\"\r\n          class=\"avatar-img\"\r\n          (error)=\"onImageError()\"\r\n        />\r\n      }\r\n\r\n      @else if (fallback === 'camera') {\r\n        <svg class=\"placeholder-icon\" width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M18.3843 4.66667C17.6726 4.66667 17.0193 4.25833 16.6926 3.62833L15.8526 1.93667C15.316 0.875 13.916 0 12.726 0H10.0543C8.85264 0 7.45264 0.875 6.91598 1.93667L6.07598 3.62833C5.74931 4.25833 5.09598 4.66667 4.38431 4.66667C1.85264 4.66667 -0.154023 6.80167 0.00931005 9.32167L0.615977 18.9583C0.755977 21.3617 2.05098 23.3333 5.27098 23.3333H17.4976C20.7176 23.3333 22.001 21.3617 22.1526 18.9583L22.7593 9.32167C22.9226 6.80167 20.916 4.66667 18.3843 4.66667ZM9.63431 6.125H13.1343C13.6126 6.125 14.0093 6.52167 14.0093 7C14.0093 7.47833 13.6126 7.875 13.1343 7.875H9.63431C9.15598 7.875 8.75931 7.47833 8.75931 7C8.75931 6.52167 9.15598 6.125 9.63431 6.125ZM11.3843 18.8067C9.21431 18.8067 7.44098 17.045 7.44098 14.8633C7.44098 12.6817 9.20264 10.92 11.3843 10.92C13.566 10.92 15.3276 12.6817 15.3276 14.8633C15.3276 17.045 13.5543 18.8067 11.3843 18.8067Z\" fill=\"#6B7080\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (showInitials) {\r\n        <span class=\"avatar-text\">\r\n      {{ initials }}\r\n    </span>\r\n      }\r\n\r\n      @else {\r\n        <svg class=\"placeholder-icon\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" > <g clip-path=\"url(#clip0)\"> <path d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> <path d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g> <defs> <clipPath id=\"clip0\"> <rect width=\"32\" height=\"32\" fill=\"white\" /> </clipPath> </defs> </svg>\r\n      }\r\n\r\n      <!-- Remove badge -->\r\n      @if (showRemoveButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"remove-badge\"\r\n          (click)=\"onRemove()\"\r\n          aria-label=\"Remove avatar\"\r\n          [bkTooltip]=\"removeableIconTooltip\"\r\n          [bkTooltipPosition]=\"'top'\"\r\n        >\r\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"#6B7080\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n          </svg>\r\n        </button>\r\n      }\r\n\r\n    </div>\r\n    <div class=\"flex flex-col gap-2 justify-end items-start\">\r\n      @if (editable) {\r\n        <label class=\"upload-button cursor-pointer\">\r\n          {{ uploadLabel }}\r\n          <input\r\n            type=\"file\"\r\n            class=\"hidden\"\r\n            [accept]=\"accept\"\r\n            [disabled]=\"disabled\"\r\n            (change)=\"onFileSelected($event)\"\r\n          />\r\n        </label>\r\n      }\r\n      @if (!hasError && hint) {\r\n        <p class=\"profile-size\">{{ hint }}</p>\r\n      }\r\n      @if (hasError && errorMessage) {\r\n        <p class=\"avatar-profile-error\">{{ errorMessage }}</p>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".avatar-profile-container{@apply flex flex-col gap-1.5;}.avatar-profile-label{@apply text-sm font-medium text-[#141414];}.avatar-profile-label-required{@apply text-[#E7000B] ml-0.5;}.avatar-profile-error{@apply text-xs text-[#E7000B] font-normal;}.avatar-profile{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none shadow-lg transition-all duration-200 border-[3px] border-white bg-[#F9FAFA];}.avatar-profile .avatar-img{@apply w-full h-full object-cover rounded-full;}.upload-button{@apply font-medium text-[#6B7080] border border-[#E3E3E7] rounded shadow-sm;}.sm .upload-button{@apply text-[12px] leading-[18px] px-2 py-3;}.md .upload-button{@apply text-[14px] leading-[20px] px-[10px] py-2.5;}.lg .upload-button{@apply text-[16px] leading-[24px] px-[18px] py-2.5;}.xl .upload-button{@apply text-[16px] leading-[24px] px-5 py-3;}.profile-size{@apply font-medium text-[#6B7080];}.sm .profile-size{@apply text-[10px] leading-[14px];}.md .profile-size{@apply text-[12px] leading-[18px];}.lg .profile-size{@apply text-[14px] leading-[20px];}.xl .profile-size{@apply text-[16px] leading-[24px];}.avatar-profile.sm .avatar-text{@apply font-medium text-[30px] leading-[38px];}.avatar-profile.md .avatar-text{@apply font-medium text-[36px] leading-[44px];}.avatar-profile.lg .avatar-text{@apply font-medium text-[45px] leading-[55px];}.avatar-profile.xl .avatar-text{@apply font-medium text-[60px] leading-[72px];}.avatar-profile{@apply font-medium text-[#6B7080];}.avatar-profile.sm{@apply size-[72px] text-sm;}.avatar-profile.md{@apply size-[96px] text-base;}.avatar-profile.lg{@apply size-[120px] text-[18px] leading-[26px];}.avatar-profile.xl{@apply size-[160px] text-xl;}.avatar-profile.sm .placeholder-icon{@apply size-[28px];}.avatar-profile.md .placeholder-icon{@apply size-[42px];}.avatar-profile.lg .placeholder-icon{@apply size-[52px];}.avatar-profile.xl .placeholder-icon{@apply size-[65px];}.avatar-profile.corrupted{@apply border-[3px] border-[#E7000B];}.avatar-profile .corrupted-icon{@apply text-[#E7000B];}.avatar-profile.sm .corrupted-icon{@apply size-[28px];}.avatar-profile.md .corrupted-icon{@apply size-[42px];}.avatar-profile.lg .corrupted-icon{@apply size-[52px];}.avatar-profile.xl .corrupted-icon{@apply size-[65px];}.remove-badge{@apply absolute top-0 right-0 w-5 h-5 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-gray-50 transition z-20 border-0 p-0;}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipAutoHeight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatarUploader, decorators: [{
             type: Component,
@@ -7070,7 +7105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkAvatarUploader),
                             multi: true
                         }
-                    ], template: "<div class=\"avatar-profile-container\" [ngClass]=\"sizeClasses\">\r\n  @if (label) {\r\n    <label class=\"avatar-profile-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"avatar-profile-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"flex gap-4 justify-end\">\r\n    <div\r\n    [ngClass]=\"containerClasses\"\r\n    [bkTooltip]=\"name\"\r\n    [bkTooltipPosition]=\"'top'\"\r\n  >\r\n\r\n      <!-- Loading overlay -->\r\n      @if (loading) {\r\n        <div class=\"absolute inset-0 flex items-center justify-center z-10 rounded-full bg-white/60\">\r\n          <div class=\"w-5 h-5 border-2 border-[#141414] border-t-transparent rounded-full animate-spin\"></div>\r\n        </div>\r\n      }\r\n\r\n      @if (corrupted) {\r\n        <!-- Corrupted file indicator -->\r\n        <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M19.3517 7.61665L15.3929 4.05375C14.2651 3.03868 13.7012 2.53114 13.0092 2.26562L13 5.00011C13 7.35713 13 8.53564 13.7322 9.26787C14.4645 10.0001 15.643 10.0001 18 10.0001H21.5801C21.2175 9.29588 20.5684 8.71164 19.3517 7.61665Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2.72548 20.3823 2.44924 19.8327 2.27818 19.1149C2.15904 18.6149 2.09948 18.3649 2.21429 18.0728C2.32911 17.7806 2.58217 17.6119 3.08829 17.2745L3.71429 16.8571C4.49285 16.3381 5.50715 16.3381 6.28571 16.8571C7.3238 17.5492 8.6762 17.5492 9.71429 16.8571C10.4929 16.3381 11.5071 16.3381 12.2857 16.8571C13.3238 17.5492 14.6762 17.5492 15.7143 16.8571C16.4929 16.3381 17.5071 16.3381 18.2857 16.8571C19.3238 17.5492 20.6762 17.5492 21.7143 16.8571C21.8241 16.7839 21.9705 16.8681 21.965 17C21.8873 18.8723 21.6366 20.0203 20.8284 20.8284C19.6569 22 17.7712 22 14 22Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M2 10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.23869 2 10.0298 2C10.6358 2 11.1214 2 11.53 2.01666C11.5166 2.09659 11.5095 2.17813 11.5092 2.26057L11.5 5.09497C11.4999 6.19207 11.4998 7.16164 11.6049 7.94316C11.7188 8.79028 11.9803 9.63726 12.6716 10.3285C13.3628 11.0198 14.2098 11.2813 15.0569 11.3952C15.8385 11.5003 16.808 11.5002 17.9051 11.5001L18 11.5001H21.9934V12.3273C21.9973 12.5399 21.8912 12.7392 21.7143 12.8571C20.6762 13.5492 19.3238 13.5492 18.2857 12.8571C17.5071 12.3381 16.4929 12.3381 15.7143 12.8571C14.6762 13.5492 13.3238 13.5492 12.2857 12.8571C11.5071 12.3381 10.4929 12.3381 9.71429 12.8571C8.6762 13.5492 7.3238 13.5492 6.28571 12.8571C5.50715 12.3381 4.49285 12.3381 3.71429 12.8571L3.5547 12.9635C2.87033 13.4198 2.52814 13.6479 2.26407 13.5066C2 13.3653 2 12.954 2 12.1315V10Z\" fill=\"#DC3545\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (displaySrc && !imageLoadFailed) {\r\n        <img\r\n          [src]=\"displaySrc\"\r\n          [alt]=\"alt\"\r\n          class=\"avatar-img\"\r\n          (error)=\"onImageError()\"\r\n        />\r\n      }\r\n\r\n      @else if (fallback === 'camera') {\r\n        <svg class=\"placeholder-icon\" width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M18.3843 4.66667C17.6726 4.66667 17.0193 4.25833 16.6926 3.62833L15.8526 1.93667C15.316 0.875 13.916 0 12.726 0H10.0543C8.85264 0 7.45264 0.875 6.91598 1.93667L6.07598 3.62833C5.74931 4.25833 5.09598 4.66667 4.38431 4.66667C1.85264 4.66667 -0.154023 6.80167 0.00931005 9.32167L0.615977 18.9583C0.755977 21.3617 2.05098 23.3333 5.27098 23.3333H17.4976C20.7176 23.3333 22.001 21.3617 22.1526 18.9583L22.7593 9.32167C22.9226 6.80167 20.916 4.66667 18.3843 4.66667ZM9.63431 6.125H13.1343C13.6126 6.125 14.0093 6.52167 14.0093 7C14.0093 7.47833 13.6126 7.875 13.1343 7.875H9.63431C9.15598 7.875 8.75931 7.47833 8.75931 7C8.75931 6.52167 9.15598 6.125 9.63431 6.125ZM11.3843 18.8067C9.21431 18.8067 7.44098 17.045 7.44098 14.8633C7.44098 12.6817 9.20264 10.92 11.3843 10.92C13.566 10.92 15.3276 12.6817 15.3276 14.8633C15.3276 17.045 13.5543 18.8067 11.3843 18.8067Z\" fill=\"#6B7080\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (showInitials) {\r\n        <span class=\"avatar-text\">\r\n      {{ initials }}\r\n    </span>\r\n      }\r\n\r\n      @else {\r\n        <svg class=\"placeholder-icon\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" > <g clip-path=\"url(#clip0)\"> <path d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> <path d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g> <defs> <clipPath id=\"clip0\"> <rect width=\"32\" height=\"32\" fill=\"white\" /> </clipPath> </defs> </svg>\r\n      }\r\n\r\n      <!-- Remove badge -->\r\n      @if (showRemoveButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"remove-badge\"\r\n          (click)=\"onRemove()\"\r\n          aria-label=\"Remove avatar\"\r\n        >\r\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"#6B7080\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n          </svg>\r\n        </button>\r\n      }\r\n\r\n    </div>\r\n    <div class=\"flex flex-col gap-2 justify-end items-start\">\r\n      @if (editable) {\r\n        <label class=\"upload-button cursor-pointer\">\r\n          {{ uploadLabel }}\r\n          <input\r\n            type=\"file\"\r\n            class=\"hidden\"\r\n            [accept]=\"accept\"\r\n            [disabled]=\"disabled\"\r\n            (change)=\"onFileSelected($event)\"\r\n          />\r\n        </label>\r\n      }\r\n      @if (!hasError && hint) {\r\n        <p class=\"profile-size\">{{ hint }}</p>\r\n      }\r\n      @if (hasError && errorMessage) {\r\n        <p class=\"avatar-profile-error\">{{ errorMessage }}</p>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".avatar-profile-container{@apply flex flex-col gap-1.5;}.avatar-profile-label{@apply text-sm font-medium text-[#141414];}.avatar-profile-label-required{@apply text-[#E7000B] ml-0.5;}.avatar-profile-error{@apply text-xs text-[#E7000B] font-normal;}.avatar-profile{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none shadow-lg transition-all duration-200 border-[3px] border-white bg-[#F9FAFA];}.avatar-profile .avatar-img{@apply w-full h-full object-cover rounded-full;}.upload-button{@apply font-medium text-[#6B7080] border border-[#E3E3E7] rounded shadow-sm;}.sm .upload-button{@apply text-[12px] leading-[18px] px-2 py-3;}.md .upload-button{@apply text-[14px] leading-[20px] px-[10px] py-2.5;}.lg .upload-button{@apply text-[16px] leading-[24px] px-[18px] py-2.5;}.xl .upload-button{@apply text-[16px] leading-[24px] px-5 py-3;}.profile-size{@apply font-medium text-[#6B7080];}.sm .profile-size{@apply text-[10px] leading-[14px];}.md .profile-size{@apply text-[12px] leading-[18px];}.lg .profile-size{@apply text-[14px] leading-[20px];}.xl .profile-size{@apply text-[16px] leading-[24px];}.avatar-profile.sm .avatar-text{@apply font-medium text-[30px] leading-[38px];}.avatar-profile.md .avatar-text{@apply font-medium text-[36px] leading-[44px];}.avatar-profile.lg .avatar-text{@apply font-medium text-[45px] leading-[55px];}.avatar-profile.xl .avatar-text{@apply font-medium text-[60px] leading-[72px];}.avatar-profile{@apply font-medium text-[#6B7080];}.avatar-profile.sm{@apply size-[72px] text-sm;}.avatar-profile.md{@apply size-[96px] text-base;}.avatar-profile.lg{@apply size-[120px] text-[18px] leading-[26px];}.avatar-profile.xl{@apply size-[160px] text-xl;}.avatar-profile.sm .placeholder-icon{@apply size-[28px];}.avatar-profile.md .placeholder-icon{@apply size-[42px];}.avatar-profile.lg .placeholder-icon{@apply size-[52px];}.avatar-profile.xl .placeholder-icon{@apply size-[65px];}.avatar-profile.corrupted{@apply border-[3px] border-[#E7000B];}.avatar-profile .corrupted-icon{@apply text-[#E7000B];}.avatar-profile.sm .corrupted-icon{@apply size-[28px];}.avatar-profile.md .corrupted-icon{@apply size-[42px];}.avatar-profile.lg .corrupted-icon{@apply size-[52px];}.avatar-profile.xl .corrupted-icon{@apply size-[65px];}.remove-badge{@apply absolute top-0 right-0 w-5 h-5 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-gray-50 transition z-20 border-0 p-0;}\n"] }]
+                    ], template: "<div class=\"avatar-profile-container\" [ngClass]=\"sizeClasses\">\r\n  @if (label) {\r\n    <label class=\"avatar-profile-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"avatar-profile-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"flex gap-4 justify-end\">\r\n    <div\r\n    [ngClass]=\"containerClasses\"\r\n    [bkTooltip]=\"name\"\r\n    [bkTooltipPosition]=\"'top'\"\r\n  >\r\n\r\n      <!-- Loading overlay -->\r\n      @if (loading) {\r\n        <div class=\"absolute inset-0 flex items-center justify-center z-10 rounded-full bg-white/60\">\r\n          <div class=\"w-5 h-5 border-2 border-[#141414] border-t-transparent rounded-full animate-spin\"></div>\r\n        </div>\r\n      }\r\n\r\n      @if (corrupted) {\r\n        <!-- Corrupted file indicator -->\r\n        <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M19.3517 7.61665L15.3929 4.05375C14.2651 3.03868 13.7012 2.53114 13.0092 2.26562L13 5.00011C13 7.35713 13 8.53564 13.7322 9.26787C14.4645 10.0001 15.643 10.0001 18 10.0001H21.5801C21.2175 9.29588 20.5684 8.71164 19.3517 7.61665Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2.72548 20.3823 2.44924 19.8327 2.27818 19.1149C2.15904 18.6149 2.09948 18.3649 2.21429 18.0728C2.32911 17.7806 2.58217 17.6119 3.08829 17.2745L3.71429 16.8571C4.49285 16.3381 5.50715 16.3381 6.28571 16.8571C7.3238 17.5492 8.6762 17.5492 9.71429 16.8571C10.4929 16.3381 11.5071 16.3381 12.2857 16.8571C13.3238 17.5492 14.6762 17.5492 15.7143 16.8571C16.4929 16.3381 17.5071 16.3381 18.2857 16.8571C19.3238 17.5492 20.6762 17.5492 21.7143 16.8571C21.8241 16.7839 21.9705 16.8681 21.965 17C21.8873 18.8723 21.6366 20.0203 20.8284 20.8284C19.6569 22 17.7712 22 14 22Z\" fill=\"#DC3545\"/>\r\n            <path d=\"M2 10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.23869 2 10.0298 2C10.6358 2 11.1214 2 11.53 2.01666C11.5166 2.09659 11.5095 2.17813 11.5092 2.26057L11.5 5.09497C11.4999 6.19207 11.4998 7.16164 11.6049 7.94316C11.7188 8.79028 11.9803 9.63726 12.6716 10.3285C13.3628 11.0198 14.2098 11.2813 15.0569 11.3952C15.8385 11.5003 16.808 11.5002 17.9051 11.5001L18 11.5001H21.9934V12.3273C21.9973 12.5399 21.8912 12.7392 21.7143 12.8571C20.6762 13.5492 19.3238 13.5492 18.2857 12.8571C17.5071 12.3381 16.4929 12.3381 15.7143 12.8571C14.6762 13.5492 13.3238 13.5492 12.2857 12.8571C11.5071 12.3381 10.4929 12.3381 9.71429 12.8571C8.6762 13.5492 7.3238 13.5492 6.28571 12.8571C5.50715 12.3381 4.49285 12.3381 3.71429 12.8571L3.5547 12.9635C2.87033 13.4198 2.52814 13.6479 2.26407 13.5066C2 13.3653 2 12.954 2 12.1315V10Z\" fill=\"#DC3545\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (displaySrc && !imageLoadFailed) {\r\n        <img\r\n          [src]=\"displaySrc\"\r\n          [alt]=\"alt\"\r\n          class=\"avatar-img\"\r\n          (error)=\"onImageError()\"\r\n        />\r\n      }\r\n\r\n      @else if (fallback === 'camera') {\r\n        <svg class=\"placeholder-icon\" width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M18.3843 4.66667C17.6726 4.66667 17.0193 4.25833 16.6926 3.62833L15.8526 1.93667C15.316 0.875 13.916 0 12.726 0H10.0543C8.85264 0 7.45264 0.875 6.91598 1.93667L6.07598 3.62833C5.74931 4.25833 5.09598 4.66667 4.38431 4.66667C1.85264 4.66667 -0.154023 6.80167 0.00931005 9.32167L0.615977 18.9583C0.755977 21.3617 2.05098 23.3333 5.27098 23.3333H17.4976C20.7176 23.3333 22.001 21.3617 22.1526 18.9583L22.7593 9.32167C22.9226 6.80167 20.916 4.66667 18.3843 4.66667ZM9.63431 6.125H13.1343C13.6126 6.125 14.0093 6.52167 14.0093 7C14.0093 7.47833 13.6126 7.875 13.1343 7.875H9.63431C9.15598 7.875 8.75931 7.47833 8.75931 7C8.75931 6.52167 9.15598 6.125 9.63431 6.125ZM11.3843 18.8067C9.21431 18.8067 7.44098 17.045 7.44098 14.8633C7.44098 12.6817 9.20264 10.92 11.3843 10.92C13.566 10.92 15.3276 12.6817 15.3276 14.8633C15.3276 17.045 13.5543 18.8067 11.3843 18.8067Z\" fill=\"#6B7080\"/>\r\n        </svg>\r\n      }\r\n\r\n      @else if (showInitials) {\r\n        <span class=\"avatar-text\">\r\n      {{ initials }}\r\n    </span>\r\n      }\r\n\r\n      @else {\r\n        <svg class=\"placeholder-icon\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" > <g clip-path=\"url(#clip0)\"> <path d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> <path d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g> <defs> <clipPath id=\"clip0\"> <rect width=\"32\" height=\"32\" fill=\"white\" /> </clipPath> </defs> </svg>\r\n      }\r\n\r\n      <!-- Remove badge -->\r\n      @if (showRemoveButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"remove-badge\"\r\n          (click)=\"onRemove()\"\r\n          aria-label=\"Remove avatar\"\r\n          [bkTooltip]=\"removeableIconTooltip\"\r\n          [bkTooltipPosition]=\"'top'\"\r\n        >\r\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"#6B7080\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n          </svg>\r\n        </button>\r\n      }\r\n\r\n    </div>\r\n    <div class=\"flex flex-col gap-2 justify-end items-start\">\r\n      @if (editable) {\r\n        <label class=\"upload-button cursor-pointer\">\r\n          {{ uploadLabel }}\r\n          <input\r\n            type=\"file\"\r\n            class=\"hidden\"\r\n            [accept]=\"accept\"\r\n            [disabled]=\"disabled\"\r\n            (change)=\"onFileSelected($event)\"\r\n          />\r\n        </label>\r\n      }\r\n      @if (!hasError && hint) {\r\n        <p class=\"profile-size\">{{ hint }}</p>\r\n      }\r\n      @if (hasError && errorMessage) {\r\n        <p class=\"avatar-profile-error\">{{ errorMessage }}</p>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".avatar-profile-container{@apply flex flex-col gap-1.5;}.avatar-profile-label{@apply text-sm font-medium text-[#141414];}.avatar-profile-label-required{@apply text-[#E7000B] ml-0.5;}.avatar-profile-error{@apply text-xs text-[#E7000B] font-normal;}.avatar-profile{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none shadow-lg transition-all duration-200 border-[3px] border-white bg-[#F9FAFA];}.avatar-profile .avatar-img{@apply w-full h-full object-cover rounded-full;}.upload-button{@apply font-medium text-[#6B7080] border border-[#E3E3E7] rounded shadow-sm;}.sm .upload-button{@apply text-[12px] leading-[18px] px-2 py-3;}.md .upload-button{@apply text-[14px] leading-[20px] px-[10px] py-2.5;}.lg .upload-button{@apply text-[16px] leading-[24px] px-[18px] py-2.5;}.xl .upload-button{@apply text-[16px] leading-[24px] px-5 py-3;}.profile-size{@apply font-medium text-[#6B7080];}.sm .profile-size{@apply text-[10px] leading-[14px];}.md .profile-size{@apply text-[12px] leading-[18px];}.lg .profile-size{@apply text-[14px] leading-[20px];}.xl .profile-size{@apply text-[16px] leading-[24px];}.avatar-profile.sm .avatar-text{@apply font-medium text-[30px] leading-[38px];}.avatar-profile.md .avatar-text{@apply font-medium text-[36px] leading-[44px];}.avatar-profile.lg .avatar-text{@apply font-medium text-[45px] leading-[55px];}.avatar-profile.xl .avatar-text{@apply font-medium text-[60px] leading-[72px];}.avatar-profile{@apply font-medium text-[#6B7080];}.avatar-profile.sm{@apply size-[72px] text-sm;}.avatar-profile.md{@apply size-[96px] text-base;}.avatar-profile.lg{@apply size-[120px] text-[18px] leading-[26px];}.avatar-profile.xl{@apply size-[160px] text-xl;}.avatar-profile.sm .placeholder-icon{@apply size-[28px];}.avatar-profile.md .placeholder-icon{@apply size-[42px];}.avatar-profile.lg .placeholder-icon{@apply size-[52px];}.avatar-profile.xl .placeholder-icon{@apply size-[65px];}.avatar-profile.corrupted{@apply border-[3px] border-[#E7000B];}.avatar-profile .corrupted-icon{@apply text-[#E7000B];}.avatar-profile.sm .corrupted-icon{@apply size-[28px];}.avatar-profile.md .corrupted-icon{@apply size-[42px];}.avatar-profile.lg .corrupted-icon{@apply size-[52px];}.avatar-profile.xl .corrupted-icon{@apply size-[65px];}.remove-badge{@apply absolute top-0 right-0 w-5 h-5 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-gray-50 transition z-20 border-0 p-0;}\n"] }]
         }], propDecorators: { src: [{
                 type: Input
             }], alt: [{
@@ -7095,6 +7130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], removable: [{
                 type: Input
+            }], removeableIconTooltip: [{
+                type: Input
             }], label: [{
                 type: Input
             }], required: [{
@@ -7122,6 +7159,8 @@ class BkHierarchicalSelect {
     valueKey = input('noteTypeKey', ...(ngDevMode ? [{ debugName: "valueKey" }] : []));
     /** Key for children array (e.g. 'childs' or 'children'). */
     childrenKey = input('childs', ...(ngDevMode ? [{ debugName: "childrenKey" }] : []));
+    /** Key to check if node is disabled (e.g. 'active', 'disabled'). */
+    // disabledKey = input<string>('disabled');
     /** Placeholder when nothing selected. */
     placeholder = input('Select...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     /** Label above the control. */
@@ -7256,6 +7295,21 @@ class BkHierarchicalSelect {
         const ch = this.getChildren(node);
         return !!ch?.length;
     }
+    // isNodeDisabled(node: HierarchicalNode): boolean {
+    //   if (!node) return false;
+    //   const disabledProp = this.disabledKey();
+    //   if (!disabledProp || typeof node !== 'object') return false;
+    //   const value = node[disabledProp];
+    //   if (typeof value !== 'boolean') return value === true;
+    //   // Support both patterns:
+    //   // - disabled=true means disabled
+    //   // - active/enabled=false means disabled
+    //   const key = disabledProp.toLowerCase();
+    //   if (key.includes('active') || key.includes('enabled')) {
+    //     return !value;
+    //   }
+    //   return value;
+    // }
     isSelected(node) {
         const sel = this.selected();
         if (!sel)
@@ -7401,6 +7455,8 @@ class BkHierarchicalSelect {
     }
     selectItem(node, event) {
         event?.stopPropagation();
+        if (node.disabled)
+            return;
         const hasChildren = this.hasChildren(node);
         if (hasChildren && !this.allowParentSelection()) {
             this.breadcrumb.update((stack) => [...stack, node]);
@@ -7475,7 +7531,7 @@ class BkHierarchicalSelect {
                 useExisting: forwardRef(() => BkHierarchicalSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <div\r\n      #controlWrapper\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-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\">\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=\"hierarchical-arrow\" [class.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\">\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      class=\"hierarchical-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"appendToBody() ? getTop() : null\"\r\n      [style.bottom]=\"appendToBody() ? getBottom() : null\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-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\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (click)=\"goBack(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <span\r\n              #optLabel\r\n              class=\"hierarchical-option-label\"\r\n              [style.color]=\"resolveColor(item)\"\r\n              [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n              bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-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;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.hierarchical-dropdown-panel[data-position=bottom]{top:calc(100% + 4px);bottom:auto}.hierarchical-dropdown-panel[data-position=top]{bottom:calc(100% + 4px);top:auto}.hierarchical-dropdown-panel-fixed{z-index:10050}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option:hover,.hierarchical-option.selected{@apply bg-[#F8F8F8];}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{@apply border-[#d11e14];}\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", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipAutoHeight"] }] });
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "controlWrapper", first: true, predicate: ["controlWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <div\r\n      #controlWrapper\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-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\">\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=\"hierarchical-arrow\" [class.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\">\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      class=\"hierarchical-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"appendToBody() ? getTop() : null\"\r\n      [style.bottom]=\"appendToBody() ? getBottom() : null\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-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\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (click)=\"goBack(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            [class.disabled-item]=\"item.disabled\"\r\n            [class.cursor-not-allowed]=\"item.disabled\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <span\r\n              #optLabel\r\n              class=\"hierarchical-option-label\"\r\n              [style.color]=\"resolveColor(item)\"\r\n              [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n              bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-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;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.hierarchical-select-control.disabled .hierarchical-placeholder{@apply text-gray-400;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.hierarchical-dropdown-panel[data-position=bottom]{top:calc(100% + 4px);bottom:auto}.hierarchical-dropdown-panel[data-position=top]{bottom:calc(100% + 4px);top:auto}.hierarchical-dropdown-panel-fixed{z-index:10050}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option.disabled-item{@apply opacity-50 cursor-not-allowed;}.hierarchical-option.disabled-item:hover{@apply bg-transparent;}.hierarchical-option:hover,.hierarchical-option.selected{@apply bg-[#F8F8F8];}.hierarchical-option.selected.disabled-item{@apply bg-transparent;}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{@apply border-[#d11e14];}\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", "bkTooltipScrollable", "bkTooltipMaxHeight", "bkTooltipAutoHeight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkHierarchicalSelect, decorators: [{
             type: Component,
@@ -7485,7 +7541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkHierarchicalSelect),
                             multi: true,
                         },
-                    ], template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <div\r\n      #controlWrapper\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-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\">\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=\"hierarchical-arrow\" [class.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\">\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      class=\"hierarchical-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"appendToBody() ? getTop() : null\"\r\n      [style.bottom]=\"appendToBody() ? getBottom() : null\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-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\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (click)=\"goBack(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <span\r\n              #optLabel\r\n              class=\"hierarchical-option-label\"\r\n              [style.color]=\"resolveColor(item)\"\r\n              [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n              bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-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;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.hierarchical-dropdown-panel[data-position=bottom]{top:calc(100% + 4px);bottom:auto}.hierarchical-dropdown-panel[data-position=top]{bottom:calc(100% + 4px);top:auto}.hierarchical-dropdown-panel-fixed{z-index:10050}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option:hover,.hierarchical-option.selected{@apply bg-[#F8F8F8];}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{@apply border-[#d11e14];}\n"] }]
+                    ], template: "<div class=\"hierarchical-select-container\">\r\n  @if (label()) {\r\n    <label\r\n      class=\"input-label\"\r\n      (click)=\"openFromLabel($event)\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"input-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"hierarchical-select-field\">\r\n    <div\r\n      #controlWrapper\r\n      class=\"hierarchical-select-control\"\r\n      [ngClass]=\"{ 'hierarchical-select-control-has-error': hasError() }\"\r\n      tabindex=\"0\"\r\n      [class.focused]=\"isOpen()\"\r\n      [class.disabled]=\"isDisabled()\"\r\n      (mousedown)=\"toggleDropdown($event)\">\r\n      @if (iconSrc()) {\r\n        <img [src]=\"iconSrc()\" [alt]=\"iconAlt()\" class=\"shrink-0\" />\r\n      }\r\n      <div class=\"hierarchical-value-container\">\r\n        @if (!selected()) {\r\n          <div class=\"hierarchical-placeholder\">{{ placeholder() }}</div>\r\n        } @else {\r\n          <div class=\"hierarchical-value-label\" [style.color]=\"resolveColor(selected())\">\r\n            @for (node of displayPath(); track getValue(node); let last = $last) {\r\n              <span\r\n                #breadNode\r\n                class=\"hierarchical-breadcrumb-node\"\r\n                [bkTooltip]=\"breadNode.scrollWidth > breadNode.clientWidth ? getLabel(node) : ''\"\r\n                bkTooltipPosition=\"top\">{{ getLabel(node) }}</span>\r\n\r\n              @if (!last) {\r\n                <svg\r\n                  class=\"breadcrumb-separator\"\r\n                  width=\"5\"\r\n                  height=\"8\"\r\n                  viewBox=\"0 0 5 8\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\">\r\n                  <path\r\n                    d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\"\r\n                    fill=\"#BBBDC5\"/>\r\n                </svg>\r\n              }\r\n            }\r\n          </div>\r\n\r\n        }\r\n      </div>\r\n      <div class=\"hierarchical-actions\">\r\n        @if (clearable() && selected() && !isDisabled()) {\r\n          <span class=\"hierarchical-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\">\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=\"hierarchical-arrow\" [class.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\">\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      class=\"hierarchical-dropdown-panel\"\r\n      [attr.data-position]=\"dropdownPosition()\"\r\n      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"appendToBody() ? getTop() : null\"\r\n      [style.bottom]=\"appendToBody() ? getBottom() : null\"\r\n      [style.left]=\"appendToBody() ? dropdownStyle().left : null\"\r\n      [style.width]=\"appendToBody() ? dropdownStyle().width : '100%'\">\r\n      @if (searchable()) {\r\n        <div  class=\"hierarchical-search\">\r\n          <div class=\"hierarchical-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\r\n              #searchInput\r\n              type=\"text\"\r\n              class=\"hierarchical-search-input\"\r\n              [value]=\"searchTerm()\"\r\n              [placeholder]=\"searchPlaceholder()\"\r\n              (input)=\"onSearchInput($event)\"\r\n              (click)=\"$event.stopPropagation()\" />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      @if (showBack()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"hierarchical-back\"\r\n          (click)=\"goBack(); $event.stopPropagation()\">\r\n          <span>\r\n            <svg width=\"6\" height=\"10\" viewBox=\"0 0 6 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M4.59961 0.599976L0.599609 4.59998L4.59961 8.59998\" stroke=\"#141414\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n\r\n          </span>\r\n          {{ backToMainText() }}\r\n        </button>\r\n      }\r\n\r\n      <div class=\"hierarchical-options-list\">\r\n        @for (item of filteredItems(); track getValue(item)) {\r\n          <div\r\n            class=\"hierarchical-option\"\r\n            [class.selected]=\"isSelected(item)\"\r\n            [class.disabled-item]=\"item.disabled\"\r\n            [class.cursor-not-allowed]=\"item.disabled\"\r\n            (mousedown)=\"selectItem(item, $event)\">\r\n            <span\r\n              #optLabel\r\n              class=\"hierarchical-option-label\"\r\n              [style.color]=\"resolveColor(item)\"\r\n              [bkTooltip]=\"optLabel.scrollWidth > optLabel.clientWidth ? getLabel(item) : ''\"\r\n              bkTooltipPosition=\"top\">{{ getLabel(item) }}</span>\r\n            @if (hasChildren(item)) {\r\n              <svg width=\"5\" height=\"8\" viewBox=\"0 0 5 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M4.57142 4.00286C4.57185 3.92766 4.55744 3.85312 4.52901 3.78351C4.50057 3.71389 4.45868 3.65058 4.40572 3.59719L0.977497 0.169008C0.924381 0.115455 0.861186 0.0729493 0.79156 0.0439419C0.721933 0.0149346 0.647251 0 0.571824 0C0.496396 0 0.421714 0.0149346 0.352088 0.0439419C0.282461 0.0729493 0.219267 0.115455 0.16615 0.169008C0.059732 0.27606 0 0.420874 0 0.57182C0 0.722766 0.059732 0.867579 0.16615 0.974631L3.19442 4.00286L0.16615 7.02537C0.059732 7.13242 0 7.27723 0 7.42818C0 7.57913 0.059732 7.72394 0.16615 7.83099C0.219267 7.88454 0.282461 7.92705 0.352088 7.95606C0.421714 7.98507 0.496396 8 0.571824 8C0.647251 8 0.721933 7.98507 0.79156 7.95606C0.861186 7.92705 0.924381 7.88454 0.977497 7.83099L4.40572 4.40281C4.51128 4.29639 4.57079 4.15275 4.57142 4.00286Z\" fill=\"#BBBDC5\"/>\r\n              </svg>\r\n            } @else if (isSelected(item)) {\r\n              <svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path d=\"M3.72939 6.28273C3.64166 6.28324 3.55468 6.26642 3.47346 6.23324C3.39223 6.20007 3.31835 6.15118 3.25606 6.08939L0.196061 3.00273C0.0705253 2.87719 -1.32274e-09 2.70693 0 2.52939C1.32273e-09 2.35186 0.0705253 2.1816 0.196061 2.05606C0.321597 1.93053 0.49186 1.86 0.669394 1.86C0.846929 1.86 1.01719 1.93053 1.14273 2.05606L3.72939 4.64939L8.17606 0.196061C8.3016 0.0705253 8.47186 -3.49963e-09 8.64939 0C8.82693 3.49963e-09 8.99719 0.0705253 9.12273 0.196061C9.24826 0.321597 9.31879 0.49186 9.31879 0.669395C9.31879 0.846929 9.24826 1.01719 9.12273 1.14273L4.20273 6.06273C4.07921 6.19434 3.90963 6.27316 3.72939 6.28273V6.28273Z\" fill=\"#141414\"/>\r\n              </svg>\r\n            }\r\n          </div>\r\n        }\r\n        @if (filteredItems().length === 0) {\r\n          <div class=\"hierarchical-option-empty\">No records found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.hierarchical-select-field{@apply relative w-full;}.hierarchical-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;}.hierarchical-select-control.focused{@apply border-[#6B7080] shadow-none z-10;}.hierarchical-select-control.disabled{@apply bg-[#F4F4F6] cursor-not-allowed opacity-60;}.hierarchical-select-control.disabled .hierarchical-placeholder{@apply text-gray-400;}.hierarchical-value-container{@apply flex flex-1 items-center flex-wrap gap-1 relative overflow-hidden h-full min-w-0;}.hierarchical-placeholder{@apply text-[#6B7080] font-normal text-sm truncate w-full pointer-events-none;}.hierarchical-value-label{@apply font-normal text-sm leading-[18px] text-[#141414] truncate w-full flex items-center;}.hierarchical-actions{@apply flex items-center gap-2 flex-shrink-0;}.hierarchical-clear-wrapper{@apply text-gray-400 hover:text-red-500 cursor-pointer;}.hierarchical-arrow{@apply flex-shrink-0 text-gray-400 transition-transform duration-200;}.hierarchical-arrow.open{@apply rotate-180;}.hierarchical-dropdown-panel{@apply absolute left-0 w-full min-w-[250px] max-w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.hierarchical-dropdown-panel[data-position=bottom]{top:calc(100% + 4px);bottom:auto}.hierarchical-dropdown-panel[data-position=top]{bottom:calc(100% + 4px);top:auto}.hierarchical-dropdown-panel-fixed{z-index:10050}.hierarchical-search{@apply px-2 pt-2;}.hierarchical-search-wrapper{@apply flex items-center border border-[#E3E3E7] rounded-md px-3 py-[7px] bg-white transition-colors focus-within:border-[#E3E3E7];}.hierarchical-search-input{@apply w-full outline-none font-normal text-sm text-[#141414] placeholder-[#A1A3AE] bg-transparent;}.hierarchical-back{@apply w-full text-left px-2.5 py-2 text-sm text-[#141414] bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply overflow-auto relative flex flex-col gap-0.5 mt-1;}@media (max-height: 700px){.hierarchical-options-list{max-height:124px}}@media (min-height: 701px) and (max-height: 900px){.hierarchical-options-list{max-height:164px}}@media (min-height: 901px){.hierarchical-options-list{max-height:204px}}.hierarchical-option{@apply flex items-center justify-between gap-2 p-2.5 cursor-pointer transition-colors font-normal text-sm text-[#141414] rounded-md;}.hierarchical-option.disabled-item{@apply opacity-50 cursor-not-allowed;}.hierarchical-option.disabled-item:hover{@apply bg-transparent;}.hierarchical-option:hover,.hierarchical-option.selected{@apply bg-[#F8F8F8];}.hierarchical-option.selected.disabled-item{@apply bg-transparent;}.hierarchical-option-label{@apply flex-1 truncate;}.hierarchical-option-chevron{@apply flex-shrink-0 text-[#6B7080];}.hierarchical-option-check{@apply flex-shrink-0 text-[#141414];}.hierarchical-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}.input-label{@apply text-sm font-medium text-[#141414] tracking-[-.28px] mb-1.5 inline-block;}.input-label-required{@apply text-[#E7000B];}.hierarchical-options-list::-webkit-scrollbar{width:6px}.hierarchical-options-list::-webkit-scrollbar-track{background:transparent;border-radius:8px;width:8px}.hierarchical-options-list::-webkit-scrollbar-thumb{background:#d6d7dc;border-radius:8px;transition:.3s ease-in-out}.hierarchical-options-list::-webkit-scrollbar-thumb:hover{background:#909090}.hierarchical-breadcrumb-node{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{@apply border-[#d11e14];}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], iconAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlt", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowParentSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowParentSelection", required: false }] }], backToMainText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backToMainText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], restrictKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "restrictKey", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], clear: [{ type: i0.Output, args: ["clear"] }], searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']