primeng 19.1.2 → 20.0.0-beta.1

package/fesm2022/primeng-cascadeselect.mjs

@@ -1,297 +1,64 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, booleanAttribute, numberAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, inject, computed, effect, ContentChildren, ContentChild, ViewChild, NgModule } 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 { 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 { AutoFocus } from 'primeng/autofocus';
 import { BaseComponent } from 'primeng/basecomponent';
+import { BaseEditableHolder } from 'primeng/baseeditableholder';
+import { Fluid } from 'primeng/fluid';
 import { AngleRightIcon, ChevronDownIcon, TimesIcon } from 'primeng/icons';
 import { Overlay } from 'primeng/overlay';
 import { Ripple } from 'primeng/ripple';
+import { css, dt } from '@primeuix/styled';
+import { style } from '@primeuix/styles/cascadeselect';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-cascadeselect {
-    display: inline-flex;
-    cursor: pointer;
-    position: relative;
-    user-select: none;
-    background: ${dt('cascadeselect.background')};
-    border: 1px solid ${dt('cascadeselect.border.color')};
-    transition: background ${dt('cascadeselect.transition.duration')}, color ${dt('cascadeselect.transition.duration')}, border-color ${dt('cascadeselect.transition.duration')}, outline-color ${dt('cascadeselect.transition.duration')}, box-shadow ${dt('cascadeselect.transition.duration')};
-    border-radius: ${dt('cascadeselect.border.radius')};
-    outline-color: transparent;
-    box-shadow: ${dt('cascadeselect.shadow')};
-}
-
-p-cascadeSelect.ng-invalid.ng-dirty .p-cascadeselect,
-p-cascade-select.ng-invalid.ng-dirty .p-cascadeselect,
-p-cascadeselect.ng-invalid.ng-dirty .p-cascadeselect {
-    border-color: ${dt('cascadeselect.invalid.border.color')};
-}
-
-p-cascadeSelect.ng-invalid.ng-dirty .p-cascadeselect.p-focus,
-p-cascade-select.ng-invalid.ng-dirty .p-cascadeselect.p-focus,
-p-cascadeselect.ng-invalid.ng-dirty .p-cascadeselect.p-focus {
-    border-color: ${dt('cascadeselect.focus.border.color')};
-}
-
-.p-cascadeselect:not(.p-disabled):hover {
-    border-color: ${dt('cascadeselect.hover.border.color')};
-}
-
-.p-cascadeselect:not(.p-disabled).p-focus {
-    border-color: ${dt('cascadeselect.focus.border.color')};
-    box-shadow: ${dt('cascadeselect.focus.ring.shadow')};
-    outline: ${dt('cascadeselect.focus.ring.width')} ${dt('cascadeselect.focus.ring.style')} ${dt('cascadeselect.focus.ring.color')};
-    outline-offset: ${dt('multiscascadeselectelect.focus.ring.offset')};
-}
-
-.p-cascadeselect.p-variant-filled {
-    background: ${dt('cascadeselect.filled.background')};
-}
-
-.p-cascadeselect.p-variant-filled:not(.p-disabled):hover {
-    background: ${dt('cascadeselect.filled.hover.background')};
-}
-
-.p-cascadeselect.p-variant-filled.p-focus {
-    background: ${dt('cascadeselect.filled.focus.background')};
-}
-
-.p-cascadeselect.p-disabled {
-    opacity: 1;
-    background: ${dt('cascadeselect.disabled.background')};
-}
-
-.p-cascadeselect-dropdown {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    background: transparent;
-    color: ${dt('cascadeselect.dropdown.color')};
-    width: ${dt('cascadeselect.dropdown.width')};
-    border-start-end-radius: ${dt('border.radius.md')};
-    border-end-end-radius: ${dt('border.radius.md')};
-}
-
-.p-cascadeselect-label {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    flex: 1 1 auto;
-    width: 1%;
-    text-overflow: ellipsis;
-    cursor: pointer;
-    padding: ${dt('cascadeselect.padding.y')} ${dt('cascadeselect.padding.x')};
-    background: transparent;
-    border: 0 none;
-    outline: 0 none;
-}
-
-.p-cascadeselect-label.p-placeholder {
-    color: ${dt('cascadeselect.placeholder.color')};
-}
-
-p-cascadeselect.ng-invalid.ng-dirty .p-cascadeselect-label.p-placeholder {
-    color: ${dt('cascadeselect.invalid.placeholder.color')};
-}
-
-.p-cascadeselect.p-disabled .p-cascadeselect-label {
-    color: ${dt('cascadeselect.disabled.color')};
-}
-
-.p-cascadeselect-label-empty {
-    overflow: hidden;
-    visibility: hidden;
-}
-
-.p-cascadeselect-fluid {
-    display: flex;
-}
-
-.p-cascadeselect-fluid .p-cascadeselect-label {
-    width: 1%;
-}
-
-.p-cascadeselect-overlay {
-    background: ${dt('cascadeselect.overlay.background')};
-    color: ${dt('cascadeselect.overlay.color')};
-    border: 1px solid ${dt('cascadeselect.overlay.border.color')};
-    border-radius: ${dt('cascadeselect.overlay.border.radius')};
-    box-shadow: ${dt('cascadeselect.overlay.shadow')};
-}
+const theme = css `
+    ${style}
 
-.p-cascadeselect .p-cascadeselect-overlay {
-    min-width: 100%;
-}
-
-.p-cascadeselect-option-list {
-    display: none;
-    min-width: 100%;
-    position: absolute;
-    z-index: 1;
-}
-
-.p-cascadeselect-list {
-    min-width: 100%;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    padding: ${dt('cascadeselect.list.padding')};
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('cascadeselect.list.gap')}
-}
-
-.p-cascadeselect-option {
-    cursor: pointer;
-    font-weight: normal;
-    white-space: nowrap;
-    border: 0 none;
-    color: ${dt('cascadeselect.option.color')};
-    background: transparent;
-    transition: background ${dt('cascadeselect.transition.duration')}, color ${dt('cascadeselect.transition.duration')}, border-color ${dt('cascadeselect.transition.duration')}, box-shadow ${dt('cascadeselect.transition.duration')}, outline-color ${dt('cascadeselect.transition.duration')};
-    border-radius: ${dt('cascadeselect.option.border.radius')};
-}
-
-.p-cascadeselect-option-active {
-    overflow: visible;
-}
-
-.p-cascadeselect-option-active > .p-cascadeselect-option-content {
-    background: ${dt('cascadeselect.option.focus.background')};
-    color: ${dt('cascadeselect.option.focus.color')};
-}
-
-.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content {
-    background: ${dt('cascadeselect.option.focus.background')};
-    color: ${dt('cascadeselect.option.focus.color')};
-}
-
-.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content > .p-cascadeselect-group-icon-container > .p-cascadeselect-group-icon {
-    color: ${dt('cascadeselect.option.icon.focus.color')};
-}
-
-.p-cascadeselect-option-selected > .p-cascadeselect-option-content {
-    background: ${dt('cascadeselect.option.selected.background')};
-    color: ${dt('cascadeselect.option.selected.color')};
-}
-
-.p-cascadeselect-option-selected.p-focus > .p-cascadeselect-option-content {
-    background: ${dt('cascadeselect.option.selected.focus.background')};
-    color: ${dt('cascadeselect.option.selected.focus.color')};
-}
-
-.p-cascadeselect-option-active > .p-cascadeselect-option-list {
-    inset-inline-start: 100%;
-    top: 0;
-}
-
-.p-cascadeselect-option-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    overflow: hidden;
-    position: relative;
-    padding: ${dt('cascadeselect.option.padding')};
-    border-radius: ${dt('cascadeselect.option.border.radius')};
-    transition: background ${dt('cascadeselect.transition.duration')}, color ${dt('cascadeselect.transition.duration')}, border-color ${dt('cascadeselect.transition.duration')}, box-shadow ${dt('cascadeselect.transition.duration')}, outline-color ${dt('cascadeselect.transition.duration')};
-}
-
-.p-cascadeselect-group-icon {
-    font-size: ${dt('cascadeselect.option.icon.size')};
-    width: ${dt('cascadeselect.option.icon.size')};
-    height: ${dt('cascadeselect.option.icon.size')};
-    color: ${dt('cascadeselect.option.icon.color')};
-}
-
-.p-cascadeselect-group-icon:dir(rtl) {
-    transform: rotate(180deg);
-}
-
-.p-cascadeselect-mobile-active .p-cascadeselect-option-list {
-    position: static;
-    box-shadow: none;
-    border: 0 none;
-    padding-inline-start: 1rem;
-    padding-inline-end: 0;
-}
-
-.p-cascadeselect-mobile-active .p-cascadeselect-group-icon {
-    transition: transform 0.2s;
-    transform: rotate(90deg);
-}
-
-.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
-    transform: rotate(-90deg);
-}
-
-.p-cascadeselect-sm .p-cascadeselect-label {
-    font-size: ${dt('cascadeselect.sm.font.size')};
-    padding-block: ${dt('cascadeselect.sm.padding.y')};
-    padding-inline: ${dt('cascadeselect.sm.padding.x')};
-}
-
-.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon {
-    font-size: ${dt('cascadeselect.sm.font.size')};
-    width: ${dt('cascadeselect.sm.font.size')};
-    height: ${dt('cascadeselect.sm.font.size')};
-}
-
-.p-cascadeselect-lg .p-cascadeselect-label {
-    font-size: ${dt('cascadeselect.lg.font.size')};
-    padding-block: ${dt('cascadeselect.lg.padding.y')};
-    padding-inline: ${dt('cascadeselect.lg.padding.x')};
-}
-
-.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon {
-    font-size: ${dt('cascadeselect.lg.font.size')};
-    width: ${dt('cascadeselect.lg.font.size')};
-    height: ${dt('cascadeselect.lg.font.size')};
-}
+    /* For PrimeNG */
+    .p-cascadeselect.ng-invalid.ng-dirty:not(.ng-untouched):not(.ng-pristine) {
+        border-color: ${dt('cascadeselect.invalid.border.color')};
+    }
 
-/* For PrimeNG */
-.p-cascadeselect-clear-icon {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    background: transparent;
-    color: ${dt('cascadeselect.clear.icon.color')};
-}`;
+    .p-cascadeselect.ng-invalid.ng-dirty:not(.ng-untouched):not(.ng-pristine) .p-cascadeselect-label.p-placeholder {
+        color: ${dt('cascadeselect.invalid.placeholder.color')};
+    }
+`;
 const inlineStyles = {
-    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+    root: ({ instance }) => ({ position: instance.$appendTo() === 'self' ? 'relative' : undefined })
 };
 const classes = {
-    root: ({ instance, props }) => [
+    root: ({ instance }) => [
         'p-cascadeselect p-component p-inputwrapper',
         {
+            'p-cascadeselect p-component p-inputwrapper': true,
+            'p-cascadeselect-clearable': instance.showClear && !instance.disabled(),
             'p-cascadeselect-mobile': instance.queryMatches(),
-            'p-disabled': props.disabled,
-            'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.config.inputStyle === 'filled' || instance.config.inputVariant === 'filled',
+            'p-disabled': instance.disabled(),
+            'p-invalid': instance.invalid(),
             'p-focus': instance.focused,
-            'p-inputwrapper-filled': props.modelValue,
+            'p-inputwrapper-filled': instance.modelValue(),
+            'p-variant-filled': instance.$variant() === 'filled',
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-cascadeselect-open': instance.overlayVisible,
-            'p-cascadeselect-fluid': props.fluid,
-            'p-cascadeselect-sm p-inputfield-sm': props.size === 'small',
-            'p-cascadeselect-lg p-inputfield-lg': props.size === 'large'
+            'p-cascadeselect-fluid': instance.hasFluid,
+            'p-cascadeselect-sm p-inputfield-sm': instance.size() === 'small',
+            'p-cascadeselect-lg p-inputfield-lg': instance.size() === 'large'
         }
     ],
-    label: ({ instance, props }) => [
+    label: ({ instance }) => [
         'p-cascadeselect-label',
         {
-            'p-placeholder': instance.label === props.placeholder,
-            'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
+            'p-placeholder': instance.label() === instance.placeholder,
+            'p-cascadeselect-label-empty': !instance.value && (instance.label() === 'p-emptylabel' || instance.label().length === 0)
         }
     ],
+    clearIcon: 'p-cascadeselect-clear-icon',
     dropdown: 'p-cascadeselect-dropdown',
     loadingIcon: 'p-cascadeselect-loading-icon',
     dropdownIcon: 'p-cascadeselect-dropdown-icon',
@@ -306,6 +73,7 @@ const classes = {
     option: ({ instance, processedOption }) => [
         'p-cascadeselect-option',
         {
+            'p-cascadeselect-option-group': instance.isOptionGroup(processedOption),
             'p-cascadeselect-option-active': instance.isOptionActive(processedOption),
             'p-cascadeselect-option-selected': instance.isOptionSelected(processedOption),
             'p-focus': instance.isOptionFocused(processedOption),
@@ -315,17 +83,17 @@ const classes = {
     optionContent: 'p-cascadeselect-option-content',
     optionText: 'p-cascadeselect-option-text',
     groupIcon: 'p-cascadeselect-group-icon',
-    optionList: 'p-cascadeselect-overlay p-cascadeselect-option-list'
+    optionList: 'p-cascadeselect-list p-cascadeselect-overlay p-cascadeselect-option-list'
 };
 class CascadeSelectStyle extends BaseStyle {
     name = 'cascadeselect';
     theme = theme;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CascadeSelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CascadeSelectStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CascadeSelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CascadeSelectStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CascadeSelectStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CascadeSelectStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -355,6 +123,10 @@ var CascadeSelectClasses;
      * Class name of the loading icon element
      */
     CascadeSelectClasses["loadingIcon"] = "p-cascadeselect-loading-icon";
+    /**
+     * Class name of the dropdown icon element
+     */
+    CascadeSelectClasses["clearIcon"] = "p-cascadeselect-clear-icon";
     /**
      * Class name of the dropdown icon element
      */
@@ -418,6 +190,7 @@ class CascadeSelectSub extends BaseComponent {
     onChange = new EventEmitter();
     onFocusChange = new EventEmitter();
     onFocusEnterChange = new EventEmitter();
+    _componentStyle = inject(CascadeSelectStyle);
     get listLabel() {
         return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];
     }
@@ -477,16 +250,6 @@ class CascadeSelectSub extends BaseComponent {
     isOptionFocused(processedOption) {
         return this.focusedOptionId === this.getOptionId(processedOption);
     }
-    getItemClass(option) {
-        return {
-            'p-cascadeselect-option': true,
-            'p-cascadeselect-option-group': this.isOptionGroup(option),
-            'p-cascadeselect-option-active': this.isOptionActive(option),
-            'p-cascadeselect-option-selected': this.isOptionSelected(option),
-            'p-focus': this.isOptionFocused(option),
-            'p-disabled': this.isOptionDisabled(option)
-        };
-    }
     position() {
         const parentItem = this.el.nativeElement.parentElement;
         const containerOffset = getOffset(parentItem);
@@ -497,12 +260,12 @@ class CascadeSelectSub extends BaseComponent {
             this.el.nativeElement.children[0].style.left = '-200%';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CascadeSelectSub, deps: [{ token: CascadeSelect }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", 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" }, usesInheritance: true, ngImport: i0, template: `
-        <ul class="p-cascadeselect-list" [attr.role]="role" aria-orientation="horizontal" [attr.data-pc-section]="level === 0 ? 'list' : 'sublist'" [attr.aria-label]="listLabel">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CascadeSelectSub, deps: [{ token: CascadeSelect }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", 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
-                    [ngClass]="getItemClass(processedOption)"
+                    [class]="cx('option', { processedOption })"
                     role="treeitem"
                     [attr.aria-level]="level + 1"
                     [attr.aria-setsize]="options.length"
@@ -513,7 +276,7 @@ class CascadeSelectSub extends BaseComponent {
                     [attr.aria-posinset]="i + 1"
                 >
                     <div
-                        class="p-cascadeselect-option-content"
+                        [class]="cx('optionContent')"
                         (click)="onOptionClick($event, processedOption)"
                         (mouseenter)="onOptionMouseEnter($event, processedOption)"
                         (mousemove)="onOptionMouseMove($event, processedOption)"
@@ -524,9 +287,9 @@ class CascadeSelectSub extends BaseComponent {
                             <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: processedOption?.option }"></ng-container>
                         </ng-container>
                         <ng-template #defaultOptionTemplate>
-                            <span class="p-cascadeselect-option-text" [attr.data-pc-section]="'text'">{{ getOptionLabelToRender(processedOption) }}</span>
+                            <span [class]="cx('optionText')" [attr.data-pc-section]="'text'">{{ getOptionLabelToRender(processedOption) }}</span>
                         </ng-template>
-                        <span class="p-cascadeselect-group-icon" *ngIf="isOptionGroup(processedOption)" [attr.data-pc-section]="'groupIcon'">
+                        <span [class]="cx('groupIcon')" *ngIf="isOptionGroup(processedOption)" [attr.data-pc-section]="'groupIcon'">
                             <AngleRightIcon *ngIf="!groupicon" />
                             <ng-template *ngTemplateOutlet="groupicon"></ng-template>
                         </span>
@@ -534,7 +297,7 @@ class CascadeSelectSub extends BaseComponent {
                     <p-cascadeselect-sub
                         *ngIf="isOptionGroup(processedOption) && isOptionActive(processedOption)"
                         [role]="'group'"
-                        class="p-cascadeselect-list p-cascadeselect-overlay p-cascadeselect-option-list"
+                        [class]="cx('optionList')"
                         [selectId]="selectId"
                         [focusedOptionId]="focusedOptionId"
                         [activeOptionPath]="activeOptionPath"
@@ -554,19 +317,19 @@ class CascadeSelectSub extends BaseComponent {
                 </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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: AngleRightIcon, selector: "AngleRightIcon" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, 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: "AngleRightIcon" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CascadeSelectSub, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CascadeSelectSub, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-cascadeSelectSub, p-cascadeselect-sub',
                     standalone: true,
                     imports: [CommonModule, Ripple, AngleRightIcon, SharedModule],
                     template: `
-        <ul class="p-cascadeselect-list" [attr.role]="role" aria-orientation="horizontal" [attr.data-pc-section]="level === 0 ? 'list' : 'sublist'" [attr.aria-label]="listLabel">
+        <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
-                    [ngClass]="getItemClass(processedOption)"
+                    [class]="cx('option', { processedOption })"
                     role="treeitem"
                     [attr.aria-level]="level + 1"
                     [attr.aria-setsize]="options.length"
@@ -577,7 +340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     [attr.aria-posinset]="i + 1"
                 >
                     <div
-                        class="p-cascadeselect-option-content"
+                        [class]="cx('optionContent')"
                         (click)="onOptionClick($event, processedOption)"
                         (mouseenter)="onOptionMouseEnter($event, processedOption)"
                         (mousemove)="onOptionMouseMove($event, processedOption)"
@@ -588,9 +351,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: processedOption?.option }"></ng-container>
                         </ng-container>
                         <ng-template #defaultOptionTemplate>
-                            <span class="p-cascadeselect-option-text" [attr.data-pc-section]="'text'">{{ getOptionLabelToRender(processedOption) }}</span>
+                            <span [class]="cx('optionText')" [attr.data-pc-section]="'text'">{{ getOptionLabelToRender(processedOption) }}</span>
                         </ng-template>
-                        <span class="p-cascadeselect-group-icon" *ngIf="isOptionGroup(processedOption)" [attr.data-pc-section]="'groupIcon'">
+                        <span [class]="cx('groupIcon')" *ngIf="isOptionGroup(processedOption)" [attr.data-pc-section]="'groupIcon'">
                             <AngleRightIcon *ngIf="!groupicon" />
                             <ng-template *ngTemplateOutlet="groupicon"></ng-template>
                         </span>
@@ -598,7 +361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     <p-cascadeselect-sub
                         *ngIf="isOptionGroup(processedOption) && isOptionActive(processedOption)"
                         [role]="'group'"
-                        class="p-cascadeselect-list p-cascadeselect-overlay p-cascadeselect-option-list"
+                        [class]="cx('optionList')"
                         [selectId]="selectId"
                         [focusedOptionId]="focusedOptionId"
                         [activeOptionPath]="activeOptionPath"
@@ -620,7 +383,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
         </ul>
     `,
                     encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [CascadeSelectStyle]
                 }]
         }], ctorParameters: () => [{ type: CascadeSelect }], propDecorators: { role: [{
                 type: Input
@@ -666,7 +430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * CascadeSelect is a form component to select a value from a nested structure of options.
  * @group Components
  */
-class CascadeSelect extends BaseComponent {
+class CascadeSelect extends BaseEditableHolder {
     overlayService;
     /**
      * Unique identifier of the component
@@ -729,14 +493,10 @@ class CascadeSelect extends BaseComponent {
     autoOptionFocus = false;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * An array of selectitems to display as the available options.
      * @group Props
@@ -782,11 +542,6 @@ class CascadeSelect extends BaseComponent {
      * @group Props
      */
     inputId;
-    /**
-     * Defines the size of the component.
-     * @group Props
-     */
-    size;
     /**
      * Index of the element in tabbing order.
      * @group Props
@@ -807,16 +562,6 @@ class CascadeSelect extends BaseComponent {
      * @group Props
      */
     ariaLabel;
-    /**
-     * Id of the element or "body" for document where the overlay should be appended to.
-     * @group Props
-     */
-    appendTo;
-    /**
-     * When present, it specifies that the component should be disabled.
-     * @group Props
-     */
-    disabled;
     /**
      * When enabled, a clear icon is displayed to clear the value.
      * @group Props
@@ -843,54 +588,44 @@ class CascadeSelect extends BaseComponent {
      */
     autofocus;
     /**
-     * Transition options of the show animation.
+     * Whether the dropdown is in loading state.
      * @group Props
-     * @deprecated deprecated since v14.2.0, use overlayOptions property instead.
      */
-    get showTransitionOptions() {
-        return this._showTransitionOptions;
-    }
-    set showTransitionOptions(val) {
-        this._showTransitionOptions = val;
-        console.log('The showTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
+    loading = false;
     /**
-     * Specifies the input variant of the component.
+     * Icon to display in loading state.
      * @group Props
      */
-    variant;
+    loadingIcon;
     /**
-     * Whether the dropdown is in loading state.
+     * The breakpoint to define the maximum width boundary.
      * @group Props
      */
-    loading = false;
+    breakpoint = '960px';
     /**
-     * Icon to display in loading state.
+     * Specifies the size of the component.
+     * @defaultValue undefined
      * @group Props
      */
-    loadingIcon;
+    size = input();
     /**
-     * Transition options of the hide animation.
+     * Specifies the input variant of the component.
+     * @defaultValue undefined
      * @group Props
-     * @deprecated deprecated since v14.2.0, use overlayOptions property instead.
      */
-    get hideTransitionOptions() {
-        return this._hideTransitionOptions;
-    }
-    set hideTransitionOptions(val) {
-        this._hideTransitionOptions = val;
-        console.log('The hideTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
+    variant = input();
     /**
      * Spans 100% width of the container when enabled.
+     * @defaultValue undefined
      * @group Props
      */
-    fluid = false;
+    fluid = input(undefined, { transform: booleanAttribute });
     /**
-     * The breakpoint to define the maximum width boundary.
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @defaultValue 'self'
      * @group Props
      */
-    breakpoint = '960px';
+    appendTo = input(undefined);
     /**
      * Callback to invoke on value change.
      * @param {CascadeSelectChangeEvent} event - Custom change event.
@@ -945,7 +680,6 @@ class CascadeSelect extends BaseComponent {
      */
     onBlur = new EventEmitter();
     focusInputViewChild;
-    containerViewChild;
     panelViewChild;
     overlayViewChild;
     /**
@@ -996,8 +730,6 @@ class CascadeSelect extends BaseComponent {
     _loadingIconTemplate;
     _groupIconTemplate;
     _clearIconTemplate;
-    _showTransitionOptions = '';
-    _hideTransitionOptions = '';
     selectionPath = null;
     focused = false;
     overlayVisible = false;
@@ -1009,46 +741,21 @@ class CascadeSelect extends BaseComponent {
     onModelTouched = () => { };
     focusedOptionInfo = signal({ index: -1, level: 0, parentKey: '' });
     activeOptionPath = signal([]);
-    modelValue = signal(null);
     processedOptions = [];
     _componentStyle = inject(CascadeSelectStyle);
     initialized = false;
-    get containerClass() {
-        return {
-            'p-cascadeselect p-component p-inputwrapper': true,
-            'p-cascadeselect-clearable': this.showClear && !this.disabled,
-            'p-cascadeselect-mobile': this.queryMatches(),
-            'p-disabled': this.disabled,
-            'p-focus': this.focused,
-            'p-inputwrapper-filled': this.modelValue(),
-            'p-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled' || this.config.inputVariant() === 'filled',
-            'p-inputwrapper-focus': this.focused || this.overlayVisible,
-            'p-cascadeselect-open': this.overlayVisible,
-            'p-cascadeselect-fluid': this.hasFluid,
-            'p-cascadeselect-sm p-inputfield-sm': this.size === 'small',
-            'p-cascadeselect-lg p-inputfield-lg': this.size === 'large'
-        };
-    }
-    get labelClass() {
-        return {
-            'p-cascadeselect-label': true,
-            'p-placeholder': this.label() === this.placeholder,
-            'p-cascadeselect-label-empty': !this.value && (this.label() === 'p-emptylabel' || this.label().length === 0)
-        };
-    }
+    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant());
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
+    pcFluid = inject(Fluid, { optional: true, host: true, skipSelf: true });
     get hasFluid() {
-        const nativeElement = this.el.nativeElement;
-        const fluidComponent = nativeElement.closest('p-fluid');
-        return this.fluid || !!fluidComponent;
+        return this.fluid() ?? !!this.pcFluid;
+    }
+    onHostClick(event) {
+        this.onContainerClick(event);
     }
     get focusedOptionId() {
         return this.focusedOptionInfo().index !== -1 ? `${this.id}${isNotEmpty(this.focusedOptionInfo().parentKey) ? '_' + this.focusedOptionInfo().parentKey : ''}_${this.focusedOptionInfo().index}` : null;
     }
-    get filled() {
-        if (typeof this.modelValue() === 'string')
-            return !!this.modelValue();
-        return this.modelValue() || this.modelValue() != null || this.modelValue() != undefined;
-    }
     get searchResultMessageText() {
         return isNotEmpty(this.visibleOptions()) ? this.searchMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptySearchMessageText;
     }
@@ -1146,7 +853,7 @@ class CascadeSelect extends BaseComponent {
         return processedOptions;
     }
     onInputFocus(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             // For screenreaders
             return;
         }
@@ -1161,7 +868,7 @@ class CascadeSelect extends BaseComponent {
         this.onBlur.emit(event);
     }
     onInputKeyDown(event) {
-        if (this.disabled || this.loading) {
+        if (this.disabled() || this.loading) {
             event.preventDefault();
             return;
         }
@@ -1331,7 +1038,7 @@ class CascadeSelect extends BaseComponent {
     updateModel(value, event) {
         this.value = value;
         this.onModelChange(value);
-        this.modelValue.set(value);
+        this.writeModelValue(value);
         if (this.initialized) {
             this.onChange.emit({
                 originalEvent: event,
@@ -1385,7 +1092,7 @@ class CascadeSelect extends BaseComponent {
         this.onGroupChange.emit(event);
     }
     onContainerClick(event) {
-        if (this.disabled || this.loading) {
+        if (this.disabled() || this.loading) {
             return;
         }
         if (!this.overlayViewChild?.el?.nativeElement?.contains(event.target)) {
@@ -1683,26 +1390,24 @@ class CascadeSelect extends BaseComponent {
     registerOnTouched(fn) {
         this.onModelTouched = fn;
     }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.cd.markForCheck();
-    }
     ngOnDestroy() {
         if (this.matchMediaListener) {
             this.unbindMatchMediaListener();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CascadeSelect, deps: [{ token: i2.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: CascadeSelect, isStandalone: true, selector: "p-cascadeSelect, p-cascadeselect, p-cascade-select", inputs: { id: "id", searchMessage: "searchMessage", emptyMessage: "emptyMessage", selectionMessage: "selectionMessage", emptySearchMessage: "emptySearchMessage", emptySelectionMessage: "emptySelectionMessage", searchLocale: "searchLocale", optionDisabled: "optionDisabled", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], styleClass: "styleClass", style: "style", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", placeholder: "placeholder", value: "value", dataKey: "dataKey", inputId: "inputId", size: "size", tabindex: ["tabindex", "tabindex", numberAttribute], ariaLabelledBy: "ariaLabelledBy", inputLabel: "inputLabel", ariaLabel: "ariaLabel", appendTo: "appendTo", disabled: ["disabled", "disabled", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", overlayOptions: "overlayOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], showTransitionOptions: "showTransitionOptions", variant: "variant", loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", hideTransitionOptions: "hideTransitionOptions", fluid: ["fluid", "fluid", booleanAttribute], breakpoint: "breakpoint" }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onClear: "onClear", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide", onFocus: "onFocus", onBlur: "onBlur" }, 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: "containerViewChild", first: true, predicate: ["container"], 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 #container [ngClass]="containerClass" [class]="styleClass" [ngStyle]="style" (click)="onContainerClick($event)" [attr.data-pc-name]="'cascadeselect'" [attr.data-pc-section]="'root'">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CascadeSelect, deps: [{ token: i2.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", 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'">
             <input
                 #focusInput
                 readonly
                 type="text"
                 role="combobox"
-                [disabled]="disabled"
-                [placeholder]="placeholder"
-                [tabindex]="!disabled ? tabindex : -1"
+                [attr.name]="name()"
+                [attr.required]="required() ? '' : undefined"
+                [attr.disabled]="disabled() ? '' : undefined"
+                [attr.placeholder]="placeholder"
+                [attr.tabindex]="!disabled() ? tabindex : -1"
                 [attr.id]="inputId"
                 [attr.aria-label]="ariaLabel"
                 [attr.aria-labelledby]="ariaLabelledBy"
@@ -1716,7 +1421,7 @@ class CascadeSelect extends BaseComponent {
                 [pAutoFocus]="autofocus"
             />
         </div>
-        <span [ngClass]="labelClass" [attr.data-pc-section]="'label'">
+        <span [class]="cx('label')" [attr.data-pc-section]="'label'">
             <ng-container *ngIf="valueTemplate || _valueTemplate; else defaultValueTemplate">
                 <ng-container *ngTemplateOutlet="valueTemplate || _valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
             </ng-container>
@@ -1725,26 +1430,26 @@ class CascadeSelect extends BaseComponent {
             </ng-template>
         </span>
 
-        <ng-container *ngIf="filled && !disabled && showClear">
-            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" class="p-cascadeselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
-            <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-cascadeselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
+        <ng-container *ngIf="$filled() && !disabled() && showClear">
+            <TimesIcon *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">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
         </ng-container>
 
-        <div class="p-cascadeselect-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" [attr.data-pc-section]="'dropdownIcon'" [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" [ngClass]="'p-cascadeselect-loading-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
-                    <span *ngIf="!loadingIcon" [class]="'p-cascadeselect-loading-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
+                    <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>
                 </ng-container>
             </ng-container>
             <ng-template #elseBlock>
-                <ChevronDownIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate" [styleClass]="'p-cascadeselect-dropdown-icon'" />
-                <span *ngIf="triggerIconTemplate || _triggerIconTemplate" class="p-cascadeselect-dropdown-icon">
+                <ChevronDownIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate" [styleClass]="cx('dropdownIcon')" />
+                <span *ngIf="triggerIconTemplate || _triggerIconTemplate" [class]="cx('dropdownIcon')">
                     <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate"></ng-template>
                 </span>
             </ng-template>
@@ -1754,12 +1459,11 @@ class CascadeSelect extends BaseComponent {
         </span>
         <p-overlay
             #overlay
+            [hostAttrSelector]="attrSelector"
             [(visible)]="overlayVisible"
             [options]="overlayOptions"
             [target]="'@parent'"
-            [appendTo]="appendTo"
-            [showTransitionOptions]="showTransitionOptions"
-            [hideTransitionOptions]="hideTransitionOptions"
+            [appendTo]="$appendTo()"
             (onAnimationDone)="onOverlayAnimationDone($event)"
             (onBeforeShow)="onBeforeShow.emit($event)"
             (onShow)="show($event)"
@@ -1767,9 +1471,9 @@ class CascadeSelect extends BaseComponent {
             (onHide)="hide($event)"
         >
             <ng-template #content>
-                <div #panel [ngClass]="{ 'p-cascadeselect-overlay p-component': true, 'p-cascadeselect-mobile-active': queryMatches() }" [class]="panelStyleClass" [ngStyle]="panelStyle" [attr.data-pc-section]="'panel'">
+                <div #panel [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle" [attr.data-pc-section]="'panel'">
                     <ng-template *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-template>
-                    <div class="p-cascadeselect-list-container" [attr.data-pc-section]="'wrapper'">
+                    <div [class]="cx('listContainer')" [attr.data-pc-section]="'wrapper'">
                         <p-cascadeselect-sub
                             [options]="processedOptions"
                             [selectId]="id"
@@ -1799,24 +1503,26 @@ class CascadeSelect extends BaseComponent {
                 </div>
             </ng-template>
         </p-overlay>
-    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "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: "ChevronDownIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { 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: ["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: "ChevronDownIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CascadeSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", 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],
-                    template: ` <div #container [ngClass]="containerClass" [class]="styleClass" [ngStyle]="style" (click)="onContainerClick($event)" [attr.data-pc-name]="'cascadeselect'" [attr.data-pc-section]="'root'">
+                    template: `
         <div class="p-hidden-accessible" [attr.data-pc-section]="'hiddenInputWrapper'">
             <input
                 #focusInput
                 readonly
                 type="text"
                 role="combobox"
-                [disabled]="disabled"
-                [placeholder]="placeholder"
-                [tabindex]="!disabled ? tabindex : -1"
+                [attr.name]="name()"
+                [attr.required]="required() ? '' : undefined"
+                [attr.disabled]="disabled() ? '' : undefined"
+                [attr.placeholder]="placeholder"
+                [attr.tabindex]="!disabled() ? tabindex : -1"
                 [attr.id]="inputId"
                 [attr.aria-label]="ariaLabel"
                 [attr.aria-labelledby]="ariaLabelledBy"
@@ -1830,7 +1536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 [pAutoFocus]="autofocus"
             />
         </div>
-        <span [ngClass]="labelClass" [attr.data-pc-section]="'label'">
+        <span [class]="cx('label')" [attr.data-pc-section]="'label'">
             <ng-container *ngIf="valueTemplate || _valueTemplate; else defaultValueTemplate">
                 <ng-container *ngTemplateOutlet="valueTemplate || _valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
             </ng-container>
@@ -1839,26 +1545,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             </ng-template>
         </span>
 
-        <ng-container *ngIf="filled && !disabled && showClear">
-            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" class="p-cascadeselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
-            <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-cascadeselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
+        <ng-container *ngIf="$filled() && !disabled() && showClear">
+            <TimesIcon *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">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
         </ng-container>
 
-        <div class="p-cascadeselect-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" [attr.data-pc-section]="'dropdownIcon'" [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" [ngClass]="'p-cascadeselect-loading-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
-                    <span *ngIf="!loadingIcon" [class]="'p-cascadeselect-loading-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
+                    <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>
                 </ng-container>
             </ng-container>
             <ng-template #elseBlock>
-                <ChevronDownIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate" [styleClass]="'p-cascadeselect-dropdown-icon'" />
-                <span *ngIf="triggerIconTemplate || _triggerIconTemplate" class="p-cascadeselect-dropdown-icon">
+                <ChevronDownIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate" [styleClass]="cx('dropdownIcon')" />
+                <span *ngIf="triggerIconTemplate || _triggerIconTemplate" [class]="cx('dropdownIcon')">
                     <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate"></ng-template>
                 </span>
             </ng-template>
@@ -1868,12 +1574,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
         </span>
         <p-overlay
             #overlay
+            [hostAttrSelector]="attrSelector"
             [(visible)]="overlayVisible"
             [options]="overlayOptions"
             [target]="'@parent'"
-            [appendTo]="appendTo"
-            [showTransitionOptions]="showTransitionOptions"
-            [hideTransitionOptions]="hideTransitionOptions"
+            [appendTo]="$appendTo()"
             (onAnimationDone)="onOverlayAnimationDone($event)"
             (onBeforeShow)="onBeforeShow.emit($event)"
             (onShow)="show($event)"
@@ -1881,9 +1586,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             (onHide)="hide($event)"
         >
             <ng-template #content>
-                <div #panel [ngClass]="{ 'p-cascadeselect-overlay p-component': true, 'p-cascadeselect-mobile-active': queryMatches() }" [class]="panelStyleClass" [ngStyle]="panelStyle" [attr.data-pc-section]="'panel'">
+                <div #panel [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle" [attr.data-pc-section]="'panel'">
                     <ng-template *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-template>
-                    <div class="p-cascadeselect-list-container" [attr.data-pc-section]="'wrapper'">
+                    <div [class]="cx('listContainer')" [attr.data-pc-section]="'wrapper'">
                         <p-cascadeselect-sub
                             [options]="processedOptions"
                             [selectId]="id"
@@ -1913,10 +1618,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 </div>
             </ng-template>
         </p-overlay>
-    </div>`,
+    `,
                     providers: [CASCADESELECT_VALUE_ACCESSOR, CascadeSelectStyle],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[style]': "sx('root')",
+                        '[attr.data-pc-name]': "'cascadeselect'",
+                        '[attr.data-pc-section]': "'root'"
+                    }
                 }]
         }], ctorParameters: () => [{ type: i2.OverlayService }], propDecorators: { id: [{
                 type: Input
@@ -1945,8 +1656,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], styleClass: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], options: [{
                 type: Input
             }], optionLabel: [{
@@ -1965,8 +1674,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }], inputId: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], tabindex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -1976,11 +1683,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }], ariaLabel: [{
                 type: Input
-            }], appendTo: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], showClear: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1993,20 +1695,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], autofocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], showTransitionOptions: [{
-                type: Input
-            }], variant: [{
-                type: Input
             }], loading: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], loadingIcon: [{
                 type: Input
-            }], hideTransitionOptions: [{
-                type: Input
-            }], fluid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], breakpoint: [{
                 type: Input
             }], onChange: [{
@@ -2030,9 +1723,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], focusInputViewChild: [{
                 type: ViewChild,
                 args: ['focusInput']
-            }], containerViewChild: [{
-                type: ViewChild,
-                args: ['container']
             }], panelViewChild: [{
                 type: ViewChild,
                 args: ['panel']
@@ -2063,16 +1753,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], clearIconTemplate: [{
                 type: ContentChild,
                 args: ['clearicon', { descendants: false }]
+            }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
             }] } });
 class CascadeSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CascadeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: CascadeSelectModule, imports: [CascadeSelect, SharedModule], exports: [CascadeSelect, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CascadeSelectModule, imports: [CascadeSelect, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CascadeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: CascadeSelectModule, imports: [CascadeSelect, SharedModule], exports: [CascadeSelect, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CascadeSelectModule, imports: [CascadeSelect, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CascadeSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CascadeSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CascadeSelect, SharedModule],