primeng 18.0.4-lts → 18.0.5-lts

package/fesm2022/primeng-multiselect.mjs

@@ -496,7 +496,7 @@ function MultiSelect_ng_container_5_ng_container_2_div_1_ng_container_3_ng_templ
     i0.ɵɵtemplate(0, MultiSelect_ng_container_5_ng_container_2_div_1_ng_container_3_ng_template_1_ng_container_0_Template, 2, 1, "ng-container", 20);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("ngIf", !ctx_r1.disabled);
+    i0.ɵɵproperty("ngIf", !ctx_r1.disabled && !ctx_r1.readonly);
 } }
 function MultiSelect_ng_container_5_ng_container_2_div_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -513,7 +513,7 @@ function MultiSelect_ng_container_5_ng_container_2_div_1_Template(rf, ctx) { if
     const item_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("label", ctx_r1.getLabelByValue(item_r4))("removable", true)("removeIcon", ctx_r1.chipIcon);
+    i0.ɵɵproperty("label", ctx_r1.getLabelByValue(item_r4))("removable", !ctx_r1.disabled && !ctx_r1.readonly)("removeIcon", ctx_r1.chipIcon);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.chipIconTemplate || ctx_r1._chipIconTemplate || ctx_r1.removeTokenIconTemplate || ctx_r1._removeTokenIconTemplate);
 } }
@@ -1007,11 +1007,7 @@ function MultiSelect_ng_template_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("tabindex", 0)("data-p-hidden-accessible", true)("data-p-hidden-focusable", true);
 } }
-const MULTISELECT_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => MultiSelect),
-    multi: true
-};
+const MULTISELECT_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelect), multi: true };
 class MultiSelectItem extends BaseComponent {
     id;
     option;
@@ -1029,20 +1025,12 @@ class MultiSelectItem extends BaseComponent {
     onClick = new EventEmitter();
     onMouseEnter = new EventEmitter();
     onOptionClick(event) {
-        this.onClick.emit({
-            originalEvent: event,
-            option: this.option,
-            selected: this.selected
-        });
+        this.onClick.emit({ originalEvent: event, option: this.option, selected: this.selected });
         event.stopPropagation();
         event.preventDefault();
     }
     onOptionMouseEnter(event) {
-        this.onMouseEnter.emit({
-            originalEvent: event,
-            option: this.option,
-            selected: this.selected
-        });
+        this.onMouseEnter.emit({ originalEvent: event, option: this.option, selected: this.selected });
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵMultiSelectItem_BaseFactory; return function MultiSelectItem_Factory(__ngFactoryType__) { return (ɵMultiSelectItem_BaseFactory || (ɵMultiSelectItem_BaseFactory = i0.ɵɵgetInheritedFactory(MultiSelectItem)))(__ngFactoryType__ || MultiSelectItem); }; })();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MultiSelectItem, selectors: [["p-multiSelectItem"], ["p-multiselect-item"]], inputs: { id: "id", option: "option", selected: [2, "selected", "selected", booleanAttribute], label: "label", disabled: [2, "disabled", "disabled", booleanAttribute], itemSize: [2, "itemSize", "itemSize", numberAttribute], focused: [2, "focused", "focused", booleanAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", variant: "variant", template: "template", checkIconTemplate: "checkIconTemplate", itemCheckboxIconTemplate: "itemCheckboxIconTemplate" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 5, vars: 26, consts: [["icon", ""], ["pRipple", "", "role", "option", 3, "click", "mouseenter", "ngStyle", "ngClass", "id"], [3, "ngModel", "binary", "tabindex", "variant"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function MultiSelectItem_Template(rf, ctx) { if (rf & 1) {
@@ -1077,11 +1065,7 @@ class MultiSelectItem extends BaseComponent {
             pRipple
             role="option"
             [ngStyle]="{ height: itemSize + 'px' }"
-            [ngClass]="{
-                'p-multiselect-option': true,
-                'p-disabled': disabled,
-                'p-focus': focused
-            }"
+            [ngClass]="{ 'p-multiselect-option': true, 'p-disabled': disabled, 'p-focus': focused }"
             [id]="id"
             [attr.aria-label]="label"
             [attr.aria-setsize]="ariaSetSize"
@@ -1834,7 +1818,7 @@ class MultiSelect extends BaseComponent {
         return isNotEmpty(this.modelValue());
     }
     get isVisibleClearIcon() {
-        return this.modelValue() != null && this.modelValue() !== '' && isNotEmpty(this.modelValue()) && this.showClear && !this.disabled && 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;
@@ -1871,10 +1855,7 @@ class MultiSelect extends BaseComponent {
                     const groupChildren = this.getOptionGroupChildren(group);
                     const filteredItems = groupChildren.filter((item) => filteredOptions.includes(item));
                     if (filteredItems.length > 0)
-                        filtered.push({
-                            ...group,
-                            [typeof this.optionGroupChildren === 'string' ? this.optionGroupChildren : 'items']: [...filteredItems]
-                        });
+                        filtered.push({ ...group, [typeof this.optionGroupChildren === 'string' ? this.optionGroupChildren : 'items']: [...filteredItems] });
                 });
                 return this.flatOptions(filtered);
             }
@@ -1931,10 +1912,7 @@ class MultiSelect extends BaseComponent {
         this.id = this.id || uuid('pn_id_');
         this.autoUpdateModel();
         if (this.filterBy) {
-            this.filterOptions = {
-                filter: (value) => this.onFilterInputChange(value),
-                reset: () => this.resetFilter()
-            };
+            this.filterOptions = { filter: (value) => this.onFilterInputChange(value), reset: () => this.resetFilter() };
         }
     }
     maxSelectionLimitReached() {
@@ -2001,11 +1979,7 @@ class MultiSelect extends BaseComponent {
         this.updateModel(value, originalEvent);
         index !== -1 && this.focusedOptionIndex.set(index);
         isFocus && focus(this.focusInputViewChild?.nativeElement);
-        this.onChange.emit({
-            originalEvent: event,
-            value: value,
-            itemValue: option
-        });
+        this.onChange.emit({ originalEvent: event, value: value, itemValue: option });
     }
     findSelectedOptionIndex() {
         return this.hasSelectedOption() ? this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option)) : -1;
@@ -2425,10 +2399,7 @@ class MultiSelect extends BaseComponent {
             return;
         }
         if (this.selectAll != null) {
-            this.onSelectAllChange.emit({
-                originalEvent: event,
-                checked: !this.allSelected()
-            });
+            this.onSelectAllChange.emit({ originalEvent: event, checked: !this.allSelected() });
         }
         else {
             // pre-selected disabled options should always be selected.
@@ -2441,10 +2412,7 @@ class MultiSelect extends BaseComponent {
             this.updateModel(value, event);
             // because onToggleAll could have been called during filtering, this additional test needs to be performed before calling onSelectAllChange.emit
             if (!value.length || value.length === this.getAllVisibleAndNonVisibleOptions().length) {
-                this.onSelectAllChange.emit({
-                    originalEvent: event,
-                    checked: !!value.length
-                });
+                this.onSelectAllChange.emit({ originalEvent: event, checked: !!value.length });
             }
         }
         if (this.partialSelected()) {
@@ -2593,15 +2561,8 @@ class MultiSelect extends BaseComponent {
     removeOption(optionValue, event) {
         let value = this.modelValue().filter((val) => !equals(val, optionValue, this.equalityKey()));
         this.updateModel(value, event);
-        this.onChange.emit({
-            originalEvent: event,
-            value: value,
-            itemValue: optionValue
-        });
-        this.onRemove.emit({
-            newValue: value,
-            removed: optionValue
-        });
+        this.onChange.emit({ originalEvent: event, value: value, itemValue: optionValue });
+        this.onRemove.emit({ newValue: value, removed: optionValue });
         event && event.stopPropagation();
     }
     findNextItem(item) {
@@ -2862,10 +2823,10 @@ class MultiSelect extends BaseComponent {
                     <ng-container *ngIf="display === 'comma'">{{ label() || 'empty' }}</ng-container>
                     <ng-container *ngIf="display === 'chip'">
                         <div #token *ngFor="let item of chipSelectedItems(); let i = index" class="p-multiselect-chip-item">
-                            <p-chip styleClass="p-multiselect-chip" [label]="getLabelByValue(item)" [removable]="true" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
+                            <p-chip styleClass="p-multiselect-chip" [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">
+                                        <ng-container *ngIf="!disabled && !readonly">
                                             <span
                                                 class="p-multiselect-chip-icon"
                                                 *ngIf="chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate"
@@ -2947,16 +2908,7 @@ class MultiSelect extends BaseComponent {
                             <p-checkbox [ngModel]="allSelected()" [binary]="true" (onChange)="onToggleAll($event)" *ngIf="showToggleAll && !selectionLimit" [variant]="variant" [disabled]="disabled" #headerCheckbox>
                                 <ng-template #checkboxicon let-klass="class">
                                     <CheckIcon *ngIf="!headerCheckboxIconTemplate && !_headerCheckboxIconTemplate && allSelected()" [styleClass]="klass" [attr.data-pc-section]="'icon'" />
-                                    <ng-template
-                                        *ngTemplateOutlet="
-                                            headerCheckboxIconTemplate || _headerCheckboxIconTemplate;
-                                            context: {
-                                                checked: allSelected(),
-                                                partialSelected: partialSelected(),
-                                                class: klass
-                                            }
-                                        "
-                                    ></ng-template>
+                                    <ng-template *ngTemplateOutlet="headerCheckboxIconTemplate || _headerCheckboxIconTemplate; context: { checked: allSelected(), partialSelected: partialSelected(), class: klass }"></ng-template>
                                 </ng-template>
                             </p-checkbox>
 
@@ -3085,11 +3037,7 @@ class MultiSelect extends BaseComponent {
                 providers: [MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                host: {
-                    '[attr.id]': 'id',
-                    '[style]': 'style',
-                    '(click)': 'onContainerClick($event)'
-                }
+                host: { '[attr.id]': 'id', '[style]': 'style', '(click)': 'onContainerClick($event)' }
             }]
     }], () => [{ type: i0.NgZone }, { type: i3.FilterService }, { type: i3.OverlayService }], { id: [{
             type: Input
@@ -3377,10 +3325,7 @@ class MultiSelectModule {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MultiSelectModule, [{
         type: NgModule,
-        args: [{
-                imports: [MultiSelect, SharedModule],
-                exports: [MultiSelect, SharedModule]
-            }]
+        args: [{ imports: [MultiSelect, SharedModule], exports: [MultiSelect, SharedModule] }]
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MultiSelectModule, { imports: [MultiSelect, SharedModule], exports: [MultiSelect, SharedModule] }); })();