@brickclay-org/ui 0.1.48 → 0.1.50

package/fesm2022/brickclay-org-ui.mjs

@@ -543,8 +543,8 @@ class BkCustomCalendar {
     customRangeDirection = false;
     lockStartDate = false;
     position = 'left';
-    /** Vertical placement relative to the input. Takes precedence over {@link drop} for default bottom placement. */
-    popupPosition = 'bottom';
+    /** Vertical placement relative to the input. When explicitly set, overrides viewport-space detection entirely. */
+    popupPosition;
     drop = 'down';
     dualCalendar = false;
     showRanges = true;
@@ -683,9 +683,9 @@ class BkCustomCalendar {
         this.onTouched();
         this.closed.emit();
     }
-    /** User preference before viewport adjustment (legacy `drop` still applies when `popupPosition` is `bottom`). */
+    /** User preference before viewport adjustment (only used when popupPosition is not explicitly set). */
     preferPopupAbove() {
-        return this.popupPosition === 'top' || (this.popupPosition === 'bottom' && this.drop === 'up');
+        return this.drop === 'up';
     }
     resolveCustomRangesFromInputsOrService() {
         const svc = this.calendarManager.getCustomRanges();
@@ -1116,6 +1116,12 @@ class BkCustomCalendar {
         this.popupPlacementAbove = this.computePlacementAbove(rect, popupH);
     }
     computePlacementAbove(rect, popupHeight) {
+        // If the consumer explicitly set popupPosition, honour it — no space-check override.
+        if (this.popupPosition === 'top')
+            return true;
+        if (this.popupPosition === 'bottom')
+            return false;
+        // No explicit value → auto-detect based on available viewport space.
         const gap = 12;
         const spaceBelow = window.innerHeight - rect.bottom - gap;
         const spaceAbove = rect.top - gap;
@@ -5501,7 +5507,7 @@ class BkInputChips {
                 useExisting: forwardRef(() => BkInputChips),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "badgeInput", first: true, predicate: ["badgeInput"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"input-badge-container\">\r\n  @if (label) {\r\n    <label\r\n      [for]=\"id\"\r\n      class=\"input-badge-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"input-badge-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-badge-wrapper\">\r\n    <div\r\n      #fieldWrapper\r\n      class=\"input-badge-field-wrapper\"\r\n      [ngClass]=\"{\r\n        'input-badge-field-wrapper--default': inputState === 'default',\r\n        'input-badge-field-wrapper--focused': inputState === 'focused',\r\n        'input-badge-field-wrapper--filled': inputState === 'filled',\r\n        'input-badge-field-wrapper--error': inputState === 'error',\r\n        'input-badge-field-wrapper--disabled': inputState === 'disabled',\r\n        'input-badge-field-wrapper--scrollable': needsScroll\r\n      }\"\r\n      (click)=\"focusInput()\"\r\n    >\r\n      <!-- Badges -->\r\n      @for (badge of badges; track badge; let i = $index) {\r\n        <div class=\"input-badge-item\">\r\n          <span class=\"input-badge-item-text\">{{ badge }}</span>\r\n          @if (!disabled) {\r\n            <button type=\"button\" (click)=\"removeBadge(i); $event.stopPropagation()\"class=\"input-badge-item-close\" >\r\n              <img src=\"../../../../assets/images/icons/global/badge-close.svg\" alt=\"Remove\" class=\"input-badge-item-close-icon\"/>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Input Field -->\r\n      <input\r\n        #badgeInput\r\n        type=\"text\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [value]=\"inputValue\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        [placeholder]=\"badges.length === 0 ? placeholder : ''\"\r\n        [disabled]=\"disabled\"\r\n        [readOnly]=\"readOnly\"\r\n        class=\"input-badge-input\"\r\n        [ngClass]=\"{\r\n          'input-badge-input--default': inputState === 'default',\r\n          'input-badge-input--focused': inputState === 'focused',\r\n          'input-badge-input--filled': inputState === 'filled',\r\n          'input-badge-input--error': inputState === 'error',\r\n          'input-badge-input--disabled': inputState === 'disabled'\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"input-badge-footer\">\r\n    <div class=\"input-badge-footer-content\">\r\n      @if (hasError) {\r\n        <span class=\"input-badge-error\"> {{ errorMessage }}</span>\r\n      } @else if (hint) {\r\n        <span class=\"input-badge-hint\"> {{ hint }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-badge-container{@apply flex flex-col gap-1.5 w-full;}.input-badge-label{@apply text-sm font-medium text-[#141414] block;}.input-badge-label-required{@apply text-[#E7000B] ml-0.5;}.input-badge-wrapper{@apply relative;}.input-badge-field-wrapper{@apply w-full px-3 py-2 text-sm border rounded-[4px] outline-none transition-colors duration-200 bg-white flex flex-wrap gap-2 items-start;height:40px;box-sizing:border-box;overflow-y:hidden;overflow-x:hidden}.input-badge-field-wrapper--scrollable{overflow-y:auto}.input-badge-field-wrapper--default{@apply border-[#E3E3E7] text-[#141414];}.input-badge-field-wrapper--default:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--focused{@apply border-[#6B7080] text-[#141414];}.input-badge-field-wrapper--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-badge-field-wrapper--filled:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--error{@apply border-[#FA727A] text-[#141414];}.input-badge-field-wrapper--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed;}.input-badge-item{@apply inline-flex items-center gap-1 px-2 py-[2.5px] bg-white border border-[#E3E3E7] rounded-[4px];}.input-badge-item-text{@apply text-sm leading-[18px] font-normal text-[#6B7080];}.input-badge-item-close{@apply cursor-pointer outline-none w-3 h-3;}.input-badge-input{@apply flex-1 min-w-[120px] outline-none bg-transparent text-[#141414] placeholder:text-[#6B7080] h-auto;flex-basis:120px}.input-badge-input--default,.input-badge-input--focused,.input-badge-input--filled,.input-badge-input--error{@apply text-[#141414];}.input-badge-input--disabled{@apply text-[#A1A3AE] cursor-not-allowed;}.input-badge-footer{@apply flex justify-between items-start font-normal text-sm;}.input-badge-footer-content{@apply flex-1;}.input-badge-hint{@apply text-xs text-[#868997] font-normal;}.input-badge-error{@apply text-xs text-[#F34050] font-normal;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], viewQueries: [{ propertyName: "badgeInput", first: true, predicate: ["badgeInput"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"input-badge-container\">\r\n  @if (label) {\r\n    <label\r\n      [for]=\"id\"\r\n      class=\"input-badge-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"input-badge-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-badge-wrapper\">\r\n    <div\r\n      #fieldWrapper\r\n      class=\"input-badge-field-wrapper\"\r\n      [ngClass]=\"{\r\n        'input-badge-field-wrapper--default': inputState === 'default',\r\n        'input-badge-field-wrapper--focused': inputState === 'focused',\r\n        'input-badge-field-wrapper--filled': inputState === 'filled',\r\n        'input-badge-field-wrapper--error': inputState === 'error',\r\n        'input-badge-field-wrapper--disabled': inputState === 'disabled',\r\n        'input-badge-field-wrapper--scrollable': needsScroll\r\n      }\"\r\n      (click)=\"focusInput()\"\r\n    >\r\n      <!-- Badges -->\r\n      @for (badge of badges; track badge; let i = $index) {\r\n        <div class=\"input-badge-item\">\r\n          <span class=\"input-badge-item-text\">{{ badge }}</span>\r\n          @if (!disabled) {\r\n            <button type=\"button\" (click)=\"removeBadge(i); $event.stopPropagation()\"class=\"input-badge-item-close\" >\r\n              <img src=\"../../../../assets/images/icons/global/badge-close.svg\" alt=\"Remove\" class=\"input-badge-item-close-icon\"/>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Input Field -->\r\n      <input\r\n        #badgeInput\r\n        type=\"text\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [value]=\"inputValue\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        [placeholder]=\"badges.length === 0 ? placeholder : ''\"\r\n        [disabled]=\"disabled\"\r\n        [readOnly]=\"readOnly\"\r\n        class=\"input-badge-input\"\r\n        [ngClass]=\"{\r\n          'input-badge-input--default': inputState === 'default',\r\n          'input-badge-input--focused': inputState === 'focused',\r\n          'input-badge-input--filled': inputState === 'filled',\r\n          'input-badge-input--error': inputState === 'error',\r\n          'input-badge-input--disabled': inputState === 'disabled'\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"input-badge-footer\">\r\n    <div class=\"input-badge-footer-content\">\r\n      @if (hasError) {\r\n        <span class=\"input-badge-error\"> {{ errorMessage }}</span>\r\n      } @else if (hint) {\r\n        <span class=\"input-badge-hint\"> {{ hint }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-badge-container{@apply flex flex-col gap-1.5 w-full;}.input-badge-label{@apply text-sm font-medium text-[#141414] block;}.input-badge-label-required{@apply text-[#E7000B] ml-0.5;}.input-badge-wrapper{@apply relative;}.input-badge-field-wrapper{@apply w-full px-3 py-2 text-sm border rounded-[4px] outline-none transition-colors duration-200 bg-white flex flex-wrap gap-2 items-start;height:40px;box-sizing:border-box;overflow-y:hidden;overflow-x:hidden}.input-badge-field-wrapper--scrollable{overflow-y:auto}.input-badge-field-wrapper--default{@apply border-[#E3E3E7] text-[#141414];}.input-badge-field-wrapper--default:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--focused{@apply border-[#6B7080] text-[#141414];}.input-badge-field-wrapper--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-badge-field-wrapper--filled:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--error{@apply border-[#FA727A] text-[#141414];}.input-badge-field-wrapper--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed;}.input-badge-item{@apply inline-flex items-center gap-1 px-2 py-[2.5px] bg-white border border-[#E3E3E7] rounded-[4px];}.input-badge-item-text{@apply text-sm leading-[18px] font-normal text-[#6B7080];}.input-badge-item-close{@apply cursor-pointer outline-none w-3 h-3;}.input-badge-input{@apply flex-1 min-w-[120px] outline-none bg-transparent text-[#141414] placeholder:text-[#6B7080] h-auto;flex-basis:120px}.input-badge-input--default,.input-badge-input--focused,.input-badge-input--filled,.input-badge-input--error{@apply text-[#141414];}.input-badge-input--disabled{@apply text-[#A1A3AE] cursor-not-allowed;}.input-badge-input:-moz-focusring{outline:none}.input-badge-footer{@apply flex justify-between items-start font-normal text-sm;}.input-badge-footer-content{@apply flex-1;}.input-badge-hint{@apply text-xs text-[#868997] font-normal;}.input-badge-error{@apply text-xs text-[#F34050] font-normal;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkInputChips, decorators: [{
             type: Component,
@@ -5511,7 +5517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkInputChips),
                             multi: true
                         }
-                    ], template: "<div class=\"input-badge-container\">\r\n  @if (label) {\r\n    <label\r\n      [for]=\"id\"\r\n      class=\"input-badge-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"input-badge-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-badge-wrapper\">\r\n    <div\r\n      #fieldWrapper\r\n      class=\"input-badge-field-wrapper\"\r\n      [ngClass]=\"{\r\n        'input-badge-field-wrapper--default': inputState === 'default',\r\n        'input-badge-field-wrapper--focused': inputState === 'focused',\r\n        'input-badge-field-wrapper--filled': inputState === 'filled',\r\n        'input-badge-field-wrapper--error': inputState === 'error',\r\n        'input-badge-field-wrapper--disabled': inputState === 'disabled',\r\n        'input-badge-field-wrapper--scrollable': needsScroll\r\n      }\"\r\n      (click)=\"focusInput()\"\r\n    >\r\n      <!-- Badges -->\r\n      @for (badge of badges; track badge; let i = $index) {\r\n        <div class=\"input-badge-item\">\r\n          <span class=\"input-badge-item-text\">{{ badge }}</span>\r\n          @if (!disabled) {\r\n            <button type=\"button\" (click)=\"removeBadge(i); $event.stopPropagation()\"class=\"input-badge-item-close\" >\r\n              <img src=\"../../../../assets/images/icons/global/badge-close.svg\" alt=\"Remove\" class=\"input-badge-item-close-icon\"/>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Input Field -->\r\n      <input\r\n        #badgeInput\r\n        type=\"text\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [value]=\"inputValue\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        [placeholder]=\"badges.length === 0 ? placeholder : ''\"\r\n        [disabled]=\"disabled\"\r\n        [readOnly]=\"readOnly\"\r\n        class=\"input-badge-input\"\r\n        [ngClass]=\"{\r\n          'input-badge-input--default': inputState === 'default',\r\n          'input-badge-input--focused': inputState === 'focused',\r\n          'input-badge-input--filled': inputState === 'filled',\r\n          'input-badge-input--error': inputState === 'error',\r\n          'input-badge-input--disabled': inputState === 'disabled'\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"input-badge-footer\">\r\n    <div class=\"input-badge-footer-content\">\r\n      @if (hasError) {\r\n        <span class=\"input-badge-error\"> {{ errorMessage }}</span>\r\n      } @else if (hint) {\r\n        <span class=\"input-badge-hint\"> {{ hint }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-badge-container{@apply flex flex-col gap-1.5 w-full;}.input-badge-label{@apply text-sm font-medium text-[#141414] block;}.input-badge-label-required{@apply text-[#E7000B] ml-0.5;}.input-badge-wrapper{@apply relative;}.input-badge-field-wrapper{@apply w-full px-3 py-2 text-sm border rounded-[4px] outline-none transition-colors duration-200 bg-white flex flex-wrap gap-2 items-start;height:40px;box-sizing:border-box;overflow-y:hidden;overflow-x:hidden}.input-badge-field-wrapper--scrollable{overflow-y:auto}.input-badge-field-wrapper--default{@apply border-[#E3E3E7] text-[#141414];}.input-badge-field-wrapper--default:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--focused{@apply border-[#6B7080] text-[#141414];}.input-badge-field-wrapper--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-badge-field-wrapper--filled:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--error{@apply border-[#FA727A] text-[#141414];}.input-badge-field-wrapper--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed;}.input-badge-item{@apply inline-flex items-center gap-1 px-2 py-[2.5px] bg-white border border-[#E3E3E7] rounded-[4px];}.input-badge-item-text{@apply text-sm leading-[18px] font-normal text-[#6B7080];}.input-badge-item-close{@apply cursor-pointer outline-none w-3 h-3;}.input-badge-input{@apply flex-1 min-w-[120px] outline-none bg-transparent text-[#141414] placeholder:text-[#6B7080] h-auto;flex-basis:120px}.input-badge-input--default,.input-badge-input--focused,.input-badge-input--filled,.input-badge-input--error{@apply text-[#141414];}.input-badge-input--disabled{@apply text-[#A1A3AE] cursor-not-allowed;}.input-badge-footer{@apply flex justify-between items-start font-normal text-sm;}.input-badge-footer-content{@apply flex-1;}.input-badge-hint{@apply text-xs text-[#868997] font-normal;}.input-badge-error{@apply text-xs text-[#F34050] font-normal;}\n"] }]
+                    ], template: "<div class=\"input-badge-container\">\r\n  @if (label) {\r\n    <label\r\n      [for]=\"id\"\r\n      class=\"input-badge-label\">\r\n      {{ label }}\r\n      @if (required) {\r\n        <span class=\"input-badge-label-required\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-badge-wrapper\">\r\n    <div\r\n      #fieldWrapper\r\n      class=\"input-badge-field-wrapper\"\r\n      [ngClass]=\"{\r\n        'input-badge-field-wrapper--default': inputState === 'default',\r\n        'input-badge-field-wrapper--focused': inputState === 'focused',\r\n        'input-badge-field-wrapper--filled': inputState === 'filled',\r\n        'input-badge-field-wrapper--error': inputState === 'error',\r\n        'input-badge-field-wrapper--disabled': inputState === 'disabled',\r\n        'input-badge-field-wrapper--scrollable': needsScroll\r\n      }\"\r\n      (click)=\"focusInput()\"\r\n    >\r\n      <!-- Badges -->\r\n      @for (badge of badges; track badge; let i = $index) {\r\n        <div class=\"input-badge-item\">\r\n          <span class=\"input-badge-item-text\">{{ badge }}</span>\r\n          @if (!disabled) {\r\n            <button type=\"button\" (click)=\"removeBadge(i); $event.stopPropagation()\"class=\"input-badge-item-close\" >\r\n              <img src=\"../../../../assets/images/icons/global/badge-close.svg\" alt=\"Remove\" class=\"input-badge-item-close-icon\"/>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Input Field -->\r\n      <input\r\n        #badgeInput\r\n        type=\"text\"\r\n        [id]=\"id\"\r\n        [name]=\"name\"\r\n        [value]=\"inputValue\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (input)=\"handleInput($event)\"\r\n        (focus)=\"handleFocus($event)\"\r\n        (blur)=\"handleBlur($event)\"\r\n        [placeholder]=\"badges.length === 0 ? placeholder : ''\"\r\n        [disabled]=\"disabled\"\r\n        [readOnly]=\"readOnly\"\r\n        class=\"input-badge-input\"\r\n        [ngClass]=\"{\r\n          'input-badge-input--default': inputState === 'default',\r\n          'input-badge-input--focused': inputState === 'focused',\r\n          'input-badge-input--filled': inputState === 'filled',\r\n          'input-badge-input--error': inputState === 'error',\r\n          'input-badge-input--disabled': inputState === 'disabled'\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"input-badge-footer\">\r\n    <div class=\"input-badge-footer-content\">\r\n      @if (hasError) {\r\n        <span class=\"input-badge-error\"> {{ errorMessage }}</span>\r\n      } @else if (hint) {\r\n        <span class=\"input-badge-hint\"> {{ hint }}</span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-badge-container{@apply flex flex-col gap-1.5 w-full;}.input-badge-label{@apply text-sm font-medium text-[#141414] block;}.input-badge-label-required{@apply text-[#E7000B] ml-0.5;}.input-badge-wrapper{@apply relative;}.input-badge-field-wrapper{@apply w-full px-3 py-2 text-sm border rounded-[4px] outline-none transition-colors duration-200 bg-white flex flex-wrap gap-2 items-start;height:40px;box-sizing:border-box;overflow-y:hidden;overflow-x:hidden}.input-badge-field-wrapper--scrollable{overflow-y:auto}.input-badge-field-wrapper--default{@apply border-[#E3E3E7] text-[#141414];}.input-badge-field-wrapper--default:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--focused{@apply border-[#6B7080] text-[#141414];}.input-badge-field-wrapper--filled{@apply border-[#E3E3E7] text-[#141414] bg-white;}.input-badge-field-wrapper--filled:focus-within{@apply border-[#6B7080];}.input-badge-field-wrapper--error{@apply border-[#FA727A] text-[#141414];}.input-badge-field-wrapper--disabled{@apply bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed;}.input-badge-item{@apply inline-flex items-center gap-1 px-2 py-[2.5px] bg-white border border-[#E3E3E7] rounded-[4px];}.input-badge-item-text{@apply text-sm leading-[18px] font-normal text-[#6B7080];}.input-badge-item-close{@apply cursor-pointer outline-none w-3 h-3;}.input-badge-input{@apply flex-1 min-w-[120px] outline-none bg-transparent text-[#141414] placeholder:text-[#6B7080] h-auto;flex-basis:120px}.input-badge-input--default,.input-badge-input--focused,.input-badge-input--filled,.input-badge-input--error{@apply text-[#141414];}.input-badge-input--disabled{@apply text-[#A1A3AE] cursor-not-allowed;}.input-badge-input:-moz-focusring{outline:none}.input-badge-footer{@apply flex justify-between items-start font-normal text-sm;}.input-badge-footer-content{@apply flex-1;}.input-badge-hint{@apply text-xs text-[#868997] font-normal;}.input-badge-error{@apply text-xs text-[#F34050] font-normal;}\n"] }]
         }], propDecorators: { badgeInput: [{
                 type: ViewChild,
                 args: ['badgeInput']
@@ -7541,7 +7547,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)\"  [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\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"] }] });
+        ], 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)\"  [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\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-search-input:-moz-focusring{outline:none}.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,
@@ -7551,7 +7557,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)\"  [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\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"] }]
+                    ], 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)\"  [bkTooltip]=\"clearTooltip()\" bkTooltipPosition=\"top\">\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-search-input:-moz-focusring{outline:none}.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 }] }], clearTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTooltip", 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']