primeng 20.1.2 → 20.3.0-rc.1

package/fesm2022/primeng-cascadeselect.mjs

@@ -1,23 +1,26 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, signal, computed, effect, ContentChildren, HostListener, ContentChild, ViewChild, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, signal, computed, effect, ContentChildren, HostListener, ContentChild, ViewChild, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { resolveFieldData, isNotEmpty, equals, getOffset, getViewport, getHiddenElementOuterWidth, getOuterWidth, calculateScrollbarWidth, isPrintableCharacter, isEmpty, findSingle, findLastIndex, focus, uuid } from '@primeuix/utils';
 import * as i2 from 'primeng/api';
-import { TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
+import { SharedModule, TranslationKeys, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
 import { BaseEditableHolder } from 'primeng/baseeditableholder';
+import * as i3 from 'primeng/bind';
+import { Bind } from 'primeng/bind';
 import { Fluid } from 'primeng/fluid';
 import { AngleRightIcon, ChevronDownIcon, TimesIcon } from 'primeng/icons';
 import { Overlay } from 'primeng/overlay';
 import { Ripple } from 'primeng/ripple';
-import { style } from '@primeuix/styles/cascadeselect';
+import { style as style$1 } from '@primeuix/styles/cascadeselect';
 import { BaseStyle } from 'primeng/base';
+export * from 'primeng/types/cascadeselect';
 
-const theme = /*css*/ `
-    ${style}
+const style = /*css*/ `
+    ${style$1}
 
     /* For PrimeNG */
     .p-cascadeselect.ng-invalid.ng-dirty:not(.ng-untouched):not(.ng-pristine) {
@@ -86,13 +89,13 @@ const classes = {
 };
 class CascadeSelectStyle extends BaseStyle {
     name = 'cascadeselect';
-    theme = theme;
+    style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CascadeSelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CascadeSelectStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CascadeSelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CascadeSelectStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CascadeSelectStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CascadeSelectStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -164,6 +167,7 @@ var CascadeSelectClasses;
     CascadeSelectClasses["itemList"] = "p-cascadeselect-item-list";
 })(CascadeSelectClasses || (CascadeSelectClasses = {}));
 
+const CASCADESELECT_INSTANCE = new InjectionToken('CASCADESELECT_INSTANCE');
 const CASCADESELECT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => CascadeSelect),
@@ -171,7 +175,6 @@ const CASCADESELECT_VALUE_ACCESSOR = {
 };
 class CascadeSelectSub extends BaseComponent {
     cascadeselect;
-    role;
     selectId;
     activeOptionPath;
     optionDisabled;
@@ -190,15 +193,24 @@ class CascadeSelectSub extends BaseComponent {
     onFocusChange = new EventEmitter();
     onFocusEnterChange = new EventEmitter();
     _componentStyle = inject(CascadeSelectStyle);
-    get listLabel() {
-        return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];
-    }
     constructor(cascadeselect) {
         super();
         this.cascadeselect = cascadeselect;
     }
-    ngOnInit() {
-        super.ngOnInit();
+    getPTOptions(processedOption, index, key) {
+        return this.ptm(key, {
+            context: {
+                option: processedOption,
+                index,
+                level: this.level,
+                optionGroup: this.isOptionGroup(processedOption),
+                active: this.isOptionActive(processedOption),
+                focused: this.isOptionFocused(processedOption),
+                disabled: this.isOptionDisabled(processedOption)
+            }
+        });
+    }
+    onInit() {
         if (!this.root) {
             this.position();
         }
@@ -253,141 +265,139 @@ class CascadeSelectSub extends BaseComponent {
         const parentItem = this.el.nativeElement.parentElement;
         const containerOffset = getOffset(parentItem);
         const viewport = getViewport();
-        const sublistWidth = this.el.nativeElement.children[0].offsetParent ? this.el.nativeElement.children[0].offsetWidth : getHiddenElementOuterWidth(this.el.nativeElement.children[0]);
+        const sublistWidth = this.el.nativeElement.childNodes[0].offsetParent ? this.el.nativeElement.children[0].offsetWidth : getHiddenElementOuterWidth(this.el.nativeElement.children[0]);
         const itemOuterWidth = getOuterWidth(parentItem.children[0]);
         if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - calculateScrollbarWidth()) {
             this.el.nativeElement.children[0].style.left = '-200%';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CascadeSelectSub, deps: [{ token: CascadeSelect }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", type: CascadeSelectSub, isStandalone: true, selector: "p-cascadeSelectSub, p-cascadeselect-sub", inputs: { role: "role", selectId: "selectId", activeOptionPath: "activeOptionPath", optionDisabled: "optionDisabled", focusedOptionId: "focusedOptionId", options: "options", optionGroupChildren: "optionGroupChildren", optionTemplate: "optionTemplate", groupicon: "groupicon", level: ["level", "level", numberAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", dirty: ["dirty", "dirty", booleanAttribute], root: ["root", "root", booleanAttribute] }, outputs: { onChange: "onChange", onFocusChange: "onFocusChange", onFocusEnterChange: "onFocusEnterChange" }, providers: [CascadeSelectStyle], usesInheritance: true, ngImport: i0, template: `
-        <ul [class]="cx('list')" [attr.role]="role" aria-orientation="horizontal" [attr.data-pc-section]="level === 0 ? 'list' : 'sublist'" [attr.aria-label]="listLabel">
-            <ng-template ngFor let-processedOption [ngForOf]="options" let-i="index">
-                <li
-                    [class]="cx('option', { processedOption })"
-                    role="treeitem"
-                    [attr.aria-level]="level + 1"
-                    [attr.aria-setsize]="options.length"
-                    [attr.data-pc-section]="'item'"
-                    [id]="getOptionId(processedOption)"
-                    [attr.aria-label]="getOptionLabelToRender(processedOption)"
-                    [attr.aria-selected]="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
-                    [attr.aria-posinset]="i + 1"
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CascadeSelectSub, deps: [{ token: CascadeSelect }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: CascadeSelectSub, isStandalone: true, selector: "ul[pCascadeSelectSub]", inputs: { selectId: "selectId", activeOptionPath: "activeOptionPath", optionDisabled: "optionDisabled", focusedOptionId: "focusedOptionId", options: "options", optionGroupChildren: "optionGroupChildren", optionTemplate: "optionTemplate", groupicon: "groupicon", level: ["level", "level", numberAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", dirty: ["dirty", "dirty", booleanAttribute], root: ["root", "root", booleanAttribute] }, outputs: { onChange: "onChange", onFocusChange: "onFocusChange", onFocusEnterChange: "onFocusEnterChange" }, providers: [CascadeSelectStyle, { provide: PARENT_INSTANCE, useExisting: CascadeSelectSub }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template ngFor let-processedOption [ngForOf]="options" let-i="index">
+            <li
+                [class]="cx('option', { processedOption })"
+                role="treeitem"
+                [attr.aria-level]="level + 1"
+                [attr.aria-setsize]="options.length"
+                [pBind]="getPTOptions(processedOption, i, 'option')"
+                [id]="getOptionId(processedOption)"
+                [attr.aria-label]="getOptionLabelToRender(processedOption)"
+                [attr.aria-selected]="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
+                [attr.aria-posinset]="i + 1"
+            >
+                <div
+                    [class]="cx('optionContent')"
+                    (click)="onOptionClick($event, processedOption)"
+                    (mouseenter)="onOptionMouseEnter($event, processedOption)"
+                    (mousemove)="onOptionMouseMove($event, processedOption)"
+                    pRipple
+                    [pBind]="getPTOptions(processedOption, i, 'optionContent')"
                 >
-                    <div
-                        [class]="cx('optionContent')"
-                        (click)="onOptionClick($event, processedOption)"
-                        (mouseenter)="onOptionMouseEnter($event, processedOption)"
-                        (mousemove)="onOptionMouseMove($event, processedOption)"
-                        pRipple
-                        [attr.data-pc-section]="'content'"
-                    >
-                        <ng-container *ngIf="optionTemplate; else defaultOptionTemplate">
-                            <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: processedOption?.option }"></ng-container>
-                        </ng-container>
-                        <ng-template #defaultOptionTemplate>
-                            <span [class]="cx('optionText')" [attr.data-pc-section]="'text'">{{ getOptionLabelToRender(processedOption) }}</span>
-                        </ng-template>
-                        <span [class]="cx('groupIcon')" *ngIf="isOptionGroup(processedOption)" [attr.data-pc-section]="'groupIcon'">
-                            <svg data-p-icon="angle-right" *ngIf="!groupicon" />
-                            <ng-template *ngTemplateOutlet="groupicon"></ng-template>
-                        </span>
-                    </div>
-                    <p-cascadeselect-sub
-                        *ngIf="isOptionGroup(processedOption) && isOptionActive(processedOption)"
-                        [role]="'group'"
-                        [class]="cx('optionList')"
-                        [selectId]="selectId"
-                        [focusedOptionId]="focusedOptionId"
-                        [activeOptionPath]="activeOptionPath"
-                        [options]="getOptionGroupChildren(processedOption)"
-                        [optionLabel]="optionLabel"
-                        [optionValue]="optionValue"
-                        [level]="level + 1"
-                        (onChange)="onChange.emit($event)"
-                        (onFocusChange)="onFocusChange.emit($event)"
-                        (onFocusEnterChange)="onFocusEnterChange.emit($event)"
-                        [optionGroupLabel]="optionGroupLabel"
-                        [optionGroupChildren]="optionGroupChildren"
-                        [dirty]="dirty"
-                        [optionTemplate]="optionTemplate"
-                    >
-                    </p-cascadeselect-sub>
-                </li>
-            </ng-template>
-        </ul>
-    `, isInline: true, dependencies: [{ kind: "component", type: CascadeSelectSub, selector: "p-cascadeSelectSub, p-cascadeselect-sub", inputs: ["role", "selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupicon", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root"], outputs: ["onChange", "onFocusChange", "onFocusEnterChange"] }, { kind: "ngmodule", type: CommonModule }, { 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: Ripple, selector: "[pRipple]" }, { kind: "component", type: AngleRightIcon, selector: "[data-p-icon=\"angle-right\"]" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+                    <ng-container *ngIf="optionTemplate; else defaultOptionTemplate">
+                        <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: processedOption?.option, level: level }"></ng-container>
+                    </ng-container>
+                    <ng-template #defaultOptionTemplate>
+                        <span [class]="cx('optionText')" [pBind]="getPTOptions(processedOption, i, 'optionText')">{{ getOptionLabelToRender(processedOption) }}</span>
+                    </ng-template>
+                    <span [class]="cx('groupIcon')" *ngIf="isOptionGroup(processedOption)" [pBind]="getPTOptions(processedOption, i, 'groupIcon')">
+                        <svg data-p-icon="angle-right" *ngIf="!groupicon" [pBind]="getPTOptions(processedOption, index, 'groupIcon')" />
+                        <ng-template *ngTemplateOutlet="groupicon"></ng-template>
+                    </span>
+                </div>
+                <ul
+                    pCascadeSelectSub
+                    *ngIf="isOptionGroup(processedOption) && isOptionActive(processedOption)"
+                    [attrrole]="'group'"
+                    [class]="cx('optionList')"
+                    [selectId]="selectId"
+                    [focusedOptionId]="focusedOptionId"
+                    [activeOptionPath]="activeOptionPath"
+                    [options]="getOptionGroupChildren(processedOption)"
+                    [optionLabel]="optionLabel"
+                    [optionValue]="optionValue"
+                    [level]="level + 1"
+                    (onChange)="onChange.emit($event)"
+                    (onFocusChange)="onFocusChange.emit($event)"
+                    (onFocusEnterChange)="onFocusEnterChange.emit($event)"
+                    [optionGroupLabel]="optionGroupLabel"
+                    [optionGroupChildren]="optionGroupChildren"
+                    [dirty]="dirty"
+                    [optionTemplate]="optionTemplate"
+                    [pBind]="ptm('optionList')"
+                    [pt]="pt"
+                ></ul>
+            </li>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "component", type: CascadeSelectSub, selector: "ul[pCascadeSelectSub]", inputs: ["selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupicon", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root"], outputs: ["onChange", "onFocusChange", "onFocusEnterChange"] }, { kind: "ngmodule", type: CommonModule }, { 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: Ripple, selector: "[pRipple]" }, { kind: "component", type: AngleRightIcon, selector: "[data-p-icon=\"angle-right\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CascadeSelectSub, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CascadeSelectSub, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-cascadeSelectSub, p-cascadeselect-sub',
+                    selector: 'ul[pCascadeSelectSub]',
                     standalone: true,
-                    imports: [CommonModule, Ripple, AngleRightIcon, SharedModule],
+                    imports: [CommonModule, Ripple, AngleRightIcon, SharedModule, Bind],
                     template: `
-        <ul [class]="cx('list')" [attr.role]="role" aria-orientation="horizontal" [attr.data-pc-section]="level === 0 ? 'list' : 'sublist'" [attr.aria-label]="listLabel">
-            <ng-template ngFor let-processedOption [ngForOf]="options" let-i="index">
-                <li
-                    [class]="cx('option', { processedOption })"
-                    role="treeitem"
-                    [attr.aria-level]="level + 1"
-                    [attr.aria-setsize]="options.length"
-                    [attr.data-pc-section]="'item'"
-                    [id]="getOptionId(processedOption)"
-                    [attr.aria-label]="getOptionLabelToRender(processedOption)"
-                    [attr.aria-selected]="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
-                    [attr.aria-posinset]="i + 1"
+        <ng-template ngFor let-processedOption [ngForOf]="options" let-i="index">
+            <li
+                [class]="cx('option', { processedOption })"
+                role="treeitem"
+                [attr.aria-level]="level + 1"
+                [attr.aria-setsize]="options.length"
+                [pBind]="getPTOptions(processedOption, i, 'option')"
+                [id]="getOptionId(processedOption)"
+                [attr.aria-label]="getOptionLabelToRender(processedOption)"
+                [attr.aria-selected]="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
+                [attr.aria-posinset]="i + 1"
+            >
+                <div
+                    [class]="cx('optionContent')"
+                    (click)="onOptionClick($event, processedOption)"
+                    (mouseenter)="onOptionMouseEnter($event, processedOption)"
+                    (mousemove)="onOptionMouseMove($event, processedOption)"
+                    pRipple
+                    [pBind]="getPTOptions(processedOption, i, 'optionContent')"
                 >
-                    <div
-                        [class]="cx('optionContent')"
-                        (click)="onOptionClick($event, processedOption)"
-                        (mouseenter)="onOptionMouseEnter($event, processedOption)"
-                        (mousemove)="onOptionMouseMove($event, processedOption)"
-                        pRipple
-                        [attr.data-pc-section]="'content'"
-                    >
-                        <ng-container *ngIf="optionTemplate; else defaultOptionTemplate">
-                            <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: processedOption?.option }"></ng-container>
-                        </ng-container>
-                        <ng-template #defaultOptionTemplate>
-                            <span [class]="cx('optionText')" [attr.data-pc-section]="'text'">{{ getOptionLabelToRender(processedOption) }}</span>
-                        </ng-template>
-                        <span [class]="cx('groupIcon')" *ngIf="isOptionGroup(processedOption)" [attr.data-pc-section]="'groupIcon'">
-                            <svg data-p-icon="angle-right" *ngIf="!groupicon" />
-                            <ng-template *ngTemplateOutlet="groupicon"></ng-template>
-                        </span>
-                    </div>
-                    <p-cascadeselect-sub
-                        *ngIf="isOptionGroup(processedOption) && isOptionActive(processedOption)"
-                        [role]="'group'"
-                        [class]="cx('optionList')"
-                        [selectId]="selectId"
-                        [focusedOptionId]="focusedOptionId"
-                        [activeOptionPath]="activeOptionPath"
-                        [options]="getOptionGroupChildren(processedOption)"
-                        [optionLabel]="optionLabel"
-                        [optionValue]="optionValue"
-                        [level]="level + 1"
-                        (onChange)="onChange.emit($event)"
-                        (onFocusChange)="onFocusChange.emit($event)"
-                        (onFocusEnterChange)="onFocusEnterChange.emit($event)"
-                        [optionGroupLabel]="optionGroupLabel"
-                        [optionGroupChildren]="optionGroupChildren"
-                        [dirty]="dirty"
-                        [optionTemplate]="optionTemplate"
-                    >
-                    </p-cascadeselect-sub>
-                </li>
-            </ng-template>
-        </ul>
+                    <ng-container *ngIf="optionTemplate; else defaultOptionTemplate">
+                        <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: processedOption?.option, level: level }"></ng-container>
+                    </ng-container>
+                    <ng-template #defaultOptionTemplate>
+                        <span [class]="cx('optionText')" [pBind]="getPTOptions(processedOption, i, 'optionText')">{{ getOptionLabelToRender(processedOption) }}</span>
+                    </ng-template>
+                    <span [class]="cx('groupIcon')" *ngIf="isOptionGroup(processedOption)" [pBind]="getPTOptions(processedOption, i, 'groupIcon')">
+                        <svg data-p-icon="angle-right" *ngIf="!groupicon" [pBind]="getPTOptions(processedOption, index, 'groupIcon')" />
+                        <ng-template *ngTemplateOutlet="groupicon"></ng-template>
+                    </span>
+                </div>
+                <ul
+                    pCascadeSelectSub
+                    *ngIf="isOptionGroup(processedOption) && isOptionActive(processedOption)"
+                    [attrrole]="'group'"
+                    [class]="cx('optionList')"
+                    [selectId]="selectId"
+                    [focusedOptionId]="focusedOptionId"
+                    [activeOptionPath]="activeOptionPath"
+                    [options]="getOptionGroupChildren(processedOption)"
+                    [optionLabel]="optionLabel"
+                    [optionValue]="optionValue"
+                    [level]="level + 1"
+                    (onChange)="onChange.emit($event)"
+                    (onFocusChange)="onFocusChange.emit($event)"
+                    (onFocusEnterChange)="onFocusEnterChange.emit($event)"
+                    [optionGroupLabel]="optionGroupLabel"
+                    [optionGroupChildren]="optionGroupChildren"
+                    [dirty]="dirty"
+                    [optionTemplate]="optionTemplate"
+                    [pBind]="ptm('optionList')"
+                    [pt]="pt"
+                ></ul>
+            </li>
+        </ng-template>
     `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [CascadeSelectStyle]
+                    providers: [CascadeSelectStyle, { provide: PARENT_INSTANCE, useExisting: CascadeSelectSub }]
                 }]
-        }], ctorParameters: () => [{ type: CascadeSelect }], propDecorators: { role: [{
-                type: Input
-            }], selectId: [{
+        }], ctorParameters: () => [{ type: CascadeSelect }], propDecorators: { selectId: [{
                 type: Input
             }], activeOptionPath: [{
                 type: Input
@@ -431,6 +441,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  */
 class CascadeSelect extends BaseEditableHolder {
     overlayService;
+    $pcCascadeSelect = inject(CASCADESELECT_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
     /**
      * Unique identifier of the component
      * @group Props
@@ -750,6 +765,9 @@ class CascadeSelect extends BaseEditableHolder {
     onHostClick(event) {
         this.onContainerClick(event);
     }
+    get listLabel() {
+        return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];
+    }
     get focusedOptionId() {
         return this.focusedOptionInfo().index !== -1 ? `${this.id}${isNotEmpty(this.focusedOptionInfo().parentKey) ? '_' + this.focusedOptionInfo().parentKey : ''}_${this.focusedOptionInfo().index}` : null;
     }
@@ -772,7 +790,7 @@ class CascadeSelect extends BaseEditableHolder {
         return this.emptySelectionMessage || this.config.translation.emptySelectionMessage || '';
     }
     get selectedMessageText() {
-        return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
+        return this.hasSelectedOption() ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
     }
     visibleOptions = computed(() => {
         const processedOption = this.activeOptionPath().find((p) => p.key === this.focusedOptionInfo().parentKey);
@@ -797,7 +815,7 @@ class CascadeSelect extends BaseEditableHolder {
         return label;
     }
     templates;
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this.templates.forEach((item) => {
             switch (item.getType()) {
                 case 'value':
@@ -806,6 +824,12 @@ class CascadeSelect extends BaseEditableHolder {
                 case 'option':
                     this._optionTemplate = item.template;
                     break;
+                case 'header':
+                    this._headerTemplate = item.template;
+                    break;
+                case 'footer':
+                    this._footerTemplate = item.template;
+                    break;
                 case 'triggericon':
                     this._triggerIconTemplate = item.template;
                     break;
@@ -821,8 +845,7 @@ class CascadeSelect extends BaseEditableHolder {
             }
         });
     }
-    ngOnChanges(changes) {
-        super.ngOnChanges(changes);
+    onChanges(changes) {
         if (changes.options) {
             this.processedOptions = this.createProcessedOptions(changes.options.currentValue || []);
             this.updateModel(null);
@@ -1030,7 +1053,7 @@ class CascadeSelect extends BaseEditableHolder {
         event.stopPropagation();
     }
     equalityKey() {
-        return this.optionValue ? null : this.dataKey;
+        return this.optionValue ? undefined : this.dataKey;
     }
     updateModel(value, event) {
         this.value = value;
@@ -1104,7 +1127,7 @@ class CascadeSelect extends BaseEditableHolder {
         this.clicked = true;
     }
     isOptionMatched(processedOption) {
-        return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption).toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));
+        return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption).toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue?.toLocaleLowerCase(this.searchLocale));
     }
     isOptionDisabled(option) {
         return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
@@ -1208,7 +1231,7 @@ class CascadeSelect extends BaseEditableHolder {
             this.clicked = false;
             this.activeOptionPath.set([]);
             this.focusedOptionInfo.set({ index: -1, level: 0, parentKey: '' });
-            isFocus && focus(this.focusInputViewChild.nativeElement);
+            isFocus && focus(this.focusInputViewChild?.nativeElement);
             this.onHide.emit(event);
             this.cd.markForCheck();
         };
@@ -1234,14 +1257,14 @@ class CascadeSelect extends BaseEditableHolder {
             focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex(), level: 0, parentKey: '' };
         }
         this.focusedOptionInfo.set(focusedOptionInfo);
-        isFocus && focus(this.focusInputViewChild.nativeElement);
+        isFocus && focus(this.focusInputViewChild?.nativeElement);
     }
     clear(event) {
         if (isNotEmpty(this.modelValue()) && this.showClear) {
             this.updateModel(null);
             this.focusedOptionInfo.set({ index: -1, level: 0, parentKey: '' });
             this.activeOptionPath.set([]);
-            this.onClear.emit();
+            this.onClear.emit(event);
         }
         event && event.stopPropagation();
     }
@@ -1255,10 +1278,10 @@ class CascadeSelect extends BaseEditableHolder {
         return this.optionGroupLabel ? resolveFieldData(optionGroup, this.optionGroupLabel) : null;
     }
     getOptionGroupChildren(optionGroup, level) {
-        return resolveFieldData(optionGroup, this.optionGroupChildren[level]);
+        return resolveFieldData(optionGroup, this.optionGroupChildren?.[level]);
     }
     isOptionGroup(option, level) {
-        return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]);
+        return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren?.[level]);
     }
     isProccessedOptionGroup(processedOption) {
         return isNotEmpty(processedOption?.children);
@@ -1273,7 +1296,7 @@ class CascadeSelect extends BaseEditableHolder {
         effect(() => {
             const activeOptionPath = this.activeOptionPath();
             if (isNotEmpty(activeOptionPath)) {
-                this.overlayViewChild.alignOverlay();
+                this.overlayViewChild?.alignOverlay();
             }
         });
     }
@@ -1321,7 +1344,7 @@ class CascadeSelect extends BaseEditableHolder {
                 }
             }
         }
-        isFocus && focus(this.focusInputViewChild.nativeElement);
+        isFocus && focus(this.focusInputViewChild?.nativeElement);
     }
     onOptionMouseEnter(event) {
         if (this.focusOnHover) {
@@ -1338,14 +1361,12 @@ class CascadeSelect extends BaseEditableHolder {
             this.changeFocusedOptionIndex(event, event.processedOption.index);
         }
     }
-    ngOnInit() {
-        super.ngOnInit();
+    onInit() {
         this.id = this.id || uuid('pn_id_');
         this.autoUpdateModel();
         this.bindMatchMediaListener();
     }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
+    onAfterViewInit() {
         this.initialized = true;
     }
     bindMatchMediaListener() {
@@ -1387,14 +1408,14 @@ class CascadeSelect extends BaseEditableHolder {
         setModelValue(value);
         this.cd.markForCheck();
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.matchMediaListener) {
             this.unbindMatchMediaListener();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CascadeSelect, deps: [{ token: i2.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: CascadeSelect, isStandalone: true, selector: "p-cascadeSelect, p-cascadeselect, p-cascade-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, searchMessage: { classPropertyName: "searchMessage", publicName: "searchMessage", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, selectionMessage: { classPropertyName: "selectionMessage", publicName: "selectionMessage", isSignal: false, isRequired: false, transformFunction: null }, emptySearchMessage: { classPropertyName: "emptySearchMessage", publicName: "emptySearchMessage", isSignal: false, isRequired: false, transformFunction: null }, emptySelectionMessage: { classPropertyName: "emptySelectionMessage", publicName: "emptySelectionMessage", isSignal: false, isRequired: false, transformFunction: null }, searchLocale: { classPropertyName: "searchLocale", publicName: "searchLocale", isSignal: false, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: false, isRequired: false, transformFunction: null }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: false, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: false, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onClear: "onClear", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide", onFocus: "onFocus", onBlur: "onBlur" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')", "attr.data-pc-name": "'cascadeselect'", "attr.data-pc-section": "'root'" } }, providers: [CASCADESELECT_VALUE_ACCESSOR, CascadeSelectStyle], queries: [{ propertyName: "valueTemplate", first: true, predicate: ["value"] }, { propertyName: "optionTemplate", first: true, predicate: ["option"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "triggerIconTemplate", first: true, predicate: ["triggericon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "groupIconTemplate", first: true, predicate: ["optiongroupicon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "panelViewChild", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <div class="p-hidden-accessible" [attr.data-pc-section]="'hiddenInputWrapper'">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CascadeSelect, deps: [{ token: i2.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: CascadeSelect, isStandalone: true, selector: "p-cascadeSelect, p-cascadeselect, p-cascade-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, searchMessage: { classPropertyName: "searchMessage", publicName: "searchMessage", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, selectionMessage: { classPropertyName: "selectionMessage", publicName: "selectionMessage", isSignal: false, isRequired: false, transformFunction: null }, emptySearchMessage: { classPropertyName: "emptySearchMessage", publicName: "emptySearchMessage", isSignal: false, isRequired: false, transformFunction: null }, emptySelectionMessage: { classPropertyName: "emptySelectionMessage", publicName: "emptySelectionMessage", isSignal: false, isRequired: false, transformFunction: null }, searchLocale: { classPropertyName: "searchLocale", publicName: "searchLocale", isSignal: false, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: false, isRequired: false, transformFunction: null }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: false, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: false, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onClear: "onClear", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide", onFocus: "onFocus", onBlur: "onBlur" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [CASCADESELECT_VALUE_ACCESSOR, CascadeSelectStyle, { provide: PARENT_INSTANCE, useExisting: CascadeSelect }, { provide: CASCADESELECT_INSTANCE, useExisting: CascadeSelect }], queries: [{ propertyName: "valueTemplate", first: true, predicate: ["value"] }, { propertyName: "optionTemplate", first: true, predicate: ["option"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "triggerIconTemplate", first: true, predicate: ["triggericon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "groupIconTemplate", first: true, predicate: ["optiongroupicon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "panelViewChild", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i3.Bind }], ngImport: i0, template: `
+        <div class="p-hidden-accessible" [pBind]="ptm('hiddenInputWrapper')">
             <input
                 #focusInput
                 readonly
@@ -1416,9 +1437,10 @@ class CascadeSelect extends BaseEditableHolder {
                 (blur)="onInputBlur($event)"
                 (keydown)="onInputKeyDown($event)"
                 [pAutoFocus]="autofocus"
+                [pBind]="ptm('hiddenInput')"
             />
         </div>
-        <span [class]="cx('label')" [attr.data-pc-section]="'label'">
+        <span [class]="cx('label')" [pBind]="ptm('label')">
             <ng-container *ngIf="valueTemplate || _valueTemplate; else defaultValueTemplate">
                 <ng-container *ngTemplateOutlet="valueTemplate || _valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
             </ng-container>
@@ -1428,35 +1450,35 @@ class CascadeSelect extends BaseEditableHolder {
         </span>
 
         <ng-container *ngIf="$filled() && !$disabled() && showClear">
-            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
-            <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
+            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [pBind]="ptm('clearIcon')" [attr.aria-hidden]="true" />
+            <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [pBind]="ptm('clearIcon')" [attr.aria-hidden]="true">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
         </ng-container>
 
-        <div [class]="cx('dropdown')" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'dropdownIcon'" [attr.aria-hidden]="true">
+        <div [class]="cx('dropdown')" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [pBind]="ptm('dropdown')" [attr.aria-hidden]="true">
             <ng-container *ngIf="loading; else elseBlock">
                 <ng-container *ngIf="loadingIconTemplate || _loadingIconTemplate">
                     <ng-container *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-container>
                 </ng-container>
                 <ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
-                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon + 'pi-spin')" aria-hidden="true"></span>
-                    <span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon + ' pi pi-spinner pi-spin')" aria-hidden="true"></span>
+                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon + 'pi-spin')" aria-hidden="true" [pBind]="ptm('loadingIcon')"></span>
+                    <span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon + ' pi pi-spinner pi-spin')" aria-hidden="true" [pBind]="ptm('loadingIcon')"></span>
                 </ng-container>
             </ng-container>
             <ng-template #elseBlock>
-                <svg data-p-icon="chevron-down" *ngIf="!triggerIconTemplate && !_triggerIconTemplate" [class]="cx('dropdownIcon')" />
-                <span *ngIf="triggerIconTemplate || _triggerIconTemplate" [class]="cx('dropdownIcon')">
+                <svg data-p-icon="chevron-down" *ngIf="!triggerIconTemplate && !_triggerIconTemplate" [class]="cx('dropdownIcon')" [pBind]="ptm('dropdownIcon')" />
+                <span *ngIf="triggerIconTemplate || _triggerIconTemplate" [class]="cx('dropdownIcon')" [pBind]="ptm('dropdownIcon')">
                     <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate"></ng-template>
                 </span>
             </ng-template>
         </div>
-        <span role="status" aria-live="polite" class="p-hidden-accessible">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" [pBind]="ptm('hiddenSearchResult')">
             {{ searchResultMessageText }}
         </span>
         <p-overlay
             #overlay
-            [hostAttrSelector]="attrSelector"
+            [hostAttrSelector]="$attrSelector"
             [(visible)]="overlayVisible"
             [options]="overlayOptions"
             [target]="'@parent'"
@@ -1466,12 +1488,15 @@ class CascadeSelect extends BaseEditableHolder {
             (onShow)="show($event)"
             (onBeforeHide)="onBeforeHide.emit($event)"
             (onHide)="hide($event)"
+            [pt]="ptm('pcOverlay')"
         >
             <ng-template #content>
-                <div #panel [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle" [attr.data-pc-section]="'panel'">
+                <div #panel [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle" [pBind]="ptm('overlay')">
                     <ng-template *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-template>
-                    <div [class]="cx('listContainer')" [attr.data-pc-section]="'wrapper'">
-                        <p-cascadeselect-sub
+                    <div [class]="cx('listContainer')" [pBind]="ptm('listContainer')">
+                        <ul
+                            pCascadeSelectSub
+                            [class]="cx('list')"
                             [options]="processedOptions"
                             [selectId]="id"
                             [focusedOptionId]="focused ? focusedOptionId : undefined"
@@ -1489,27 +1514,30 @@ class CascadeSelect extends BaseEditableHolder {
                             (onFocusChange)="onOptionMouseMove($event)"
                             (onFocusEnterChange)="onOptionMouseEnter($event)"
                             [dirty]="dirty"
-                            [role]="'tree'"
-                        >
-                        </p-cascadeselect-sub>
+                            [attr.role]="'tree'"
+                            [attr.aria-orientation]="'horizontal'"
+                            [pBind]="ptm('list')"
+                            [attr.aria-label]="listlabel"
+                            [pt]="pt"
+                        ></ul>
                     </div>
-                    <span role="status" aria-live="polite" class="p-hidden-accessible">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" [pBind]="ptm('selectedMessageText')">
                         {{ selectedMessageText }}
                     </span>
                     <ng-template *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-template>
                 </div>
             </ng-template>
         </p-overlay>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: CascadeSelectSub, selector: "p-cascadeSelectSub, p-cascadeselect-sub", inputs: ["role", "selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupicon", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root"], outputs: ["onChange", "onFocusChange", "onFocusEnterChange"] }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: Overlay, selector: "p-overlay", inputs: ["hostName", "visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: CascadeSelectSub, selector: "ul[pCascadeSelectSub]", inputs: ["selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupicon", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root"], outputs: ["onChange", "onFocusChange", "onFocusEnterChange"] }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CascadeSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CascadeSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-cascadeSelect, p-cascadeselect, p-cascade-select',
                     standalone: true,
-                    imports: [CommonModule, Overlay, AutoFocus, CascadeSelectSub, ChevronDownIcon, TimesIcon, SharedModule],
+                    imports: [CommonModule, Overlay, AutoFocus, CascadeSelectSub, ChevronDownIcon, TimesIcon, SharedModule, Bind],
                     template: `
-        <div class="p-hidden-accessible" [attr.data-pc-section]="'hiddenInputWrapper'">
+        <div class="p-hidden-accessible" [pBind]="ptm('hiddenInputWrapper')">
             <input
                 #focusInput
                 readonly
@@ -1531,9 +1559,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 (blur)="onInputBlur($event)"
                 (keydown)="onInputKeyDown($event)"
                 [pAutoFocus]="autofocus"
+                [pBind]="ptm('hiddenInput')"
             />
         </div>
-        <span [class]="cx('label')" [attr.data-pc-section]="'label'">
+        <span [class]="cx('label')" [pBind]="ptm('label')">
             <ng-container *ngIf="valueTemplate || _valueTemplate; else defaultValueTemplate">
                 <ng-container *ngTemplateOutlet="valueTemplate || _valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
             </ng-container>
@@ -1543,35 +1572,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         </span>
 
         <ng-container *ngIf="$filled() && !$disabled() && showClear">
-            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
-            <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
+            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [pBind]="ptm('clearIcon')" [attr.aria-hidden]="true" />
+            <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [pBind]="ptm('clearIcon')" [attr.aria-hidden]="true">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
         </ng-container>
 
-        <div [class]="cx('dropdown')" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'dropdownIcon'" [attr.aria-hidden]="true">
+        <div [class]="cx('dropdown')" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [pBind]="ptm('dropdown')" [attr.aria-hidden]="true">
             <ng-container *ngIf="loading; else elseBlock">
                 <ng-container *ngIf="loadingIconTemplate || _loadingIconTemplate">
                     <ng-container *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-container>
                 </ng-container>
                 <ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
-                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon + 'pi-spin')" aria-hidden="true"></span>
-                    <span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon + ' pi pi-spinner pi-spin')" aria-hidden="true"></span>
+                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon + 'pi-spin')" aria-hidden="true" [pBind]="ptm('loadingIcon')"></span>
+                    <span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), loadingIcon + ' pi pi-spinner pi-spin')" aria-hidden="true" [pBind]="ptm('loadingIcon')"></span>
                 </ng-container>
             </ng-container>
             <ng-template #elseBlock>
-                <svg data-p-icon="chevron-down" *ngIf="!triggerIconTemplate && !_triggerIconTemplate" [class]="cx('dropdownIcon')" />
-                <span *ngIf="triggerIconTemplate || _triggerIconTemplate" [class]="cx('dropdownIcon')">
+                <svg data-p-icon="chevron-down" *ngIf="!triggerIconTemplate && !_triggerIconTemplate" [class]="cx('dropdownIcon')" [pBind]="ptm('dropdownIcon')" />
+                <span *ngIf="triggerIconTemplate || _triggerIconTemplate" [class]="cx('dropdownIcon')" [pBind]="ptm('dropdownIcon')">
                     <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate"></ng-template>
                 </span>
             </ng-template>
         </div>
-        <span role="status" aria-live="polite" class="p-hidden-accessible">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" [pBind]="ptm('hiddenSearchResult')">
             {{ searchResultMessageText }}
         </span>
         <p-overlay
             #overlay
-            [hostAttrSelector]="attrSelector"
+            [hostAttrSelector]="$attrSelector"
             [(visible)]="overlayVisible"
             [options]="overlayOptions"
             [target]="'@parent'"
@@ -1581,12 +1610,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             (onShow)="show($event)"
             (onBeforeHide)="onBeforeHide.emit($event)"
             (onHide)="hide($event)"
+            [pt]="ptm('pcOverlay')"
         >
             <ng-template #content>
-                <div #panel [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle" [attr.data-pc-section]="'panel'">
+                <div #panel [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle" [pBind]="ptm('overlay')">
                     <ng-template *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-template>
-                    <div [class]="cx('listContainer')" [attr.data-pc-section]="'wrapper'">
-                        <p-cascadeselect-sub
+                    <div [class]="cx('listContainer')" [pBind]="ptm('listContainer')">
+                        <ul
+                            pCascadeSelectSub
+                            [class]="cx('list')"
                             [options]="processedOptions"
                             [selectId]="id"
                             [focusedOptionId]="focused ? focusedOptionId : undefined"
@@ -1604,11 +1636,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             (onFocusChange)="onOptionMouseMove($event)"
                             (onFocusEnterChange)="onOptionMouseEnter($event)"
                             [dirty]="dirty"
-                            [role]="'tree'"
-                        >
-                        </p-cascadeselect-sub>
+                            [attr.role]="'tree'"
+                            [attr.aria-orientation]="'horizontal'"
+                            [pBind]="ptm('list')"
+                            [attr.aria-label]="listlabel"
+                            [pt]="pt"
+                        ></ul>
                     </div>
-                    <span role="status" aria-live="polite" class="p-hidden-accessible">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" [pBind]="ptm('selectedMessageText')">
                         {{ selectedMessageText }}
                     </span>
                     <ng-template *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-template>
@@ -1616,15 +1651,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             </ng-template>
         </p-overlay>
     `,
-                    providers: [CASCADESELECT_VALUE_ACCESSOR, CascadeSelectStyle],
+                    providers: [CASCADESELECT_VALUE_ACCESSOR, CascadeSelectStyle, { provide: PARENT_INSTANCE, useExisting: CascadeSelect }, { provide: CASCADESELECT_INSTANCE, useExisting: CascadeSelect }],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         '[class]': "cn(cx('root'), styleClass)",
-                        '[style]': "sx('root')",
-                        '[attr.data-pc-name]': "'cascadeselect'",
-                        '[attr.data-pc-section]': "'root'"
-                    }
+                        '[style]': "sx('root')"
+                    },
+                    hostDirectives: [Bind]
                 }]
         }], ctorParameters: () => [{ type: i2.OverlayService }], propDecorators: { id: [{
                 type: Input
@@ -1758,11 +1792,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class CascadeSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CascadeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: CascadeSelectModule, imports: [CascadeSelect, SharedModule], exports: [CascadeSelect, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CascadeSelectModule, imports: [CascadeSelect, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CascadeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: CascadeSelectModule, imports: [CascadeSelect, SharedModule], exports: [CascadeSelect, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CascadeSelectModule, imports: [CascadeSelect, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CascadeSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CascadeSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CascadeSelect, SharedModule],