@brickclay-org/ui 0.0.51 → 0.0.53

package/fesm2022/brickclay-org-ui.mjs

@@ -3030,37 +3030,37 @@ class BKTooltipDirective {
             return;
         const hostRect = this.el.nativeElement.getBoundingClientRect();
         const tooltipRect = this.tooltipElement.getBoundingClientRect();
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
         const triangle = this.tooltipElement.querySelector('.bk-tooltip-triangle');
         const padding = 10;
         let top = 0, left = 0;
-        // Position logic
+        // Position logic — using viewport-relative coords (getBoundingClientRect)
+        // since the tooltip uses position: fixed (no scroll offset needed)
         switch (this.tooltipPosition) {
             case 'right':
             case 'left':
-                top = hostRect.top + scrollTop + hostRect.height / 2;
-                left = this.tooltipPosition === 'right'
-                    ? hostRect.right + scrollLeft + padding
-                    : hostRect.left + scrollLeft - tooltipRect.width - padding;
+                top = hostRect.top + hostRect.height / 2;
+                left =
+                    this.tooltipPosition === 'right'
+                        ? hostRect.right + padding
+                        : hostRect.left - tooltipRect.width - padding;
                 // Auto flip if out of viewport
                 if (this.tooltipPosition === 'right' && left + tooltipRect.width > window.innerWidth) {
-                    left = hostRect.left + scrollLeft - tooltipRect.width - padding;
+                    left = hostRect.left - tooltipRect.width - padding;
                 }
                 else if (this.tooltipPosition === 'left' && left < 0) {
-                    left = hostRect.right + scrollLeft + padding;
+                    left = hostRect.right + padding;
                 }
                 this.setStyle(this.tooltipElement, {
                     transform: 'translateY(-50%)',
                 });
-                this.setTriangleStyles(triangle, this.tooltipPosition, left < hostRect.left + scrollLeft);
+                this.setTriangleStyles(triangle, this.tooltipPosition, left < hostRect.left);
                 break;
             case 'top':
             case 'bottom':
-                left = hostRect.left + scrollLeft + hostRect.width / 2 - tooltipRect.width / 2;
+                left = hostRect.left + hostRect.width / 2 - tooltipRect.width / 2;
                 top = this.tooltipPosition === 'top'
-                    ? hostRect.top + scrollTop - tooltipRect.height - padding
-                    : hostRect.bottom + scrollTop + padding;
+                    ? hostRect.top - tooltipRect.height - padding
+                    : hostRect.bottom + padding;
                 // Prevent overflow
                 left = Math.max(10, Math.min(left, window.innerWidth - tooltipRect.width - 10));
                 this.setStyle(this.tooltipElement, {
@@ -5768,6 +5768,318 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class BkHierarchicalSelect {
+    /** Tree data (root-level array). */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Key for display label (e.g. 'noteType'). */
+    labelKey = input('noteType', ...(ngDevMode ? [{ debugName: "labelKey" }] : []));
+    /** Key for value (e.g. 'noteTypeKey'). */
+    valueKey = input('noteTypeKey', ...(ngDevMode ? [{ debugName: "valueKey" }] : []));
+    /** Key for children array (e.g. 'childs' or 'children'). */
+    childrenKey = input('childs', ...(ngDevMode ? [{ debugName: "childrenKey" }] : []));
+    /** Placeholder when nothing selected. */
+    placeholder = input('Select...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Label above the control. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Required indicator. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /** Optional icon URL in the trigger. */
+    iconSrc = input(undefined, ...(ngDevMode ? [{ debugName: "iconSrc" }] : []));
+    iconAlt = input('icon', ...(ngDevMode ? [{ debugName: "iconAlt" }] : []));
+    /** Disabled state (can also be set by form control via CVA). */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabledByForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledByForm" }] : []));
+    isDisabled = computed(() => this.disabled() || this.disabledByForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** Whether to allow selecting parent nodes that have children. Default: only leaf selection. */
+    allowParentSelection = input(false, ...(ngDevMode ? [{ debugName: "allowParentSelection" }] : []));
+    /** Text for "Back" link (e.g. "< Back to Main"). */
+    backToMainText = input('Back to Main', ...(ngDevMode ? [{ debugName: "backToMainText" }] : []));
+    /** Search placeholder. */
+    searchPlaceholder = input('Search', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    /** When true, dropdown is positioned fixed and sized to the trigger (use inside modals/popups). */
+    appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : []));
+    /** Key for option color (e.g. "color"). When set, option label and selected value use this color. */
+    colorKey = input('', ...(ngDevMode ? [{ debugName: "colorKey" }] : []));
+    /** Whether to show clear button when a value is selected. */
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    /** Emit full selected node. */
+    selectionChange = output();
+    /** Emit value only (e.g. noteTypeKey). */
+    valueChange = output();
+    /** Emit when clear button is clicked. */
+    clear = output();
+    searchInput;
+    controlWrapper;
+    el = inject(ElementRef);
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    dropdownStyle = signal({
+        left: '0px',
+        width: 'auto',
+    }, ...(ngDevMode ? [{ debugName: "dropdownStyle" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    /** Breadcrumb stack: each entry is the parent node we navigated into. */
+    breadcrumb = signal([], ...(ngDevMode ? [{ debugName: "breadcrumb" }] : []));
+    /** Currently selected node (leaf or parent if allowParentSelection). */
+    selected = signal(null, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    /** Current level items: root or children of last breadcrumb. */
+    currentLevelItems = computed(() => {
+        const list = this.items();
+        const stack = this.breadcrumb();
+        if (!list?.length)
+            return [];
+        let level = list;
+        for (const parent of stack) {
+            const children = this.getChildren(parent);
+            level = children ?? [];
+        }
+        return level;
+    }, ...(ngDevMode ? [{ debugName: "currentLevelItems" }] : []));
+    /** Filtered by search (matches label in current level and descendants). */
+    filteredItems = computed(() => {
+        const term = this.searchTerm().toLowerCase().trim();
+        const level = this.currentLevelItems();
+        if (!term)
+            return level;
+        return level.filter((item) => this.getLabel(item).toLowerCase().includes(term));
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    /** Display text in trigger: path "Parent > Child" or placeholder. */
+    displayPath = computed(() => {
+        const sel = this.selected();
+        if (!sel)
+            return [];
+        const path = this.buildPathTo(sel);
+        return path.length ? path : [sel];
+    }, ...(ngDevMode ? [{ debugName: "displayPath" }] : []));
+    /** Whether we're not at root (show Back). */
+    showBack = computed(() => this.breadcrumb().length > 0, ...(ngDevMode ? [{ debugName: "showBack" }] : []));
+    getLabel(node) {
+        const key = this.labelKey();
+        return (node && key && node[key]) ?? '';
+    }
+    /** Returns the color for the node (e.g. node.color) when colorKey is set. */
+    resolveColor(node) {
+        if (!node)
+            return null;
+        const key = this.colorKey();
+        return key && typeof node === 'object' ? node[key] ?? null : null;
+    }
+    getValue(node) {
+        const key = this.valueKey();
+        return key && node ? node[key] : node;
+    }
+    getChildren(node) {
+        const key = this.childrenKey();
+        const raw = node?.[key];
+        if (Array.isArray(raw) && raw.length > 0)
+            return raw;
+        const alt = node?.['children'];
+        return Array.isArray(alt) && alt.length > 0 ? alt : undefined;
+    }
+    hasChildren(node) {
+        const ch = this.getChildren(node);
+        return !!ch?.length;
+    }
+    isSelected(node) {
+        const sel = this.selected();
+        if (!sel)
+            return false;
+        return this.getValue(sel) === this.getValue(node);
+    }
+    /** Build path from root to target (finds first occurrence). */
+    buildPathTo(target) {
+        const targetVal = this.getValue(target);
+        const path = [];
+        const search = (list, parentPath) => {
+            for (const node of list) {
+                const currentPath = [...parentPath, node];
+                if (this.getValue(node) === targetVal) {
+                    path.push(...currentPath);
+                    return true;
+                }
+                const children = this.getChildren(node);
+                if (children?.length && search(children, currentPath))
+                    return true;
+            }
+            return false;
+        };
+        search(this.items(), []);
+        return path;
+    }
+    toggleDropdown(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        if (this.isDisabled())
+            return;
+        if (this.isOpen()) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    openDropdown() {
+        const sel = this.selected();
+        if (sel) {
+            const path = this.buildPathTo(sel);
+            this.breadcrumb.set(path.slice(0, -1));
+        }
+        else {
+            this.breadcrumb.set([]);
+        }
+        if (this.appendToBody() && this.controlWrapper?.nativeElement) {
+            this.updatePosition();
+        }
+        this.isOpen.set(true);
+        this.searchTerm.set('');
+        setTimeout(() => this.searchInput?.nativeElement?.focus(), 0);
+    }
+    updatePosition() {
+        const el = this.controlWrapper?.nativeElement;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        this.dropdownStyle.set({
+            top: `${rect.bottom + 4}px`,
+            bottom: undefined,
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+        });
+    }
+    getDropdownTop() {
+        if (this.appendToBody())
+            return this.dropdownStyle().top ?? null;
+        return '105%';
+    }
+    getDropdownLeft() {
+        return this.appendToBody() ? this.dropdownStyle().left : null;
+    }
+    getDropdownWidth() {
+        return this.appendToBody() ? this.dropdownStyle().width : null;
+    }
+    onWindowScrollOrResize() {
+        if (this.isOpen() && this.appendToBody())
+            this.closeDropdown();
+    }
+    closeDropdown() {
+        this.isOpen.set(false);
+        this.searchTerm.set('');
+        this.breadcrumb.set([]);
+        this.onTouched();
+    }
+    goBack() {
+        const stack = this.breadcrumb();
+        if (stack.length === 0)
+            return;
+        this.breadcrumb.set(stack.slice(0, -1));
+    }
+    onSearchInput(event) {
+        const value = event.target.value;
+        this.searchTerm.set(value);
+    }
+    selectItem(node, event) {
+        event?.stopPropagation();
+        const hasChildren = this.hasChildren(node);
+        if (hasChildren && !this.allowParentSelection()) {
+            this.breadcrumb.update((stack) => [...stack, node]);
+            return;
+        }
+        this.selected.set(node);
+        this.onChange(this.getValue(node));
+        this.selectionChange.emit(node);
+        this.valueChange.emit(this.getValue(node));
+        this.closeDropdown();
+    }
+    openFromLabel(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isDisabled())
+            return;
+        this.controlWrapper?.nativeElement?.focus();
+        this.openDropdown();
+    }
+    onClickOutside(e) {
+        if (!this.el.nativeElement.contains(e.target))
+            this.closeDropdown();
+    }
+    // --- ControlValueAccessor ---
+    _value = null;
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this._value = value;
+        if (value == null) {
+            this.selected.set(null);
+            return;
+        }
+        const node = this.findNodeByValue(this.items(), value);
+        this.selected.set(node ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledByForm.set(isDisabled);
+    }
+    findNodeByValue(list, value) {
+        for (const node of list) {
+            if (this.getValue(node) === value)
+                return node;
+            const children = this.getChildren(node);
+            if (children?.length) {
+                const found = this.findNodeByValue(children, value);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    handleClear(event) {
+        event.stopPropagation();
+        this.selected.set(null);
+        this._value = null;
+        this.onChange(null);
+        this.selectionChange.emit(null);
+        this.valueChange.emit(null);
+        this.clear.emit(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkHierarchicalSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkHierarchicalSelect, isStandalone: true, selector: "bk-hierarchical-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowParentSelection: { classPropertyName: "allowParentSelection", publicName: "allowParentSelection", isSignal: true, isRequired: false, transformFunction: null }, backToMainText: { classPropertyName: "backToMainText", publicName: "backToMainText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", clear: "clear" }, host: { listeners: { "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()", "document:click": "onClickOutside($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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    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      <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      @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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkHierarchicalSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-hierarchical-select', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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    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      <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      @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}\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 }] }], 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 }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], clear: [{ type: i0.Output, args: ["clear"] }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], controlWrapper: [{
+                type: ViewChild,
+                args: ['controlWrapper']
+            }], onWindowScrollOrResize: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -5777,5 +6089,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarProfile, BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, getDialogBackdropAnimation, getDialogPanelAnimation };
+export { AvatarProfile, BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, 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, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map