primeng 18.0.0-beta.5 → 18.0.0-rc.2

package/fesm2022/primeng-tree.mjs

@@ -34,11 +34,13 @@ const theme = ({ dt }) => `
 }
 
 .p-tree-root-children {
-    padding: ${dt('tree.gap')} 0 0 0;
+    padding: 0;
+    padding-block-start: ${dt('tree.gap')};
 }
 
 .p-tree-node-children {
-    padding: ${dt('tree.gap')} 0 0 ${dt('tree.indent')};
+    padding-block-start: ${dt('tree.gap')};
+    padding-inline-start: ${dt('tree.indent')};
 }
 
 .p-tree-node {
@@ -179,8 +181,8 @@ const theme = ({ dt }) => `
 
 .p-tree-horizontal {
     width: auto;
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
     overflow: auto;
 }
 
@@ -207,7 +209,7 @@ const theme = ({ dt }) => `
 
 .p-tree.p-tree-horizontal .p-tree-node.p-tree-node-leaf,
 .p-tree.p-tree-horizontal .p-tree-node.p-tree-node-collapsed {
-    padding-right: 0;
+    padding-inline-end: 0;
 }
 
 .p-tree.p-tree-horizontal .p-tree-node-children {
@@ -401,7 +403,7 @@ function UITreeNode_Conditional_0_span_5_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.tree.togglerIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, ctx_r2.node.expanded));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.tree.togglericonTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, ctx_r2.node.expanded));
 } }
 function UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_ng_template_1_0_ng_template_0_Template(rf, ctx) { }
 function UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_ng_template_1_0_Template(rf, ctx) { if (rf & 1) {
@@ -411,7 +413,7 @@ function UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_ng_template_1_Temp
     i0.ɵɵtemplate(0, UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_ng_template_1_0_Template, 1, 0, null, 16);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.tree.checkboxIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c3, ctx_r2.isSelected(), ctx_r2.node.partialSelected));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.tree.checkboxiconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c3, ctx_r2.isSelected(), ctx_r2.node.partialSelected));
 } }
 function UITreeNode_Conditional_0_p_checkbox_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -427,7 +429,7 @@ function UITreeNode_Conditional_0_p_checkbox_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngModel", ctx_r2.isSelected())("binary", true)("indeterminate", ctx_r2.node.partialSelected)("disabled", ctx_r2.node.selectable === false)("variant", (ctx_r2.tree == null ? null : ctx_r2.tree.config.inputStyle()) === "filled" ? "filled" : "outlined" || (ctx_r2.tree == null ? null : ctx_r2.tree.config.inputVariant()) === "filled" ? "filled" : "outlined")("tabindex", -1);
     i0.ɵɵattribute("data-p-partialchecked", ctx_r2.node.partialSelected);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.tree.checkboxIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.tree.checkboxiconTemplate);
 } }
 function UITreeNode_Conditional_0_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span");
@@ -517,9 +519,9 @@ function UITreeNode_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("data-pc-section", "toggler");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.tree.togglerIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.tree.togglericonTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.tree.togglerIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.tree.togglericonTemplate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r2.tree.selectionMode == "checkbox");
     i0.ɵɵadvance();
@@ -568,7 +570,7 @@ function Tree_div_1_ng_container_2_span_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.loadingIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.loadingiconTemplate);
 } }
 function Tree_div_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -577,9 +579,9 @@ function Tree_div_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r0.loadingIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r0.loadingiconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.loadingIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r0.loadingiconTemplate);
 } }
 function Tree_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12);
@@ -618,7 +620,7 @@ function Tree_Conditional_4_p_iconField_0_span_5_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.filterIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.filtericonTemplate);
 } }
 function Tree_Conditional_4_p_iconField_0_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -633,9 +635,9 @@ function Tree_Conditional_4_p_iconField_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("placeholder", ctx_r0.filterPlaceholder);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", !ctx_r0.filterIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r0.filtericonTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.filterIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r0.filtericonTemplate);
 } }
 function Tree_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, Tree_Conditional_4_p_iconField_0_Template, 6, 3, "p-iconField", 10);
@@ -766,9 +768,9 @@ function Tree_div_6_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r0.emptyMessageTemplate)("ngIfElse", ctx_r0.emptyFilter);
+    i0.ɵɵproperty("ngIf", !ctx_r0.emptymessageTemplate)("ngIfElse", ctx_r0.emptyFilter);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.emptyMessageTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.emptymessageTemplate);
 } }
 function Tree_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -1156,7 +1158,7 @@ class UITreeNode extends BaseComponent {
     }
     setTabIndexForSelectionMode(event, nodeTouched) {
         if (this.tree.selectionMode !== null) {
-            const elements = [...find(this.tree.el.nativeElement, '.p-treenode')];
+            const elements = [...find(this.tree.el.nativeElement, '[role="treeitem"]')];
             event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
             if (elements.every((element) => element.tabIndex === -1)) {
                 elements[0].tabIndex = 0;
@@ -1177,7 +1179,7 @@ class UITreeNode extends BaseComponent {
     }
     findLastVisibleDescendant(nodeElement) {
         const listElement = Array.from(nodeElement.children).find((el) => hasClass(el, 'p-treenode'));
-        const childrenListElement = listElement.children[1];
+        const childrenListElement = listElement?.children[1];
         if (childrenListElement && childrenListElement.children.length > 0) {
             const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
             return this.findLastVisibleDescendant(lastChildElement);
@@ -1263,7 +1265,7 @@ class UITreeNode extends BaseComponent {
                     (dragend)="onDragStop($event)"
                 >
                     <button type="button" [attr.data-pc-section]="'toggler'" class="p-tree-node-toggle-button" (click)="toggle($event)" pRipple tabindex="-1">
-                        <ng-container *ngIf="!tree.togglerIconTemplate">
+                        <ng-container *ngIf="!tree.togglericonTemplate">
                             <ng-container *ngIf="!node.loading">
                                 <ChevronRightIcon *ngIf="!node.expanded" [styleClass]="'p-tree-node-toggle-icon'" />
                                 <ChevronDownIcon *ngIf="node.expanded" [styleClass]="'p-tree-node-toggle-icon'" />
@@ -1272,8 +1274,8 @@ class UITreeNode extends BaseComponent {
                                 <SpinnerIcon [styleClass]="'pi-spin p-tree-node-toggle-icon'" />
                             </ng-container>
                         </ng-container>
-                        <span *ngIf="tree.togglerIconTemplate" class="p-tree-node-toggle-icon">
-                            <ng-template *ngTemplateOutlet="tree.togglerIconTemplate; context: { $implicit: node.expanded }"></ng-template>
+                        <span *ngIf="tree.togglericonTemplate" class="p-tree-node-toggle-icon">
+                            <ng-template *ngTemplateOutlet="tree.togglericonTemplate; context: { $implicit: node.expanded }"></ng-template>
                         </span>
                     </button>
 
@@ -1288,11 +1290,11 @@ class UITreeNode extends BaseComponent {
                         [attr.data-p-partialchecked]="node.partialSelected"
                         [tabindex]="-1"
                     >
-                        <ng-container *ngIf="tree.checkboxIconTemplate">
+                        <ng-container *ngIf="tree.checkboxiconTemplate">
                             <ng-template #icon>
                                 <ng-template
                                     *ngTemplateOutlet="
-                                        tree.checkboxIconTemplate;
+                                        tree.checkboxiconTemplate;
                                         context: {
                                             $implicit: isSelected(),
                                             partialSelected: node.partialSelected,
@@ -1667,27 +1669,27 @@ class Tree extends BaseComponent {
      * Empty message template.
      * @group Templates
      */
-    emptyMessageTemplate;
+    emptymessageTemplate;
     /**
      * Toggler icon template.
      * @group Templates
      */
-    togglerIconTemplate;
+    togglericonTemplate;
     /**
      * Checkbox icon template.
      * @group Templates
      */
-    checkboxIconTemplate;
+    checkboxiconTemplate;
     /**
      * Loading icon template.
      * @group Templates
      */
-    loadingIconTemplate;
+    loadingiconTemplate;
     /**
      * Filter icon template.
      * @group Templates
      */
-    filterIconTemplate;
+    filtericonTemplate;
     filterViewChild;
     scroller;
     wrapperViewChild;
@@ -2258,11 +2260,11 @@ class Tree extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loaderTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyMessageTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.togglerIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptymessageTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.togglericonTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filtericonTemplate = _t.first);
         } }, viewQuery: function Tree_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c5, 5);
             i0.ɵɵviewQuery(_c15, 5);
@@ -2306,9 +2308,9 @@ class Tree extends BaseComponent {
             <div class="p-tree-mask p-overlay-mask" *ngIf="loading && loadingMode === 'mask'">
                 <i *ngIf="loadingIcon" [class]="'p-tree-loading-icon pi-spin ' + loadingIcon"></i>
                 <ng-container *ngIf="!loadingIcon">
-                    <SpinnerIcon *ngIf="!loadingIconTemplate" [spin]="true" [styleClass]="'p-tree-loading-icon'" />
-                    <span *ngIf="loadingIconTemplate" class="p-tree-loading-icon">
-                        <ng-template *ngTemplateOutlet="loadingIconTemplate"></ng-template>
+                    <SpinnerIcon *ngIf="!loadingiconTemplate" [spin]="true" [styleClass]="'p-tree-loading-icon'" />
+                    <span *ngIf="loadingiconTemplate" class="p-tree-loading-icon">
+                        <ng-template *ngTemplateOutlet="loadingiconTemplate"></ng-template>
                     </span>
                 </ng-container>
             </div>
@@ -2319,9 +2321,9 @@ class Tree extends BaseComponent {
                 <p-iconField *ngIf="filter">
                     <input #filter pInputText type="search" autocomplete="off" class="p-tree-filter-input" [attr.placeholder]="filterPlaceholder" (keydown.enter)="$event.preventDefault()" (input)="_filter($event.target.value)" />
                     <p-inputIcon>
-                        <SearchIcon *ngIf="!filterIconTemplate" class="p-tree-filter-icon" />
-                        <span *ngIf="filterIconTemplate">
-                            <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
+                        <SearchIcon *ngIf="!filtericonTemplate" class="p-tree-filter-icon" />
+                        <span *ngIf="filtericonTemplate">
+                            <ng-template *ngTemplateOutlet="filtericonTemplate"></ng-template>
                         </span>
                     </p-inputIcon>
                 </p-iconField>
@@ -2385,10 +2387,10 @@ class Tree extends BaseComponent {
             </ng-container>
 
             <div class="p-tree-empty-message" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)">
-                <ng-container *ngIf="!emptyMessageTemplate; else emptyFilter">
+                <ng-container *ngIf="!emptymessageTemplate; else emptyFilter">
                     {{ emptyMessageLabel }}
                 </ng-container>
-                <ng-container #emptyFilter *ngTemplateOutlet="emptyMessageTemplate"></ng-container>
+                <ng-container #emptyFilter *ngTemplateOutlet="emptymessageTemplate"></ng-container>
             </div>
             <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
         </div>
@@ -2525,19 +2527,19 @@ class Tree extends BaseComponent {
         }], loaderTemplate: [{
             type: ContentChild,
             args: ['loader']
-        }], emptyMessageTemplate: [{
+        }], emptymessageTemplate: [{
             type: ContentChild,
             args: ['empty']
-        }], togglerIconTemplate: [{
+        }], togglericonTemplate: [{
             type: ContentChild,
             args: ['togglericon']
-        }], checkboxIconTemplate: [{
+        }], checkboxiconTemplate: [{
             type: ContentChild,
             args: ['checkboxicon']
-        }], loadingIconTemplate: [{
+        }], loadingiconTemplate: [{
             type: ContentChild,
             args: ['loadingicon']
-        }], filterIconTemplate: [{
+        }], filtericonTemplate: [{
             type: ContentChild,
             args: ['filtericon']
         }], filterViewChild: [{