primeng 20.0.0-rc.1 → 20.0.0-rc.3

package/fesm2022/primeng-message.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-message.mjs","sources":["../../src/message/style/messagestyle.ts","../../src/message/message.ts","../../src/message/primeng-message.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/message';\nimport { BaseStyle } from 'primeng/base';\n\nconst classes = {\n    root: ({ instance }) => ['p-message p-component p-message-' + instance.severity, 'p-message-' + instance.variant, { 'p-message-sm': instance.size === 'small', 'p-message-lg': instance.size === 'large' }],\n    content: 'p-message-content',\n    icon: 'p-message-icon',\n    text: 'p-message-text',\n    closeButton: 'p-message-close-button',\n    closeIcon: 'p-message-close-icon'\n};\n\n@Injectable()\nexport class MessageStyle extends BaseStyle {\n    name = 'message';\n\n    theme = style;\n\n    classes = classes;\n}\n\n/**\n *\n * Message groups a collection of contents in tabs.\n *\n * [Live Demo](https://www.primeng.org/message/)\n *\n * @module messagestyle\n *\n */\n\nexport enum MessageClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-message',\n    /**\n     * Class name of the content element\n     */\n    content = 'p-message-content',\n    /**\n     * Class name of the icon element\n     */\n    icon = 'p-message-icon',\n    /**\n     * Class name of the text element\n     */\n    text = 'p-message-text',\n    /**\n     * Class name of the close button element\n     */\n    closeButton = 'p-message-close-button',\n    /**\n     * Class name of the close icon element\n     */\n    closeIcon = 'p-message-close-icon'\n}\n\nexport interface MessageStyle extends BaseStyle {}\n","import { animate, style, transition, trigger } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport { AfterContentInit, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, EventEmitter, inject, Input, NgModule, Output, QueryList, signal, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { TimesIcon } from 'primeng/icons';\nimport { Ripple } from 'primeng/ripple';\nimport { MessageStyle } from './style/messagestyle';\n\n/**\n * Message groups a collection of contents in tabs.\n * @group Components\n */\n@Component({\n    selector: 'p-message',\n    standalone: true,\n    imports: [CommonModule, TimesIcon, Ripple, SharedModule],\n    template: `\n        @if (visible()) {\n            <div\n                class=\"p-message p-component\"\n                [attr.aria-live]=\"'polite'\"\n                [class]=\"cn(cx('root'), styleClass)\"\n                [attr.role]=\"'alert'\"\n                [@messageAnimation]=\"{\n                    value: 'visible()',\n                    params: {\n                        showTransitionParams: showTransitionOptions,\n                        hideTransitionParams: hideTransitionOptions\n                    }\n                }\"\n            >\n                <div [class]=\"cx('content')\">\n                    @if (iconTemplate || _iconTemplate) {\n                        <ng-container *ngTemplateOutlet=\"iconTemplate || iconTemplate\"></ng-container>\n                    }\n                    @if (icon) {\n                        <i [class]=\"cn(cx('icon'), icon)\"></i>\n                    }\n\n                    <div *ngIf=\"!escape; else escapeOut\">\n                        <span *ngIf=\"!escape\" [ngClass]=\"cx('text')\" [innerHTML]=\"text\"></span>\n                    </div>\n\n                    <ng-template #escapeOut>\n                        <span *ngIf=\"escape && text\" [ngClass]=\"cx('text')\">{{ text }}</span>\n                    </ng-template>\n\n                    @if (containerTemplate || _containerTemplate) {\n                        <ng-container *ngTemplateOutlet=\"containerTemplate || containerTemplate; context: { closeCallback: close.bind(this) }\"></ng-container>\n                    } @else {\n                        <span [ngClass]=\"cx('text')\">\n                            <ng-content></ng-content>\n                        </span>\n                    }\n                    @if (closable) {\n                        <button pRipple type=\"button\" [class]=\"cx('closeButton')\" (click)=\"close($event)\" [attr.aria-label]=\"closeAriaLabel\">\n                            @if (closeIcon) {\n                                <i [class]=\"cn(cx('closeIcon'), closeIcon)\" [ngClass]=\"closeIcon\"></i>\n                            }\n                            @if (closeIconTemplate || _closeIconTemplate) {\n                                <ng-container *ngTemplateOutlet=\"closeIconTemplate || _closeIconTemplate\"></ng-container>\n                            }\n                            @if (!closeIconTemplate && !_closeIconTemplate && !closeIcon) {\n                                <TimesIcon [styleClass]=\"cx('closeIcon')\" />\n                            }\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [MessageStyle],\n    animations: [\n        trigger('messageAnimation', [\n            transition(':enter', [style({ opacity: 0, transform: 'translateY(-25%)' }), animate('{{showTransitionParams}}')]),\n            transition(':leave', [\n                animate(\n                    '{{hideTransitionParams}}',\n                    style({\n                        height: 0,\n                        marginTop: 0,\n                        marginBottom: 0,\n                        marginLeft: 0,\n                        marginRight: 0,\n                        opacity: 0\n                    })\n                )\n            ])\n        ])\n    ]\n})\nexport class Message extends BaseComponent implements AfterContentInit {\n    /**\n     * Severity level of the message.\n     * @defaultValue 'info'\n     * @group Props\n     */\n    @Input() severity: string | 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined | null = 'info';\n    /**\n     * Text content.\n     * @deprecated since v20.0.0. Use content projection instead '<p-message>Content</p-message>'.\n     * @group Props\n     */\n    @Input() text: string | undefined;\n    /**\n     * Whether displaying messages would be escaped or not.\n     * @deprecated since v20.0.0. Use content projection instead '<p-message>Content</p-message>'.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) escape: boolean = true;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Whether the message can be closed manually using the close icon.\n     * @group Props\n     * @defaultValue false\n     */\n    @Input({ transform: booleanAttribute }) closable: boolean = false;\n    /**\n     * Icon to display in the message.\n     * @group Props\n     * @defaultValue undefined\n     */\n    @Input() icon: string | undefined;\n    /**\n     * Icon to display in the message close button.\n     * @group Props\n     * @defaultValue undefined\n     */\n    @Input() closeIcon: string | undefined;\n    /**\n     * Delay in milliseconds to close the message automatically.\n     * @defaultValue undefined\n     */\n    @Input() life: number | undefined;\n    /**\n     * Transition options of the show animation.\n     * @defaultValue '300ms ease-out'\n     * @group Props\n     */\n    @Input() showTransitionOptions: string = '300ms ease-out';\n    /**\n     * Transition options of the hide animation.\n     * @defaultValue '200ms cubic-bezier(0.86, 0, 0.07, 1)'\n     * @group Props\n     */\n    @Input() hideTransitionOptions: string = '200ms cubic-bezier(0.86, 0, 0.07, 1)';\n    /**\n     * Defines the size of the component.\n     * @group Props\n     */\n    @Input() size: 'large' | 'small' | undefined;\n    /**\n     * Specifies the input variant of the component.\n     * @group Props\n     */\n    @Input() variant: 'outlined' | 'text' | 'simple' | undefined;\n    /**\n     * Emits when the message is closed.\n     * @param {{ originalEvent: Event }} event - The event object containing the original event.\n     * @group Emits\n     */\n    @Output() onClose: EventEmitter<{ originalEvent: Event }> = new EventEmitter<{ originalEvent: Event }>();\n\n    get closeAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.close : undefined;\n    }\n\n    visible = signal<boolean>(true);\n\n    _componentStyle = inject(MessageStyle);\n\n    /**\n     * Custom template of the message container.\n     * @group Templates\n     */\n    @ContentChild('container', { descendants: false }) containerTemplate: TemplateRef<any> | undefined;\n\n    /**\n     * Custom template of the message icon.\n     * @group Templates\n     */\n    @ContentChild('icon', { descendants: false }) iconTemplate: TemplateRef<any> | undefined;\n\n    /**\n     * Custom template of the close icon.\n     * @group Templates\n     */\n    @ContentChild('closeicon', { descendants: false }) closeIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    _containerTemplate: TemplateRef<any> | undefined;\n\n    _iconTemplate: TemplateRef<any> | undefined;\n\n    _closeIconTemplate: TemplateRef<any> | undefined;\n\n    ngOnInit() {\n        super.ngOnInit();\n        if (this.life) {\n            setTimeout(() => {\n                this.visible.set(false);\n            }, this.life);\n        }\n    }\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'container':\n                    this._containerTemplate = item.template;\n                    break;\n\n                case 'icon':\n                    this._iconTemplate = item.template;\n                    break;\n\n                case 'closeicon':\n                    this._closeIconTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    /**\n     * Closes the message.\n     * @param {Event} event - Browser event.\n     * @group Method\n     */\n    public close(event: Event) {\n        this.visible.set(false);\n        this.onClose.emit({ originalEvent: event });\n    }\n}\n\n@NgModule({\n    imports: [Message, SharedModule],\n    exports: [Message, SharedModule]\n})\nexport class MessageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["style"],"mappings":"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"}
+{"version":3,"file":"primeng-message.mjs","sources":["../../src/message/style/messagestyle.ts","../../src/message/message.ts","../../src/message/primeng-message.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/message';\nimport { BaseStyle } from 'primeng/base';\n\nconst classes = {\n    root: ({ instance }) => ['p-message p-component p-message-' + instance.severity, 'p-message-' + instance.variant, { 'p-message-sm': instance.size === 'small', 'p-message-lg': instance.size === 'large' }],\n    content: 'p-message-content',\n    icon: 'p-message-icon',\n    text: 'p-message-text',\n    closeButton: 'p-message-close-button',\n    closeIcon: 'p-message-close-icon'\n};\n\n@Injectable()\nexport class MessageStyle extends BaseStyle {\n    name = 'message';\n\n    theme = style;\n\n    classes = classes;\n}\n\n/**\n *\n * Message groups a collection of contents in tabs.\n *\n * [Live Demo](https://www.primeng.org/message/)\n *\n * @module messagestyle\n *\n */\n\nexport enum MessageClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-message',\n    /**\n     * Class name of the content element\n     */\n    content = 'p-message-content',\n    /**\n     * Class name of the icon element\n     */\n    icon = 'p-message-icon',\n    /**\n     * Class name of the text element\n     */\n    text = 'p-message-text',\n    /**\n     * Class name of the close button element\n     */\n    closeButton = 'p-message-close-button',\n    /**\n     * Class name of the close icon element\n     */\n    closeIcon = 'p-message-close-icon'\n}\n\nexport interface MessageStyle extends BaseStyle {}\n","import { animate, style, transition, trigger } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport { AfterContentInit, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, EventEmitter, inject, Input, NgModule, Output, QueryList, signal, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { TimesIcon } from 'primeng/icons';\nimport { Ripple } from 'primeng/ripple';\nimport { MessageStyle } from './style/messagestyle';\n\n/**\n * Message groups a collection of contents in tabs.\n * @group Components\n */\n@Component({\n    selector: 'p-message',\n    standalone: true,\n    imports: [CommonModule, TimesIcon, Ripple, SharedModule],\n    template: `\n        @if (visible()) {\n            <div\n                class=\"p-message p-component\"\n                [attr.aria-live]=\"'polite'\"\n                [class]=\"cn(cx('root'), styleClass)\"\n                [attr.role]=\"'alert'\"\n                [@messageAnimation]=\"{\n                    value: 'visible()',\n                    params: {\n                        showTransitionParams: showTransitionOptions,\n                        hideTransitionParams: hideTransitionOptions\n                    }\n                }\"\n            >\n                <div [class]=\"cx('content')\">\n                    @if (iconTemplate || _iconTemplate) {\n                        <ng-container *ngTemplateOutlet=\"iconTemplate || iconTemplate\"></ng-container>\n                    }\n                    @if (icon) {\n                        <i [class]=\"cn(cx('icon'), icon)\"></i>\n                    }\n\n                    <div *ngIf=\"!escape; else escapeOut\">\n                        <span *ngIf=\"!escape\" [ngClass]=\"cx('text')\" [innerHTML]=\"text\"></span>\n                    </div>\n\n                    <ng-template #escapeOut>\n                        <span *ngIf=\"escape && text\" [ngClass]=\"cx('text')\">{{ text }}</span>\n                    </ng-template>\n\n                    @if (containerTemplate || _containerTemplate) {\n                        <ng-container *ngTemplateOutlet=\"containerTemplate || containerTemplate; context: { closeCallback: close.bind(this) }\"></ng-container>\n                    } @else {\n                        <span [ngClass]=\"cx('text')\">\n                            <ng-content></ng-content>\n                        </span>\n                    }\n                    @if (closable) {\n                        <button pRipple type=\"button\" [class]=\"cx('closeButton')\" (click)=\"close($event)\" [attr.aria-label]=\"closeAriaLabel\">\n                            @if (closeIcon) {\n                                <i [class]=\"cn(cx('closeIcon'), closeIcon)\" [ngClass]=\"closeIcon\"></i>\n                            }\n                            @if (closeIconTemplate || _closeIconTemplate) {\n                                <ng-container *ngTemplateOutlet=\"closeIconTemplate || _closeIconTemplate\"></ng-container>\n                            }\n                            @if (!closeIconTemplate && !_closeIconTemplate && !closeIcon) {\n                                <svg data-p-icon=\"times\" [class]=\"cx('closeIcon')\" />\n                            }\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [MessageStyle],\n    animations: [\n        trigger('messageAnimation', [\n            transition(':enter', [style({ opacity: 0, transform: 'translateY(-25%)' }), animate('{{showTransitionParams}}')]),\n            transition(':leave', [\n                animate(\n                    '{{hideTransitionParams}}',\n                    style({\n                        height: 0,\n                        marginTop: 0,\n                        marginBottom: 0,\n                        marginLeft: 0,\n                        marginRight: 0,\n                        opacity: 0\n                    })\n                )\n            ])\n        ])\n    ]\n})\nexport class Message extends BaseComponent implements AfterContentInit {\n    /**\n     * Severity level of the message.\n     * @defaultValue 'info'\n     * @group Props\n     */\n    @Input() severity: string | 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined | null = 'info';\n    /**\n     * Text content.\n     * @deprecated since v20.0.0. Use content projection instead '<p-message>Content</p-message>'.\n     * @group Props\n     */\n    @Input() text: string | undefined;\n    /**\n     * Whether displaying messages would be escaped or not.\n     * @deprecated since v20.0.0. Use content projection instead '<p-message>Content</p-message>'.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) escape: boolean = true;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Whether the message can be closed manually using the close icon.\n     * @group Props\n     * @defaultValue false\n     */\n    @Input({ transform: booleanAttribute }) closable: boolean = false;\n    /**\n     * Icon to display in the message.\n     * @group Props\n     * @defaultValue undefined\n     */\n    @Input() icon: string | undefined;\n    /**\n     * Icon to display in the message close button.\n     * @group Props\n     * @defaultValue undefined\n     */\n    @Input() closeIcon: string | undefined;\n    /**\n     * Delay in milliseconds to close the message automatically.\n     * @defaultValue undefined\n     */\n    @Input() life: number | undefined;\n    /**\n     * Transition options of the show animation.\n     * @defaultValue '300ms ease-out'\n     * @group Props\n     */\n    @Input() showTransitionOptions: string = '300ms ease-out';\n    /**\n     * Transition options of the hide animation.\n     * @defaultValue '200ms cubic-bezier(0.86, 0, 0.07, 1)'\n     * @group Props\n     */\n    @Input() hideTransitionOptions: string = '200ms cubic-bezier(0.86, 0, 0.07, 1)';\n    /**\n     * Defines the size of the component.\n     * @group Props\n     */\n    @Input() size: 'large' | 'small' | undefined;\n    /**\n     * Specifies the input variant of the component.\n     * @group Props\n     */\n    @Input() variant: 'outlined' | 'text' | 'simple' | undefined;\n    /**\n     * Emits when the message is closed.\n     * @param {{ originalEvent: Event }} event - The event object containing the original event.\n     * @group Emits\n     */\n    @Output() onClose: EventEmitter<{ originalEvent: Event }> = new EventEmitter<{ originalEvent: Event }>();\n\n    get closeAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.close : undefined;\n    }\n\n    visible = signal<boolean>(true);\n\n    _componentStyle = inject(MessageStyle);\n\n    /**\n     * Custom template of the message container.\n     * @group Templates\n     */\n    @ContentChild('container', { descendants: false }) containerTemplate: TemplateRef<any> | undefined;\n\n    /**\n     * Custom template of the message icon.\n     * @group Templates\n     */\n    @ContentChild('icon', { descendants: false }) iconTemplate: TemplateRef<any> | undefined;\n\n    /**\n     * Custom template of the close icon.\n     * @group Templates\n     */\n    @ContentChild('closeicon', { descendants: false }) closeIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    _containerTemplate: TemplateRef<any> | undefined;\n\n    _iconTemplate: TemplateRef<any> | undefined;\n\n    _closeIconTemplate: TemplateRef<any> | undefined;\n\n    ngOnInit() {\n        super.ngOnInit();\n        if (this.life) {\n            setTimeout(() => {\n                this.visible.set(false);\n            }, this.life);\n        }\n    }\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'container':\n                    this._containerTemplate = item.template;\n                    break;\n\n                case 'icon':\n                    this._iconTemplate = item.template;\n                    break;\n\n                case 'closeicon':\n                    this._closeIconTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    /**\n     * Closes the message.\n     * @param {Event} event - Browser event.\n     * @group Method\n     */\n    public close(event: Event) {\n        this.visible.set(false);\n        this.onClose.emit({ originalEvent: event });\n    }\n}\n\n@NgModule({\n    imports: [Message, SharedModule],\n    exports: [Message, SharedModule]\n})\nexport class MessageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["style"],"mappings":"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"}

package/fesm2022/primeng-multiselect.mjs

@@ -23,21 +23,20 @@ import { Ripple } from 'primeng/ripple';
 import { Scroller } from 'primeng/scroller';
 import { Tooltip } from 'primeng/tooltip';
 import { ObjectUtils } from 'primeng/utils';
-import { css, dt } from '@primeuix/styled';
 import { style } from '@primeuix/styles/multiselect';
 import { BaseStyle } from 'primeng/base';
 
-const theme = css `
+const theme = /*css*/ `
     ${style}
 
     /* For PrimeNG */
    .p-multiselect.ng-invalid.ng-dirty {
-        border-color: ${dt('multiselect.invalid.border.color')};
+        border-color: dt('multiselect.invalid.border.color');
     }
     p-multiSelect.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder,
     p-multi-select.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder,
     p-multiselect.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder {
-        color: ${dt('multiselect.invalid.placeholder.color')};
+        color: dt('multiselect.invalid.placeholder.color');
     }
 `;
 const inlineStyles = {
@@ -49,7 +48,7 @@ const classes = {
         {
             'p-multiselect p-component p-inputwrapper': true,
             'p-multiselect-display-chip': instance.display === 'chip',
-            'p-disabled': instance.disabled(),
+            'p-disabled': instance.$disabled(),
             'p-invalid': instance.invalid(),
             'p-variant-filled': instance.$variant(),
             'p-focus': instance.focused,
@@ -73,7 +72,7 @@ const classes = {
     dropdown: 'p-multiselect-dropdown',
     loadingIcon: 'p-multiselect-loading-icon',
     dropdownIcon: 'p-multiselect-dropdown-icon',
-    overlay: 'p-multiselect-overlay p-component',
+    overlay: 'p-multiselect-overlay p-component-overlay p-component',
     header: 'p-multiselect-header',
     pcFilterContainer: 'p-multiselect-filter-container',
     pcFilter: 'p-multiselect-filter',
@@ -785,8 +784,6 @@ class MultiSelect extends BaseEditableHolder {
     _disableTooltip = false;
     value;
     _filteredOptions;
-    onModelChange = () => { };
-    onModelTouched = () => { };
     focus;
     filtered;
     itemTemplate;
@@ -912,7 +909,7 @@ class MultiSelect extends BaseEditableHolder {
         return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);
     }
     get isVisibleClearIcon() {
-        return this.modelValue() != null && this.modelValue() !== '' && isNotEmpty(this.modelValue()) && this.showClear && !this.disabled() && !this.readonly && this.$filled();
+        return this.modelValue() != null && this.modelValue() !== '' && isNotEmpty(this.modelValue()) && this.showClear && !this.$disabled() && !this.readonly && this.$filled();
     }
     get toggleAllAriaLabel() {
         return this.config.translation.aria ? this.config.translation.aria[this.allSelected() ? 'selectAll' : 'unselectAll'] : undefined;
@@ -1057,7 +1054,7 @@ class MultiSelect extends BaseEditableHolder {
     }
     onOptionSelect(event, isFocus = false, index = -1) {
         const { originalEvent, option } = event;
-        if (this.disabled() || this.isOptionDisabled(option)) {
+        if (this.$disabled() || this.isOptionDisabled(option)) {
             return;
         }
         let selected = this.isSelected(option);
@@ -1203,7 +1200,7 @@ class MultiSelect extends BaseEditableHolder {
         return this.optionGroupChildren ? resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;
     }
     onKeyDown(event) {
-        if (this.disabled()) {
+        if (this.$disabled()) {
             event.preventDefault();
             return;
         }
@@ -1395,7 +1392,8 @@ class MultiSelect extends BaseEditableHolder {
             }
             else {
                 if (this.focusedOptionIndex() !== -1) {
-                    this.onOptionSelect({ originalEvent: event, option: this.visibleOptions()[this.focusedOptionIndex()] });
+                    const option = this.visibleOptions()[this.focusedOptionIndex()];
+                    !this.isSelected(option) && this.onOptionSelect({ originalEvent: event, option });
                 }
                 this.overlayVisible && this.hide(this.filter);
             }
@@ -1405,7 +1403,7 @@ class MultiSelect extends BaseEditableHolder {
         this.startRangeIndex.set(this.focusedOptionIndex());
     }
     onContainerClick(event) {
-        if (this.disabled() || this.loading || this.readonly || event.target.isSameNode(this.focusInputViewChild?.nativeElement)) {
+        if (this.$disabled() || this.loading || this.readonly || event.target.isSameNode(this.focusInputViewChild?.nativeElement)) {
             return;
         }
         if (!this.overlayViewChild || !this.overlayViewChild.el.nativeElement.contains(event.target)) {
@@ -1464,7 +1462,7 @@ class MultiSelect extends BaseEditableHolder {
         this.focusedOptionIndex.set(-1);
     }
     onToggleAll(event) {
-        if (this.disabled() || this.readonly) {
+        if (this.$disabled() || this.readonly) {
             return;
         }
         if (this.selectAll != null) {
@@ -1527,17 +1525,6 @@ class MultiSelect extends BaseEditableHolder {
     get focusedOptionId() {
         return this.focusedOptionIndex() !== -1 ? `${this.id}_${this.focusedOptionIndex()}` : null;
     }
-    writeValue(value) {
-        this.value = value;
-        this.writeModelValue(value);
-        this.cd.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onModelChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onModelTouched = fn;
-    }
     allSelected() {
         return this.selectAll !== null ? this.selectAll : isNotEmpty(this.visibleOptions()) && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option));
     }
@@ -1707,6 +1694,17 @@ class MultiSelect extends BaseEditableHolder {
     hasFilter() {
         return this._filterValue() && this._filterValue().trim().length > 0;
     }
+    /**
+     * @override
+     *
+     * @see {@link BaseEditableHolder.writeControlValue}
+     * Writes the value to the control.
+     */
+    writeControlValue(value, setModelValue) {
+        this.value = value;
+        setModelValue(value);
+        this.cd.markForCheck();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelect, deps: [{ token: i0.NgZone }, { token: i3.FilterService }, { token: i3.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MultiSelect, isStandalone: true, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, group: { classPropertyName: "group", publicName: "group", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterPlaceHolder: { classPropertyName: "filterPlaceHolder", publicName: "filterPlaceHolder", isSignal: false, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: false, isRequired: false, transformFunction: null }, overlayVisible: { classPropertyName: "overlayVisible", publicName: "overlayVisible", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: false, isRequired: false, transformFunction: null }, selectionLimit: { classPropertyName: "selectionLimit", publicName: "selectionLimit", isSignal: false, isRequired: false, transformFunction: numberAttribute }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: false, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", 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 }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: false, isRequired: false, transformFunction: null }, chipIcon: { classPropertyName: "chipIcon", publicName: "chipIcon", 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 }, 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 }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, 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 }, 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 }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, display: { classPropertyName: "display", publicName: "display", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: false, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: false, isRequired: false, transformFunction: null }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterFields: { classPropertyName: "filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, highlightOnSelect: { classPropertyName: "highlightOnSelect", publicName: "highlightOnSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, 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", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onClear: "onClear", onPanelShow: "onPanelShow", onPanelHide: "onPanelHide", onLazyLoad: "onLazyLoad", onRemove: "onRemove", onSelectAllChange: "onSelectAllChange" }, host: { listeners: { "click": "onContainerClick($event)" }, properties: { "attr.id": "id", "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle], queries: [{ propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "groupTemplate", first: true, predicate: ["group"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { 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: "selectedItemsTemplate", first: true, predicate: ["selecteditems"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "removeTokenIconTemplate", first: true, predicate: ["removetokenicon"] }, { propertyName: "chipIconTemplate", first: true, predicate: ["chipicon"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "itemCheckboxIconTemplate", first: true, predicate: ["itemcheckboxicon"] }, { propertyName: "headerCheckboxIconTemplate", first: true, predicate: ["headercheckboxicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "filterInputChild", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerCheckbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
@@ -1716,7 +1714,7 @@ class MultiSelect extends BaseEditableHolder {
                 [tooltipPosition]="tooltipPosition"
                 [positionStyle]="tooltipPositionStyle"
                 [tooltipStyleClass]="tooltipStyleClass"
-                [attr.aria-disabled]="disabled()"
+                [attr.aria-disabled]="$disabled()"
                 [attr.id]="inputId"
                 role="combobox"
                 [attr.aria-label]="ariaLabel"
@@ -1724,7 +1722,7 @@ class MultiSelect extends BaseEditableHolder {
                 [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"
                 [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
                 (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
@@ -1733,7 +1731,7 @@ class MultiSelect extends BaseEditableHolder {
                 [attr.value]="modelValue()"
                 [attr.name]="name()"
                 [attr.required]="required() ? '' : undefined"
-                [attr.disabled]="disabled() ? '' : undefined"
+                [attr.disabled]="$disabled() ? '' : undefined"
             />
         </div>
         <div
@@ -1753,10 +1751,10 @@ class MultiSelect extends BaseEditableHolder {
                             {{ getSelectedItemsLabel() }}
                         } @else {
                             <div #token *ngFor="let item of chipSelectedItems(); let i = index" [class]="cx('chipItem')">
-                                <p-chip [class]="cx('pcChip')" [label]="getLabelByValue(item)" [removable]="!disabled() && !readonly" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
+                                <p-chip [class]="cx('pcChip')" [label]="getLabelByValue(item)" [removable]="!$disabled() && !readonly" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
                                     <ng-container *ngIf="chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate">
                                         <ng-template #removeicon>
-                                            <ng-container *ngIf="!disabled() && !readonly">
+                                            <ng-container *ngIf="!$disabled() && !readonly">
                                                 <span
                                                     [class]="cx('chipIcon')"
                                                     *ngIf="chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate"
@@ -1782,7 +1780,7 @@ class MultiSelect extends BaseEditableHolder {
             </div>
         </div>
         <ng-container *ngIf="isVisibleClearIcon">
-            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
+            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [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>
@@ -1793,14 +1791,14 @@ class MultiSelect extends BaseEditableHolder {
                     <ng-container *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-container>
                 </ng-container>
                 <ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
-                    <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>
+                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin ' + loadingIcon)" [attr.aria-hidden]="true"></span>
+                    <span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), 'pi pi-spinner pi-spin')" [attr.aria-hidden]="true"></span>
                 </ng-container>
             </ng-container>
             <ng-template #elseBlock>
                 <ng-container *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate">
                     <span *ngIf="dropdownIcon" [class]="cx('dropdownIcon')" [ngClass]="dropdownIcon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true"></span>
-                    <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="cx('dropdownIcon')" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true" />
+                    <svg data-p-icon="chevron-down" *ngIf="!dropdownIcon" [class]="cx('dropdownIcon')" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true" />
                 </ng-container>
                 <span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" [class]="cx('dropdownIcon')" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
                     <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
@@ -1834,11 +1832,11 @@ class MultiSelect extends BaseEditableHolder {
                                 (onChange)="onToggleAll($event)"
                                 *ngIf="showToggleAll && !selectionLimit"
                                 [variant]="$variant()"
-                                [disabled]="disabled()"
+                                [disabled]="$disabled()"
                                 #headerCheckbox
                             >
                                 <ng-template #checkboxicon let-klass="class">
-                                    <CheckIcon *ngIf="!headerCheckboxIconTemplate && !_headerCheckboxIconTemplate && allSelected()" [styleClass]="klass" [attr.data-pc-section]="'icon'" />
+                                    <svg data-p-icon="check" *ngIf="!headerCheckboxIconTemplate && !_headerCheckboxIconTemplate && allSelected()" [class]="klass" [attr.data-pc-section]="'icon'" />
                                     <ng-template
                                         *ngTemplateOutlet="
                                             headerCheckboxIconTemplate || _headerCheckboxIconTemplate;
@@ -1868,12 +1866,12 @@ class MultiSelect extends BaseEditableHolder {
                                     (click)="onInputClick($event)"
                                     (blur)="onFilterBlur($event)"
                                     [class]="cx('pcFilter')"
-                                    [attr.disabled]="disabled() ? '' : undefined"
+                                    [attr.disabled]="$disabled() ? '' : undefined"
                                     [attr.placeholder]="filterPlaceHolder"
                                     [attr.aria-label]="ariaFilterLabel"
                                 />
                                 <p-inputicon>
-                                    <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" />
+                                    <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" />
                                     <span *ngIf="filterIconTemplate || _filterIconTemplate" class="p-multiselect-filter-icon">
                                         <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
                                     </span>
@@ -1971,7 +1969,7 @@ class MultiSelect extends BaseEditableHolder {
                 </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: MultiSelectItem, selector: "p-multiSelectItem, p-multiselect-item", inputs: ["id", "option", "selected", "label", "disabled", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "variant", "template", "checkIconTemplate", "itemCheckboxIconTemplate", "highlightOnSelect"], 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: "ngmodule", type: SharedModule }, { 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: "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: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: CheckIcon, selector: "CheckIcon" }, { kind: "component", type: SearchIcon, selector: "SearchIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { 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: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, 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: MultiSelectItem, selector: "p-multiSelectItem, p-multiselect-item", inputs: ["id", "option", "selected", "label", "disabled", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "variant", "template", "checkIconTemplate", "itemCheckboxIconTemplate", "highlightOnSelect"], 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: "ngmodule", type: SharedModule }, { 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: "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: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: CheckIcon, selector: "[data-p-icon=\"check\"]" }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { 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: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiSelect, decorators: [{
             type: Component,
@@ -1987,7 +1985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 [tooltipPosition]="tooltipPosition"
                 [positionStyle]="tooltipPositionStyle"
                 [tooltipStyleClass]="tooltipStyleClass"
-                [attr.aria-disabled]="disabled()"
+                [attr.aria-disabled]="$disabled()"
                 [attr.id]="inputId"
                 role="combobox"
                 [attr.aria-label]="ariaLabel"
@@ -1995,7 +1993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 [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"
                 [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
                 (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
@@ -2004,7 +2002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 [attr.value]="modelValue()"
                 [attr.name]="name()"
                 [attr.required]="required() ? '' : undefined"
-                [attr.disabled]="disabled() ? '' : undefined"
+                [attr.disabled]="$disabled() ? '' : undefined"
             />
         </div>
         <div
@@ -2024,10 +2022,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             {{ getSelectedItemsLabel() }}
                         } @else {
                             <div #token *ngFor="let item of chipSelectedItems(); let i = index" [class]="cx('chipItem')">
-                                <p-chip [class]="cx('pcChip')" [label]="getLabelByValue(item)" [removable]="!disabled() && !readonly" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
+                                <p-chip [class]="cx('pcChip')" [label]="getLabelByValue(item)" [removable]="!$disabled() && !readonly" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
                                     <ng-container *ngIf="chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate">
                                         <ng-template #removeicon>
-                                            <ng-container *ngIf="!disabled() && !readonly">
+                                            <ng-container *ngIf="!$disabled() && !readonly">
                                                 <span
                                                     [class]="cx('chipIcon')"
                                                     *ngIf="chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate"
@@ -2053,7 +2051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             </div>
         </div>
         <ng-container *ngIf="isVisibleClearIcon">
-            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
+            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" [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>
@@ -2064,14 +2062,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     <ng-container *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-container>
                 </ng-container>
                 <ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
-                    <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>
+                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin ' + loadingIcon)" [attr.aria-hidden]="true"></span>
+                    <span *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), 'pi pi-spinner pi-spin')" [attr.aria-hidden]="true"></span>
                 </ng-container>
             </ng-container>
             <ng-template #elseBlock>
                 <ng-container *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate">
                     <span *ngIf="dropdownIcon" [class]="cx('dropdownIcon')" [ngClass]="dropdownIcon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true"></span>
-                    <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="cx('dropdownIcon')" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true" />
+                    <svg data-p-icon="chevron-down" *ngIf="!dropdownIcon" [class]="cx('dropdownIcon')" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true" />
                 </ng-container>
                 <span *ngIf="dropdownIconTemplate || _dropdownIconTemplate" [class]="cx('dropdownIcon')" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
                     <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
@@ -2105,11 +2103,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                                 (onChange)="onToggleAll($event)"
                                 *ngIf="showToggleAll && !selectionLimit"
                                 [variant]="$variant()"
-                                [disabled]="disabled()"
+                                [disabled]="$disabled()"
                                 #headerCheckbox
                             >
                                 <ng-template #checkboxicon let-klass="class">
-                                    <CheckIcon *ngIf="!headerCheckboxIconTemplate && !_headerCheckboxIconTemplate && allSelected()" [styleClass]="klass" [attr.data-pc-section]="'icon'" />
+                                    <svg data-p-icon="check" *ngIf="!headerCheckboxIconTemplate && !_headerCheckboxIconTemplate && allSelected()" [class]="klass" [attr.data-pc-section]="'icon'" />
                                     <ng-template
                                         *ngTemplateOutlet="
                                             headerCheckboxIconTemplate || _headerCheckboxIconTemplate;
@@ -2139,12 +2137,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                                     (click)="onInputClick($event)"
                                     (blur)="onFilterBlur($event)"
                                     [class]="cx('pcFilter')"
-                                    [attr.disabled]="disabled() ? '' : undefined"
+                                    [attr.disabled]="$disabled() ? '' : undefined"
                                     [attr.placeholder]="filterPlaceHolder"
                                     [attr.aria-label]="ariaFilterLabel"
                                 />
                                 <p-inputicon>
-                                    <SearchIcon *ngIf="!filterIconTemplate && !_filterIconTemplate" />
+                                    <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" />
                                     <span *ngIf="filterIconTemplate || _filterIconTemplate" class="p-multiselect-filter-icon">
                                         <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
                                     </span>