@brickclay-org/ui 0.0.61 → 0.0.63

package/fesm2022/brickclay-org-ui.mjs

@@ -6355,7 +6355,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\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>{{ 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      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getDropdownTop()\"\r\n      [style.left]=\"getDropdownLeft()\"\r\n      [style.width]=\"getDropdownWidth() ?? (appendToBody() ? null : '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 class=\"hierarchical-option-label\" [style.color]=\"resolveColor(item)\">{{ 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 items found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.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 top-[calc(100% + 4px)] w-full min-w-[250px] max-w-[320px] bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.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-[#6B7080];}.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] hover:bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply max-h-60 overflow-auto relative flex flex-col gap-0.5 mt-1;}.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}.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 }] });
+        ], 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\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>{{ 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      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getDropdownTop()\"\r\n      [style.left]=\"getDropdownLeft()\"\r\n      [style.width]=\"getDropdownWidth() ?? (appendToBody() ? null : '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 class=\"hierarchical-option-label\" [style.color]=\"resolveColor(item)\">{{ 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 items found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.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 top-[calc(100%+4px)] w-full min-w-[250px] max-w-[320px] bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.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-[#6B7080];}.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] hover:bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply max-h-60 overflow-auto relative flex flex-col gap-0.5 mt-1;}.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}.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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkHierarchicalSelect, decorators: [{
             type: Component,
@@ -6365,7 +6365,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\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>{{ 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      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getDropdownTop()\"\r\n      [style.left]=\"getDropdownLeft()\"\r\n      [style.width]=\"getDropdownWidth() ?? (appendToBody() ? null : '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 class=\"hierarchical-option-label\" [style.color]=\"resolveColor(item)\">{{ 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 items found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.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 top-[calc(100% + 4px)] w-full min-w-[250px] max-w-[320px] bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.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-[#6B7080];}.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] hover:bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply max-h-60 overflow-auto relative flex flex-col gap-0.5 mt-1;}.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}.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\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>{{ 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      [class.hierarchical-dropdown-panel-fixed]=\"appendToBody()\"\r\n      [style.position]=\"appendToBody() ? 'fixed' : 'absolute'\"\r\n      [style.top]=\"getDropdownTop()\"\r\n      [style.left]=\"getDropdownLeft()\"\r\n      [style.width]=\"getDropdownWidth() ?? (appendToBody() ? null : '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 class=\"hierarchical-option-label\" [style.color]=\"resolveColor(item)\">{{ 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 items found</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".hierarchical-select-container{@apply relative w-full box-border;}.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 top-[calc(100%+4px)] w-full min-w-[250px] max-w-[320px] bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[99] overflow-hidden cursor-default p-2.5;}.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-[#6B7080];}.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] hover:bg-[#F8F8F8] rounded-md transition-colors mt-1 flex items-center gap-1.5;}.hierarchical-options-list{@apply max-h-60 overflow-auto relative flex flex-col gap-0.5 mt-1;}.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}.breadcrumb-separator{margin:0 6px;flex-shrink:0}.hierarchical-select-control.hierarchical-select-control-has-error{@apply border-[#d11e14];}\n"] }]
         }], 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 }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", 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']
@@ -6623,7 +6623,7 @@ class BkUiAvatar {
                 useExisting: forwardRef(() => BkUiAvatar),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div\r\n  [ngClass]=\"containerClasses\"\r\n  [bkTooltip]=\"name\"\r\n  [bkTooltipPosition]=\"'top'\"\r\n>\r\n\r\n  @if (showImage) {\r\n    <img\r\n      [src]=\"src\"\r\n      [alt]=\"alt\"\r\n      class=\"avatar-img\"\r\n      (error)=\"onImageError()\"\r\n    />\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\r\n      class=\"placeholder-icon\"\r\n      viewBox=\"0 0 32 32\"\r\n      fill=\"none\"\r\n      aria-hidden=\"true\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        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\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @if (dot !== 'none') {\r\n    <span [ngClass]=\"dotClasses\"></span>\r\n  }\r\n\r\n</div>\r\n", styles: [".avatar{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none transition-all duration-200;}.avatar-img{@apply w-full h-full object-cover rounded-full;}.avatar-text{@apply font-medium;}.xsm{@apply size-6 text-[10px] leading-[14px];}.sm{@apply size-8 text-sm;}.md{@apply size-10 text-base;}.lg{@apply size-12 text-[18px] leading-[26px];}.xl{@apply size-14 text-xl;}.xxl{@apply size-16 text-xl;}.xsm .placeholder-icon{@apply size-4;}.sm .placeholder-icon{@apply size-5;}.md .placeholder-icon{@apply size-6;}.lg .placeholder-icon{@apply size-7;}.xl .placeholder-icon,.xxl .placeholder-icon{@apply size-8;}.avatar-dot{@apply absolute rounded-full block box-content border-[1.5px] border-white;}.xsm .avatar-dot{@apply size-1;}.sm .avatar-dot{@apply size-1.5;}.md .avatar-dot{@apply size-2.5;}.lg .avatar-dot{@apply size-3;}.xl .avatar-dot{@apply size-[14px];}.xxl .avatar-dot{@apply size-4;}.active{@apply bg-[#22973F];}.inactive{@apply bg-gray-300;}.notification{@apply bg-[#2E90FA];}.none{@apply hidden;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesOnChanges: true, ngImport: i0, template: "<div\r\n  [ngClass]=\"containerClasses\"\r\n  [bkTooltip]=\"name\"\r\n  [bkTooltipPosition]=\"'top'\"\r\n>\r\n\r\n  @if (showImage) {\r\n    <img\r\n      [src]=\"src\"\r\n      [alt]=\"alt\"\r\n      class=\"avatar-img\"\r\n      (error)=\"onImageError()\"\r\n    />\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\r\n      class=\"placeholder-icon\"\r\n      viewBox=\"0 0 32 32\"\r\n      fill=\"none\"\r\n      aria-hidden=\"true\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        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\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @if (dot !== 'none') {\r\n    <span [ngClass]=\"dotClasses\"></span>\r\n  }\r\n\r\n</div>\r\n", styles: [".avatar{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none transition-all duration-200;}.avatar-img{@apply w-full h-full object-cover rounded-full;}.avatar-text{@apply font-medium;}.avatar.xsm{@apply size-6 text-[10px] leading-[14px];}.avatar.sm{@apply size-8 text-sm;}.avatar.md{@apply size-10 text-base;}.avatar.lg{@apply size-12 text-[18px] leading-[26px];}.avatar.xl{@apply size-14 text-xl;}.avatar.xxl{@apply size-16 text-xl;}.avatar.xsm .placeholder-icon{@apply size-4;}.avatar.sm .placeholder-icon{@apply size-5;}.avatar.md .placeholder-icon{@apply size-6;}.avatar.lg .placeholder-icon{@apply size-7;}.avatar.xl .placeholder-icon,.avatar.xxl .placeholder-icon{@apply size-8;}.avatar-dot{@apply absolute rounded-full block box-content border-[1.5px] border-white;}.avatar.xsm .avatar-dot{@apply size-1;}.avatar.sm .avatar-dot{@apply size-1.5;}.avatar.md .avatar-dot{@apply size-2.5;}.avatar.lg .avatar-dot{@apply size-3;}.avatar.xl .avatar-dot{@apply size-[14px];}.avatar.xxl .avatar-dot{@apply size-4;}.avatar .active{@apply bg-[#22973F];}.avatar .inactive{@apply bg-gray-300;}.avatar .notification{@apply bg-[#2E90FA];}.avatar .none{@apply hidden;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkUiAvatar, decorators: [{
             type: Component,
@@ -6633,7 +6633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkUiAvatar),
                             multi: true
                         }
-                    ], template: "<div\r\n  [ngClass]=\"containerClasses\"\r\n  [bkTooltip]=\"name\"\r\n  [bkTooltipPosition]=\"'top'\"\r\n>\r\n\r\n  @if (showImage) {\r\n    <img\r\n      [src]=\"src\"\r\n      [alt]=\"alt\"\r\n      class=\"avatar-img\"\r\n      (error)=\"onImageError()\"\r\n    />\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\r\n      class=\"placeholder-icon\"\r\n      viewBox=\"0 0 32 32\"\r\n      fill=\"none\"\r\n      aria-hidden=\"true\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        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\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @if (dot !== 'none') {\r\n    <span [ngClass]=\"dotClasses\"></span>\r\n  }\r\n\r\n</div>\r\n", styles: [".avatar{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none transition-all duration-200;}.avatar-img{@apply w-full h-full object-cover rounded-full;}.avatar-text{@apply font-medium;}.xsm{@apply size-6 text-[10px] leading-[14px];}.sm{@apply size-8 text-sm;}.md{@apply size-10 text-base;}.lg{@apply size-12 text-[18px] leading-[26px];}.xl{@apply size-14 text-xl;}.xxl{@apply size-16 text-xl;}.xsm .placeholder-icon{@apply size-4;}.sm .placeholder-icon{@apply size-5;}.md .placeholder-icon{@apply size-6;}.lg .placeholder-icon{@apply size-7;}.xl .placeholder-icon,.xxl .placeholder-icon{@apply size-8;}.avatar-dot{@apply absolute rounded-full block box-content border-[1.5px] border-white;}.xsm .avatar-dot{@apply size-1;}.sm .avatar-dot{@apply size-1.5;}.md .avatar-dot{@apply size-2.5;}.lg .avatar-dot{@apply size-3;}.xl .avatar-dot{@apply size-[14px];}.xxl .avatar-dot{@apply size-4;}.active{@apply bg-[#22973F];}.inactive{@apply bg-gray-300;}.notification{@apply bg-[#2E90FA];}.none{@apply hidden;}\n"] }]
+                    ], template: "<div\r\n  [ngClass]=\"containerClasses\"\r\n  [bkTooltip]=\"name\"\r\n  [bkTooltipPosition]=\"'top'\"\r\n>\r\n\r\n  @if (showImage) {\r\n    <img\r\n      [src]=\"src\"\r\n      [alt]=\"alt\"\r\n      class=\"avatar-img\"\r\n      (error)=\"onImageError()\"\r\n    />\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\r\n      class=\"placeholder-icon\"\r\n      viewBox=\"0 0 32 32\"\r\n      fill=\"none\"\r\n      aria-hidden=\"true\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        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\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n    </svg>\r\n  }\r\n\r\n  @if (dot !== 'none') {\r\n    <span [ngClass]=\"dotClasses\"></span>\r\n  }\r\n\r\n</div>\r\n", styles: [".avatar{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none transition-all duration-200;}.avatar-img{@apply w-full h-full object-cover rounded-full;}.avatar-text{@apply font-medium;}.avatar.xsm{@apply size-6 text-[10px] leading-[14px];}.avatar.sm{@apply size-8 text-sm;}.avatar.md{@apply size-10 text-base;}.avatar.lg{@apply size-12 text-[18px] leading-[26px];}.avatar.xl{@apply size-14 text-xl;}.avatar.xxl{@apply size-16 text-xl;}.avatar.xsm .placeholder-icon{@apply size-4;}.avatar.sm .placeholder-icon{@apply size-5;}.avatar.md .placeholder-icon{@apply size-6;}.avatar.lg .placeholder-icon{@apply size-7;}.avatar.xl .placeholder-icon,.avatar.xxl .placeholder-icon{@apply size-8;}.avatar-dot{@apply absolute rounded-full block box-content border-[1.5px] border-white;}.avatar.xsm .avatar-dot{@apply size-1;}.avatar.sm .avatar-dot{@apply size-1.5;}.avatar.md .avatar-dot{@apply size-2.5;}.avatar.lg .avatar-dot{@apply size-3;}.avatar.xl .avatar-dot{@apply size-[14px];}.avatar.xxl .avatar-dot{@apply size-4;}.avatar .active{@apply bg-[#22973F];}.avatar .inactive{@apply bg-gray-300;}.avatar .notification{@apply bg-[#2E90FA];}.avatar .none{@apply hidden;}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { src: [{
                 type: Input
             }], alt: [{
@@ -6669,6 +6669,158 @@ const DOT_POSITION_MAP = {
     'top-left': 'top-0.5 -left-0.5'
 };
 
+class ColumnFilterOption {
+    columnName;
+    selected = true;
+    constructor(columnName, selected = false) {
+        if (columnName) {
+            this.columnName = columnName;
+        }
+        this.selected = selected;
+    }
+}
+
+class BkColumnFilterService {
+    constructor() { }
+    intializeColumnsFilter(key, fields) {
+        var columnsList = fields.map((f) => new ColumnFilterOption(f, true));
+        localStorage.setItem(key, JSON.stringify(columnsList));
+    }
+    getColumnsFilterList(key, fields) {
+        let stored = localStorage.getItem(key);
+        if (!fields || fields.length === 0) {
+            return [];
+        }
+        if (!stored) {
+            this.intializeColumnsFilter(key, fields);
+            stored = localStorage.getItem(key);
+        }
+        let storedColumns = stored ? JSON.parse(stored) : [];
+        // Sync stored columns with current fields
+        storedColumns = this.syncColumnsWithFields(storedColumns, fields);
+        // Update localStorage with synced data
+        localStorage.setItem(key, JSON.stringify(storedColumns));
+        return storedColumns;
+        // return stored ? (JSON.parse(stored) as ColumnFilterOption[]) : [];
+    }
+    syncColumnsWithFields(storedColumns, currentFields) {
+        // Map of existing columns for quick lookup
+        const existingColumnsMap = new Map();
+        storedColumns.forEach(col => existingColumnsMap.set(col.columnName, col));
+        // New list based on current fields
+        const syncedColumns = [];
+        currentFields.forEach(field => {
+            if (existingColumnsMap.has(field)) {
+                // Keep existing column with its selection state
+                syncedColumns.push(existingColumnsMap.get(field));
+            }
+            else {
+                // Add new column as selected by default
+                syncedColumns.push(new ColumnFilterOption(field, true));
+            }
+        });
+        return syncedColumns;
+    }
+    updateColumnFilterList(key, list) {
+        localStorage.removeItem(key);
+        localStorage.setItem(key, JSON.stringify(list));
+    }
+    showColumn(field, columnsFilterList) {
+        return columnsFilterList.find((i) => i.columnName === field)?.selected || false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnFilterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnFilterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class BkColumnSelect {
+    columnFilterService;
+    searchable = false;
+    cacheKey;
+    columns;
+    isOpened = false;
+    formBoxRef;
+    change = new EventEmitter();
+    isOpenedChange = new EventEmitter();
+    columnsFilterList = [];
+    search = '';
+    constructor(columnFilterService) {
+        this.columnFilterService = columnFilterService;
+    }
+    ngOnInit() {
+        this.getColumnsFilterList();
+    }
+    ngOnChanges(changes) {
+        if (changes['columns'] && !changes['columns'].firstChange) {
+            this.getColumnsFilterList();
+        }
+    }
+    getColumnsFilterList() {
+        this.columnsFilterList = this.columnFilterService.getColumnsFilterList(this.cacheKey, this.columns);
+        this.change.emit(this.columnsFilterList);
+    }
+    filterButtonClicked(event) {
+        event.stopPropagation();
+        this.isOpenedChange.emit(!this.isOpened);
+    }
+    onChangeColumnFilter(evt) {
+        this.columnFilterService.updateColumnFilterList(this.cacheKey, this.columnsFilterList);
+        this.change.emit(this.columnsFilterList);
+    }
+    onClick(event) {
+        // Check if the click target is inside the form_box
+        if ((this.isOpened) &&
+            this.formBoxRef.nativeElement.contains(event.target)) {
+            return; // Do nothing if click occurred inside the form_box
+        }
+        // Check if the click target is .ng-value-icon
+        if (event.target instanceof HTMLElement &&
+            event.target.classList.contains('ng-value-icon')) {
+            // Do nothing if click is on .ng-value-icon
+            return;
+        }
+        // Check if the click target is the button
+        if (!(event.target instanceof HTMLElement) ||
+            !event.target.closest('.btn-light-primary-custom')) {
+            // Close the popup if the click is not on the button
+            this.isOpened = false;
+            this.isOpenedChange.emit(this.isOpened);
+        }
+    }
+    get list() {
+        return this.columnsFilterList.filter((x) => x.columnName.toLowerCase().includes(this.search.toLowerCase()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, deps: [{ token: BkColumnFilterService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkColumnSelect, isStandalone: true, selector: "bk-column-select", inputs: { searchable: "searchable", cacheKey: "cacheKey", columns: "columns", isOpened: "isOpened" }, outputs: { change: "change", isOpenedChange: "isOpenedChange" }, host: { listeners: { "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n  <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"'images/icons/tickets/columns-black.svg'\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"'Columns'\" [buttonClass]=\"'!text-black'\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n    @if(searchable){\r\n      <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n        [iconSrc]=\"'../../assets/images/icons/global/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n    }\r\n    <div class=\"flex flex-col gap-0.5 max-h-[360px] overflow-y-auto\">\r\n      @for (column of list; track $index;let i=$index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox id=\"columnsFilterList-{{i}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n          (change)=\"onChangeColumnFilter($event)\">\r\n\r\n        </bk-checkbox>\r\n\r\n\r\n\r\n        <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{i}}\">\r\n          {{column.columnName}}\r\n        </label>\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"text-sm font-medium text-gray-500 mt-3 text-center\">No Records Found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkButton, selector: "bk-button", inputs: ["variant", "size", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkInput, selector: "bk-input", inputs: ["id", "name", "mask", "autoComplete", "label", "placeholder", "hint", "required", "type", "value", "hasError", "showErrorIcon", "errorMessage", "disabled", "tabIndex", "readOnly", "autoCapitalize", "inputMode", "iconSrc", "iconAlt", "showIcon", "phone", "countryCode", "countryOptions", "iconOrientation", "password", "showPassword", "pattern", "max", "min", "step", "maxlength", "minlength"], outputs: ["input", "change", "focus", "blur", "clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-column-select', imports: [FormsModule, BkButton, BkCheckbox, BkInput], standalone: true, template: "<div class=\"relative\">\r\n\r\n  <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"'images/icons/tickets/columns-black.svg'\"\r\n    (click)=\"filterButtonClicked($event)\" [label]=\"'Columns'\" [buttonClass]=\"'!text-black'\"></bk-button>\r\n\r\n  <!-- Dropdown Box -->\r\n  @if(isOpened){\r\n\r\n  <div #formBox\r\n    class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n    @if(searchable){\r\n      <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n        [iconSrc]=\"'../../assets/images/icons/global/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n        placeholder=\"Search\"></bk-input>\r\n    }\r\n    <div class=\"flex flex-col gap-0.5 max-h-[360px] overflow-y-auto\">\r\n      @for (column of list; track $index;let i=$index) {\r\n      <div class=\"flex items-center gap-2 px-3 py-2\">\r\n        <bk-checkbox id=\"columnsFilterList-{{i}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n          (change)=\"onChangeColumnFilter($event)\">\r\n\r\n        </bk-checkbox>\r\n\r\n\r\n\r\n        <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n          for=\"columnsFilterList-{{i}}\">\r\n          {{column.columnName}}\r\n        </label>\r\n      </div>\r\n      }\r\n      @if(!list.length){\r\n        <p class=\"text-sm font-medium text-gray-500 mt-3 text-center\">No Records Found</p>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: BkColumnFilterService }], propDecorators: { searchable: [{
+                type: Input
+            }], cacheKey: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], isOpened: [{
+                type: Input
+            }], formBoxRef: [{
+                type: ViewChild,
+                args: ['formBox']
+            }], change: [{
+                type: Output
+            }], isOpenedChange: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -6678,5 +6830,5 @@ const DOT_POSITION_MAP = {
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatarProfile, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkUiAvatar, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, getDialogBackdropAnimation, getDialogPanelAnimation };
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatarProfile, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkUiAvatar, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map