primeng 19.1.3 → 20.0.0-rc.1

package/fesm2022/primeng-select.mjs

@@ -1,13 +1,15 @@
 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, Component, inject, signal, computed, effect, ContentChildren, ContentChild, HostBinding, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Output, Input, Component, input, computed, signal, effect, ContentChildren, ContentChild, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { deepEquals, isNotEmpty, isEmpty, uuid, findSingle, scrollInView, equals, resolveFieldData, focus, unblockBodyScroll, isPrintableCharacter, findLastIndex, getFirstFocusableElement, getLastFocusableElement, getFocusableElements } from '@primeuix/utils';
+import { deepEquals, isNotEmpty, isEmpty, uuid, findSingle, scrollInView, equals, resolveFieldData, focus, isPrintableCharacter, findLastIndex, getFirstFocusableElement, getLastFocusableElement, getFocusableElements } from '@primeuix/utils';
 import * as i2 from 'primeng/api';
 import { SharedModule, TranslationKeys, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
 import { BaseComponent } from 'primeng/basecomponent';
+import { BaseInput } from 'primeng/baseinput';
+import { unblockBodyScroll } from 'primeng/dom';
 import { IconField } from 'primeng/iconfield';
 import { CheckIcon, BlankIcon, TimesIcon, ChevronDownIcon, SearchIcon } from 'primeng/icons';
 import { InputIcon } from 'primeng/inputicon';
@@ -16,255 +18,53 @@ import { Overlay } from 'primeng/overlay';
 import { Ripple } from 'primeng/ripple';
 import { Scroller } from 'primeng/scroller';
 import { Tooltip } from 'primeng/tooltip';
+import { css, dt } from '@primeuix/styled';
+import { style } from '@primeuix/styles/select';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-select {
-    display: inline-flex;
-    cursor: pointer;
-    position: relative;
-    user-select: none;
-    background: ${dt('select.background')};
-    border: 1px solid ${dt('select.border.color')};
-    transition: background ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')},
-        outline-color ${dt('select.transition.duration')}, box-shadow ${dt('select.transition.duration')};
-    border-radius: ${dt('select.border.radius')};
-    outline-color: transparent;
-    box-shadow: ${dt('select.shadow')};
-}
-
-.p-select.ng-invalid.ng-dirty {
-    border-color: ${dt('select.invalid.border.color')};
-}
-
-.p-select:not(.p-disabled):hover {
-    border-color: ${dt('select.hover.border.color')};
-}
-
-.p-select:not(.p-disabled).p-focus {
-    border-color: ${dt('select.focus.border.color')};
-    box-shadow: ${dt('select.focus.ring.shadow')};
-    outline: ${dt('select.focus.ring.width')} ${dt('select.focus.ring.style')} ${dt('select.focus.ring.color')};
-    outline-offset: ${dt('select.focus.ring.offset')};
-}
-
-.p-select.p-variant-filled {
-    background: ${dt('select.filled.background')};
-}
-
-.p-select.p-variant-filled:not(.p-disabled):hover {
-    background: ${dt('select.filled.hover.background')};
-}
-
-.p-select.p-variant-filled.p-focus {
-    background: ${dt('select.filled.focus.background')};
-}
-
-.p-select.p-disabled {
-    opacity: 1;
-    background: ${dt('select.disabled.background')};
-}
-
-.p-select-clear-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    color: ${dt('select.clear.icon.color')};
-    inset-inline-end: ${dt('select.dropdown.width')};
-}
-
-.p-select-dropdown {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    background: transparent;
-    color: ${dt('select.dropdown.color')};
-    width: ${dt('select.dropdown.width')};
-    border-start-end-radius: ${dt('select.border.radius')};
-    border-end-end-radius: ${dt('select.border.radius')};
-}
-
-.p-select-label {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    flex: 1 1 auto;
-    width: 1%;
-    padding: ${dt('select.padding.y')} ${dt('select.padding.x')};
-    text-overflow: ellipsis;
-    cursor: pointer;
-    color: ${dt('select.color')};
-    background: transparent;
-    border: 0 none;
-    outline: 0 none;
-}
-
-.p-select-label.p-placeholder {
-    color: ${dt('select.placeholder.color')};
-}
-
-.p-select.ng-invalid.ng-dirty .p-select-label.p-placeholder {
-    color: ${dt('select.invalid.placeholder.color')};
-}
-
-.p-select:has(.p-select-clear-icon) .p-select-label {
-    padding-inline-end: calc(1rem + ${dt('select.padding.x')});
-}
-
-.p-select.p-disabled .p-select-label {
-    color: ${dt('select.disabled.color')};
-}
-
-.p-select-label-empty {
-    overflow: hidden;
-    opacity: 0;
-}
-
-input.p-select-label {
-    cursor: default;
-}
+const theme = css `
+    ${style}
 
-.p-select .p-select-overlay {
-    min-width: 100%;
-}
-
-.p-select-overlay {
-    cursor: default;
-    background: ${dt('select.overlay.background')};
-    color: ${dt('select.overlay.color')};
-    border: 1px solid ${dt('select.overlay.border.color')};
-    border-radius: ${dt('select.overlay.border.radius')};
-    box-shadow: ${dt('select.overlay.shadow')};
-}
-
-.p-select-header {
-    padding: ${dt('select.list.header.padding')};
-}
-
-.p-select-filter {
-    width: 100%;
-}
-
-.p-select-list-container {
-    overflow: auto;
-}
-
-.p-select-option-group {
-    cursor: auto;
-    margin: 0;
-    padding: ${dt('select.option.group.padding')};
-    background: ${dt('select.option.group.background')};
-    color: ${dt('select.option.group.color')};
-    font-weight: ${dt('select.option.group.font.weight')};
-}
-
-.p-select-list {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    padding: ${dt('select.list.padding')};
-    gap: ${dt('select.list.gap')};
-    display: flex;
-    flex-direction: column;
-}
-
-.p-select-option {
-    cursor: pointer;
-    font-weight: normal;
-    white-space: nowrap;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    padding: ${dt('select.option.padding')};
-    border: 0 none;
-    color: ${dt('select.option.color')};
-    background: transparent;
-    transition: background ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')},
-            box-shadow ${dt('select.transition.duration')}, outline-color ${dt('select.transition.duration')};
-    border-radius: ${dt('select.option.border.radius')};
-}
-
-.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
-    background: ${dt('select.option.focus.background')};
-    color: ${dt('select.option.focus.color')};
-}
-
-.p-select-option.p-select-option-selected {
-    background: ${dt('select.option.selected.background')};
-    color: ${dt('select.option.selected.color')};
-}
-
-.p-select-option.p-select-option-selected.p-focus {
-    background: ${dt('select.option.selected.focus.background')};
-    color: ${dt('select.option.selected.focus.color')};
-}
-
-.p-select-option-check-icon {
-    position: relative;
-    margin-inline-start: ${dt('select.checkmark.gutter.start')};
-    margin-inline-end: ${dt('select.checkmark.gutter.end')};
-    color: ${dt('select.checkmark.color')};
-}
-
-.p-select-empty-message {
-    padding: ${dt('select.empty.message.padding')};
-}
-
-.p-select-fluid {
-    display: flex;
-}
-
-.p-select-sm .p-select-label {
-    font-size: ${dt('select.sm.font.size')};
-    padding-block: ${dt('select.sm.padding.y')};
-    padding-inline: ${dt('select.sm.padding.x')};
-}
-
-.p-select-sm .p-select-dropdown .p-icon {
-    font-size: ${dt('select.sm.font.size')};
-    width: ${dt('select.sm.font.size')};
-    height: ${dt('select.sm.font.size')};
-}
+    /* For PrimeNG */
+    .p-select-label.p-placeholder {
+        color: ${dt('select.placeholder.color')};
+    }
 
-.p-select-lg .p-select-label {
-    font-size: ${dt('select.lg.font.size')};
-    padding-block: ${dt('select.lg.padding.y')};
-    padding-inline: ${dt('select.lg.padding.x')};
-}
+    .p-select.ng-invalid.ng-dirty {
+        border-color: ${dt('select.invalid.border.color')};
+    }
 
-.p-select-lg .p-select-dropdown .p-icon {
-    font-size: ${dt('select.lg.font.size')};
-    width: ${dt('select.lg.font.size')};
-    height: ${dt('select.lg.font.size')};
-}
+    .p-dropdown.ng-invalid.ng-dirty .p-dropdown-label.p-placeholder,
+    .p-select.ng-invalid.ng-dirty .p-select-label.p-placeholder {
+        color: ${dt('select.invalid.placeholder.color')};
+    }
 `;
 const classes = {
     root: ({ instance }) => [
         'p-select p-component p-inputwrapper',
         {
-            'p-disabled': instance.disabled,
-            'p-variant-filled': instance.variant === 'filled' || instance.config.inputVariant() === 'filled' || instance.config.inputStyle() === 'filled',
+            'p-disabled': instance.disabled(),
+            'p-variant-filled': instance.$variant() === 'filled',
             'p-focus': instance.focused,
-            'p-inputwrapper-filled': instance.modelValue() !== undefined && instance.modelValue() !== null,
+            'p-invalid': instance.invalid(),
+            'p-inputwrapper-filled': instance.$filled(),
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-select-open': instance.overlayVisible,
             'p-select-fluid': instance.hasFluid,
-            'p-select-sm p-inputfield-sm': instance.size === 'small',
-            'p-select-lg p-inputfield-lg': instance.size === 'large'
+            'p-select-sm p-inputfield-sm': instance.size() === 'small',
+            'p-select-lg p-inputfield-lg': instance.size() === 'large'
         }
     ],
-    label: ({ instance, props }) => [
+    label: ({ instance }) => [
         'p-select-label',
         {
-            'p-placeholder': !props.editable && instance.label === props.placeholder,
-            'p-select-label-empty': !props.editable && !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
+            'p-placeholder': instance.placeholder() && instance.label() === instance.placeholder(),
+            'p-select-label-empty': !instance.editable && !instance.selectedItemTemplate && (instance.label() === undefined || instance.label() === null || instance.label() === 'p-emptylabel' || instance.label().length === 0)
         }
     ],
     clearIcon: 'p-select-clear-icon',
     dropdown: 'p-select-dropdown',
-    loadingicon: 'p-select-loading-icon',
+    loadingIcon: 'p-select-loading-icon',
     dropdownIcon: 'p-select-dropdown-icon',
     overlay: 'p-select-overlay p-component',
     header: 'p-select-header',
@@ -273,12 +73,12 @@ const classes = {
     list: 'p-select-list',
     optionGroup: 'p-select-option-group',
     optionGroupLabel: 'p-select-option-group-label',
-    option: ({ instance, props, state, option, focusedOption }) => [
+    option: ({ instance }) => [
         'p-select-option',
         {
-            'p-select-option-selected': instance.isSelected(option) && props.highlightOnSelect,
-            'p-focus': state.focusedOptionIndex === focusedOption,
-            'p-disabled': instance.isOptionDisabled(option)
+            'p-select-option-selected': instance.selected && !instance.checkmark,
+            'p-disabled': instance.disabled,
+            'p-focus': instance.focused
         }
     ],
     optionLabel: 'p-select-option-label',
@@ -290,10 +90,10 @@ class SelectStyle extends BaseStyle {
     name = 'select';
     theme = theme;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -326,7 +126,7 @@ var SelectClasses;
     /**
      * Class name of the loadingicon element
      */
-    SelectClasses["loadingicon"] = "p-select-loading-icon";
+    SelectClasses["loadingIcon"] = "p-select-loading-icon";
     /**
      * Class name of the dropdown icon element
      */
@@ -401,14 +201,15 @@ class SelectItem extends BaseComponent {
     checkmark;
     onClick = new EventEmitter();
     onMouseEnter = new EventEmitter();
+    _componentStyle = inject(SelectStyle);
     onOptionClick(event) {
         this.onClick.emit(event);
     }
     onOptionMouseEnter(event) {
         this.onMouseEnter.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: SelectItem, isStandalone: true, selector: "p-selectItem", inputs: { id: "id", option: "option", selected: ["selected", "selected", booleanAttribute], focused: ["focused", "focused", booleanAttribute], label: "label", disabled: ["disabled", "disabled", booleanAttribute], visible: ["visible", "visible", booleanAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", template: "template", checkmark: ["checkmark", "checkmark", booleanAttribute] }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: SelectItem, isStandalone: true, selector: "p-selectItem", inputs: { id: "id", option: "option", selected: ["selected", "selected", booleanAttribute], focused: ["focused", "focused", booleanAttribute], label: "label", disabled: ["disabled", "disabled", booleanAttribute], visible: ["visible", "visible", booleanAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", template: "template", checkmark: ["checkmark", "checkmark", booleanAttribute] }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, providers: [SelectStyle], usesInheritance: true, ngImport: i0, template: `
         <li
             [id]="id"
             (click)="onOptionClick($event)"
@@ -423,23 +224,18 @@ class SelectItem extends BaseComponent {
             [attr.data-p-highlight]="selected"
             [attr.data-p-disabled]="disabled"
             [ngStyle]="{ height: itemSize + 'px' }"
-            [ngClass]="{
-                'p-select-option': true,
-                'p-select-option-selected': selected && !checkmark,
-                'p-disabled': disabled,
-                'p-focus': focused
-            }"
+            [class]="cx('option')"
         >
             <ng-container *ngIf="checkmark">
-                <CheckIcon *ngIf="selected" styleClass="p-select-option-check-icon" />
-                <BlankIcon *ngIf="!selected" styleClass="p-select-option-blank-icon" />
+                <CheckIcon *ngIf="selected" [styleClass]="cx('optionCheckIcon')" />
+                <BlankIcon *ngIf="!selected" [styleClass]="cx('optionBlankIcon')" />
             </ng-container>
             <span *ngIf="!template">{{ label ?? 'empty' }}</span>
             <ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
         </li>
-    `, 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: "ngmodule", type: SharedModule }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: CheckIcon, selector: "CheckIcon" }, { kind: "component", type: BlankIcon, selector: "BlankIcon" }] });
+    `, 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: "ngmodule", type: SharedModule }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: CheckIcon, selector: "CheckIcon" }, { kind: "component", type: BlankIcon, selector: "BlankIcon" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-selectItem',
@@ -460,21 +256,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             [attr.data-p-highlight]="selected"
             [attr.data-p-disabled]="disabled"
             [ngStyle]="{ height: itemSize + 'px' }"
-            [ngClass]="{
-                'p-select-option': true,
-                'p-select-option-selected': selected && !checkmark,
-                'p-disabled': disabled,
-                'p-focus': focused
-            }"
+            [class]="cx('option')"
         >
             <ng-container *ngIf="checkmark">
-                <CheckIcon *ngIf="selected" styleClass="p-select-option-check-icon" />
-                <BlankIcon *ngIf="!selected" styleClass="p-select-option-blank-icon" />
+                <CheckIcon *ngIf="selected" [styleClass]="cx('optionCheckIcon')" />
+                <BlankIcon *ngIf="!selected" [styleClass]="cx('optionBlankIcon')" />
             </ng-container>
             <span *ngIf="!template">{{ label ?? 'empty' }}</span>
             <ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
         </li>
-    `
+    `,
+                    providers: [SelectStyle]
                 }]
         }], propDecorators: { id: [{
                 type: Input
@@ -515,7 +307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  * Select is used to choose an item from a collection of options.
  * @group Components
  */
-class Select extends BaseComponent {
+class Select extends BaseInput {
     zone;
     filterService;
     /**
@@ -533,16 +325,6 @@ class Select extends BaseComponent {
      * @group Props
      */
     filter;
-    /**
-     * Name of the input element.
-     * @group Props
-     */
-    name;
-    /**
-     * Inline style of the element.
-     * @group Props
-     */
-    style;
     /**
      * Inline style of the overlay panel element.
      * @group Props
@@ -550,6 +332,7 @@ class Select extends BaseComponent {
     panelStyle;
     /**
      * Style class of the element.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -563,21 +346,11 @@ class Select extends BaseComponent {
      * @group Props
      */
     readonly;
-    /**
-     * When present, it specifies that an input field must be filled out before submitting the form.
-     * @group Props
-     */
-    required;
     /**
      * When present, custom value instead of predefined options can be entered using the editable input field.
      * @group Props
      */
     editable;
-    /**
-     * 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).
-     * @group Props
-     */
-    appendTo;
     /**
      * Index of the element in tabbing order.
      * @group Props
@@ -608,11 +381,6 @@ class Select extends BaseComponent {
      * @group Props
      */
     filterLocale;
-    /**
-     * Specifies the input variant of the component.
-     * @group Props
-     */
-    variant;
     /**
      * Identifier of the accessible input element.
      * @group Props
@@ -683,12 +451,6 @@ class Select extends BaseComponent {
      * @group Props
      */
     optionGroupChildren = 'items';
-    /**
-     * Whether to display the first item as the label if no placeholder is defined and value is null.
-     * @deprecated since v17.3.0, set initial value by model instead.
-     * @group Props
-     */
-    autoDisplayFirst = true;
     /**
      * Whether to display options as grouped when nested options are provided.
      * @group Props
@@ -729,11 +491,6 @@ class Select extends BaseComponent {
      * @group Props
      */
     virtualScrollOptions;
-    /**
-     * Defines the size of the component.
-     * @group Props
-     */
-    size;
     /**
      * Whether to use overlay API feature. The properties of overlay API can be used like an object in it.
      * @group Props
@@ -759,11 +516,6 @@ class Select extends BaseComponent {
      * @group Props
      */
     filterMatchMode = 'contains';
-    /**
-     * Maximum number of character allows in the editable input field.
-     * @group Props
-     */
-    maxlength;
     /**
      * Advisory information to display in a tooltip on hover.
      * @group Props
@@ -804,94 +556,6 @@ class Select extends BaseComponent {
      * @group Props
      */
     autofocusFilter = true;
-    /**
-     * Whether the component should span the full width of its parent.
-     * @group Props
-     */
-    fluid;
-    /**
-     * When present, it specifies that the component should be disabled.
-     * @group Props
-     */
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(_disabled) {
-        if (_disabled) {
-            this.focused = false;
-            if (this.overlayVisible)
-                this.hide();
-        }
-        this._disabled = _disabled;
-        if (!this.cd.destroyed) {
-            this.cd.detectChanges();
-        }
-    }
-    /**
-     * Item size of item to be virtual scrolled.
-     * @group Props
-     * @deprecated use virtualScrollItemSize property instead.
-     */
-    get itemSize() {
-        return this._itemSize;
-    }
-    set itemSize(val) {
-        this._itemSize = val;
-        console.log('The itemSize property is deprecated, use virtualScrollItemSize property instead.');
-    }
-    _itemSize;
-    /**
-     * Whether to automatically manage layering.
-     * @group Props
-     * @deprecated since v14.2.0, use overlayOptions property instead.
-     */
-    get autoZIndex() {
-        return this._autoZIndex;
-    }
-    set autoZIndex(val) {
-        this._autoZIndex = val;
-        console.log('The autoZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
-    _autoZIndex;
-    /**
-     * Base zIndex value to use in layering.
-     * @group Props
-     * @deprecated since v14.2.0, use overlayOptions property instead.
-     */
-    get baseZIndex() {
-        return this._baseZIndex;
-    }
-    set baseZIndex(val) {
-        this._baseZIndex = val;
-        console.log('The baseZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
-    _baseZIndex;
-    /**
-     * Transition options of the show animation.
-     * @group Props
-     * @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.');
-    }
-    _showTransitionOptions;
-    /**
-     * Transition options of the hide animation.
-     * @group Props
-     * @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.');
-    }
-    _hideTransitionOptions;
     /**
      * When specified, filter displays with this value.
      * @group Props
@@ -917,6 +581,12 @@ class Select extends BaseComponent {
             this._options.set(val);
         }
     }
+    /**
+     * 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
+     */
+    appendTo = input(undefined);
     /**
      * Callback to invoke when value of select changes.
      * @param {SelectChangeEvent} event - custom change event.
@@ -980,33 +650,8 @@ class Select extends BaseComponent {
     overlayViewChild;
     firstHiddenFocusableElementOnOverlay;
     lastHiddenFocusableElementOnOverlay;
-    get hasFluid() {
-        const nativeElement = this.el.nativeElement;
-        const fluidComponent = nativeElement.closest('p-fluid');
-        return this.fluid || !!fluidComponent;
-    }
-    // @todo to be refactored
-    get hostClass() {
-        const classes = this._componentStyle.classes
-            .root({ instance: this })
-            .map((cls) => {
-            if (typeof cls === 'string') {
-                return cls;
-            }
-            else {
-                return Object.keys(cls)
-                    .filter((key) => cls[key])
-                    .join(' ');
-            }
-        })
-            .join(' ');
-        return classes + ' ' + this.styleClass;
-    }
-    get hostStyle() {
-        return this.style;
-    }
-    _disabled;
     itemsWrapper;
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
     /**
      * Custom item template.
      * @group Templates
@@ -1107,7 +752,6 @@ class Select extends BaseComponent {
     filterOptions;
     _options = signal(null);
     _placeholder = signal(undefined);
-    modelValue = signal(null);
     value;
     onModelChange = () => { };
     onModelTouched = () => { };
@@ -1137,29 +781,11 @@ class Select extends BaseComponent {
         return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);
     }
     get isVisibleClearIcon() {
-        return this.modelValue() != null && this.hasSelectedOption() && this.showClear && !this.disabled;
+        return this.modelValue() != null && this.hasSelectedOption() && this.showClear && !this.disabled();
     }
     get listLabel() {
         return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];
     }
-    get rootClass() {
-        return this._componentStyle.classes.root({ instance: this });
-    }
-    get inputClass() {
-        const label = this.label();
-        return {
-            'p-select-label': true,
-            'p-placeholder': this.placeholder() && label === this.placeholder(),
-            'p-select-label-empty': !this.editable && !this.selectedItemTemplate && (label === undefined || label === null || label === 'p-emptylabel' || label.length === 0)
-        };
-    }
-    get panelClass() {
-        return {
-            'p-dropdown-panel p-component': true,
-            'p-input-filled': this.config.inputStyle() === 'filled' || this.config.inputVariant() === 'filled',
-            'p-ripple-disabled': this.config.ripple() === false
-        };
-    }
     get focusedOptionId() {
         return this.focusedOptionIndex() !== -1 ? `${this.id}_${this.focusedOptionIndex()}` : null;
     }
@@ -1201,13 +827,7 @@ class Select extends BaseComponent {
         const selectedOptionIndex = options.findIndex((option) => this.isOptionValueEqualsModelValue(option));
         return selectedOptionIndex !== -1 ? this.getOptionLabel(options[selectedOptionIndex]) : this.placeholder() || 'p-emptylabel';
     });
-    filled = computed(() => {
-        if (typeof this.modelValue() === 'string')
-            return !!this.modelValue();
-        return this.label() !== 'p-emptylabel' && this.modelValue() !== undefined && this.modelValue() !== null;
-    });
     selectedOption;
-    editableInputValue = computed(() => this.getOptionLabel(this.selectedOption) || this.modelValue() || '');
     constructor(zone, filterService) {
         super();
         this.zone = zone;
@@ -1336,12 +956,6 @@ class Select extends BaseComponent {
             this.focusedOptionIndex.set(this.findFirstFocusedOptionIndex());
             this.onOptionSelect(null, this.visibleOptions()[this.focusedOptionIndex()], false);
         }
-        if (this.autoDisplayFirst && (this.modelValue() === null || this.modelValue() === undefined)) {
-            if (!this.placeholder()) {
-                const ind = this.findFirstOptionIndex();
-                this.onOptionSelect(null, this.visibleOptions()[ind], false, true);
-            }
-        }
     }
     onOptionSelect(event, option, isHide = true, preventChange = false) {
         if (!this.isSelected(option)) {
@@ -1362,7 +976,7 @@ class Select extends BaseComponent {
     updateModel(value, event) {
         this.value = value;
         this.onModelChange(value);
-        this.modelValue.set(value);
+        this.writeModelValue(value);
         this.selectedOptionUpdated = true;
     }
     writeValue(value) {
@@ -1371,7 +985,7 @@ class Select extends BaseComponent {
         }
         this.value = value;
         this.allowModelChange() && this.onModelChange(value);
-        this.modelValue.set(this.value);
+        this.writeModelValue(this.value);
         this.updateEditableLabel();
         this.cd.markForCheck();
     }
@@ -1464,12 +1078,8 @@ class Select extends BaseComponent {
     registerOnTouched(fn) {
         this.onModelTouched = fn;
     }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.cd.markForCheck();
-    }
     onContainerClick(event) {
-        if (this.disabled || this.readonly || this.loading) {
+        if (this.disabled() || this.readonly || this.loading) {
             return;
         }
         this.focusInputViewChild?.nativeElement.focus({ preventScroll: true });
@@ -1568,7 +1178,7 @@ class Select extends BaseComponent {
         this.cd.markForCheck();
     }
     onInputFocus(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             // For ScreenReaders
             return;
         }
@@ -1587,7 +1197,7 @@ class Select extends BaseComponent {
         this.preventModelTouched = false;
     }
     onKeyDown(event, search = false) {
-        if (this.disabled || this.readonly || this.loading) {
+        if (this.disabled() || this.readonly || this.loading) {
             return;
         }
         switch (event.code) {
@@ -1960,17 +1570,17 @@ class Select extends BaseComponent {
         this.onClear.emit(event);
         this.resetFilter();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Select, deps: [{ token: i0.NgZone }, { token: i2.FilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: Select, isStandalone: true, selector: "p-select", inputs: { id: "id", scrollHeight: "scrollHeight", filter: ["filter", "filter", booleanAttribute], name: "name", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], editable: ["editable", "editable", booleanAttribute], appendTo: "appendTo", tabindex: ["tabindex", "tabindex", numberAttribute], placeholder: "placeholder", loadingIcon: "loadingIcon", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", variant: "variant", inputId: "inputId", dataKey: "dataKey", filterBy: "filterBy", filterFields: "filterFields", autofocus: ["autofocus", "autofocus", booleanAttribute], resetFilterOnHide: ["resetFilterOnHide", "resetFilterOnHide", booleanAttribute], checkmark: ["checkmark", "checkmark", booleanAttribute], dropdownIcon: "dropdownIcon", loading: ["loading", "loading", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", autoDisplayFirst: ["autoDisplayFirst", "autoDisplayFirst", booleanAttribute], group: ["group", "group", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", size: "size", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: ["maxlength", "maxlength", numberAttribute], tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], autofocusFilter: ["autofocusFilter", "autofocusFilter", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], disabled: "disabled", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", filterValue: "filterValue", options: "options" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { listeners: { "click": "onContainerClick($event)" }, properties: { "attr.id": "id", "class": "this.hostClass", "style": "this.hostStyle" } }, providers: [SELECT_VALUE_ACCESSOR, SelectStyle], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "groupTemplate", first: true, predicate: ["group"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "selectedItemTemplate", first: true, predicate: ["selectedItem"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "emptyFilterTemplate", first: true, predicate: ["emptyfilter"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "onIconTemplate", first: true, predicate: ["onicon"] }, { propertyName: "offIconTemplate", first: true, predicate: ["officon"] }, { propertyName: "cancelIconTemplate", first: true, predicate: ["cancelicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "editableInputViewChild", first: true, predicate: ["editableInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Select, deps: [{ token: i0.NgZone }, { token: i2.FilterService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Select, isStandalone: true, selector: "p-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, filterFields: { classPropertyName: "filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: false, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", 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 }, group: { classPropertyName: "group", publicName: "group", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: false, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: false, isRequired: false, transformFunction: null }, ariaFilterLabel: { classPropertyName: "ariaFilterLabel", publicName: "ariaFilterLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: false, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: false, isRequired: false, transformFunction: null }, tooltipPositionStyle: { classPropertyName: "tooltipPositionStyle", publicName: "tooltipPositionStyle", isSignal: false, isRequired: false, transformFunction: null }, tooltipStyleClass: { classPropertyName: "tooltipStyleClass", publicName: "tooltipStyleClass", 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 }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { listeners: { "click": "onContainerClick($event)" }, properties: { "class": "cn(cx('root'), styleClass)", "attr.id": "id" } }, providers: [SELECT_VALUE_ACCESSOR, SelectStyle], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "groupTemplate", first: true, predicate: ["group"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "selectedItemTemplate", first: true, predicate: ["selectedItem"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "emptyFilterTemplate", first: true, predicate: ["emptyfilter"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "onIconTemplate", first: true, predicate: ["onicon"] }, { propertyName: "offIconTemplate", first: true, predicate: ["officon"] }, { propertyName: "cancelIconTemplate", first: true, predicate: ["cancelicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "editableInputViewChild", first: true, predicate: ["editableInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <span
             #focusInput
-            [ngClass]="inputClass"
+            [class]="cx('label')"
             *ngIf="!editable"
             [pTooltip]="tooltip"
             [tooltipPosition]="tooltipPosition"
             [positionStyle]="tooltipPositionStyle"
             [tooltipStyleClass]="tooltipStyleClass"
-            [attr.aria-disabled]="disabled"
+            [attr.aria-disabled]="disabled()"
             [attr.id]="inputId"
             role="combobox"
             [attr.aria-label]="ariaLabel || (label() === 'p-emptylabel' ? undefined : label())"
@@ -1978,14 +1588,15 @@ class Select extends BaseComponent {
             [attr.aria-haspopup]="'listbox'"
             [attr.aria-expanded]="overlayVisible ?? false"
             [attr.aria-controls]="overlayVisible ? id + '_list' : null"
-            [attr.tabindex]="!disabled ? tabindex : -1"
+            [attr.tabindex]="!disabled() ? tabindex : -1"
             [pAutoFocus]="autofocus"
             [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
             (focus)="onInputFocus($event)"
             (blur)="onInputBlur($event)"
             (keydown)="onKeyDown($event)"
-            [attr.aria-required]="required"
-            [attr.required]="required"
+            [attr.aria-required]="required()"
+            [attr.required]="required() ? '' : undefined"
+            [attr.disabled]="disabled() ? '' : undefined"
         >
             <ng-container *ngIf="!selectedItemTemplate && !_selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() }}</ng-container>
             <ng-container *ngIf="(selectedItemTemplate || _selectedItemTemplate) && !isSelectedOptionEmpty()" [ngTemplateOutlet]="selectedItemTemplate || _selectedItemTemplate" [ngTemplateOutletContext]="{ $implicit: selectedOption }"></ng-container>
@@ -1998,9 +1609,7 @@ class Select extends BaseComponent {
             #editableInput
             type="text"
             [attr.id]="inputId"
-            [attr.maxlength]="maxlength"
-            [ngClass]="inputClass"
-            [disabled]="disabled"
+            [class]="cx('label')"
             aria-haspopup="listbox"
             [attr.placeholder]="modelValue() === undefined || modelValue() === null ? placeholder() : undefined"
             [attr.aria-label]="ariaLabel || (label() === 'p-emptylabel' ? undefined : label())"
@@ -2010,51 +1619,49 @@ class Select extends BaseComponent {
             [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
             (focus)="onInputFocus($event)"
             (blur)="onInputBlur($event)"
+            [attr.name]="name()"
+            [attr.minlength]="minlength()"
+            [attr.min]="min()"
+            [attr.max]="max()"
+            [attr.pattern]="pattern()"
+            [attr.size]="inputSize()"
+            [attr.maxlength]="maxlength()"
+            [attr.required]="required() ? '' : undefined"
+            [attr.readonly]="readonly ? '' : undefined"
+            [attr.disabled]="disabled() ? '' : undefined"
         />
         <ng-container *ngIf="isVisibleClearIcon">
-            <TimesIcon class="p-select-clear-icon" (click)="clear($event)" *ngIf="!clearIconTemplate && !_clearIconTemplate" [attr.data-pc-section]="'clearicon'" />
-            <span class="p-select-clear-icon" (click)="clear($event)" *ngIf="clearIconTemplate || _clearIconTemplate" [attr.data-pc-section]="'clearicon'">
-                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate; context: { class: 'p-select-clear-icon' }"></ng-template>
+            <TimesIcon [class]="cx('clearIcon')" (click)="clear($event)" *ngIf="!clearIconTemplate && !_clearIconTemplate" [attr.data-pc-section]="'clearicon'" />
+            <span [class]="cx('clearIcon')" (click)="clear($event)" *ngIf="clearIconTemplate || _clearIconTemplate" [attr.data-pc-section]="'clearicon'">
+                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate; context: { class: cx('clearIcon') }"></ng-template>
             </span>
         </ng-container>
 
-        <div class="p-select-dropdown" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'trigger'">
+        <div [class]="cx('dropdown')" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'trigger'">
             <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-select-loading-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
-                    <span *ngIf="!loadingIcon" [class]="'p-select-loading-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
+                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)" aria-hidden="true"></span>
+                    <span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), 'pi pi-spinner pi-spin')" aria-hidden="true"></span>
                 </ng-container>
             </ng-container>
 
             <ng-template #elseBlock>
                 <ng-container *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate">
-                    <span class="p-select-dropdown-icon" *ngIf="dropdownIcon" [ngClass]="dropdownIcon"></span>
-                    <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="'p-select-dropdown-icon'" />
+                    <span [class]="cn(cx('dropdownIcon'), dropdownIcon)" *ngIf="dropdownIcon"></span>
+                    <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="cx('dropdownIcon')" />
                 </ng-container>
-                <span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" class="p-select-dropdown-icon">
-                    <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate; context: { class: 'p-select-dropdown-icon' }"></ng-template>
+                <span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" [class]="cx('dropdownIcon')">
+                    <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate; context: { class: cx('dropdownIcon') }"></ng-template>
                 </span>
             </ng-template>
         </div>
 
-        <p-overlay
-            #overlay
-            [(visible)]="overlayVisible"
-            [options]="overlayOptions"
-            [target]="'@parent'"
-            [appendTo]="appendTo"
-            [autoZIndex]="autoZIndex"
-            [baseZIndex]="baseZIndex"
-            [showTransitionOptions]="showTransitionOptions"
-            [hideTransitionOptions]="hideTransitionOptions"
-            (onAnimationStart)="onOverlayAnimationStart($event)"
-            (onHide)="hide()"
-        >
+        <p-overlay #overlay [hostAttrSelector]="attrSelector" [(visible)]="overlayVisible" [options]="overlayOptions" [target]="'@parent'" [appendTo]="$appendTo()" (onAnimationStart)="onOverlayAnimationStart($event)" (onHide)="hide()">
             <ng-template #content>
-                <div [ngClass]="'p-select-overlay p-component'" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                <div [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle">
                     <span
                         #firstHiddenFocusableEl
                         role="presentation"
@@ -2066,7 +1673,7 @@ class Select extends BaseComponent {
                     >
                     </span>
                     <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                    <div class="p-select-header" *ngIf="filter" (click)="$event.stopPropagation()">
+                    <div [class]="cx('header')" *ngIf="filter" (click)="$event.stopPropagation()">
                         <ng-container *ngIf="filterTemplate || _filterTemplate; else builtInFilterElement">
                             <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
                         </ng-container>
@@ -2075,13 +1682,13 @@ class Select extends BaseComponent {
                                 <input
                                     #filter
                                     pInputText
-                                    [pSize]="size"
+                                    [pSize]="size()"
                                     type="text"
                                     role="searchbox"
                                     autocomplete="off"
                                     [value]="_filterValue() || ''"
-                                    class="p-select-filter"
-                                    [variant]="variant"
+                                    [class]="cx('pcFilter')"
+                                    [variant]="$variant()"
                                     [attr.placeholder]="filterPlaceholder"
                                     [attr.aria-owns]="id + '_list'"
                                     (input)="onFilterInputChange($event)"
@@ -2099,13 +1706,13 @@ class Select extends BaseComponent {
                             </p-iconfield>
                         </ng-template>
                     </div>
-                    <div class="p-select-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+                    <div [class]="cx('listContainer')" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
                         <p-scroller
                             *ngIf="virtualScroll"
                             #scroller
                             [items]="visibleOptions()"
                             [style]="{ height: scrollHeight }"
-                            [itemSize]="virtualScrollItemSize || _itemSize"
+                            [itemSize]="virtualScrollItemSize"
                             [autoSize]="true"
                             [lazy]="lazy"
                             (onLazyLoad)="onLazyLoad.emit($event)"
@@ -2125,10 +1732,10 @@ class Select extends BaseComponent {
                         </ng-container>
 
                         <ng-template #buildInItems let-items let-scrollerOptions="options">
-                            <ul #items [attr.id]="id + '_list'" [attr.aria-label]="listLabel" class="p-select-list" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
+                            <ul #items [attr.id]="id + '_list'" [attr.aria-label]="listLabel" [class]="cn(cx('list'), scrollerOptions.contentStyleClass)" [style]="scrollerOptions.contentStyle" role="listbox">
                                 <ng-template ngFor let-option [ngForOf]="items" let-i="index">
                                     <ng-container *ngIf="isOptionGroup(option)">
-                                        <li class="p-select-option-group" [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                        <li [class]="cx('optionGroup')" [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                             <span *ngIf="!groupTemplate && !_groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
                                             <ng-container *ngTemplateOutlet="groupTemplate || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
                                         </li>
@@ -2150,14 +1757,14 @@ class Select extends BaseComponent {
                                         ></p-selectItem>
                                     </ng-container>
                                 </ng-template>
-                                <li *ngIf="filterValue && isEmpty()" class="p-select-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                <li *ngIf="filterValue && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                     @if (!emptyFilterTemplate && !_emptyFilterTemplate && !emptyTemplate) {
                                         {{ emptyFilterMessageLabel }}
                                     } @else {
                                         <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || _emptyFilterTemplate || emptyTemplate || _emptyTemplate"></ng-container>
                                     }
                                 </li>
-                                <li *ngIf="!filterValue && isEmpty()" class="p-select-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                <li *ngIf="!filterValue && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                     @if (!emptyTemplate && !_emptyTemplate) {
                                         {{ emptyMessageLabel }}
                                     } @else {
@@ -2180,9 +1787,9 @@ class Select extends BaseComponent {
                 </div>
             </ng-template>
         </p-overlay>
-    `, isInline: true, dependencies: [{ 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SelectItem, selector: "p-selectItem", inputs: ["id", "option", "selected", "focused", "label", "disabled", "visible", "itemSize", "ariaPosInset", "ariaSetSize", "template", "checkmark"], outputs: ["onClick", "onMouseEnter"] }, { 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: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: SearchIcon, selector: "SearchIcon" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SelectItem, selector: "p-selectItem", inputs: ["id", "option", "selected", "focused", "label", "disabled", "visible", "itemSize", "ariaPosInset", "ariaSetSize", "template", "checkmark"], outputs: ["onClick", "onMouseEnter"] }, { 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: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: SearchIcon, selector: "SearchIcon" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Select, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Select, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-select',
@@ -2191,13 +1798,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     template: `
         <span
             #focusInput
-            [ngClass]="inputClass"
+            [class]="cx('label')"
             *ngIf="!editable"
             [pTooltip]="tooltip"
             [tooltipPosition]="tooltipPosition"
             [positionStyle]="tooltipPositionStyle"
             [tooltipStyleClass]="tooltipStyleClass"
-            [attr.aria-disabled]="disabled"
+            [attr.aria-disabled]="disabled()"
             [attr.id]="inputId"
             role="combobox"
             [attr.aria-label]="ariaLabel || (label() === 'p-emptylabel' ? undefined : label())"
@@ -2205,14 +1812,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             [attr.aria-haspopup]="'listbox'"
             [attr.aria-expanded]="overlayVisible ?? false"
             [attr.aria-controls]="overlayVisible ? id + '_list' : null"
-            [attr.tabindex]="!disabled ? tabindex : -1"
+            [attr.tabindex]="!disabled() ? tabindex : -1"
             [pAutoFocus]="autofocus"
             [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
             (focus)="onInputFocus($event)"
             (blur)="onInputBlur($event)"
             (keydown)="onKeyDown($event)"
-            [attr.aria-required]="required"
-            [attr.required]="required"
+            [attr.aria-required]="required()"
+            [attr.required]="required() ? '' : undefined"
+            [attr.disabled]="disabled() ? '' : undefined"
         >
             <ng-container *ngIf="!selectedItemTemplate && !_selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() }}</ng-container>
             <ng-container *ngIf="(selectedItemTemplate || _selectedItemTemplate) && !isSelectedOptionEmpty()" [ngTemplateOutlet]="selectedItemTemplate || _selectedItemTemplate" [ngTemplateOutletContext]="{ $implicit: selectedOption }"></ng-container>
@@ -2225,9 +1833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             #editableInput
             type="text"
             [attr.id]="inputId"
-            [attr.maxlength]="maxlength"
-            [ngClass]="inputClass"
-            [disabled]="disabled"
+            [class]="cx('label')"
             aria-haspopup="listbox"
             [attr.placeholder]="modelValue() === undefined || modelValue() === null ? placeholder() : undefined"
             [attr.aria-label]="ariaLabel || (label() === 'p-emptylabel' ? undefined : label())"
@@ -2237,51 +1843,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
             (focus)="onInputFocus($event)"
             (blur)="onInputBlur($event)"
+            [attr.name]="name()"
+            [attr.minlength]="minlength()"
+            [attr.min]="min()"
+            [attr.max]="max()"
+            [attr.pattern]="pattern()"
+            [attr.size]="inputSize()"
+            [attr.maxlength]="maxlength()"
+            [attr.required]="required() ? '' : undefined"
+            [attr.readonly]="readonly ? '' : undefined"
+            [attr.disabled]="disabled() ? '' : undefined"
         />
         <ng-container *ngIf="isVisibleClearIcon">
-            <TimesIcon class="p-select-clear-icon" (click)="clear($event)" *ngIf="!clearIconTemplate && !_clearIconTemplate" [attr.data-pc-section]="'clearicon'" />
-            <span class="p-select-clear-icon" (click)="clear($event)" *ngIf="clearIconTemplate || _clearIconTemplate" [attr.data-pc-section]="'clearicon'">
-                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate; context: { class: 'p-select-clear-icon' }"></ng-template>
+            <TimesIcon [class]="cx('clearIcon')" (click)="clear($event)" *ngIf="!clearIconTemplate && !_clearIconTemplate" [attr.data-pc-section]="'clearicon'" />
+            <span [class]="cx('clearIcon')" (click)="clear($event)" *ngIf="clearIconTemplate || _clearIconTemplate" [attr.data-pc-section]="'clearicon'">
+                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate; context: { class: cx('clearIcon') }"></ng-template>
             </span>
         </ng-container>
 
-        <div class="p-select-dropdown" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'trigger'">
+        <div [class]="cx('dropdown')" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'trigger'">
             <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-select-loading-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
-                    <span *ngIf="!loadingIcon" [class]="'p-select-loading-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
+                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)" aria-hidden="true"></span>
+                    <span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), 'pi pi-spinner pi-spin')" aria-hidden="true"></span>
                 </ng-container>
             </ng-container>
 
             <ng-template #elseBlock>
                 <ng-container *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate">
-                    <span class="p-select-dropdown-icon" *ngIf="dropdownIcon" [ngClass]="dropdownIcon"></span>
-                    <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="'p-select-dropdown-icon'" />
+                    <span [class]="cn(cx('dropdownIcon'), dropdownIcon)" *ngIf="dropdownIcon"></span>
+                    <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="cx('dropdownIcon')" />
                 </ng-container>
-                <span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" class="p-select-dropdown-icon">
-                    <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate; context: { class: 'p-select-dropdown-icon' }"></ng-template>
+                <span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" [class]="cx('dropdownIcon')">
+                    <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate; context: { class: cx('dropdownIcon') }"></ng-template>
                 </span>
             </ng-template>
         </div>
 
-        <p-overlay
-            #overlay
-            [(visible)]="overlayVisible"
-            [options]="overlayOptions"
-            [target]="'@parent'"
-            [appendTo]="appendTo"
-            [autoZIndex]="autoZIndex"
-            [baseZIndex]="baseZIndex"
-            [showTransitionOptions]="showTransitionOptions"
-            [hideTransitionOptions]="hideTransitionOptions"
-            (onAnimationStart)="onOverlayAnimationStart($event)"
-            (onHide)="hide()"
-        >
+        <p-overlay #overlay [hostAttrSelector]="attrSelector" [(visible)]="overlayVisible" [options]="overlayOptions" [target]="'@parent'" [appendTo]="$appendTo()" (onAnimationStart)="onOverlayAnimationStart($event)" (onHide)="hide()">
             <ng-template #content>
-                <div [ngClass]="'p-select-overlay p-component'" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                <div [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle">
                     <span
                         #firstHiddenFocusableEl
                         role="presentation"
@@ -2293,7 +1897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     >
                     </span>
                     <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                    <div class="p-select-header" *ngIf="filter" (click)="$event.stopPropagation()">
+                    <div [class]="cx('header')" *ngIf="filter" (click)="$event.stopPropagation()">
                         <ng-container *ngIf="filterTemplate || _filterTemplate; else builtInFilterElement">
                             <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { options: filterOptions }"></ng-container>
                         </ng-container>
@@ -2302,13 +1906,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                 <input
                                     #filter
                                     pInputText
-                                    [pSize]="size"
+                                    [pSize]="size()"
                                     type="text"
                                     role="searchbox"
                                     autocomplete="off"
                                     [value]="_filterValue() || ''"
-                                    class="p-select-filter"
-                                    [variant]="variant"
+                                    [class]="cx('pcFilter')"
+                                    [variant]="$variant()"
                                     [attr.placeholder]="filterPlaceholder"
                                     [attr.aria-owns]="id + '_list'"
                                     (input)="onFilterInputChange($event)"
@@ -2326,13 +1930,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                             </p-iconfield>
                         </ng-template>
                     </div>
-                    <div class="p-select-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+                    <div [class]="cx('listContainer')" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
                         <p-scroller
                             *ngIf="virtualScroll"
                             #scroller
                             [items]="visibleOptions()"
                             [style]="{ height: scrollHeight }"
-                            [itemSize]="virtualScrollItemSize || _itemSize"
+                            [itemSize]="virtualScrollItemSize"
                             [autoSize]="true"
                             [lazy]="lazy"
                             (onLazyLoad)="onLazyLoad.emit($event)"
@@ -2352,10 +1956,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         </ng-container>
 
                         <ng-template #buildInItems let-items let-scrollerOptions="options">
-                            <ul #items [attr.id]="id + '_list'" [attr.aria-label]="listLabel" class="p-select-list" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
+                            <ul #items [attr.id]="id + '_list'" [attr.aria-label]="listLabel" [class]="cn(cx('list'), scrollerOptions.contentStyleClass)" [style]="scrollerOptions.contentStyle" role="listbox">
                                 <ng-template ngFor let-option [ngForOf]="items" let-i="index">
                                     <ng-container *ngIf="isOptionGroup(option)">
-                                        <li class="p-select-option-group" [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                        <li [class]="cx('optionGroup')" [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                             <span *ngIf="!groupTemplate && !_groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
                                             <ng-container *ngTemplateOutlet="groupTemplate || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
                                         </li>
@@ -2377,14 +1981,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                                         ></p-selectItem>
                                     </ng-container>
                                 </ng-template>
-                                <li *ngIf="filterValue && isEmpty()" class="p-select-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                <li *ngIf="filterValue && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                     @if (!emptyFilterTemplate && !_emptyFilterTemplate && !emptyTemplate) {
                                         {{ emptyFilterMessageLabel }}
                                     } @else {
                                         <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || _emptyFilterTemplate || emptyTemplate || _emptyTemplate"></ng-container>
                                     }
                                 </li>
-                                <li *ngIf="!filterValue && isEmpty()" class="p-select-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                <li *ngIf="!filterValue && isEmpty()" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                     @if (!emptyTemplate && !_emptyTemplate) {
                                         {{ emptyMessageLabel }}
                                     } @else {
@@ -2409,6 +2013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         </p-overlay>
     `,
                     host: {
+                        '[class]': "cn(cx('root'), styleClass)",
                         '[attr.id]': 'id',
                         '(click)': 'onContainerClick($event)'
                     },
@@ -2423,10 +2028,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], filter: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], name: [{
-                type: Input
-            }], style: [{
-                type: Input
             }], panelStyle: [{
                 type: Input
             }], styleClass: [{
@@ -2436,14 +2037,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], readonly: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], editable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], appendTo: [{
-                type: Input
             }], tabindex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -2455,8 +2051,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], filterLocale: [{
                 type: Input
-            }], variant: [{
-                type: Input
             }], inputId: [{
                 type: Input
             }], dataKey: [{
@@ -2489,9 +2083,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], optionGroupChildren: [{
                 type: Input
-            }], autoDisplayFirst: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], group: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -2513,8 +2104,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [{ transform: numberAttribute }]
             }], virtualScrollOptions: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], overlayOptions: [{
                 type: Input
             }], ariaFilterLabel: [{
@@ -2525,9 +2114,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], filterMatchMode: [{
                 type: Input
-            }], maxlength: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
             }], tooltip: [{
                 type: Input
             }], tooltipPosition: [{
@@ -2548,21 +2134,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], autofocusFilter: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], fluid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input
-            }], itemSize: [{
-                type: Input
-            }], autoZIndex: [{
-                type: Input
-            }], baseZIndex: [{
-                type: Input
-            }], showTransitionOptions: [{
-                type: Input
-            }], hideTransitionOptions: [{
-                type: Input
             }], filterValue: [{
                 type: Input
             }], options: [{
@@ -2609,12 +2180,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], lastHiddenFocusableElementOnOverlay: [{
                 type: ViewChild,
                 args: ['lastHiddenFocusableEl']
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], hostStyle: [{
-                type: HostBinding,
-                args: ['style']
             }], itemTemplate: [{
                 type: ContentChild,
                 args: ['item', { descendants: false }]
@@ -2668,11 +2233,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [PrimeTemplate]
             }] } });
 class SelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: SelectModule, imports: [Select, SharedModule], exports: [Select, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectModule, imports: [Select, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SelectModule, imports: [Select, SharedModule], exports: [Select, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectModule, imports: [Select, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Select, SharedModule],