@memberjunction/ng-trees 6.1.4 → 6.2.0-edge.1

package/dist/lib/tree-dropdown/tree-dropdown.component.js

@@ -142,7 +142,7 @@ export class TreeDropdownComponent extends BaseAngularComponent {
         if (!CompositeKey.EqualsEx(val, this._value)) {
             this._value = val;
             // If tree is loaded, sync selection immediately
-            if (this.IsLoaded && this.treeComponent) {
+            if (this.IsLoaded && this.TreeComponent) {
                 this.syncValueToSelection();
             }
             else {
@@ -200,10 +200,42 @@ export class TreeDropdownComponent extends BaseAngularComponent {
     // ========================================
     // ViewChild References
     // ========================================
-    triggerElement;
-    searchInput;
-    dropdownPanel;
-    treeComponent;
+    TriggerElement;
+    /** @deprecated Use {@link TriggerElement}. */
+    get triggerElement() {
+        return this.TriggerElement;
+    }
+    /** @deprecated Use {@link TriggerElement}. */
+    set triggerElement(value) {
+        this.TriggerElement = value;
+    }
+    SearchInput;
+    /** @deprecated Use {@link SearchInput}. */
+    get searchInput() {
+        return this.SearchInput;
+    }
+    /** @deprecated Use {@link SearchInput}. */
+    set searchInput(value) {
+        this.SearchInput = value;
+    }
+    DropdownPanel;
+    /** @deprecated Use {@link DropdownPanel}. */
+    get dropdownPanel() {
+        return this.DropdownPanel;
+    }
+    /** @deprecated Use {@link DropdownPanel}. */
+    set dropdownPanel(value) {
+        this.DropdownPanel = value;
+    }
+    TreeComponent;
+    /** @deprecated Use {@link TreeComponent}. */
+    get treeComponent() {
+        return this.TreeComponent;
+    }
+    /** @deprecated Use {@link TreeComponent}. */
+    set treeComponent(value) {
+        this.TreeComponent = value;
+    }
     // ========================================
     // State
     // ========================================
@@ -361,8 +393,8 @@ export class TreeDropdownComponent extends BaseAngularComponent {
         this.SelectedNodes = [];
         this._value = null;
         this._pendingDisplayText = null;
-        if (this.treeComponent) {
-            this.treeComponent.ClearSelection();
+        if (this.TreeComponent) {
+            this.TreeComponent.ClearSelection();
         }
         this.ValueChange.emit(this._value);
         this.SelectionChange.emit(null);
@@ -372,8 +404,8 @@ export class TreeDropdownComponent extends BaseAngularComponent {
      * Refresh tree data
      */
     async Refresh() {
-        if (this.treeComponent) {
-            await this.treeComponent.Refresh();
+        if (this.TreeComponent) {
+            await this.TreeComponent.Refresh();
         }
     }
     // ========================================
@@ -382,15 +414,19 @@ export class TreeDropdownComponent extends BaseAngularComponent {
     /**
      * Handle trigger click
      */
-    onTriggerClick() {
+    OnTriggerClick() {
         if (!this.Disabled) {
             this.Toggle();
         }
     }
+    /** @deprecated Use {@link OnTriggerClick}. */
+    onTriggerClick() {
+        return this.OnTriggerClick();
+    }
     /**
      * Handle trigger keydown
      */
-    onTriggerKeyDown(event) {
+    OnTriggerKeyDown(event) {
         if (this.Disabled) {
             return;
         }
@@ -409,20 +445,28 @@ export class TreeDropdownComponent extends BaseAngularComponent {
                 break;
         }
     }
+    /** @deprecated Use {@link OnTriggerKeyDown}. */
+    onTriggerKeyDown(event) {
+        return this.OnTriggerKeyDown(event);
+    }
     /**
      * Handle search input
      */
-    onSearchInput(event) {
+    OnSearchInput(event) {
         const value = event.target.value;
         this.SearchText = value;
         this.searchSubject.next(value);
     }
+    /** @deprecated Use {@link OnSearchInput}. */
+    onSearchInput(event) {
+        return this.OnSearchInput(event);
+    }
     /**
      * Handle search keydown — provides full keyboard navigation while search input retains focus.
      * The tree's own keyboard handler doesn't fire because the search input has DOM focus,
      * so all navigation is handled here by manipulating the tree's FocusedNode visual state.
      */
-    onSearchKeyDown(event) {
+    OnSearchKeyDown(event) {
         switch (event.key) {
             case 'Escape':
                 event.preventDefault();
@@ -459,20 +503,28 @@ export class TreeDropdownComponent extends BaseAngularComponent {
                 break;
         }
     }
+    /** @deprecated Use {@link OnSearchKeyDown}. */
+    onSearchKeyDown(event) {
+        return this.OnSearchKeyDown(event);
+    }
     /**
      * Handle clear search
      */
-    onClearSearch() {
+    OnClearSearch() {
         this.SearchText = '';
         this.clearSearch();
-        if (this.searchInput) {
-            this.searchInput.nativeElement.focus();
+        if (this.SearchInput) {
+            this.SearchInput.nativeElement.focus();
         }
     }
+    /** @deprecated Use {@link OnClearSearch}. */
+    onClearSearch() {
+        return this.OnClearSearch();
+    }
     /**
      * Handle tree selection change
      */
-    onTreeSelectionChange(nodes) {
+    OnTreeSelectionChange(nodes) {
         this.SelectedNodes = nodes;
         // Clear pending display text since we now have real nodes
         this._pendingDisplayText = null;
@@ -494,6 +546,10 @@ export class TreeDropdownComponent extends BaseAngularComponent {
         }
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link OnTreeSelectionChange}. */
+    onTreeSelectionChange(nodes) {
+        return this.OnTreeSelectionChange(nodes);
+    }
     /**
      * Build the CompositeKey for a selected node. A node's `ID` is the value of its config's `IDField`
      * (leaf or branch), so the key is named after that field rather than a hardcoded `ID`. When no
@@ -519,12 +575,16 @@ export class TreeDropdownComponent extends BaseAngularComponent {
     /**
      * Handle tree data load events
      */
-    onTreeBeforeDataLoad(event) {
+    OnTreeBeforeDataLoad(event) {
         this.IsLoading = true;
         this.BeforeDataLoad.emit(event);
         this.cdr.detectChanges();
     }
-    onTreeAfterDataLoad(event) {
+    /** @deprecated Use {@link OnTreeBeforeDataLoad}. */
+    onTreeBeforeDataLoad(event) {
+        return this.OnTreeBeforeDataLoad(event);
+    }
+    OnTreeAfterDataLoad(event) {
         this.IsLoading = false;
         this.IsLoaded = true;
         // Resolve all pending WaitForDataLoad() promises
@@ -535,7 +595,7 @@ export class TreeDropdownComponent extends BaseAngularComponent {
         }
         // Sync selection after load - defer to next microtask to ensure ViewChild is resolved
         Promise.resolve().then(() => {
-            if (this.treeComponent) {
+            if (this.TreeComponent) {
             }
             this.syncValueToSelection();
             this.cdr.detectChanges();
@@ -543,15 +603,27 @@ export class TreeDropdownComponent extends BaseAngularComponent {
         this.AfterDataLoad.emit(event);
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link OnTreeAfterDataLoad}. */
+    onTreeAfterDataLoad(event) {
+        return this.OnTreeAfterDataLoad(event);
+    }
     /**
      * Bubble tree events
      */
-    onTreeBeforeNodeSelect(event) {
+    OnTreeBeforeNodeSelect(event) {
         this.BeforeNodeSelect.emit(event);
     }
-    onTreeAfterNodeSelect(event) {
+    /** @deprecated Use {@link OnTreeBeforeNodeSelect}. */
+    onTreeBeforeNodeSelect(event) {
+        return this.OnTreeBeforeNodeSelect(event);
+    }
+    OnTreeAfterNodeSelect(event) {
         this.AfterNodeSelect.emit(event);
     }
+    /** @deprecated Use {@link OnTreeAfterNodeSelect}. */
+    onTreeAfterNodeSelect(event) {
+        return this.OnTreeAfterNodeSelect(event);
+    }
     // ========================================
     // Keyboard Navigation Helpers
     // ========================================
@@ -567,12 +639,12 @@ export class TreeDropdownComponent extends BaseAngularComponent {
             return;
         const tryFocus = (retriesLeft) => {
             // Try ViewChild first
-            if (this.searchInput?.nativeElement) {
-                this.searchInput.nativeElement.focus();
+            if (this.SearchInput?.nativeElement) {
+                this.SearchInput.nativeElement.focus();
                 return;
             }
             // Fallback: query DOM directly (ViewChild may not resolve for @if blocks)
-            const panel = this.dropdownPanel?.nativeElement;
+            const panel = this.DropdownPanel?.nativeElement;
             if (panel) {
                 const input = panel.querySelector('.tree-dropdown-search__input');
                 if (input) {
@@ -593,13 +665,13 @@ export class TreeDropdownComponent extends BaseAngularComponent {
      * Navigate tree focus up/down/first/last while search input retains DOM focus
      */
     navigateTree(direction) {
-        if (!this.treeComponent?.Nodes?.length)
+        if (!this.TreeComponent?.Nodes?.length)
             return;
-        const visibleNodes = this.getVisibleNodesInOrder(this.treeComponent.Nodes);
+        const visibleNodes = this.getVisibleNodesInOrder(this.TreeComponent.Nodes);
         if (visibleNodes.length === 0)
             return;
-        const currentIndex = this.treeComponent.FocusedNode
-            ? visibleNodes.indexOf(this.treeComponent.FocusedNode)
+        const currentIndex = this.TreeComponent.FocusedNode
+            ? visibleNodes.indexOf(this.TreeComponent.FocusedNode)
             : -1;
         let targetNode = null;
         switch (direction) {
@@ -625,7 +697,7 @@ export class TreeDropdownComponent extends BaseAngularComponent {
                 break;
         }
         if (targetNode) {
-            this.treeComponent.FocusedNode = targetNode;
+            this.TreeComponent.FocusedNode = targetNode;
             this.cdr.detectChanges();
             this.scrollFocusedNodeIntoView();
         }
@@ -634,7 +706,7 @@ export class TreeDropdownComponent extends BaseAngularComponent {
      * Select the currently focused tree node (Enter key)
      */
     selectFocusedNode() {
-        const focusedNode = this.treeComponent?.FocusedNode;
+        const focusedNode = this.TreeComponent?.FocusedNode;
         if (!focusedNode)
             return;
         // Check if the node type is selectable per config
@@ -642,7 +714,7 @@ export class TreeDropdownComponent extends BaseAngularComponent {
             || (this.SelectableTypes === 'leaf' && focusedNode.Type === 'leaf')
             || (this.SelectableTypes === 'branch' && focusedNode.Type === 'branch');
         if (isSelectable) {
-            this.treeComponent.SelectNodes([focusedNode.ID], true);
+            this.TreeComponent.SelectNodes([focusedNode.ID], true);
         }
         else if (focusedNode.Type === 'branch') {
             // Non-selectable branch: toggle expand/collapse
@@ -653,18 +725,18 @@ export class TreeDropdownComponent extends BaseAngularComponent {
      * ArrowRight: expand focused branch or descend to first child
      */
     expandOrDescendFocusedNode() {
-        const node = this.treeComponent?.FocusedNode;
+        const node = this.TreeComponent?.FocusedNode;
         if (!node || node.Type !== 'branch')
             return;
         if (!node.Expanded && node.Children?.length) {
-            this.treeComponent.ExpandToNode(node.Children[0].ID);
+            this.TreeComponent.ExpandToNode(node.Children[0].ID);
             this.cdr.detectChanges();
         }
         else if (node.Expanded && node.Children?.length) {
             // Already expanded: move focus to first visible child
             const firstVisible = node.Children.find(c => c.Visible);
             if (firstVisible) {
-                this.treeComponent.FocusedNode = firstVisible;
+                this.TreeComponent.FocusedNode = firstVisible;
                 this.cdr.detectChanges();
                 this.scrollFocusedNodeIntoView();
             }
@@ -674,7 +746,7 @@ export class TreeDropdownComponent extends BaseAngularComponent {
      * ArrowLeft: collapse focused branch or ascend to parent
      */
     collapseOrAscendFocusedNode() {
-        const node = this.treeComponent?.FocusedNode;
+        const node = this.TreeComponent?.FocusedNode;
         if (!node)
             return;
         if (node.Type === 'branch' && node.Expanded) {
@@ -683,10 +755,10 @@ export class TreeDropdownComponent extends BaseAngularComponent {
         }
         else if (node.ParentID) {
             // Move to parent
-            const allNodes = this.getVisibleNodesInOrder(this.treeComponent.Nodes);
+            const allNodes = this.getVisibleNodesInOrder(this.TreeComponent.Nodes);
             const parent = allNodes.find(n => UUIDsEqual(n.ID, node.ParentID));
             if (parent) {
-                this.treeComponent.FocusedNode = parent;
+                this.TreeComponent.FocusedNode = parent;
                 this.cdr.detectChanges();
                 this.scrollFocusedNodeIntoView();
             }
@@ -700,7 +772,7 @@ export class TreeDropdownComponent extends BaseAngularComponent {
             node.Expanded = false;
         }
         else {
-            this.treeComponent.ExpandToNode(node.ID);
+            this.TreeComponent.ExpandToNode(node.ID);
         }
         this.cdr.detectChanges();
     }
@@ -709,7 +781,7 @@ export class TreeDropdownComponent extends BaseAngularComponent {
      */
     scrollFocusedNodeIntoView() {
         requestAnimationFrame(() => {
-            const panel = this.dropdownPanel?.nativeElement;
+            const panel = this.DropdownPanel?.nativeElement;
             if (!panel)
                 return;
             const focused = panel.querySelector('.tree-node-focused, .tree-node--focused, [data-focused="true"]');
@@ -745,10 +817,10 @@ export class TreeDropdownComponent extends BaseAngularComponent {
      * Calculate dropdown position
      */
     calculatePosition() {
-        if (!this.triggerElement) {
+        if (!this.TriggerElement) {
             return;
         }
-        const triggerRect = this.triggerElement.nativeElement.getBoundingClientRect();
+        const triggerRect = this.TriggerElement.nativeElement.getBoundingClientRect();
         const viewportHeight = window.innerHeight;
         const viewportWidth = window.innerWidth;
         // Parse max height from config
@@ -832,9 +904,9 @@ export class TreeDropdownComponent extends BaseAngularComponent {
                     if (!this.IsOpen) {
                         return;
                     }
-                    const isInsideTrigger = this.triggerElement?.nativeElement?.contains(target);
+                    const isInsideTrigger = this.TriggerElement?.nativeElement?.contains(target);
                     // Check if click is inside the dropdown panel (rendered inline, not in portal)
-                    const isInsideDropdown = this.dropdownPanel?.nativeElement?.contains(target);
+                    const isInsideDropdown = this.DropdownPanel?.nativeElement?.contains(target);
                     if (!isInsideTrigger && !isInsideDropdown) {
                         this.Close('outsideClick');
                     }
@@ -913,10 +985,10 @@ export class TreeDropdownComponent extends BaseAngularComponent {
         }
         const searchText = beforeEvent.ModifiedSearchText ?? text;
         // Guard: tree component may not be ready or may have no nodes loaded
-        if (!this.treeComponent || !this.IsLoaded) {
+        if (!this.TreeComponent || !this.IsLoaded) {
             return;
         }
-        const matchedNodes = this.treeComponent.FilterNodes(searchText, {
+        const matchedNodes = this.TreeComponent.FilterNodes(searchText, {
             caseSensitive: this.SearchConfig.CaseSensitive,
             searchBranches: this.SearchConfig.SearchBranches ?? true,
             searchLeaves: this.SearchConfig.SearchLeaves ?? true,
@@ -925,7 +997,7 @@ export class TreeDropdownComponent extends BaseAngularComponent {
         // Auto-expand to show matches — guard against empty results
         if (matchedNodes.length > 0 && this.SearchConfig.AutoExpandMatches !== false && searchText.trim()) {
             for (const node of matchedNodes) {
-                this.treeComponent.ExpandToNode(node.ID);
+                this.TreeComponent.ExpandToNode(node.ID);
             }
         }
         // Fire after event
@@ -937,8 +1009,8 @@ export class TreeDropdownComponent extends BaseAngularComponent {
      * Clear search filter
      */
     clearSearch() {
-        if (this.treeComponent?.Nodes?.length) {
-            this.treeComponent.FilterNodes('', {});
+        if (this.TreeComponent?.Nodes?.length) {
+            this.TreeComponent.FilterNodes('', {});
             this.cdr.detectChanges();
         }
     }
@@ -968,17 +1040,17 @@ export class TreeDropdownComponent extends BaseAngularComponent {
      * Sync value to tree selection
      */
     syncValueToSelection() {
-        if (!this.treeComponent || !this.IsLoaded) {
+        if (!this.TreeComponent || !this.IsLoaded) {
             return;
         }
         // Convert CompositeKey(s) to string IDs for tree selection
-        const ids = this.getSelectedIDsArray();
+        const ids = this.GetSelectedIDsArray();
         // Pass emitChange=false to avoid emitting SelectionChange during sync
         // This prevents unnecessary events and parent component confusion
-        this.treeComponent.SelectNodes(ids, false);
+        this.TreeComponent.SelectNodes(ids, false);
         // Use try-catch as defensive measure since tree component may not be fully ready
         try {
-            this.SelectedNodes = this.treeComponent.GetSelectedNodes() || [];
+            this.SelectedNodes = this.TreeComponent.GetSelectedNodes() || [];
         }
         catch {
             this.SelectedNodes = [];
@@ -1030,7 +1102,7 @@ export class TreeDropdownComponent extends BaseAngularComponent {
     /**
      * Get display text for selected value(s)
      */
-    getDisplayText() {
+    GetDisplayText() {
         // If we have selected nodes from the tree, use those
         if (this.SelectedNodes.length > 0) {
             if (this.SelectionMode === 'single') {
@@ -1048,34 +1120,50 @@ export class TreeDropdownComponent extends BaseAngularComponent {
         }
         return '';
     }
+    /** @deprecated Use {@link GetDisplayText}. */
+    getDisplayText() {
+        return this.GetDisplayText();
+    }
     /**
      * Get display icon for single selection
      */
-    getDisplayIcon() {
+    GetDisplayIcon() {
         if (!this.ShowIconInDisplay || this.SelectedNodes.length !== 1) {
             return null;
         }
         return this.SelectedNodes[0].Icon;
     }
+    /** @deprecated Use {@link GetDisplayIcon}. */
+    getDisplayIcon() {
+        return this.GetDisplayIcon();
+    }
     /**
      * Get display color for single selection
      */
-    getDisplayColor() {
+    GetDisplayColor() {
         if (this.SelectedNodes.length !== 1) {
             return null;
         }
         return this.SelectedNodes[0].Color || null;
     }
+    /** @deprecated Use {@link GetDisplayColor}. */
+    getDisplayColor() {
+        return this.GetDisplayColor();
+    }
     /**
      * Check if has selection
      */
-    hasSelection() {
+    HasSelection() {
         return this.SelectedNodes.length > 0 || this._pendingDisplayText != null;
     }
+    /** @deprecated Use {@link HasSelection}. */
+    hasSelection() {
+        return this.HasSelection();
+    }
     /**
      * Get dropdown panel styles
      */
-    getDropdownStyles() {
+    GetDropdownStyles() {
         if (!this.Position) {
             return {};
         }
@@ -1086,23 +1174,31 @@ export class TreeDropdownComponent extends BaseAngularComponent {
             maxHeight: `${this.Position.maxHeight}px`
         };
     }
+    /** @deprecated Use {@link GetDropdownStyles}. */
+    getDropdownStyles() {
+        return this.GetDropdownStyles();
+    }
     /**
      * Get trigger classes
      */
-    getTriggerClasses() {
+    GetTriggerClasses() {
         return {
             'tree-dropdown-trigger': true,
             'tree-dropdown-trigger--open': this.IsOpen,
             'tree-dropdown-trigger--disabled': this.Disabled,
-            'tree-dropdown-trigger--has-value': this.hasSelection(),
+            'tree-dropdown-trigger--has-value': this.HasSelection(),
             'tree-dropdown-trigger--loading': this.IsLoading && this.ShowLoadingInTrigger
         };
     }
+    /** @deprecated Use {@link GetTriggerClasses}. */
+    getTriggerClasses() {
+        return this.GetTriggerClasses();
+    }
     /**
      * Get selected IDs as a string array for passing to tree component.
      * Extracts the first key value from each CompositeKey (typically the ID field).
      */
-    getSelectedIDsArray() {
+    GetSelectedIDsArray() {
         if (!this._value) {
             return [];
         }
@@ -1113,15 +1209,19 @@ export class TreeDropdownComponent extends BaseAngularComponent {
             return firstValue != null ? String(firstValue) : '';
         }).filter(id => id !== '');
     }
+    /** @deprecated Use {@link GetSelectedIDsArray}. */
+    getSelectedIDsArray() {
+        return this.GetSelectedIDsArray();
+    }
     static ɵfac = function TreeDropdownComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeDropdownComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeDropdownComponent, selectors: [["mj-tree-dropdown"]], viewQuery: function TreeDropdownComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5)(_c1, 5)(_c2, 5)(_c3, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggerElement = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownPanel = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.treeComponent = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.TriggerElement = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.SearchInput = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.DropdownPanel = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.TreeComponent = _t.first);
         } }, inputs: { BranchConfig: "BranchConfig", LeafConfig: "LeafConfig", SelectionMode: "SelectionMode", SelectableTypes: "SelectableTypes", DefaultExpansion: "DefaultExpansion", Value: "Value", Placeholder: "Placeholder", EnableSearch: "EnableSearch", SearchConfig: "SearchConfig", DropdownConfig: "DropdownConfig", StyleConfig: "StyleConfig", Clearable: "Clearable", Disabled: "Disabled", ShowIconInDisplay: "ShowIconInDisplay", AutoLoad: "AutoLoad", ShowLoadingInTrigger: "ShowLoadingInTrigger" }, outputs: { ValueChange: "ValueChange", SelectionChange: "SelectionChange", BeforeNodeSelect: "BeforeNodeSelect", AfterNodeSelect: "AfterNodeSelect", BeforeSearch: "BeforeSearch", AfterSearch: "AfterSearch", BeforeDropdownOpen: "BeforeDropdownOpen", AfterDropdownOpen: "AfterDropdownOpen", BeforeDropdownClose: "BeforeDropdownClose", AfterDropdownClose: "AfterDropdownClose", BeforeDataLoad: "BeforeDataLoad", AfterDataLoad: "AfterDataLoad" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 16, consts: [["triggerElement", ""], ["dropdownPanel", ""], ["treeComponent", ""], ["searchInput", ""], [1, "tree-dropdown"], ["tabindex", "0", "role", "combobox", 3, "click", "keydown", "ngClass"], [1, "tree-dropdown-trigger__content"], [1, "tree-dropdown-trigger__icon", 3, "color"], [1, "tree-dropdown-trigger__text"], [1, "tree-dropdown-trigger__loading"], [1, "tree-dropdown-trigger__actions"], ["type", "button", "title", "Clear selection", "tabindex", "-1", 1, "tree-dropdown-trigger__clear"], [1, "tree-dropdown-trigger__chevron"], [1, "fa-solid", 3, "ngClass"], ["role", "tree", 1, "tree-dropdown-panel", 3, "tree-dropdown-panel--open", "tree-dropdown-panel--above", "tree-dropdown-panel--below", "class", "ngStyle"], [1, "tree-dropdown-trigger__icon"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["type", "button", "title", "Clear selection", "tabindex", "-1", 1, "tree-dropdown-trigger__clear", 3, "click"], [1, "fa-solid", "fa-times"], ["role", "tree", 1, "tree-dropdown-panel", 3, "ngStyle"], [1, "tree-dropdown-search"], [1, "tree-dropdown-tree"], [3, "SelectionChange", "BeforeNodeSelect", "AfterNodeSelect", "BeforeDataLoad", "AfterDataLoad", "BranchConfig", "LeafConfig", "SelectionMode", "SelectableTypes", "DefaultExpansion", "SelectedIDs", "AutoLoad", "ShowIcons", "ShowExpandCollapseAll", "AnimateExpandCollapse", "EmptyMessage", "EmptyIcon"], [1, "tree-dropdown-search__input-wrapper"], [1, "fa-solid", "fa-search", "tree-dropdown-search__icon"], ["type", "text", "autocomplete", "off", "spellcheck", "false", 1, "tree-dropdown-search__input", 3, "input", "keydown", "placeholder", "value"], ["type", "button", "tabindex", "-1", 1, "tree-dropdown-search__clear"], ["type", "button", "tabindex", "-1", 1, "tree-dropdown-search__clear", 3, "click"]], template: function TreeDropdownComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 4)(1, "div", 5, 0);
             i0.ɵɵlistener("click", function TreeDropdownComponent_Template_div_click_1_listener() { return ctx.onTriggerClick(); })("keydown", function TreeDropdownComponent_Template_div_keydown_1_listener($event) { return ctx.onTriggerKeyDown($event); });
@@ -1220,16 +1320,16 @@ export class TreeDropdownComponent extends BaseAngularComponent {
             type: Output
         }], AfterDataLoad: [{
             type: Output
-        }], triggerElement: [{
+        }], TriggerElement: [{
             type: ViewChild,
             args: ['triggerElement']
-        }], searchInput: [{
+        }], SearchInput: [{
             type: ViewChild,
             args: ['searchInput']
-        }], dropdownPanel: [{
+        }], DropdownPanel: [{
             type: ViewChild,
             args: ['dropdownPanel']
-        }], treeComponent: [{
+        }], TreeComponent: [{
             type: ViewChild,
             args: ['treeComponent']
         }] }); })();