primeng 17.15.0 → 17.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (215) hide show
  1. package/api/megamenuitem.d.ts +4 -0
  2. package/api/primengconfig.d.ts +1 -1
  3. package/api/treenode.d.ts +4 -0
  4. package/autocomplete/autocomplete.d.ts +11 -2
  5. package/breadcrumb/breadcrumb.interface.d.ts +11 -0
  6. package/calendar/calendar.d.ts +13 -2
  7. package/cascadeselect/cascadeselect.d.ts +19 -1
  8. package/cascadeselect/cascadeselect.interface.d.ts +4 -0
  9. package/checkbox/checkbox.d.ts +9 -3
  10. package/chips/chips.d.ts +9 -2
  11. package/dropdown/dropdown.d.ts +31 -3
  12. package/esm2022/api/megamenuitem.mjs +1 -1
  13. package/esm2022/api/primengconfig.mjs +3 -3
  14. package/esm2022/api/treenode.mjs +1 -1
  15. package/esm2022/autocomplete/autocomplete.mjs +20 -9
  16. package/esm2022/breadcrumb/breadcrumb.interface.mjs +1 -1
  17. package/esm2022/breadcrumb/breadcrumb.mjs +1 -1
  18. package/esm2022/calendar/calendar.mjs +65 -9
  19. package/esm2022/cascadeselect/cascadeselect.interface.mjs +1 -1
  20. package/esm2022/cascadeselect/cascadeselect.mjs +61 -12
  21. package/esm2022/checkbox/checkbox.mjs +32 -10
  22. package/esm2022/chips/chips.mjs +20 -10
  23. package/esm2022/dropdown/dropdown.mjs +105 -26
  24. package/esm2022/dynamicdialog/dynamicdialog.mjs +3 -3
  25. package/esm2022/fileupload/fileupload.mjs +123 -105
  26. package/esm2022/icons/blank/blank.mjs +25 -0
  27. package/esm2022/icons/blank/primeng-icons-blank.mjs +5 -0
  28. package/esm2022/icons/blank/public_api.mjs +2 -0
  29. package/esm2022/inputmask/inputmask.mjs +31 -13
  30. package/esm2022/inputnumber/inputnumber.mjs +13 -4
  31. package/esm2022/inputotp/inputotp.mjs +3 -3
  32. package/esm2022/inputtext/inputtext.mjs +22 -7
  33. package/esm2022/inputtextarea/inputtextarea.mjs +17 -6
  34. package/esm2022/megamenu/megamenu.interface.mjs +1 -1
  35. package/esm2022/megamenu/megamenu.mjs +2 -2
  36. package/esm2022/menu/menu.mjs +18 -5
  37. package/esm2022/menubar/menubar.interface.mjs +1 -1
  38. package/esm2022/menubar/menubar.mjs +3 -3
  39. package/esm2022/multiselect/multiselect.mjs +83 -30
  40. package/esm2022/organizationchart/organizationchart.mjs +43 -27
  41. package/esm2022/paginator/paginator.mjs +3 -3
  42. package/esm2022/panelmenu/panelmenu.interface.mjs +1 -1
  43. package/esm2022/panelmenu/panelmenu.mjs +51 -41
  44. package/esm2022/password/password.mjs +22 -5
  45. package/esm2022/radiobutton/radiobutton.mjs +32 -10
  46. package/esm2022/scroller/scroller.mjs +4 -4
  47. package/esm2022/splitbutton/splitbutton.mjs +13 -13
  48. package/esm2022/table/table.mjs +3 -3
  49. package/esm2022/tieredmenu/tieredmenu.mjs +19 -12
  50. package/esm2022/timeline/timeline.mjs +2 -2
  51. package/esm2022/tree/tree.mjs +53 -13
  52. package/esm2022/treeselect/treeselect.mjs +12 -4
  53. package/esm2022/treetable/treetable.mjs +8 -6
  54. package/esm2022/tristatecheckbox/tristatecheckbox.mjs +20 -10
  55. package/fesm2022/primeng-api.mjs +2 -2
  56. package/fesm2022/primeng-api.mjs.map +1 -1
  57. package/fesm2022/primeng-autocomplete.mjs +19 -8
  58. package/fesm2022/primeng-autocomplete.mjs.map +1 -1
  59. package/fesm2022/primeng-breadcrumb.mjs.map +1 -1
  60. package/fesm2022/primeng-calendar.mjs +64 -8
  61. package/fesm2022/primeng-calendar.mjs.map +1 -1
  62. package/fesm2022/primeng-cascadeselect.mjs +60 -11
  63. package/fesm2022/primeng-cascadeselect.mjs.map +1 -1
  64. package/fesm2022/primeng-checkbox.mjs +31 -9
  65. package/fesm2022/primeng-checkbox.mjs.map +1 -1
  66. package/fesm2022/primeng-chips.mjs +19 -9
  67. package/fesm2022/primeng-chips.mjs.map +1 -1
  68. package/fesm2022/primeng-dropdown.mjs +104 -25
  69. package/fesm2022/primeng-dropdown.mjs.map +1 -1
  70. package/fesm2022/primeng-dynamicdialog.mjs +2 -2
  71. package/fesm2022/primeng-dynamicdialog.mjs.map +1 -1
  72. package/fesm2022/primeng-fileupload.mjs +122 -104
  73. package/fesm2022/primeng-fileupload.mjs.map +1 -1
  74. package/fesm2022/primeng-icons-blank.mjs +32 -0
  75. package/fesm2022/primeng-icons-blank.mjs.map +1 -0
  76. package/fesm2022/primeng-inputmask.mjs +30 -12
  77. package/fesm2022/primeng-inputmask.mjs.map +1 -1
  78. package/fesm2022/primeng-inputnumber.mjs +12 -3
  79. package/fesm2022/primeng-inputnumber.mjs.map +1 -1
  80. package/fesm2022/primeng-inputotp.mjs +2 -2
  81. package/fesm2022/primeng-inputotp.mjs.map +1 -1
  82. package/fesm2022/primeng-inputtext.mjs +21 -6
  83. package/fesm2022/primeng-inputtext.mjs.map +1 -1
  84. package/fesm2022/primeng-inputtextarea.mjs +16 -5
  85. package/fesm2022/primeng-inputtextarea.mjs.map +1 -1
  86. package/fesm2022/primeng-megamenu.mjs +1 -1
  87. package/fesm2022/primeng-megamenu.mjs.map +1 -1
  88. package/fesm2022/primeng-menu.mjs +17 -4
  89. package/fesm2022/primeng-menu.mjs.map +1 -1
  90. package/fesm2022/primeng-menubar.mjs +2 -2
  91. package/fesm2022/primeng-menubar.mjs.map +1 -1
  92. package/fesm2022/primeng-multiselect.mjs +82 -29
  93. package/fesm2022/primeng-multiselect.mjs.map +1 -1
  94. package/fesm2022/primeng-organizationchart.mjs +42 -26
  95. package/fesm2022/primeng-organizationchart.mjs.map +1 -1
  96. package/fesm2022/primeng-paginator.mjs +2 -2
  97. package/fesm2022/primeng-paginator.mjs.map +1 -1
  98. package/fesm2022/primeng-panelmenu.mjs +50 -40
  99. package/fesm2022/primeng-panelmenu.mjs.map +1 -1
  100. package/fesm2022/primeng-password.mjs +21 -4
  101. package/fesm2022/primeng-password.mjs.map +1 -1
  102. package/fesm2022/primeng-radiobutton.mjs +31 -9
  103. package/fesm2022/primeng-radiobutton.mjs.map +1 -1
  104. package/fesm2022/primeng-scroller.mjs +3 -3
  105. package/fesm2022/primeng-scroller.mjs.map +1 -1
  106. package/fesm2022/primeng-splitbutton.mjs +12 -12
  107. package/fesm2022/primeng-splitbutton.mjs.map +1 -1
  108. package/fesm2022/primeng-table.mjs +2 -2
  109. package/fesm2022/primeng-table.mjs.map +1 -1
  110. package/fesm2022/primeng-tieredmenu.mjs +18 -11
  111. package/fesm2022/primeng-tieredmenu.mjs.map +1 -1
  112. package/fesm2022/primeng-timeline.mjs +2 -2
  113. package/fesm2022/primeng-timeline.mjs.map +1 -1
  114. package/fesm2022/primeng-tree.mjs +52 -12
  115. package/fesm2022/primeng-tree.mjs.map +1 -1
  116. package/fesm2022/primeng-treeselect.mjs +11 -3
  117. package/fesm2022/primeng-treeselect.mjs.map +1 -1
  118. package/fesm2022/primeng-treetable.mjs +7 -5
  119. package/fesm2022/primeng-treetable.mjs.map +1 -1
  120. package/fesm2022/primeng-tristatecheckbox.mjs +19 -9
  121. package/fesm2022/primeng-tristatecheckbox.mjs.map +1 -1
  122. package/fileupload/fileupload.d.ts +2 -0
  123. package/icons/blank/blank.d.ts +6 -0
  124. package/icons/blank/index.d.ts +5 -0
  125. package/icons/blank/public_api.d.ts +1 -0
  126. package/inputmask/inputmask.d.ts +13 -3
  127. package/inputnumber/inputnumber.d.ts +6 -1
  128. package/inputotp/inputotp.d.ts +1 -1
  129. package/inputtext/inputtext.d.ts +14 -3
  130. package/inputtextarea/inputtextarea.d.ts +10 -3
  131. package/megamenu/megamenu.interface.d.ts +12 -0
  132. package/menu/menu.d.ts +1 -0
  133. package/menubar/menubar.interface.d.ts +17 -0
  134. package/multiselect/multiselect.d.ts +21 -1
  135. package/organizationchart/organizationchart.d.ts +10 -2
  136. package/package.json +202 -196
  137. package/paginator/paginator.d.ts +4 -4
  138. package/panelmenu/panelmenu.d.ts +1 -0
  139. package/panelmenu/panelmenu.interface.d.ts +12 -0
  140. package/password/password.d.ts +12 -2
  141. package/radiobutton/radiobutton.d.ts +9 -2
  142. package/resources/components/timeline/timeline.css +2 -0
  143. package/resources/themes/arya-blue/theme.css +117 -1
  144. package/resources/themes/arya-green/theme.css +117 -1
  145. package/resources/themes/arya-orange/theme.css +117 -1
  146. package/resources/themes/arya-purple/theme.css +117 -1
  147. package/resources/themes/aura-dark-amber/theme.css +118 -2
  148. package/resources/themes/aura-dark-blue/theme.css +118 -2
  149. package/resources/themes/aura-dark-cyan/theme.css +118 -2
  150. package/resources/themes/aura-dark-green/theme.css +118 -2
  151. package/resources/themes/aura-dark-indigo/theme.css +118 -2
  152. package/resources/themes/aura-dark-lime/theme.css +118 -2
  153. package/resources/themes/aura-dark-noir/theme.css +118 -2
  154. package/resources/themes/aura-dark-pink/theme.css +118 -2
  155. package/resources/themes/aura-dark-purple/theme.css +118 -2
  156. package/resources/themes/aura-dark-teal/theme.css +118 -2
  157. package/resources/themes/aura-light-amber/theme.css +118 -2
  158. package/resources/themes/aura-light-blue/theme.css +118 -2
  159. package/resources/themes/aura-light-cyan/theme.css +118 -2
  160. package/resources/themes/aura-light-green/theme.css +118 -2
  161. package/resources/themes/aura-light-indigo/theme.css +118 -2
  162. package/resources/themes/aura-light-lime/theme.css +118 -2
  163. package/resources/themes/aura-light-noir/theme.css +118 -2
  164. package/resources/themes/aura-light-pink/theme.css +118 -2
  165. package/resources/themes/aura-light-purple/theme.css +118 -2
  166. package/resources/themes/aura-light-teal/theme.css +118 -2
  167. package/resources/themes/bootstrap4-dark-blue/theme.css +117 -1
  168. package/resources/themes/bootstrap4-dark-purple/theme.css +117 -1
  169. package/resources/themes/bootstrap4-light-blue/theme.css +117 -1
  170. package/resources/themes/bootstrap4-light-purple/theme.css +117 -1
  171. package/resources/themes/fluent-light/theme.css +117 -1
  172. package/resources/themes/lara-dark-blue/theme.css +117 -1
  173. package/resources/themes/lara-dark-indigo/theme.css +117 -1
  174. package/resources/themes/lara-dark-purple/theme.css +117 -1
  175. package/resources/themes/lara-dark-teal/theme.css +117 -1
  176. package/resources/themes/lara-light-blue/theme.css +117 -1
  177. package/resources/themes/lara-light-indigo/theme.css +117 -1
  178. package/resources/themes/lara-light-purple/theme.css +117 -1
  179. package/resources/themes/lara-light-teal/theme.css +117 -1
  180. package/resources/themes/luna-amber/theme.css +117 -1
  181. package/resources/themes/luna-blue/theme.css +117 -1
  182. package/resources/themes/luna-green/theme.css +117 -1
  183. package/resources/themes/luna-pink/theme.css +117 -1
  184. package/resources/themes/md-dark-deeppurple/theme.css +131 -4
  185. package/resources/themes/md-dark-indigo/theme.css +131 -4
  186. package/resources/themes/md-light-deeppurple/theme.css +131 -4
  187. package/resources/themes/md-light-indigo/theme.css +131 -4
  188. package/resources/themes/mdc-dark-deeppurple/theme.css +131 -4
  189. package/resources/themes/mdc-dark-indigo/theme.css +131 -4
  190. package/resources/themes/mdc-light-deeppurple/theme.css +131 -4
  191. package/resources/themes/mdc-light-indigo/theme.css +131 -4
  192. package/resources/themes/mira/theme.css +117 -1
  193. package/resources/themes/nano/theme.css +117 -1
  194. package/resources/themes/nova/theme.css +117 -1
  195. package/resources/themes/nova-accent/theme.css +117 -1
  196. package/resources/themes/nova-alt/theme.css +117 -1
  197. package/resources/themes/rhea/theme.css +117 -1
  198. package/resources/themes/saga-blue/theme.css +117 -1
  199. package/resources/themes/saga-green/theme.css +117 -1
  200. package/resources/themes/saga-orange/theme.css +117 -1
  201. package/resources/themes/saga-purple/theme.css +117 -1
  202. package/resources/themes/soho-dark/theme.css +117 -1
  203. package/resources/themes/soho-light/theme.css +117 -1
  204. package/resources/themes/tailwind-light/theme.css +117 -1
  205. package/resources/themes/vela-blue/theme.css +117 -1
  206. package/resources/themes/vela-green/theme.css +117 -1
  207. package/resources/themes/vela-orange/theme.css +117 -1
  208. package/resources/themes/vela-purple/theme.css +117 -1
  209. package/resources/themes/viva-dark/theme.css +117 -1
  210. package/resources/themes/viva-light/theme.css +117 -1
  211. package/tieredmenu/tieredmenu.d.ts +4 -3
  212. package/tree/tree.d.ts +9 -2
  213. package/treeselect/treeselect.d.ts +7 -1
  214. package/treetable/treetable.d.ts +2 -1
  215. package/tristatecheckbox/tristatecheckbox.d.ts +9 -3
@@ -1,14 +1,14 @@
1
- import * as i1 from '@angular/common';
1
+ import * as i2 from '@angular/common';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
4
  import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Component, ViewEncapsulation, Input, Output, signal, computed, effect, ChangeDetectionStrategy, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
5
5
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
6
- import * as i3 from 'primeng/api';
6
+ import * as i1 from 'primeng/api';
7
7
  import { TranslationKeys, Footer, Header, PrimeTemplate, SharedModule } from 'primeng/api';
8
8
  import { DomHandler } from 'primeng/dom';
9
9
  import * as i4 from 'primeng/overlay';
10
10
  import { OverlayModule } from 'primeng/overlay';
11
- import * as i2 from 'primeng/ripple';
11
+ import * as i3 from 'primeng/ripple';
12
12
  import { RippleModule } from 'primeng/ripple';
13
13
  import * as i6 from 'primeng/scroller';
14
14
  import { ScrollerModule } from 'primeng/scroller';
@@ -30,6 +30,7 @@ const MULTISELECT_VALUE_ACCESSOR = {
30
30
  multi: true
31
31
  };
32
32
  class MultiSelectItem {
33
+ config;
33
34
  id;
34
35
  option;
35
36
  selected;
@@ -44,6 +45,9 @@ class MultiSelectItem {
44
45
  itemCheckboxIconTemplate;
45
46
  onClick = new EventEmitter();
46
47
  onMouseEnter = new EventEmitter();
48
+ constructor(config) {
49
+ this.config = config;
50
+ }
47
51
  onOptionClick(event) {
48
52
  this.onClick.emit({
49
53
  originalEvent: event,
@@ -59,7 +63,7 @@ class MultiSelectItem {
59
63
  selected: this.selected
60
64
  });
61
65
  }
62
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: MultiSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
66
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: MultiSelectItem, deps: [{ token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
63
67
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: MultiSelectItem, selector: "p-multiSelectItem", inputs: { id: "id", option: "option", selected: ["selected", "selected", booleanAttribute], label: "label", disabled: ["disabled", "disabled", booleanAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], focused: ["focused", "focused", booleanAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", template: "template", checkIconTemplate: "checkIconTemplate", itemCheckboxIconTemplate: "itemCheckboxIconTemplate" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
64
68
  <li
65
69
  pRipple
@@ -79,7 +83,7 @@ class MultiSelectItem {
79
83
  (click)="onOptionClick($event)"
80
84
  (mouseenter)="onOptionMouseEnter($event)"
81
85
  >
82
- <div class="p-checkbox p-component">
86
+ <div class="p-checkbox p-component" [ngClass]="{ 'p-variant-filled': config.inputStyle() === 'filled' }">
83
87
  <div class="p-checkbox-box" [ngClass]="{ 'p-highlight': selected }">
84
88
  <ng-container *ngIf="selected">
85
89
  <CheckIcon *ngIf="!checkIconTemplate || !itemCheckboxIconTemplate" [styleClass]="'p-checkbox-icon'" [attr.aria-hidden]="true" />
@@ -93,7 +97,7 @@ class MultiSelectItem {
93
97
  <span *ngIf="!template">{{ label ?? 'empty' }}</span>
94
98
  <ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
95
99
  </li>
96
- `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => CheckIcon), selector: "CheckIcon" }], encapsulation: i0.ViewEncapsulation.None });
100
+ `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => CheckIcon), selector: "CheckIcon" }], encapsulation: i0.ViewEncapsulation.None });
97
101
  }
98
102
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: MultiSelectItem, decorators: [{
99
103
  type: Component,
@@ -118,7 +122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
118
122
  (click)="onOptionClick($event)"
119
123
  (mouseenter)="onOptionMouseEnter($event)"
120
124
  >
121
- <div class="p-checkbox p-component">
125
+ <div class="p-checkbox p-component" [ngClass]="{ 'p-variant-filled': config.inputStyle() === 'filled' }">
122
126
  <div class="p-checkbox-box" [ngClass]="{ 'p-highlight': selected }">
123
127
  <ng-container *ngIf="selected">
124
128
  <CheckIcon *ngIf="!checkIconTemplate || !itemCheckboxIconTemplate" [styleClass]="'p-checkbox-icon'" [attr.aria-hidden]="true" />
@@ -138,7 +142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
138
142
  class: 'p-element'
139
143
  }
140
144
  }]
141
- }], propDecorators: { id: [{
145
+ }], ctorParameters: () => [{ type: i1.PrimeNGConfig }], propDecorators: { id: [{
142
146
  type: Input
143
147
  }], option: [{
144
148
  type: Input
@@ -258,6 +262,11 @@ class MultiSelect {
258
262
  * @group Props
259
263
  */
260
264
  tabindex = 0;
265
+ /**
266
+ * Specifies the input variant of the component.
267
+ * @group Props
268
+ */
269
+ variant = 'outlined';
261
270
  /**
262
271
  * 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).
263
272
  * @group Props
@@ -385,11 +394,21 @@ class MultiSelect {
385
394
  * @group Props
386
395
  */
387
396
  virtualScroll;
397
+ /**
398
+ * Whether the multiselect is in loading state.
399
+ * @group Props
400
+ */
401
+ loading = false;
388
402
  /**
389
403
  * Height of an item in the list for VirtualScrolling.
390
404
  * @group Props
391
405
  */
392
406
  virtualScrollItemSize;
407
+ /**
408
+ * Icon to display in loading state.
409
+ * @group Props
410
+ */
411
+ loadingIcon;
393
412
  /**
394
413
  * Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
395
414
  * @group Props
@@ -694,6 +713,7 @@ class MultiSelect {
694
713
  emptyTemplate;
695
714
  selectedItemsTemplate;
696
715
  checkIconTemplate;
716
+ loadingIconTemplate;
697
717
  filterIconTemplate;
698
718
  removeTokenIconTemplate;
699
719
  closeIconTemplate;
@@ -722,7 +742,8 @@ class MultiSelect {
722
742
  'p-disabled': this.disabled,
723
743
  'p-multiselect-clearable': this.showClear && !this.disabled,
724
744
  'p-multiselect-chip': this.display === 'chip',
725
- 'p-focus': this.focused
745
+ 'p-focus': this.focused,
746
+ 'p-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled'
726
747
  };
727
748
  }
728
749
  get inputClass() {
@@ -735,7 +756,7 @@ class MultiSelect {
735
756
  get panelClass() {
736
757
  return {
737
758
  'p-multiselect-panel p-component': true,
738
- 'p-input-filled': this.config.inputStyle === 'filled',
759
+ 'p-input-filled': this.config.inputStyle() === 'filled',
739
760
  'p-ripple-disabled': this.config.ripple === false
740
761
  };
741
762
  }
@@ -895,6 +916,9 @@ class MultiSelect {
895
916
  case 'headercheckboxicon':
896
917
  this.headerCheckboxIconTemplate = item.template;
897
918
  break;
919
+ case 'loadingicon':
920
+ this.loadingIconTemplate = item.template;
921
+ break;
898
922
  case 'filtericon':
899
923
  this.filterIconTemplate = item.template;
900
924
  break;
@@ -1318,7 +1342,7 @@ class MultiSelect {
1318
1342
  this.startRangeIndex.set(this.focusedOptionIndex());
1319
1343
  }
1320
1344
  onContainerClick(event) {
1321
- if (this.disabled || this.readonly || event.target.isSameNode(this.focusInputViewChild?.nativeElement)) {
1345
+ if (this.disabled || this.loading || this.readonly || event.target.isSameNode(this.focusInputViewChild?.nativeElement)) {
1322
1346
  return;
1323
1347
  }
1324
1348
  if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section="clearicon"]')) {
@@ -1684,8 +1708,8 @@ class MultiSelect {
1684
1708
  hasFilter() {
1685
1709
  return this._filterValue() && this._filterValue().trim().length > 0;
1686
1710
  }
1687
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: MultiSelect, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.FilterService }, { token: i3.PrimeNGConfig }, { token: i3.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
1688
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: MultiSelect, selector: "p-multiSelect", inputs: { id: "id", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", inputId: "inputId", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], group: ["group", "group", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterPlaceHolder: "filterPlaceHolder", filterLocale: "filterLocale", overlayVisible: ["overlayVisible", "overlayVisible", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], appendTo: "appendTo", dataKey: "dataKey", name: "name", ariaLabelledBy: "ariaLabelledBy", displaySelectedLabel: "displaySelectedLabel", maxSelectedLabels: "maxSelectedLabels", selectionLimit: ["selectionLimit", "selectionLimit", numberAttribute], selectedItemsLabel: "selectedItemsLabel", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", resetFilterOnHide: ["resetFilterOnHide", "resetFilterOnHide", booleanAttribute], dropdownIcon: "dropdownIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", showHeader: ["showHeader", "showHeader", booleanAttribute], filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: ["autofocusFilter", "autofocusFilter", booleanAttribute], display: "display", autocomplete: "autocomplete", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", selectAll: "selectAll", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], filterFields: "filterFields", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute] }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onClear: "onClear", onPanelShow: "onPanelShow", onPanelHide: "onPanelHide", onLazyLoad: "onLazyLoad", onRemove: "onRemove", onSelectAllChange: "onSelectAllChange" }, host: { properties: { "class.p-inputwrapper-focus": "focused || overlayVisible", "class.p-inputwrapper-filled": "filled" }, classAttribute: "p-element p-inputwrapper" }, providers: [MULTISELECT_VALUE_ACCESSOR], queries: [{ propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { 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 }], ngImport: i0, template: `
1711
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: MultiSelect, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.FilterService }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
1712
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: MultiSelect, selector: "p-multiSelect", inputs: { id: "id", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", inputId: "inputId", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], group: ["group", "group", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterPlaceHolder: "filterPlaceHolder", filterLocale: "filterLocale", overlayVisible: ["overlayVisible", "overlayVisible", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], variant: "variant", appendTo: "appendTo", dataKey: "dataKey", name: "name", ariaLabelledBy: "ariaLabelledBy", displaySelectedLabel: "displaySelectedLabel", maxSelectedLabels: "maxSelectedLabels", selectionLimit: ["selectionLimit", "selectionLimit", numberAttribute], selectedItemsLabel: "selectedItemsLabel", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", resetFilterOnHide: ["resetFilterOnHide", "resetFilterOnHide", booleanAttribute], dropdownIcon: "dropdownIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", showHeader: ["showHeader", "showHeader", booleanAttribute], filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], loading: ["loading", "loading", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], loadingIcon: "loadingIcon", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: ["autofocusFilter", "autofocusFilter", booleanAttribute], display: "display", autocomplete: "autocomplete", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", selectAll: "selectAll", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], filterFields: "filterFields", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute] }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onClear: "onClear", onPanelShow: "onPanelShow", onPanelHide: "onPanelHide", onLazyLoad: "onLazyLoad", onRemove: "onRemove", onSelectAllChange: "onSelectAllChange" }, host: { properties: { "class.p-inputwrapper-focus": "focused || overlayVisible", "class.p-inputwrapper-filled": "filled" }, classAttribute: "p-element p-inputwrapper" }, providers: [MULTISELECT_VALUE_ACCESSOR], queries: [{ propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { 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 }], ngImport: i0, template: `
1689
1713
  <div #container [attr.id]="id" [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (click)="onContainerClick($event)">
1690
1714
  <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
1691
1715
  <input
@@ -1746,13 +1770,24 @@ class MultiSelect {
1746
1770
  </ng-container>
1747
1771
  </div>
1748
1772
  <div class="p-multiselect-trigger">
1749
- <ng-container *ngIf="!dropdownIconTemplate">
1750
- <span *ngIf="dropdownIcon" class="p-multiselect-trigger-icon" [ngClass]="dropdownIcon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true"></span>
1751
- <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="'p-multiselect-trigger-icon'" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true" />
1773
+ <ng-container *ngIf="loading; else elseBlock">
1774
+ <ng-container *ngIf="loadingIconTemplate">
1775
+ <ng-container *ngTemplateOutlet="loadingIconTemplate"></ng-container>
1776
+ </ng-container>
1777
+ <ng-container *ngIf="!loadingIconTemplate">
1778
+ <span *ngIf="loadingIcon" [ngClass]="'p-multiselect-trigger-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
1779
+ <span *ngIf="!loadingIcon" [class]="'p-multiselect-trigger-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
1780
+ </ng-container>
1752
1781
  </ng-container>
1753
- <span *ngIf="dropdownIconTemplate" class="p-multiselect-trigger-icon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
1754
- <ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
1755
- </span>
1782
+ <ng-template #elseBlock>
1783
+ <ng-container *ngIf="!dropdownIconTemplate">
1784
+ <span *ngIf="dropdownIcon" class="p-multiselect-trigger-icon" [ngClass]="dropdownIcon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true"></span>
1785
+ <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="'p-multiselect-trigger-icon'" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true" />
1786
+ </ng-container>
1787
+ <span *ngIf="dropdownIconTemplate" class="p-multiselect-trigger-icon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
1788
+ <ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
1789
+ </span>
1790
+ </ng-template>
1756
1791
  </div>
1757
1792
  <p-overlay
1758
1793
  #overlay
@@ -1789,7 +1824,7 @@ class MultiSelect {
1789
1824
  <div
1790
1825
  class="p-checkbox p-component"
1791
1826
  *ngIf="showToggleAll && !selectionLimit"
1792
- [ngClass]="{ 'p-checkbox-disabled': disabled || toggleAllDisabled }"
1827
+ [ngClass]="{ 'p-variant-filled': variant === 'filled' || config.inputStyle() === 'filled', 'p-checkbox-disabled': disabled || toggleAllDisabled }"
1793
1828
  (click)="onToggleAll($event)"
1794
1829
  (keydown)="onHeaderCheckboxKeyDown($event)"
1795
1830
  >
@@ -1948,7 +1983,7 @@ class MultiSelect {
1948
1983
  </ng-template>
1949
1984
  </p-overlay>
1950
1985
  </div>
1951
- `, isInline: true, styles: ["@layer primeng{.p-multiselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-multiselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-multiselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer;display:flex}.p-multiselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-multiselect-label-empty{overflow:hidden;visibility:hidden}.p-multiselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-multiselect-token-icon{cursor:pointer}.p-multiselect-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px}.p-multiselect-items-wrapper{overflow:auto}.p-multiselect-items{margin:0;padding:0;list-style-type:none}.p-multiselect-item{cursor:pointer;display:flex;align-items:center;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-multiselect-header{display:flex;align-items:center;justify-content:space-between}.p-multiselect-filter-container{position:relative;flex:1 1 auto}.p-multiselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-multiselect-filter-container .p-inputtext{width:100%}.p-multiselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}.p-fluid .p-multiselect{display:flex}.p-multiselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-multiselect-clearable{position:relative}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i4.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: i0.forwardRef(() => i3.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i5.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: i0.forwardRef(() => i2.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => i6.Scroller), selector: "p-scroller", 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: i0.forwardRef(() => i7.AutoFocus), selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i0.forwardRef(() => CheckIcon), selector: "CheckIcon" }, { kind: "component", type: i0.forwardRef(() => SearchIcon), selector: "SearchIcon" }, { kind: "component", type: i0.forwardRef(() => TimesCircleIcon), selector: "TimesCircleIcon" }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(() => MultiSelectItem), selector: "p-multiSelectItem", inputs: ["id", "option", "selected", "label", "disabled", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "template", "checkIconTemplate", "itemCheckboxIconTemplate"], outputs: ["onClick", "onMouseEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1986
+ `, isInline: true, styles: ["@layer primeng{.p-multiselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-multiselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-multiselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer;display:flex}.p-multiselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-multiselect-label-empty{overflow:hidden;visibility:hidden}.p-multiselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-multiselect-token-icon{cursor:pointer}.p-multiselect-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px}.p-multiselect-items-wrapper{overflow:auto}.p-multiselect-items{margin:0;padding:0;list-style-type:none}.p-multiselect-item{cursor:pointer;display:flex;align-items:center;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-multiselect-header{display:flex;align-items:center;justify-content:space-between}.p-multiselect-filter-container{position:relative;flex:1 1 auto}.p-multiselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-multiselect-filter-container .p-inputtext{width:100%}.p-multiselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}.p-fluid .p-multiselect{display:flex}.p-multiselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-multiselect-clearable{position:relative}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i4.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: i0.forwardRef(() => i1.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i5.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: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => i6.Scroller), selector: "p-scroller", 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: i0.forwardRef(() => i7.AutoFocus), selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i0.forwardRef(() => CheckIcon), selector: "CheckIcon" }, { kind: "component", type: i0.forwardRef(() => SearchIcon), selector: "SearchIcon" }, { kind: "component", type: i0.forwardRef(() => TimesCircleIcon), selector: "TimesCircleIcon" }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(() => MultiSelectItem), selector: "p-multiSelectItem", inputs: ["id", "option", "selected", "label", "disabled", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "template", "checkIconTemplate", "itemCheckboxIconTemplate"], outputs: ["onClick", "onMouseEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1952
1987
  }
1953
1988
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: MultiSelect, decorators: [{
1954
1989
  type: Component,
@@ -2013,13 +2048,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
2013
2048
  </ng-container>
2014
2049
  </div>
2015
2050
  <div class="p-multiselect-trigger">
2016
- <ng-container *ngIf="!dropdownIconTemplate">
2017
- <span *ngIf="dropdownIcon" class="p-multiselect-trigger-icon" [ngClass]="dropdownIcon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true"></span>
2018
- <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="'p-multiselect-trigger-icon'" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true" />
2051
+ <ng-container *ngIf="loading; else elseBlock">
2052
+ <ng-container *ngIf="loadingIconTemplate">
2053
+ <ng-container *ngTemplateOutlet="loadingIconTemplate"></ng-container>
2054
+ </ng-container>
2055
+ <ng-container *ngIf="!loadingIconTemplate">
2056
+ <span *ngIf="loadingIcon" [ngClass]="'p-multiselect-trigger-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
2057
+ <span *ngIf="!loadingIcon" [class]="'p-multiselect-trigger-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
2058
+ </ng-container>
2019
2059
  </ng-container>
2020
- <span *ngIf="dropdownIconTemplate" class="p-multiselect-trigger-icon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
2021
- <ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
2022
- </span>
2060
+ <ng-template #elseBlock>
2061
+ <ng-container *ngIf="!dropdownIconTemplate">
2062
+ <span *ngIf="dropdownIcon" class="p-multiselect-trigger-icon" [ngClass]="dropdownIcon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true"></span>
2063
+ <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="'p-multiselect-trigger-icon'" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true" />
2064
+ </ng-container>
2065
+ <span *ngIf="dropdownIconTemplate" class="p-multiselect-trigger-icon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
2066
+ <ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
2067
+ </span>
2068
+ </ng-template>
2023
2069
  </div>
2024
2070
  <p-overlay
2025
2071
  #overlay
@@ -2056,7 +2102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
2056
2102
  <div
2057
2103
  class="p-checkbox p-component"
2058
2104
  *ngIf="showToggleAll && !selectionLimit"
2059
- [ngClass]="{ 'p-checkbox-disabled': disabled || toggleAllDisabled }"
2105
+ [ngClass]="{ 'p-variant-filled': variant === 'filled' || config.inputStyle() === 'filled', 'p-checkbox-disabled': disabled || toggleAllDisabled }"
2060
2106
  (click)="onToggleAll($event)"
2061
2107
  (keydown)="onHeaderCheckboxKeyDown($event)"
2062
2108
  >
@@ -2220,7 +2266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
2220
2266
  '[class.p-inputwrapper-focus]': 'focused || overlayVisible',
2221
2267
  '[class.p-inputwrapper-filled]': 'filled'
2222
2268
  }, providers: [MULTISELECT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@layer primeng{.p-multiselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-multiselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-multiselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer;display:flex}.p-multiselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-multiselect-label-empty{overflow:hidden;visibility:hidden}.p-multiselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-multiselect-token-icon{cursor:pointer}.p-multiselect-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px}.p-multiselect-items-wrapper{overflow:auto}.p-multiselect-items{margin:0;padding:0;list-style-type:none}.p-multiselect-item{cursor:pointer;display:flex;align-items:center;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-multiselect-header{display:flex;align-items:center;justify-content:space-between}.p-multiselect-filter-container{position:relative;flex:1 1 auto}.p-multiselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-multiselect-filter-container .p-inputtext{width:100%}.p-multiselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}.p-fluid .p-multiselect{display:flex}.p-multiselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-multiselect-clearable{position:relative}}\n"] }]
2223
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i3.FilterService }, { type: i3.PrimeNGConfig }, { type: i3.OverlayService }], propDecorators: { id: [{
2269
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.FilterService }, { type: i1.PrimeNGConfig }, { type: i1.OverlayService }], propDecorators: { id: [{
2224
2270
  type: Input
2225
2271
  }], ariaLabel: [{
2226
2272
  type: Input
@@ -2256,6 +2302,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
2256
2302
  }], tabindex: [{
2257
2303
  type: Input,
2258
2304
  args: [{ transform: numberAttribute }]
2305
+ }], variant: [{
2306
+ type: Input
2259
2307
  }], appendTo: [{
2260
2308
  type: Input
2261
2309
  }], dataKey: [{
@@ -2308,9 +2356,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
2308
2356
  }], virtualScroll: [{
2309
2357
  type: Input,
2310
2358
  args: [{ transform: booleanAttribute }]
2359
+ }], loading: [{
2360
+ type: Input,
2361
+ args: [{ transform: booleanAttribute }]
2311
2362
  }], virtualScrollItemSize: [{
2312
2363
  type: Input,
2313
2364
  args: [{ transform: numberAttribute }]
2365
+ }], loadingIcon: [{
2366
+ type: Input
2314
2367
  }], virtualScrollOptions: [{
2315
2368
  type: Input
2316
2369
  }], overlayOptions: [{