primeng 18.0.0-rc.1 → 18.0.0

package/fesm2022/primeng-treeselect.mjs

@@ -29,6 +29,14 @@ const theme = ({ dt }) => `
     box-shadow: ${dt('treeselect.shadow')};
 }
 
+p-treeselect.ng-invalid.ng-dirty .p-treeselect {
+    border-color: ${dt('treeselect.invalid.border.color')};
+}
+
+p-treeselect.ng-invalid.ng-dirty .p-treeselect.p-focus {
+    border-color: ${dt('treeselect.focus.border.color')};
+}
+
 .p-treeselect:not(.p-disabled):hover {
     border-color: ${dt('treeselect.hover.border.color')};
 }
@@ -65,8 +73,8 @@ const theme = ({ dt }) => `
     background: transparent;
     color: ${dt('treeselect.dropdown.color')};
     width: ${dt('treeselect.dropdown.width')};
-    border-top-right-radius: ${dt('border.radius.md')};
-    border-bottom-right-radius: ${dt('border.radius.md')};
+    border-start-end-radius: ${dt('border.radius.md')};
+    border-end-end-radius: ${dt('border.radius.md')};
 }
 
 .p-treeselect-label-container {
@@ -91,6 +99,10 @@ const theme = ({ dt }) => `
     color: ${dt('treeselect.placeholder.color')};
 }
 
+p-treeselect.ng-invalid.ng-dirty .p-treeselect-label.p-placeholder {
+    color: ${dt('treeselect.invalid.placeholder.color')};
+}
+
 .p-treeselect.p-disabled .p-treeselect-label {
     color: ${dt('treeselect.disabled.color')};
 }
@@ -105,9 +117,6 @@ const theme = ({ dt }) => `
 }
 
 .p-treeselect-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
     background: ${dt('treeselect.overlay.background')};
     color: ${dt('treeselect.overlay.color')};
     border: 1px solid ${dt('treeselect.overlay.border.color')};
@@ -167,11 +176,6 @@ const theme = ({ dt }) => `
     width: ${dt('treeselect.lg.font.size')};
     height: ${dt('treeselect.lg.font.size')};
 }
-/* For PrimeNG */
-
-p-treeselect.ng-invalid.ng-dirty > .p-inputwrapper {
-    border-color: ${dt('treeselect.invalid.border.color')};
-}
 
 .p-treeselect-clear-icon {
     cursor: pointer;
@@ -181,10 +185,6 @@ p-treeselect.ng-invalid.ng-dirty > .p-inputwrapper {
     flex-shrink: 0;
     background: transparent;
     color: ${dt('treeselect.clear.icon.color')};
-}
-
-p-treeselect.ng-invalid.ng-dirty .p-treeselect-label.p-placeholder {
-    color: ${dt('treeselect.invalid.placeholder.color')};
 }`;
 const inlineStyles = {
     root: ({ instance }) => ({ position: instance.appendTo === 'self' ? 'relative' : undefined })
@@ -383,7 +383,7 @@ function TreeSelect_ng_container_10_span_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.clearIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cleariconTemplate);
 } }
 function TreeSelect_ng_container_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -392,9 +392,9 @@ function TreeSelect_ng_container_10_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.cleariconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.cleariconTemplate);
 } }
 function TreeSelect_ChevronDownIcon_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ChevronDownIcon", 34);
@@ -412,7 +412,7 @@ function TreeSelect_span_13_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.triggerIconTemplate || ctx_r1.dropdownIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.triggericonTemplate || ctx_r1.dropdowniconTemplate);
 } }
 function TreeSelect_ng_template_16_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -439,7 +439,7 @@ function TreeSelect_ng_template_16_9_ng_template_0_Template(rf, ctx) { if (rf &
 } if (rf & 2) {
     const expanded_r8 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemTogglerIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c23, expanded_r8));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemtogglericonTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c23, expanded_r8));
 } }
 function TreeSelect_ng_template_16_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, TreeSelect_ng_template_16_9_ng_template_0_Template, 1, 4, "ng-template", null, 11, i0.ɵɵtemplateRefExtractor);
@@ -453,7 +453,7 @@ function TreeSelect_ng_template_16_10_ng_template_0_Template(rf, ctx) { if (rf &
     const selected_r9 = ctx.$implicit;
     const partialSelected_r10 = ctx.partialSelected;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemCheckboxIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c24, selected_r9, partialSelected_r10));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemcheckboxiconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c24, selected_r9, partialSelected_r10));
 } }
 function TreeSelect_ng_template_16_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, TreeSelect_ng_template_16_10_ng_template_0_Template, 1, 5, "ng-template", null, 12, i0.ɵɵtemplateRefExtractor);
@@ -465,7 +465,7 @@ function TreeSelect_ng_template_16_11_ng_template_0_Template(rf, ctx) { if (rf &
     i0.ɵɵtemplate(0, TreeSelect_ng_template_16_11_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 33);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemLoadingIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemloadingiconTemplate);
 } }
 function TreeSelect_ng_template_16_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, TreeSelect_ng_template_16_11_ng_template_0_Template, 1, 1, "ng-template", null, 13, i0.ɵɵtemplateRefExtractor);
@@ -503,11 +503,11 @@ function TreeSelect_ng_template_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.emptyTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.itemTogglerIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.itemtogglericonTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.itemCheckboxIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.itemcheckboxiconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.itemLoadingIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.itemloadingiconTemplate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(43, _c21, ctx_r1.value, ctx_r1.options));
     i0.ɵɵadvance();
@@ -851,42 +851,42 @@ class TreeSelect extends BaseComponent {
      * Custom clear icon template.
      * @group Templates
      */
-    clearIconTemplate;
+    cleariconTemplate;
     /**
      * Custom trigger icon template.
      * @group Templates
      */
-    triggerIconTemplate;
+    triggericonTemplate;
     /**
      * Custom dropdown icon template.
      * @group Templates
      */
-    dropdownIconTemplate;
+    dropdowniconTemplate;
     /**
      * Custom filter icon template.
      * @group Templates
      */
-    filterIconTemplate;
+    filtericonTemplate;
     /**
      * Custom close icon template.
      * @group Templates
      */
-    closeIconTemplate;
+    closeiconTemplate;
     /**
      * Custom item toggler icon template.
      * @group Templates
      */
-    itemTogglerIconTemplate;
+    itemtogglericonTemplate;
     /**
      * Custom item checkbox icon template.
      * @group Templates
      */
-    itemCheckboxIconTemplate;
+    itemcheckboxiconTemplate;
     /**
      * Custom item loading icon template.
      * @group Templates
      */
-    itemLoadingIconTemplate;
+    itemloadingiconTemplate;
     focused;
     overlayVisible;
     selfChange;
@@ -992,7 +992,7 @@ class TreeSelect extends BaseComponent {
     }
     onArrowDown(event) {
         if (this.overlayVisible && this.panelEl?.nativeElement) {
-            let focusableElements = getFocusableElements(this.panelEl.nativeElement, '.p-treenode');
+            let focusableElements = getFocusableElements(this.panelEl.nativeElement, '.p-tree-node');
             if (focusableElements && focusableElements.length > 0) {
                 focusableElements[0].focus();
             }
@@ -1231,14 +1231,14 @@ class TreeSelect extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggerIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.closeIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemTogglerIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemCheckboxIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemLoadingIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cleariconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggericonTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdowniconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filtericonTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.closeiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemtogglericonTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemcheckboxiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemloadingiconTemplate = _t.first);
         } }, viewQuery: function TreeSelect_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c12, 5);
             i0.ɵɵviewQuery(_c13, 5);
@@ -1296,9 +1296,9 @@ class TreeSelect extends BaseComponent {
             i0.ɵɵadvance();
             i0.ɵɵattribute("aria-expanded", (tmp_23_0 = ctx.overlayVisible) !== null && tmp_23_0 !== undefined ? tmp_23_0 : false)("aria-label", "treeselect trigger");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.triggerIconTemplate && !ctx.dropdownIconTemplate);
+            i0.ɵɵproperty("ngIf", !ctx.triggericonTemplate && !ctx.dropdowniconTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.triggerIconTemplate || ctx.dropdownIconTemplate);
+            i0.ɵɵproperty("ngIf", ctx.triggericonTemplate || ctx.dropdowniconTemplate);
             i0.ɵɵadvance();
             i0.ɵɵtwoWayProperty("visible", ctx.overlayVisible);
             i0.ɵɵproperty("options", ctx.overlayOptions)("target", "@parent")("appendTo", ctx.appendTo)("showTransitionOptions", ctx.showTransitionOptions)("hideTransitionOptions", ctx.hideTransitionOptions);
@@ -1351,15 +1351,15 @@ class TreeSelect extends BaseComponent {
                 </div>
             </div>
             <ng-container *ngIf="checkValue() && !disabled && showClear">
-                <TimesIcon *ngIf="!clearIconTemplate" [class]="'p-treeselect-clear-icon'" (click)="clear($event)" />
-                <span *ngIf="clearIconTemplate" class="p-treeselect-clear-icon" (click)="clear($event)">
-                    <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
+                <TimesIcon *ngIf="!cleariconTemplate" [class]="'p-treeselect-clear-icon'" (click)="clear($event)" />
+                <span *ngIf="cleariconTemplate" class="p-treeselect-clear-icon" (click)="clear($event)">
+                    <ng-template *ngTemplateOutlet="cleariconTemplate"></ng-template>
                 </span>
             </ng-container>
             <div class="p-treeselect-dropdown" role="button" aria-haspopup="tree" [attr.aria-expanded]="overlayVisible ?? false" [attr.aria-label]="'treeselect trigger'">
-                <ChevronDownIcon *ngIf="!triggerIconTemplate && !dropdownIconTemplate" [styleClass]="'p-treeselect-dropdown-icon'" />
-                <span *ngIf="triggerIconTemplate || dropdownIconTemplate" class="p-treeselect-dropdown-icon">
-                    <ng-template *ngTemplateOutlet="triggerIconTemplate || dropdownIconTemplate"></ng-template>
+                <ChevronDownIcon *ngIf="!triggericonTemplate && !dropdowniconTemplate" [styleClass]="'p-treeselect-dropdown-icon'" />
+                <span *ngIf="triggericonTemplate || dropdowniconTemplate" class="p-treeselect-dropdown-icon">
+                    <ng-template *ngTemplateOutlet="triggericonTemplate || dropdowniconTemplate"></ng-template>
                 </span>
             </div>
             <p-overlay
@@ -1420,14 +1420,14 @@ class TreeSelect extends BaseComponent {
                                         <ng-container *ngTemplateOutlet="emptyTemplate"></ng-container>
                                     </ng-template>
                                 </ng-container>
-                                <ng-template #togglericon let-expanded *ngIf="itemTogglerIconTemplate">
-                                    <ng-container *ngTemplateOutlet="itemTogglerIconTemplate; context: { $implicit: expanded }"></ng-container>
+                                <ng-template #togglericon let-expanded *ngIf="itemtogglericonTemplate">
+                                    <ng-container *ngTemplateOutlet="itemtogglericonTemplate; context: { $implicit: expanded }"></ng-container>
                                 </ng-template>
-                                <ng-template #checkboxicon let-selected let-partialSelected="partialSelected" *ngIf="itemCheckboxIconTemplate">
-                                    <ng-container *ngTemplateOutlet="itemCheckboxIconTemplate; context: { $implicit: selected, partialSelected: partialSelected }"></ng-container>
+                                <ng-template #checkboxicon let-selected let-partialSelected="partialSelected" *ngIf="itemcheckboxiconTemplate">
+                                    <ng-container *ngTemplateOutlet="itemcheckboxiconTemplate; context: { $implicit: selected, partialSelected: partialSelected }"></ng-container>
                                 </ng-template>
-                                <ng-template #loadingicon *ngIf="itemLoadingIconTemplate">
-                                    <ng-container *ngTemplateOutlet="itemLoadingIconTemplate"></ng-container>
+                                <ng-template #loadingicon *ngIf="itemloadingiconTemplate">
+                                    <ng-container *ngTemplateOutlet="itemloadingiconTemplate"></ng-container>
                                 </ng-template>
                             </p-tree>
                         </div>
@@ -1599,28 +1599,28 @@ class TreeSelect extends BaseComponent {
         }], footerTemplate: [{
             type: ContentChild,
             args: ['footer']
-        }], clearIconTemplate: [{
+        }], cleariconTemplate: [{
             type: ContentChild,
             args: ['clearicon']
-        }], triggerIconTemplate: [{
+        }], triggericonTemplate: [{
             type: ContentChild,
             args: ['triggericon']
-        }], dropdownIconTemplate: [{
+        }], dropdowniconTemplate: [{
             type: ContentChild,
             args: ['dropdownicon']
-        }], filterIconTemplate: [{
+        }], filtericonTemplate: [{
             type: ContentChild,
             args: ['filtericon']
-        }], closeIconTemplate: [{
+        }], closeiconTemplate: [{
             type: ContentChild,
             args: ['closeicon']
-        }], itemTogglerIconTemplate: [{
+        }], itemtogglericonTemplate: [{
             type: ContentChild,
             args: ['itemtogglericon']
-        }], itemCheckboxIconTemplate: [{
+        }], itemcheckboxiconTemplate: [{
             type: ContentChild,
             args: ['itemcheckboxicon']
-        }], itemLoadingIconTemplate: [{
+        }], itemloadingiconTemplate: [{
             type: ContentChild,
             args: ['itemloadingicon']
         }] }); })();