cax-design-system 1.2.4 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2022/autocomplete/autocomplete.mjs +2 -2
  2. package/esm2022/tree/tree.mjs +3 -3
  3. package/fesm2022/cax-design-system-autocomplete.mjs +2 -2
  4. package/fesm2022/cax-design-system-autocomplete.mjs.map +1 -1
  5. package/fesm2022/cax-design-system-tree.mjs +2 -2
  6. package/fesm2022/cax-design-system-tree.mjs.map +1 -1
  7. package/package.json +236 -236
  8. package/resources/components/autocomplete/autocomplete.scss +2 -5
  9. package/resources/themes/cax-theme.scss +3 -3
package/fesm2022/cax-design-system-tree.mjs CHANGED
@@ -484,13 +484,13 @@ class UITreeNode {
484
484
  }, 1);
485
485
  }
486
486
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UITreeNode, deps: [{ token: forwardRef(() => Tree) }], target: i0.ɵɵFactoryTarget.Component });
487
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: UITreeNode, selector: "cax-treeNode", inputs: { rightIcon: "rightIcon", rowNode: "rowNode", node: "node", parentNode: "parentNode", nodeActionButton: "nodeActionButton", actionButtonMode: "actionButtonMode", root: ["root", "root", booleanAttribute], index: ["index", "index", numberAttribute], firstChild: ["firstChild", "firstChild", booleanAttribute], lastChild: ["lastChild", "lastChild", booleanAttribute], level: ["level", "level", numberAttribute], indentation: ["indentation", "indentation", numberAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], loadingMode: "loadingMode" }, outputs: { onNodeActionClick: "onNodeActionClick" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-template [ngIf]=\"node\">\r\n <li\r\n *ngIf=\"tree.droppableNodes\"\r\n class=\"cax-treenode-droppoint\"\r\n [attr.aria-hidden]=\"true\"\r\n [ngClass]=\"{ 'cax-treenode-droppoint-active': draghoverPrev }\"\r\n (drop)=\"onDropPoint($event, -1)\"\r\n (dragover)=\"onDropPointDragOver($event)\"\r\n (dragenter)=\"onDropPointDragEnter($event, -1)\"\r\n (dragleave)=\"onDropPointDragLeave($event)\"\r\n ></li>\r\n <cax-skeleton *ngIf=\"node.loading\" width=\"100%\" height=\"48px\" borderRadius=\"12px\" />\r\n <li\r\n *ngIf=\"!tree.horizontal && !node.loading\"\r\n [ngClass]=\"['cax-treenode', node.styleClass || '', isLeaf() ? 'cax-treenode-leaf' : '']\"\r\n [ngStyle]=\"{ height: itemSize + 'px' }\"\r\n [style]=\"node.style\"\r\n [attr.aria-label]=\"node.label\"\r\n [attr.aria-checked]=\"ariaChecked\"\r\n [attr.aria-setsize]=\"node.children ? node.children.length : 0\"\r\n [attr.aria-selected]=\"ariaSelected\"\r\n [attr.aria-expanded]=\"node.expanded\"\r\n [attr.aria-posinset]=\"index + 1\"\r\n [attr.aria-level]=\"level + 1\"\r\n [attr.tabindex]=\"index === 0 ? 0 : -1\"\r\n [attr.data-id]=\"node.key\"\r\n role=\"treeitem\"\r\n (keydown)=\"onKeyDown($event)\"\r\n >\r\n <div\r\n class=\"cax-treenode-content\"\r\n [ngStyle]=\"{\r\n 'padding-left': level * indentation + 'rem'\r\n }\"\r\n (click)=\"onNodeClick($event)\"\r\n (contextmenu)=\"onNodeRightClick($event)\"\r\n (touchend)=\"onNodeTouchEnd()\"\r\n (drop)=\"onDropNode($event)\"\r\n (dragover)=\"onDropNodeDragOver($event)\"\r\n (dragenter)=\"onDropNodeDragEnter($event)\"\r\n (dragleave)=\"onDropNodeDragLeave($event)\"\r\n [draggable]=\"tree.draggableNodes\"\r\n (dragstart)=\"onDragStart($event)\"\r\n (dragend)=\"onDragStop($event)\"\r\n [ngClass]=\"{ 'cax-treenode-selectable': tree.selectionMode && node.selectable !== false, 'cax-treenode-dragover': draghoverNode, 'cax-highlight': isSelected() }\"\r\n >\r\n <button type=\"button\" [attr.data-pc-section]=\"'toggler'\" class=\"cax-tree-toggler cax-link\" (click)=\"toggle($event)\" caxRipple tabindex=\"-1\">\r\n <ng-container *ngIf=\"!tree.togglerIconTemplate\">\r\n <ng-container *ngIf=\"!node.loading\">\r\n <ChevronRightIcon *ngIf=\"!node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" />\r\n <ChevronDownIcon *ngIf=\"node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"loadingMode === 'icon' && node.loading\">\r\n <SpinnerIcon [spin]=\"true\" [styleClass]=\"'cax-tree-node-toggler-icon'\" />\r\n </ng-container>\r\n </ng-container>\r\n <span *ngIf=\"tree.togglerIconTemplate\" class=\"cax-tree-toggler-icon\">\r\n <ng-template *ngTemplateOutlet=\"tree.togglerIconTemplate; context: { $implicit: node.expanded }\"></ng-template>\r\n </span>\r\n </button>\r\n <div\r\n class=\"cax-checkbox cax-component\"\r\n [ngClass]=\"{ 'cax-checkbox-disabled cax-disabled': node.selectable === false, 'cax-variant-filled': tree?.config.inputStyle() === 'filled' }\"\r\n *ngIf=\"tree.selectionMode == 'checkbox'\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"cax-checkbox-box\" [ngClass]=\"{ 'cax-highlight': isSelected(), 'cax-indeterminate': node.partialSelected }\" role=\"checkbox\">\r\n <ng-container *ngIf=\"!tree.checkboxIconTemplate\">\r\n <CheckIcon *ngIf=\"!node.partialSelected && isSelected()\" [styleClass]=\"'cax-checkbox-icon'\" />\r\n <MinusIcon *ngIf=\"node.partialSelected\" [styleClass]=\"'cax-checkbox-icon'\" />\r\n </ng-container>\r\n <ng-template *ngTemplateOutlet=\"tree.checkboxIconTemplate; context: { $implicit: isSelected(), partialSelected: node.partialSelected }\"></ng-template>\r\n </div>\r\n </div>\r\n <span [class]=\"getIcon()\" *ngIf=\"node.icon || node.expandedIcon || node.collapsedIcon\"></span>\r\n <span class=\"cax-treenode-label\">\r\n <span *ngIf=\"!tree.getTemplateForNode(node)\">{{ node.label }}</span>\r\n <span *ngIf=\"tree.getTemplateForNode(node)\">\r\n <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: { $implicit: node }\"></ng-container>\r\n </span>\r\n </span>\r\n <span style=\"margin-left: 0.5rem\" [class]=\"getRightIcon()\" *ngIf=\"(node.rightIcon || node.expandedIcon || node.collapsedIcon)\"></span>\r\n <div class=\"cax-tree-action-container\">\r\n <span class=\"cax-tree-badge\" *ngIf=\"node.badge\">\r\n <cax-badge [severity]=\"'secondary'\" [value]=\"node.badge\"></cax-badge>\r\n </span>\r\n <cax-button\r\n *ngIf=\"!node.hideActionButton && nodeActionButton?.length\"\r\n class=\"cax-tree-button\"\r\n [ngClass]=\"{'cax-tree-button-hover': actionButtonMode === 'hover', 'cax-tree-button-select': actionButtonMode === 'select'}\"\r\n [label]=\"nodeActionButton\"\r\n [severity]=\"'primary'\"\r\n [outlined]=\"true\"\r\n [rounded]=\"true\"\r\n (onClick)=\"onNodeAction($event, node)\"\r\n ></cax-button>\r\n </div>\r\n </div>\r\n <ul\r\n class=\"cax-treenode-children\"\r\n [ngStyle]=\"{\r\n display: node.expanded ? 'block' : 'none'\r\n }\"\r\n *ngIf=\"!tree.virtualScroll && node.children && node.expanded\"\r\n role=\"group\"\r\n >\r\n <cax-treeNode\r\n *ngFor=\"let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy\"\r\n [node]=\"childNode\"\r\n [parentNode]=\"node\"\r\n [firstChild]=\"firstChild\"\r\n [lastChild]=\"lastChild\"\r\n [index]=\"index\"\r\n [itemSize]=\"itemSize\"\r\n [level]=\"level + 1\"\r\n [loadingMode]=\"loadingMode\"\r\n [nodeActionButton]=\"nodeActionButton\"\r\n [actionButtonMode]=\"actionButtonMode\"\r\n (onNodeActionClick)=\"onNodeAction($event, childNode)\"\r\n ></cax-treeNode>\r\n </ul>\r\n </li>\r\n\r\n <li\r\n *ngIf=\"tree.droppableNodes && lastChild\"\r\n class=\"cax-treenode-droppoint\"\r\n [ngClass]=\"{ 'cax-treenode-droppoint-active': draghoverNext }\"\r\n (drop)=\"onDropPoint($event, 1)\"\r\n [attr.aria-hidden]=\"true\"\r\n (dragover)=\"onDropPointDragOver($event)\"\r\n (dragenter)=\"onDropPointDragEnter($event, 1)\"\r\n (dragleave)=\"onDropPointDragLeave($event)\"\r\n ></li>\r\n\r\n <table *ngIf=\"tree.horizontal\" [class]=\"node.styleClass\">\r\n <tbody>\r\n <tr>\r\n <td class=\"cax-treenode-connector\" *ngIf=\"!root\">\r\n <table class=\"cax-treenode-connector-table\">\r\n <tbody>\r\n <tr>\r\n <td [ngClass]=\"{ 'cax-treenode-connector-line': !firstChild }\"></td>\r\n </tr>\r\n <tr>\r\n <td [ngClass]=\"{ 'cax-treenode-connector-line': !lastChild }\"></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </td>\r\n <td class=\"cax-treenode\" [ngClass]=\"{ 'cax-treenode-collapsed': !node.expanded }\">\r\n <div\r\n class=\"cax-treenode-content\"\r\n tabindex=\"0\"\r\n [ngClass]=\"{ 'cax-treenode-selectable': tree.selectionMode, 'cax-highlight': isSelected() }\"\r\n (click)=\"onNodeClick($event)\"\r\n (contextmenu)=\"onNodeRightClick($event)\"\r\n (touchend)=\"onNodeTouchEnd()\"\r\n (keydown)=\"onNodeKeydown($event)\"\r\n >\r\n <span *ngIf=\"!isLeaf()\" [ngClass]=\"'cax-tree-toggler'\" (click)=\"toggle($event)\">\r\n <ng-container *ngIf=\"!tree.togglerIconTemplate\">\r\n <PlusIcon *ngIf=\"!node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" [ariaLabel]=\"tree.togglerAriaLabel\" />\r\n <MinusIcon *ngIf=\"node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" [ariaLabel]=\"tree.togglerAriaLabel\" />\r\n </ng-container>\r\n <span *ngIf=\"tree.togglerIconTemplate\" class=\"cax-tree-toggler-icon\">\r\n <ng-template *ngTemplateOutlet=\"tree.togglerIconTemplate; context: { $implicit: node.expanded }\"></ng-template>\r\n </span>\r\n </span>\r\n <span [class]=\"getIcon()\" *ngIf=\"node.icon || node.expandedIcon || node.collapsedIcon\"></span>\r\n <span class=\"cax-treenode-label\">\r\n <span *ngIf=\"!tree.getTemplateForNode(node)\">{{ node.label }}</span>\r\n <span *ngIf=\"tree.getTemplateForNode(node)\">\r\n <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: { $implicit: node }\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </td>\r\n <td\r\n class=\"cax-treenode-children-container\"\r\n *ngIf=\"node.children && node.expanded\"\r\n [ngStyle]=\"{\r\n display: node.expanded ? 'table-cell' : 'none'\r\n }\"\r\n >\r\n <div class=\"cax-treenode-children\">\r\n <cax-treeNode\r\n *ngFor=\"let childNode of node.children; let firstChild = first; let lastChild = last; trackBy: tree.trackBy\"\r\n [nodeActionButton]=\"nodeActionButton\"\r\n [actionButtonMode]=\"actionButtonMode\"\r\n [node]=\"childNode\"\r\n [firstChild]=\"firstChild\"\r\n [lastChild]=\"lastChild\"\r\n (onNodeActionClick)=\"onNodeAction($event, childNode)\"\r\n ></cax-treeNode>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i3.CheckIcon, selector: "CheckIcon" }, { kind: "component", type: i4.ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: i5.ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: i6.MinusIcon, selector: "MinusIcon" }, { kind: "component", type: i7.SpinnerIcon, selector: "SpinnerIcon" }, { kind: "component", type: i8.PlusIcon, selector: "PlusIcon" }, { kind: "component", type: i9.Badge, selector: "cax-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i10.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i11.Skeleton, selector: "cax-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: UITreeNode, selector: "cax-treeNode", inputs: ["rightIcon", "rowNode", "node", "parentNode", "nodeActionButton", "actionButtonMode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"], outputs: ["onNodeActionClick"] }], encapsulation: i0.ViewEncapsulation.None });
487
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: UITreeNode, selector: "cax-treeNode", inputs: { rightIcon: "rightIcon", rowNode: "rowNode", node: "node", parentNode: "parentNode", nodeActionButton: "nodeActionButton", actionButtonMode: "actionButtonMode", root: ["root", "root", booleanAttribute], index: ["index", "index", numberAttribute], firstChild: ["firstChild", "firstChild", booleanAttribute], lastChild: ["lastChild", "lastChild", booleanAttribute], level: ["level", "level", numberAttribute], indentation: ["indentation", "indentation", numberAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], loadingMode: "loadingMode" }, outputs: { onNodeActionClick: "onNodeActionClick" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-template [ngIf]=\"node\">\r\n <li\r\n *ngIf=\"tree.droppableNodes\"\r\n class=\"cax-treenode-droppoint\"\r\n [attr.aria-hidden]=\"true\"\r\n [ngClass]=\"{ 'cax-treenode-droppoint-active': draghoverPrev }\"\r\n (drop)=\"onDropPoint($event, -1)\"\r\n (dragover)=\"onDropPointDragOver($event)\"\r\n (dragenter)=\"onDropPointDragEnter($event, -1)\"\r\n (dragleave)=\"onDropPointDragLeave($event)\"\r\n ></li>\r\n <cax-skeleton *ngIf=\"node.loading\" width=\"100%\" height=\"48px\" borderRadius=\"12px\" />\r\n <li\r\n *ngIf=\"!tree.horizontal && !node.loading\"\r\n [ngClass]=\"['cax-treenode', node.styleClass || '', isLeaf() ? 'cax-treenode-leaf' : '']\"\r\n [ngStyle]=\"{ height: itemSize + 'px' }\"\r\n [style]=\"node.style\"\r\n [attr.aria-label]=\"node.label\"\r\n [attr.aria-checked]=\"ariaChecked\"\r\n [attr.aria-setsize]=\"node.children ? node.children.length : 0\"\r\n [attr.aria-selected]=\"ariaSelected\"\r\n [attr.aria-expanded]=\"node.expanded\"\r\n [attr.aria-posinset]=\"index + 1\"\r\n [attr.aria-level]=\"level + 1\"\r\n [attr.tabindex]=\"index === 0 ? 0 : -1\"\r\n [attr.data-id]=\"node.key\"\r\n role=\"treeitem\"\r\n (keydown)=\"onKeyDown($event)\"\r\n >\r\n <div\r\n class=\"cax-treenode-content\"\r\n [ngStyle]=\"{\r\n 'padding-left': level * indentation + 'rem'\r\n }\"\r\n (click)=\"onNodeClick($event)\"\r\n (contextmenu)=\"onNodeRightClick($event)\"\r\n (touchend)=\"onNodeTouchEnd()\"\r\n (drop)=\"onDropNode($event)\"\r\n (dragover)=\"onDropNodeDragOver($event)\"\r\n (dragenter)=\"onDropNodeDragEnter($event)\"\r\n (dragleave)=\"onDropNodeDragLeave($event)\"\r\n [draggable]=\"tree.draggableNodes\"\r\n (dragstart)=\"onDragStart($event)\"\r\n (dragend)=\"onDragStop($event)\"\r\n [ngClass]=\"{ 'cax-treenode-selectable': tree.selectionMode && node.selectable !== false, 'cax-treenode-dragover': draghoverNode, 'cax-highlight': isSelected() }\"\r\n >\r\n <button *ngIf=\"node.children?.length\" type=\"button\" [attr.data-pc-section]=\"'toggler'\" class=\"cax-tree-toggler cax-link\" (click)=\"toggle($event)\" caxRipple tabindex=\"-1\">\r\n <ng-container *ngIf=\"!tree.togglerIconTemplate\">\r\n <ng-container *ngIf=\"!node.loading\">\r\n <ChevronRightIcon *ngIf=\"!node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" />\r\n <ChevronDownIcon *ngIf=\"node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"loadingMode === 'icon' && node.loading\">\r\n <SpinnerIcon [spin]=\"true\" [styleClass]=\"'cax-tree-node-toggler-icon'\" />\r\n </ng-container>\r\n </ng-container>\r\n <span *ngIf=\"tree.togglerIconTemplate\" class=\"cax-tree-toggler-icon\">\r\n <ng-template *ngTemplateOutlet=\"tree.togglerIconTemplate; context: { $implicit: node.expanded }\"></ng-template>\r\n </span>\r\n </button>\r\n <div\r\n class=\"cax-checkbox cax-component\"\r\n [ngClass]=\"{ 'cax-checkbox-disabled cax-disabled': node.selectable === false, 'cax-variant-filled': tree?.config.inputStyle() === 'filled' }\"\r\n *ngIf=\"tree.selectionMode == 'checkbox'\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"cax-checkbox-box\" [ngClass]=\"{ 'cax-highlight': isSelected(), 'cax-indeterminate': node.partialSelected }\" role=\"checkbox\">\r\n <ng-container *ngIf=\"!tree.checkboxIconTemplate\">\r\n <CheckIcon *ngIf=\"!node.partialSelected && isSelected()\" [styleClass]=\"'cax-checkbox-icon'\" />\r\n <MinusIcon *ngIf=\"node.partialSelected\" [styleClass]=\"'cax-checkbox-icon'\" />\r\n </ng-container>\r\n <ng-template *ngTemplateOutlet=\"tree.checkboxIconTemplate; context: { $implicit: isSelected(), partialSelected: node.partialSelected }\"></ng-template>\r\n </div>\r\n </div>\r\n <span [class]=\"getIcon()\" *ngIf=\"node.icon || node.expandedIcon || node.collapsedIcon\"></span>\r\n <span class=\"cax-treenode-label\">\r\n <span *ngIf=\"!tree.getTemplateForNode(node)\">{{ node.label }}</span>\r\n <span *ngIf=\"tree.getTemplateForNode(node)\">\r\n <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: { $implicit: node }\"></ng-container>\r\n </span>\r\n </span>\r\n <span style=\"margin-left: 0.5rem\" [class]=\"getRightIcon()\" *ngIf=\"(node.rightIcon || node.expandedIcon || node.collapsedIcon)\"></span>\r\n <div class=\"cax-tree-action-container\">\r\n <span class=\"cax-tree-badge\" *ngIf=\"node.badge\">\r\n <cax-badge [severity]=\"'secondary'\" [value]=\"node.badge\"></cax-badge>\r\n </span>\r\n <cax-button\r\n *ngIf=\"!node.hideActionButton && nodeActionButton?.length\"\r\n class=\"cax-tree-button\"\r\n [ngClass]=\"{'cax-tree-button-hover': actionButtonMode === 'hover', 'cax-tree-button-select': actionButtonMode === 'select'}\"\r\n [label]=\"nodeActionButton\"\r\n [severity]=\"'primary'\"\r\n [outlined]=\"true\"\r\n [rounded]=\"true\"\r\n (onClick)=\"onNodeAction($event, node)\"\r\n ></cax-button>\r\n </div>\r\n </div>\r\n <ul\r\n class=\"cax-treenode-children\"\r\n [ngStyle]=\"{\r\n display: node.expanded ? 'block' : 'none'\r\n }\"\r\n *ngIf=\"!tree.virtualScroll && node.children && node.expanded\"\r\n role=\"group\"\r\n >\r\n <cax-treeNode\r\n *ngFor=\"let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy\"\r\n [node]=\"childNode\"\r\n [parentNode]=\"node\"\r\n [firstChild]=\"firstChild\"\r\n [lastChild]=\"lastChild\"\r\n [index]=\"index\"\r\n [itemSize]=\"itemSize\"\r\n [level]=\"level + 1\"\r\n [loadingMode]=\"loadingMode\"\r\n [nodeActionButton]=\"nodeActionButton\"\r\n [actionButtonMode]=\"actionButtonMode\"\r\n (onNodeActionClick)=\"onNodeAction($event, childNode)\"\r\n ></cax-treeNode>\r\n </ul>\r\n </li>\r\n\r\n <li\r\n *ngIf=\"tree.droppableNodes && lastChild\"\r\n class=\"cax-treenode-droppoint\"\r\n [ngClass]=\"{ 'cax-treenode-droppoint-active': draghoverNext }\"\r\n (drop)=\"onDropPoint($event, 1)\"\r\n [attr.aria-hidden]=\"true\"\r\n (dragover)=\"onDropPointDragOver($event)\"\r\n (dragenter)=\"onDropPointDragEnter($event, 1)\"\r\n (dragleave)=\"onDropPointDragLeave($event)\"\r\n ></li>\r\n\r\n <table *ngIf=\"tree.horizontal\" [class]=\"node.styleClass\">\r\n <tbody>\r\n <tr>\r\n <td class=\"cax-treenode-connector\" *ngIf=\"!root\">\r\n <table class=\"cax-treenode-connector-table\">\r\n <tbody>\r\n <tr>\r\n <td [ngClass]=\"{ 'cax-treenode-connector-line': !firstChild }\"></td>\r\n </tr>\r\n <tr>\r\n <td [ngClass]=\"{ 'cax-treenode-connector-line': !lastChild }\"></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </td>\r\n <td class=\"cax-treenode\" [ngClass]=\"{ 'cax-treenode-collapsed': !node.expanded }\">\r\n <div\r\n class=\"cax-treenode-content\"\r\n tabindex=\"0\"\r\n [ngClass]=\"{ 'cax-treenode-selectable': tree.selectionMode, 'cax-highlight': isSelected() }\"\r\n (click)=\"onNodeClick($event)\"\r\n (contextmenu)=\"onNodeRightClick($event)\"\r\n (touchend)=\"onNodeTouchEnd()\"\r\n (keydown)=\"onNodeKeydown($event)\"\r\n >\r\n <span *ngIf=\"!isLeaf()\" [ngClass]=\"'cax-tree-toggler'\" (click)=\"toggle($event)\">\r\n <ng-container *ngIf=\"!tree.togglerIconTemplate\">\r\n <PlusIcon *ngIf=\"!node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" [ariaLabel]=\"tree.togglerAriaLabel\" />\r\n <MinusIcon *ngIf=\"node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" [ariaLabel]=\"tree.togglerAriaLabel\" />\r\n </ng-container>\r\n <span *ngIf=\"tree.togglerIconTemplate\" class=\"cax-tree-toggler-icon\">\r\n <ng-template *ngTemplateOutlet=\"tree.togglerIconTemplate; context: { $implicit: node.expanded }\"></ng-template>\r\n </span>\r\n </span>\r\n <span [class]=\"getIcon()\" *ngIf=\"node.icon || node.expandedIcon || node.collapsedIcon\"></span>\r\n <span class=\"cax-treenode-label\">\r\n <span *ngIf=\"!tree.getTemplateForNode(node)\">{{ node.label }}</span>\r\n <span *ngIf=\"tree.getTemplateForNode(node)\">\r\n <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: { $implicit: node }\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </td>\r\n <td\r\n class=\"cax-treenode-children-container\"\r\n *ngIf=\"node.children && node.expanded\"\r\n [ngStyle]=\"{\r\n display: node.expanded ? 'table-cell' : 'none'\r\n }\"\r\n >\r\n <div class=\"cax-treenode-children\">\r\n <cax-treeNode\r\n *ngFor=\"let childNode of node.children; let firstChild = first; let lastChild = last; trackBy: tree.trackBy\"\r\n [nodeActionButton]=\"nodeActionButton\"\r\n [actionButtonMode]=\"actionButtonMode\"\r\n [node]=\"childNode\"\r\n [firstChild]=\"firstChild\"\r\n [lastChild]=\"lastChild\"\r\n (onNodeActionClick)=\"onNodeAction($event, childNode)\"\r\n ></cax-treeNode>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i3.CheckIcon, selector: "CheckIcon" }, { kind: "component", type: i4.ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: i5.ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: i6.MinusIcon, selector: "MinusIcon" }, { kind: "component", type: i7.SpinnerIcon, selector: "SpinnerIcon" }, { kind: "component", type: i8.PlusIcon, selector: "PlusIcon" }, { kind: "component", type: i9.Badge, selector: "cax-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i10.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i11.Skeleton, selector: "cax-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: UITreeNode, selector: "cax-treeNode", inputs: ["rightIcon", "rowNode", "node", "parentNode", "nodeActionButton", "actionButtonMode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"], outputs: ["onNodeActionClick"] }], encapsulation: i0.ViewEncapsulation.None });
488
488
  }
489
489
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UITreeNode, decorators: [{
490
490
  type: Component,
491
491
  args: [{ selector: 'cax-treeNode', encapsulation: ViewEncapsulation.None, host: {
492
492
  class: 'cax-element'
493
- }, template: "<ng-template [ngIf]=\"node\">\r\n <li\r\n *ngIf=\"tree.droppableNodes\"\r\n class=\"cax-treenode-droppoint\"\r\n [attr.aria-hidden]=\"true\"\r\n [ngClass]=\"{ 'cax-treenode-droppoint-active': draghoverPrev }\"\r\n (drop)=\"onDropPoint($event, -1)\"\r\n (dragover)=\"onDropPointDragOver($event)\"\r\n (dragenter)=\"onDropPointDragEnter($event, -1)\"\r\n (dragleave)=\"onDropPointDragLeave($event)\"\r\n ></li>\r\n <cax-skeleton *ngIf=\"node.loading\" width=\"100%\" height=\"48px\" borderRadius=\"12px\" />\r\n <li\r\n *ngIf=\"!tree.horizontal && !node.loading\"\r\n [ngClass]=\"['cax-treenode', node.styleClass || '', isLeaf() ? 'cax-treenode-leaf' : '']\"\r\n [ngStyle]=\"{ height: itemSize + 'px' }\"\r\n [style]=\"node.style\"\r\n [attr.aria-label]=\"node.label\"\r\n [attr.aria-checked]=\"ariaChecked\"\r\n [attr.aria-setsize]=\"node.children ? node.children.length : 0\"\r\n [attr.aria-selected]=\"ariaSelected\"\r\n [attr.aria-expanded]=\"node.expanded\"\r\n [attr.aria-posinset]=\"index + 1\"\r\n [attr.aria-level]=\"level + 1\"\r\n [attr.tabindex]=\"index === 0 ? 0 : -1\"\r\n [attr.data-id]=\"node.key\"\r\n role=\"treeitem\"\r\n (keydown)=\"onKeyDown($event)\"\r\n >\r\n <div\r\n class=\"cax-treenode-content\"\r\n [ngStyle]=\"{\r\n 'padding-left': level * indentation + 'rem'\r\n }\"\r\n (click)=\"onNodeClick($event)\"\r\n (contextmenu)=\"onNodeRightClick($event)\"\r\n (touchend)=\"onNodeTouchEnd()\"\r\n (drop)=\"onDropNode($event)\"\r\n (dragover)=\"onDropNodeDragOver($event)\"\r\n (dragenter)=\"onDropNodeDragEnter($event)\"\r\n (dragleave)=\"onDropNodeDragLeave($event)\"\r\n [draggable]=\"tree.draggableNodes\"\r\n (dragstart)=\"onDragStart($event)\"\r\n (dragend)=\"onDragStop($event)\"\r\n [ngClass]=\"{ 'cax-treenode-selectable': tree.selectionMode && node.selectable !== false, 'cax-treenode-dragover': draghoverNode, 'cax-highlight': isSelected() }\"\r\n >\r\n <button type=\"button\" [attr.data-pc-section]=\"'toggler'\" class=\"cax-tree-toggler cax-link\" (click)=\"toggle($event)\" caxRipple tabindex=\"-1\">\r\n <ng-container *ngIf=\"!tree.togglerIconTemplate\">\r\n <ng-container *ngIf=\"!node.loading\">\r\n <ChevronRightIcon *ngIf=\"!node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" />\r\n <ChevronDownIcon *ngIf=\"node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"loadingMode === 'icon' && node.loading\">\r\n <SpinnerIcon [spin]=\"true\" [styleClass]=\"'cax-tree-node-toggler-icon'\" />\r\n </ng-container>\r\n </ng-container>\r\n <span *ngIf=\"tree.togglerIconTemplate\" class=\"cax-tree-toggler-icon\">\r\n <ng-template *ngTemplateOutlet=\"tree.togglerIconTemplate; context: { $implicit: node.expanded }\"></ng-template>\r\n </span>\r\n </button>\r\n <div\r\n class=\"cax-checkbox cax-component\"\r\n [ngClass]=\"{ 'cax-checkbox-disabled cax-disabled': node.selectable === false, 'cax-variant-filled': tree?.config.inputStyle() === 'filled' }\"\r\n *ngIf=\"tree.selectionMode == 'checkbox'\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"cax-checkbox-box\" [ngClass]=\"{ 'cax-highlight': isSelected(), 'cax-indeterminate': node.partialSelected }\" role=\"checkbox\">\r\n <ng-container *ngIf=\"!tree.checkboxIconTemplate\">\r\n <CheckIcon *ngIf=\"!node.partialSelected && isSelected()\" [styleClass]=\"'cax-checkbox-icon'\" />\r\n <MinusIcon *ngIf=\"node.partialSelected\" [styleClass]=\"'cax-checkbox-icon'\" />\r\n </ng-container>\r\n <ng-template *ngTemplateOutlet=\"tree.checkboxIconTemplate; context: { $implicit: isSelected(), partialSelected: node.partialSelected }\"></ng-template>\r\n </div>\r\n </div>\r\n <span [class]=\"getIcon()\" *ngIf=\"node.icon || node.expandedIcon || node.collapsedIcon\"></span>\r\n <span class=\"cax-treenode-label\">\r\n <span *ngIf=\"!tree.getTemplateForNode(node)\">{{ node.label }}</span>\r\n <span *ngIf=\"tree.getTemplateForNode(node)\">\r\n <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: { $implicit: node }\"></ng-container>\r\n </span>\r\n </span>\r\n <span style=\"margin-left: 0.5rem\" [class]=\"getRightIcon()\" *ngIf=\"(node.rightIcon || node.expandedIcon || node.collapsedIcon)\"></span>\r\n <div class=\"cax-tree-action-container\">\r\n <span class=\"cax-tree-badge\" *ngIf=\"node.badge\">\r\n <cax-badge [severity]=\"'secondary'\" [value]=\"node.badge\"></cax-badge>\r\n </span>\r\n <cax-button\r\n *ngIf=\"!node.hideActionButton && nodeActionButton?.length\"\r\n class=\"cax-tree-button\"\r\n [ngClass]=\"{'cax-tree-button-hover': actionButtonMode === 'hover', 'cax-tree-button-select': actionButtonMode === 'select'}\"\r\n [label]=\"nodeActionButton\"\r\n [severity]=\"'primary'\"\r\n [outlined]=\"true\"\r\n [rounded]=\"true\"\r\n (onClick)=\"onNodeAction($event, node)\"\r\n ></cax-button>\r\n </div>\r\n </div>\r\n <ul\r\n class=\"cax-treenode-children\"\r\n [ngStyle]=\"{\r\n display: node.expanded ? 'block' : 'none'\r\n }\"\r\n *ngIf=\"!tree.virtualScroll && node.children && node.expanded\"\r\n role=\"group\"\r\n >\r\n <cax-treeNode\r\n *ngFor=\"let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy\"\r\n [node]=\"childNode\"\r\n [parentNode]=\"node\"\r\n [firstChild]=\"firstChild\"\r\n [lastChild]=\"lastChild\"\r\n [index]=\"index\"\r\n [itemSize]=\"itemSize\"\r\n [level]=\"level + 1\"\r\n [loadingMode]=\"loadingMode\"\r\n [nodeActionButton]=\"nodeActionButton\"\r\n [actionButtonMode]=\"actionButtonMode\"\r\n (onNodeActionClick)=\"onNodeAction($event, childNode)\"\r\n ></cax-treeNode>\r\n </ul>\r\n </li>\r\n\r\n <li\r\n *ngIf=\"tree.droppableNodes && lastChild\"\r\n class=\"cax-treenode-droppoint\"\r\n [ngClass]=\"{ 'cax-treenode-droppoint-active': draghoverNext }\"\r\n (drop)=\"onDropPoint($event, 1)\"\r\n [attr.aria-hidden]=\"true\"\r\n (dragover)=\"onDropPointDragOver($event)\"\r\n (dragenter)=\"onDropPointDragEnter($event, 1)\"\r\n (dragleave)=\"onDropPointDragLeave($event)\"\r\n ></li>\r\n\r\n <table *ngIf=\"tree.horizontal\" [class]=\"node.styleClass\">\r\n <tbody>\r\n <tr>\r\n <td class=\"cax-treenode-connector\" *ngIf=\"!root\">\r\n <table class=\"cax-treenode-connector-table\">\r\n <tbody>\r\n <tr>\r\n <td [ngClass]=\"{ 'cax-treenode-connector-line': !firstChild }\"></td>\r\n </tr>\r\n <tr>\r\n <td [ngClass]=\"{ 'cax-treenode-connector-line': !lastChild }\"></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </td>\r\n <td class=\"cax-treenode\" [ngClass]=\"{ 'cax-treenode-collapsed': !node.expanded }\">\r\n <div\r\n class=\"cax-treenode-content\"\r\n tabindex=\"0\"\r\n [ngClass]=\"{ 'cax-treenode-selectable': tree.selectionMode, 'cax-highlight': isSelected() }\"\r\n (click)=\"onNodeClick($event)\"\r\n (contextmenu)=\"onNodeRightClick($event)\"\r\n (touchend)=\"onNodeTouchEnd()\"\r\n (keydown)=\"onNodeKeydown($event)\"\r\n >\r\n <span *ngIf=\"!isLeaf()\" [ngClass]=\"'cax-tree-toggler'\" (click)=\"toggle($event)\">\r\n <ng-container *ngIf=\"!tree.togglerIconTemplate\">\r\n <PlusIcon *ngIf=\"!node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" [ariaLabel]=\"tree.togglerAriaLabel\" />\r\n <MinusIcon *ngIf=\"node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" [ariaLabel]=\"tree.togglerAriaLabel\" />\r\n </ng-container>\r\n <span *ngIf=\"tree.togglerIconTemplate\" class=\"cax-tree-toggler-icon\">\r\n <ng-template *ngTemplateOutlet=\"tree.togglerIconTemplate; context: { $implicit: node.expanded }\"></ng-template>\r\n </span>\r\n </span>\r\n <span [class]=\"getIcon()\" *ngIf=\"node.icon || node.expandedIcon || node.collapsedIcon\"></span>\r\n <span class=\"cax-treenode-label\">\r\n <span *ngIf=\"!tree.getTemplateForNode(node)\">{{ node.label }}</span>\r\n <span *ngIf=\"tree.getTemplateForNode(node)\">\r\n <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: { $implicit: node }\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </td>\r\n <td\r\n class=\"cax-treenode-children-container\"\r\n *ngIf=\"node.children && node.expanded\"\r\n [ngStyle]=\"{\r\n display: node.expanded ? 'table-cell' : 'none'\r\n }\"\r\n >\r\n <div class=\"cax-treenode-children\">\r\n <cax-treeNode\r\n *ngFor=\"let childNode of node.children; let firstChild = first; let lastChild = last; trackBy: tree.trackBy\"\r\n [nodeActionButton]=\"nodeActionButton\"\r\n [actionButtonMode]=\"actionButtonMode\"\r\n [node]=\"childNode\"\r\n [firstChild]=\"firstChild\"\r\n [lastChild]=\"lastChild\"\r\n (onNodeActionClick)=\"onNodeAction($event, childNode)\"\r\n ></cax-treeNode>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n" }]
493
+ }, template: "<ng-template [ngIf]=\"node\">\r\n <li\r\n *ngIf=\"tree.droppableNodes\"\r\n class=\"cax-treenode-droppoint\"\r\n [attr.aria-hidden]=\"true\"\r\n [ngClass]=\"{ 'cax-treenode-droppoint-active': draghoverPrev }\"\r\n (drop)=\"onDropPoint($event, -1)\"\r\n (dragover)=\"onDropPointDragOver($event)\"\r\n (dragenter)=\"onDropPointDragEnter($event, -1)\"\r\n (dragleave)=\"onDropPointDragLeave($event)\"\r\n ></li>\r\n <cax-skeleton *ngIf=\"node.loading\" width=\"100%\" height=\"48px\" borderRadius=\"12px\" />\r\n <li\r\n *ngIf=\"!tree.horizontal && !node.loading\"\r\n [ngClass]=\"['cax-treenode', node.styleClass || '', isLeaf() ? 'cax-treenode-leaf' : '']\"\r\n [ngStyle]=\"{ height: itemSize + 'px' }\"\r\n [style]=\"node.style\"\r\n [attr.aria-label]=\"node.label\"\r\n [attr.aria-checked]=\"ariaChecked\"\r\n [attr.aria-setsize]=\"node.children ? node.children.length : 0\"\r\n [attr.aria-selected]=\"ariaSelected\"\r\n [attr.aria-expanded]=\"node.expanded\"\r\n [attr.aria-posinset]=\"index + 1\"\r\n [attr.aria-level]=\"level + 1\"\r\n [attr.tabindex]=\"index === 0 ? 0 : -1\"\r\n [attr.data-id]=\"node.key\"\r\n role=\"treeitem\"\r\n (keydown)=\"onKeyDown($event)\"\r\n >\r\n <div\r\n class=\"cax-treenode-content\"\r\n [ngStyle]=\"{\r\n 'padding-left': level * indentation + 'rem'\r\n }\"\r\n (click)=\"onNodeClick($event)\"\r\n (contextmenu)=\"onNodeRightClick($event)\"\r\n (touchend)=\"onNodeTouchEnd()\"\r\n (drop)=\"onDropNode($event)\"\r\n (dragover)=\"onDropNodeDragOver($event)\"\r\n (dragenter)=\"onDropNodeDragEnter($event)\"\r\n (dragleave)=\"onDropNodeDragLeave($event)\"\r\n [draggable]=\"tree.draggableNodes\"\r\n (dragstart)=\"onDragStart($event)\"\r\n (dragend)=\"onDragStop($event)\"\r\n [ngClass]=\"{ 'cax-treenode-selectable': tree.selectionMode && node.selectable !== false, 'cax-treenode-dragover': draghoverNode, 'cax-highlight': isSelected() }\"\r\n >\r\n <button *ngIf=\"node.children?.length\" type=\"button\" [attr.data-pc-section]=\"'toggler'\" class=\"cax-tree-toggler cax-link\" (click)=\"toggle($event)\" caxRipple tabindex=\"-1\">\r\n <ng-container *ngIf=\"!tree.togglerIconTemplate\">\r\n <ng-container *ngIf=\"!node.loading\">\r\n <ChevronRightIcon *ngIf=\"!node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" />\r\n <ChevronDownIcon *ngIf=\"node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"loadingMode === 'icon' && node.loading\">\r\n <SpinnerIcon [spin]=\"true\" [styleClass]=\"'cax-tree-node-toggler-icon'\" />\r\n </ng-container>\r\n </ng-container>\r\n <span *ngIf=\"tree.togglerIconTemplate\" class=\"cax-tree-toggler-icon\">\r\n <ng-template *ngTemplateOutlet=\"tree.togglerIconTemplate; context: { $implicit: node.expanded }\"></ng-template>\r\n </span>\r\n </button>\r\n <div\r\n class=\"cax-checkbox cax-component\"\r\n [ngClass]=\"{ 'cax-checkbox-disabled cax-disabled': node.selectable === false, 'cax-variant-filled': tree?.config.inputStyle() === 'filled' }\"\r\n *ngIf=\"tree.selectionMode == 'checkbox'\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"cax-checkbox-box\" [ngClass]=\"{ 'cax-highlight': isSelected(), 'cax-indeterminate': node.partialSelected }\" role=\"checkbox\">\r\n <ng-container *ngIf=\"!tree.checkboxIconTemplate\">\r\n <CheckIcon *ngIf=\"!node.partialSelected && isSelected()\" [styleClass]=\"'cax-checkbox-icon'\" />\r\n <MinusIcon *ngIf=\"node.partialSelected\" [styleClass]=\"'cax-checkbox-icon'\" />\r\n </ng-container>\r\n <ng-template *ngTemplateOutlet=\"tree.checkboxIconTemplate; context: { $implicit: isSelected(), partialSelected: node.partialSelected }\"></ng-template>\r\n </div>\r\n </div>\r\n <span [class]=\"getIcon()\" *ngIf=\"node.icon || node.expandedIcon || node.collapsedIcon\"></span>\r\n <span class=\"cax-treenode-label\">\r\n <span *ngIf=\"!tree.getTemplateForNode(node)\">{{ node.label }}</span>\r\n <span *ngIf=\"tree.getTemplateForNode(node)\">\r\n <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: { $implicit: node }\"></ng-container>\r\n </span>\r\n </span>\r\n <span style=\"margin-left: 0.5rem\" [class]=\"getRightIcon()\" *ngIf=\"(node.rightIcon || node.expandedIcon || node.collapsedIcon)\"></span>\r\n <div class=\"cax-tree-action-container\">\r\n <span class=\"cax-tree-badge\" *ngIf=\"node.badge\">\r\n <cax-badge [severity]=\"'secondary'\" [value]=\"node.badge\"></cax-badge>\r\n </span>\r\n <cax-button\r\n *ngIf=\"!node.hideActionButton && nodeActionButton?.length\"\r\n class=\"cax-tree-button\"\r\n [ngClass]=\"{'cax-tree-button-hover': actionButtonMode === 'hover', 'cax-tree-button-select': actionButtonMode === 'select'}\"\r\n [label]=\"nodeActionButton\"\r\n [severity]=\"'primary'\"\r\n [outlined]=\"true\"\r\n [rounded]=\"true\"\r\n (onClick)=\"onNodeAction($event, node)\"\r\n ></cax-button>\r\n </div>\r\n </div>\r\n <ul\r\n class=\"cax-treenode-children\"\r\n [ngStyle]=\"{\r\n display: node.expanded ? 'block' : 'none'\r\n }\"\r\n *ngIf=\"!tree.virtualScroll && node.children && node.expanded\"\r\n role=\"group\"\r\n >\r\n <cax-treeNode\r\n *ngFor=\"let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy\"\r\n [node]=\"childNode\"\r\n [parentNode]=\"node\"\r\n [firstChild]=\"firstChild\"\r\n [lastChild]=\"lastChild\"\r\n [index]=\"index\"\r\n [itemSize]=\"itemSize\"\r\n [level]=\"level + 1\"\r\n [loadingMode]=\"loadingMode\"\r\n [nodeActionButton]=\"nodeActionButton\"\r\n [actionButtonMode]=\"actionButtonMode\"\r\n (onNodeActionClick)=\"onNodeAction($event, childNode)\"\r\n ></cax-treeNode>\r\n </ul>\r\n </li>\r\n\r\n <li\r\n *ngIf=\"tree.droppableNodes && lastChild\"\r\n class=\"cax-treenode-droppoint\"\r\n [ngClass]=\"{ 'cax-treenode-droppoint-active': draghoverNext }\"\r\n (drop)=\"onDropPoint($event, 1)\"\r\n [attr.aria-hidden]=\"true\"\r\n (dragover)=\"onDropPointDragOver($event)\"\r\n (dragenter)=\"onDropPointDragEnter($event, 1)\"\r\n (dragleave)=\"onDropPointDragLeave($event)\"\r\n ></li>\r\n\r\n <table *ngIf=\"tree.horizontal\" [class]=\"node.styleClass\">\r\n <tbody>\r\n <tr>\r\n <td class=\"cax-treenode-connector\" *ngIf=\"!root\">\r\n <table class=\"cax-treenode-connector-table\">\r\n <tbody>\r\n <tr>\r\n <td [ngClass]=\"{ 'cax-treenode-connector-line': !firstChild }\"></td>\r\n </tr>\r\n <tr>\r\n <td [ngClass]=\"{ 'cax-treenode-connector-line': !lastChild }\"></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </td>\r\n <td class=\"cax-treenode\" [ngClass]=\"{ 'cax-treenode-collapsed': !node.expanded }\">\r\n <div\r\n class=\"cax-treenode-content\"\r\n tabindex=\"0\"\r\n [ngClass]=\"{ 'cax-treenode-selectable': tree.selectionMode, 'cax-highlight': isSelected() }\"\r\n (click)=\"onNodeClick($event)\"\r\n (contextmenu)=\"onNodeRightClick($event)\"\r\n (touchend)=\"onNodeTouchEnd()\"\r\n (keydown)=\"onNodeKeydown($event)\"\r\n >\r\n <span *ngIf=\"!isLeaf()\" [ngClass]=\"'cax-tree-toggler'\" (click)=\"toggle($event)\">\r\n <ng-container *ngIf=\"!tree.togglerIconTemplate\">\r\n <PlusIcon *ngIf=\"!node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" [ariaLabel]=\"tree.togglerAriaLabel\" />\r\n <MinusIcon *ngIf=\"node.expanded\" [styleClass]=\"'cax-tree-toggler-icon'\" [ariaLabel]=\"tree.togglerAriaLabel\" />\r\n </ng-container>\r\n <span *ngIf=\"tree.togglerIconTemplate\" class=\"cax-tree-toggler-icon\">\r\n <ng-template *ngTemplateOutlet=\"tree.togglerIconTemplate; context: { $implicit: node.expanded }\"></ng-template>\r\n </span>\r\n </span>\r\n <span [class]=\"getIcon()\" *ngIf=\"node.icon || node.expandedIcon || node.collapsedIcon\"></span>\r\n <span class=\"cax-treenode-label\">\r\n <span *ngIf=\"!tree.getTemplateForNode(node)\">{{ node.label }}</span>\r\n <span *ngIf=\"tree.getTemplateForNode(node)\">\r\n <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: { $implicit: node }\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </td>\r\n <td\r\n class=\"cax-treenode-children-container\"\r\n *ngIf=\"node.children && node.expanded\"\r\n [ngStyle]=\"{\r\n display: node.expanded ? 'table-cell' : 'none'\r\n }\"\r\n >\r\n <div class=\"cax-treenode-children\">\r\n <cax-treeNode\r\n *ngFor=\"let childNode of node.children; let firstChild = first; let lastChild = last; trackBy: tree.trackBy\"\r\n [nodeActionButton]=\"nodeActionButton\"\r\n [actionButtonMode]=\"actionButtonMode\"\r\n [node]=\"childNode\"\r\n [firstChild]=\"firstChild\"\r\n [lastChild]=\"lastChild\"\r\n (onNodeActionClick)=\"onNodeAction($event, childNode)\"\r\n ></cax-treeNode>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n" }]
494
494
  }], ctorParameters: () => [{ type: Tree, decorators: [{
495
495
  type: Inject,
496
496
  args: [forwardRef(() => Tree)]