ng-zorro-antd-select.mjs 112 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288
  1. import * as i0 from '@angular/core';
  2. import { Input, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, booleanAttribute, Output, inject, NgZone, PLATFORM_ID, ViewChild, TemplateRef, DestroyRef, ElementRef, numberAttribute, computed, signal, forwardRef, ContentChildren, NgModule } from '@angular/core';
  3. import { Subject, BehaviorSubject, of, combineLatest, merge } from 'rxjs';
  4. import { OverlayModule, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
  5. import * as i2 from '@angular/cdk/scrolling';
  6. import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
  7. import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
  8. import * as i7 from 'ng-zorro-antd/core/overlay';
  9. import { NzOverlayModule, getPlacementName, POSITION_MAP } from 'ng-zorro-antd/core/overlay';
  10. import * as i1$3 from 'ng-zorro-antd/empty';
  11. import { NzEmptyModule } from 'ng-zorro-antd/empty';
  12. import * as i1 from 'ng-zorro-antd/core/outlet';
  13. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  14. import { takeUntil, startWith, distinctUntilChanged, withLatestFrom, map, switchMap } from 'rxjs/operators';
  15. import * as i1$1 from 'ng-zorro-antd/core/services';
  16. import { NzDestroyService } from 'ng-zorro-antd/core/services';
  17. import { fromEventOutsideAngular, numberAttributeWithInfinityFallback, isNotNil, getStatusClassNames } from 'ng-zorro-antd/core/util';
  18. import * as i1$2 from 'ng-zorro-antd/icon';
  19. import { NzIconModule } from 'ng-zorro-antd/icon';
  20. import { __esDecorate, __runInitializers } from 'tslib';
  21. import { BACKSPACE, ESCAPE, TAB, SPACE, ENTER, DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
  22. import * as i3 from '@angular/cdk/platform';
  23. import { _getEventTarget } from '@angular/cdk/platform';
  24. import * as i2$1 from '@angular/forms';
  25. import { FormsModule, COMPOSITION_BUFFER_MODE, NG_VALUE_ACCESSOR } from '@angular/forms';
  26. import { slideMotion } from 'ng-zorro-antd/core/animation';
  27. import * as i2$2 from 'ng-zorro-antd/core/config';
  28. import { WithConfig } from 'ng-zorro-antd/core/config';
  29. import { NzFormStatusService, NzFormNoStatusService, NzFormItemFeedbackIconComponent } from 'ng-zorro-antd/core/form';
  30. import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
  31. import { reqAnimFrame, cancelRequestAnimationFrame } from 'ng-zorro-antd/core/polyfill';
  32. import * as i6 from 'ng-zorro-antd/space';
  33. import { NZ_SPACE_COMPACT_SIZE, NZ_SPACE_COMPACT_ITEM_TYPE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';
  34. import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
  35. import * as i1$4 from '@angular/cdk/a11y';
  36. import * as i5 from '@angular/cdk/bidi';
  37. /**
  38. * Use of this source code is governed by an MIT-style license that can be
  39. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  40. */
  41. class NzOptionGroupComponent {
  42. nzLabel = null;
  43. changes = new Subject();
  44. ngOnChanges() {
  45. this.changes.next();
  46. }
  47. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzOptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  48. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzOptionGroupComponent, isStandalone: true, selector: "nz-option-group", inputs: { nzLabel: "nzLabel" }, exportAs: ["nzOptionGroup"], usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  49. }
  50. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzOptionGroupComponent, decorators: [{
  51. type: Component,
  52. args: [{
  53. selector: 'nz-option-group',
  54. exportAs: 'nzOptionGroup',
  55. template: `<ng-content></ng-content>`,
  56. encapsulation: ViewEncapsulation.None,
  57. changeDetection: ChangeDetectionStrategy.OnPush
  58. }]
  59. }], propDecorators: { nzLabel: [{
  60. type: Input
  61. }] } });
  62. /**
  63. * Use of this source code is governed by an MIT-style license that can be
  64. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  65. */
  66. class NzOptionItemGroupComponent {
  67. nzLabel = null;
  68. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzOptionItemGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  69. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzOptionItemGroupComponent, isStandalone: true, selector: "nz-option-item-group", inputs: { nzLabel: "nzLabel" }, host: { classAttribute: "ant-select-item ant-select-item-group" }, ngImport: i0, template: ` <ng-container *nzStringTemplateOutlet="nzLabel">{{ nzLabel }}</ng-container> `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  70. }
  71. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzOptionItemGroupComponent, decorators: [{
  72. type: Component,
  73. args: [{
  74. selector: 'nz-option-item-group',
  75. template: ` <ng-container *nzStringTemplateOutlet="nzLabel">{{ nzLabel }}</ng-container> `,
  76. changeDetection: ChangeDetectionStrategy.OnPush,
  77. encapsulation: ViewEncapsulation.None,
  78. host: {
  79. class: 'ant-select-item ant-select-item-group'
  80. },
  81. imports: [NzOutletModule]
  82. }]
  83. }], propDecorators: { nzLabel: [{
  84. type: Input
  85. }] } });
  86. /**
  87. * Use of this source code is governed by an MIT-style license that can be
  88. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  89. */
  90. class NzOptionItemComponent {
  91. elementRef;
  92. ngZone;
  93. destroy$;
  94. selected = false;
  95. activated = false;
  96. grouped = false;
  97. customContent = false;
  98. template = null;
  99. disabled = false;
  100. showState = false;
  101. title;
  102. label = null;
  103. value = null;
  104. activatedValue = null;
  105. listOfSelectedValue = [];
  106. icon = null;
  107. compareWith;
  108. itemClick = new EventEmitter();
  109. itemHover = new EventEmitter();
  110. constructor(elementRef, ngZone, destroy$) {
  111. this.elementRef = elementRef;
  112. this.ngZone = ngZone;
  113. this.destroy$ = destroy$;
  114. }
  115. ngOnChanges(changes) {
  116. const { value, activatedValue, listOfSelectedValue } = changes;
  117. if (value || listOfSelectedValue) {
  118. this.selected = this.listOfSelectedValue.some(v => this.compareWith(v, this.value));
  119. }
  120. if (value || activatedValue) {
  121. this.activated = this.compareWith(this.activatedValue, this.value);
  122. }
  123. }
  124. ngOnInit() {
  125. fromEventOutsideAngular(this.elementRef.nativeElement, 'click')
  126. .pipe(takeUntil(this.destroy$))
  127. .subscribe(() => {
  128. if (!this.disabled) {
  129. this.ngZone.run(() => this.itemClick.emit(this.value));
  130. }
  131. });
  132. fromEventOutsideAngular(this.elementRef.nativeElement, 'mouseenter')
  133. .pipe(takeUntil(this.destroy$))
  134. .subscribe(() => {
  135. if (!this.disabled) {
  136. this.ngZone.run(() => this.itemHover.emit(this.value));
  137. }
  138. });
  139. }
  140. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzOptionItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.NzDestroyService }], target: i0.ɵɵFactoryTarget.Component });
  141. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzOptionItemComponent, isStandalone: true, selector: "nz-option-item", inputs: { grouped: "grouped", customContent: ["customContent", "customContent", booleanAttribute], template: "template", disabled: "disabled", showState: "showState", title: "title", label: "label", value: "value", activatedValue: "activatedValue", listOfSelectedValue: "listOfSelectedValue", icon: "icon", compareWith: "compareWith" }, outputs: { itemClick: "itemClick", itemHover: "itemHover" }, host: { properties: { "attr.title": "title", "class.ant-select-item-option-grouped": "grouped", "class.ant-select-item-option-selected": "selected && !disabled", "class.ant-select-item-option-disabled": "disabled", "class.ant-select-item-option-active": "activated && !disabled" }, classAttribute: "ant-select-item ant-select-item-option" }, providers: [NzDestroyService], usesOnChanges: true, ngImport: i0, template: `
  142. <div class="ant-select-item-option-content">
  143. @if (customContent) {
  144. <ng-template [ngTemplateOutlet]="template"></ng-template>
  145. } @else {
  146. {{ label }}
  147. }
  148. </div>
  149. @if (showState && selected) {
  150. <div class="ant-select-item-option-state" unselectable="on">
  151. @if (!icon) {
  152. <nz-icon nzType="check" class="ant-select-selected-icon" />
  153. } @else {
  154. <ng-template [ngTemplateOutlet]="icon"></ng-template>
  155. }
  156. </div>
  157. }
  158. `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  159. }
  160. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzOptionItemComponent, decorators: [{
  161. type: Component,
  162. args: [{
  163. selector: 'nz-option-item',
  164. template: `
  165. <div class="ant-select-item-option-content">
  166. @if (customContent) {
  167. <ng-template [ngTemplateOutlet]="template"></ng-template>
  168. } @else {
  169. {{ label }}
  170. }
  171. </div>
  172. @if (showState && selected) {
  173. <div class="ant-select-item-option-state" unselectable="on">
  174. @if (!icon) {
  175. <nz-icon nzType="check" class="ant-select-selected-icon" />
  176. } @else {
  177. <ng-template [ngTemplateOutlet]="icon"></ng-template>
  178. }
  179. </div>
  180. }
  181. `,
  182. changeDetection: ChangeDetectionStrategy.OnPush,
  183. encapsulation: ViewEncapsulation.None,
  184. host: {
  185. class: 'ant-select-item ant-select-item-option',
  186. '[attr.title]': 'title',
  187. '[class.ant-select-item-option-grouped]': 'grouped',
  188. '[class.ant-select-item-option-selected]': 'selected && !disabled',
  189. '[class.ant-select-item-option-disabled]': 'disabled',
  190. '[class.ant-select-item-option-active]': 'activated && !disabled'
  191. },
  192. providers: [NzDestroyService],
  193. imports: [NgTemplateOutlet, NzIconModule]
  194. }]
  195. }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.NzDestroyService }], propDecorators: { grouped: [{
  196. type: Input
  197. }], customContent: [{
  198. type: Input,
  199. args: [{ transform: booleanAttribute }]
  200. }], template: [{
  201. type: Input
  202. }], disabled: [{
  203. type: Input
  204. }], showState: [{
  205. type: Input
  206. }], title: [{
  207. type: Input
  208. }], label: [{
  209. type: Input
  210. }], value: [{
  211. type: Input
  212. }], activatedValue: [{
  213. type: Input
  214. }], listOfSelectedValue: [{
  215. type: Input
  216. }], icon: [{
  217. type: Input
  218. }], compareWith: [{
  219. type: Input
  220. }], itemClick: [{
  221. type: Output
  222. }], itemHover: [{
  223. type: Output
  224. }] } });
  225. /**
  226. * Use of this source code is governed by an MIT-style license that can be
  227. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  228. */
  229. class NzOptionContainerComponent {
  230. notFoundContent = undefined;
  231. menuItemSelectedIcon = null;
  232. dropdownRender = null;
  233. activatedValue = null;
  234. listOfSelectedValue = [];
  235. compareWith;
  236. mode = 'default';
  237. matchWidth = true;
  238. itemSize = 32;
  239. maxItemLength = 8;
  240. isMaxMultipleCountReached = false;
  241. listOfContainerItem = [];
  242. itemClick = new EventEmitter();
  243. scrollToBottom = new EventEmitter();
  244. cdkVirtualScrollViewport;
  245. scrolledIndex = 0;
  246. ngZone = inject(NgZone);
  247. platformId = inject(PLATFORM_ID);
  248. onItemClick(value) {
  249. this.itemClick.emit(value);
  250. }
  251. onItemHover(value) {
  252. // TODO: keydown.enter won't activate this value
  253. this.activatedValue = value;
  254. }
  255. trackValue(_index, option) {
  256. return option.key;
  257. }
  258. onScrolledIndexChange(index) {
  259. this.scrolledIndex = index;
  260. if (index === this.listOfContainerItem.length - this.maxItemLength - 1) {
  261. this.scrollToBottom.emit();
  262. }
  263. }
  264. scrollToActivatedValue() {
  265. const index = this.listOfContainerItem.findIndex(item => this.compareWith(item.key, this.activatedValue));
  266. if (index < this.scrolledIndex || index >= this.scrolledIndex + this.maxItemLength) {
  267. this.cdkVirtualScrollViewport.scrollToIndex(index || 0);
  268. }
  269. }
  270. ngOnChanges(changes) {
  271. const { listOfContainerItem, activatedValue } = changes;
  272. if (listOfContainerItem || activatedValue) {
  273. this.scrollToActivatedValue();
  274. }
  275. }
  276. ngAfterViewInit() {
  277. if (isPlatformBrowser(this.platformId)) {
  278. this.ngZone.runOutsideAngular(() => setTimeout(() => this.scrollToActivatedValue()));
  279. }
  280. }
  281. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzOptionContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  282. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzOptionContainerComponent, isStandalone: true, selector: "nz-option-container", inputs: { notFoundContent: "notFoundContent", menuItemSelectedIcon: "menuItemSelectedIcon", dropdownRender: "dropdownRender", activatedValue: "activatedValue", listOfSelectedValue: "listOfSelectedValue", compareWith: "compareWith", mode: "mode", matchWidth: "matchWidth", itemSize: "itemSize", maxItemLength: "maxItemLength", isMaxMultipleCountReached: "isMaxMultipleCountReached", listOfContainerItem: "listOfContainerItem" }, outputs: { itemClick: "itemClick", scrollToBottom: "scrollToBottom" }, host: { classAttribute: "ant-select-dropdown" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }], exportAs: ["nzOptionContainer"], usesOnChanges: true, ngImport: i0, template: `
  283. <div>
  284. @if (listOfContainerItem.length === 0) {
  285. <div class="ant-select-item-empty">
  286. <nz-embed-empty nzComponentName="select" [specificContent]="notFoundContent!"></nz-embed-empty>
  287. </div>
  288. }
  289. <cdk-virtual-scroll-viewport
  290. [class.full-width]="!matchWidth"
  291. [itemSize]="itemSize"
  292. [maxBufferPx]="itemSize * maxItemLength"
  293. [minBufferPx]="itemSize * maxItemLength"
  294. (scrolledIndexChange)="onScrolledIndexChange($event)"
  295. [style.height.px]="listOfContainerItem.length * itemSize"
  296. [style.max-height.px]="itemSize * maxItemLength"
  297. >
  298. <ng-template
  299. cdkVirtualFor
  300. [cdkVirtualForOf]="listOfContainerItem"
  301. [cdkVirtualForTrackBy]="trackValue"
  302. [cdkVirtualForTemplateCacheSize]="0"
  303. let-item
  304. >
  305. @switch (item.type) {
  306. @case ('group') {
  307. <nz-option-item-group [nzLabel]="item.groupLabel ?? null"></nz-option-item-group>
  308. }
  309. @case ('item') {
  310. <nz-option-item
  311. [icon]="menuItemSelectedIcon"
  312. [customContent]="item.nzCustomContent"
  313. [template]="item.template ?? null"
  314. [grouped]="!!item.groupLabel"
  315. [disabled]="
  316. item.nzDisabled || (isMaxMultipleCountReached && !listOfSelectedValue.includes(item['nzValue']))
  317. "
  318. [showState]="mode === 'tags' || mode === 'multiple'"
  319. [title]="item.nzTitle"
  320. [label]="item.nzLabel"
  321. [compareWith]="compareWith"
  322. [activatedValue]="activatedValue"
  323. [listOfSelectedValue]="listOfSelectedValue"
  324. [value]="item.nzValue"
  325. (itemHover)="onItemHover($event)"
  326. (itemClick)="onItemClick($event)"
  327. ></nz-option-item>
  328. }
  329. }
  330. </ng-template>
  331. </cdk-virtual-scroll-viewport>
  332. <ng-template [ngTemplateOutlet]="dropdownRender"></ng-template>
  333. </div>
  334. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzEmptyModule }, { kind: "component", type: i1$3.NzEmbedEmptyComponent, selector: "nz-embed-empty", inputs: ["nzComponentName", "specificContent"], exportAs: ["nzEmbedEmpty"] }, { kind: "component", type: NzOptionItemGroupComponent, selector: "nz-option-item-group", inputs: ["nzLabel"] }, { kind: "component", type: NzOptionItemComponent, selector: "nz-option-item", inputs: ["grouped", "customContent", "template", "disabled", "showState", "title", "label", "value", "activatedValue", "listOfSelectedValue", "icon", "compareWith"], outputs: ["itemClick", "itemHover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: NzOverlayModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  335. }
  336. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzOptionContainerComponent, decorators: [{
  337. type: Component,
  338. args: [{
  339. selector: 'nz-option-container',
  340. exportAs: 'nzOptionContainer',
  341. changeDetection: ChangeDetectionStrategy.OnPush,
  342. encapsulation: ViewEncapsulation.None,
  343. preserveWhitespaces: false,
  344. template: `
  345. <div>
  346. @if (listOfContainerItem.length === 0) {
  347. <div class="ant-select-item-empty">
  348. <nz-embed-empty nzComponentName="select" [specificContent]="notFoundContent!"></nz-embed-empty>
  349. </div>
  350. }
  351. <cdk-virtual-scroll-viewport
  352. [class.full-width]="!matchWidth"
  353. [itemSize]="itemSize"
  354. [maxBufferPx]="itemSize * maxItemLength"
  355. [minBufferPx]="itemSize * maxItemLength"
  356. (scrolledIndexChange)="onScrolledIndexChange($event)"
  357. [style.height.px]="listOfContainerItem.length * itemSize"
  358. [style.max-height.px]="itemSize * maxItemLength"
  359. >
  360. <ng-template
  361. cdkVirtualFor
  362. [cdkVirtualForOf]="listOfContainerItem"
  363. [cdkVirtualForTrackBy]="trackValue"
  364. [cdkVirtualForTemplateCacheSize]="0"
  365. let-item
  366. >
  367. @switch (item.type) {
  368. @case ('group') {
  369. <nz-option-item-group [nzLabel]="item.groupLabel ?? null"></nz-option-item-group>
  370. }
  371. @case ('item') {
  372. <nz-option-item
  373. [icon]="menuItemSelectedIcon"
  374. [customContent]="item.nzCustomContent"
  375. [template]="item.template ?? null"
  376. [grouped]="!!item.groupLabel"
  377. [disabled]="
  378. item.nzDisabled || (isMaxMultipleCountReached && !listOfSelectedValue.includes(item['nzValue']))
  379. "
  380. [showState]="mode === 'tags' || mode === 'multiple'"
  381. [title]="item.nzTitle"
  382. [label]="item.nzLabel"
  383. [compareWith]="compareWith"
  384. [activatedValue]="activatedValue"
  385. [listOfSelectedValue]="listOfSelectedValue"
  386. [value]="item.nzValue"
  387. (itemHover)="onItemHover($event)"
  388. (itemClick)="onItemClick($event)"
  389. ></nz-option-item>
  390. }
  391. }
  392. </ng-template>
  393. </cdk-virtual-scroll-viewport>
  394. <ng-template [ngTemplateOutlet]="dropdownRender"></ng-template>
  395. </div>
  396. `,
  397. host: { class: 'ant-select-dropdown' },
  398. imports: [
  399. NzEmptyModule,
  400. NzOptionItemGroupComponent,
  401. NzOptionItemComponent,
  402. NgTemplateOutlet,
  403. OverlayModule,
  404. NzOverlayModule
  405. ]
  406. }]
  407. }], propDecorators: { notFoundContent: [{
  408. type: Input
  409. }], menuItemSelectedIcon: [{
  410. type: Input
  411. }], dropdownRender: [{
  412. type: Input
  413. }], activatedValue: [{
  414. type: Input
  415. }], listOfSelectedValue: [{
  416. type: Input
  417. }], compareWith: [{
  418. type: Input
  419. }], mode: [{
  420. type: Input
  421. }], matchWidth: [{
  422. type: Input
  423. }], itemSize: [{
  424. type: Input
  425. }], maxItemLength: [{
  426. type: Input
  427. }], isMaxMultipleCountReached: [{
  428. type: Input
  429. }], listOfContainerItem: [{
  430. type: Input
  431. }], itemClick: [{
  432. type: Output
  433. }], scrollToBottom: [{
  434. type: Output
  435. }], cdkVirtualScrollViewport: [{
  436. type: ViewChild,
  437. args: [CdkVirtualScrollViewport, { static: true }]
  438. }] } });
  439. /**
  440. * Use of this source code is governed by an MIT-style license that can be
  441. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  442. */
  443. class NzOptionComponent {
  444. destroy$;
  445. changes = new Subject();
  446. groupLabel = null;
  447. template;
  448. nzTitle;
  449. nzLabel = null;
  450. nzValue = null;
  451. nzKey;
  452. nzDisabled = false;
  453. nzHide = false;
  454. nzCustomContent = false;
  455. nzOptionGroupComponent = inject(NzOptionGroupComponent, { optional: true });
  456. constructor(destroy$) {
  457. this.destroy$ = destroy$;
  458. }
  459. ngOnInit() {
  460. if (this.nzOptionGroupComponent) {
  461. this.nzOptionGroupComponent.changes.pipe(startWith(true), takeUntil(this.destroy$)).subscribe(() => {
  462. this.groupLabel = this.nzOptionGroupComponent?.nzLabel;
  463. });
  464. }
  465. }
  466. ngOnChanges() {
  467. this.changes.next();
  468. }
  469. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzOptionComponent, deps: [{ token: i1$1.NzDestroyService }], target: i0.ɵɵFactoryTarget.Component });
  470. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: NzOptionComponent, isStandalone: true, selector: "nz-option", inputs: { nzTitle: "nzTitle", nzLabel: "nzLabel", nzValue: "nzValue", nzKey: "nzKey", nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzHide: ["nzHide", "nzHide", booleanAttribute], nzCustomContent: ["nzCustomContent", "nzCustomContent", booleanAttribute] }, providers: [NzDestroyService], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["nzOption"], usesOnChanges: true, ngImport: i0, template: `
  471. <ng-template>
  472. <ng-content></ng-content>
  473. </ng-template>
  474. `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  475. }
  476. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzOptionComponent, decorators: [{
  477. type: Component,
  478. args: [{
  479. selector: 'nz-option',
  480. exportAs: 'nzOption',
  481. encapsulation: ViewEncapsulation.None,
  482. changeDetection: ChangeDetectionStrategy.OnPush,
  483. providers: [NzDestroyService],
  484. template: `
  485. <ng-template>
  486. <ng-content></ng-content>
  487. </ng-template>
  488. `
  489. }]
  490. }], ctorParameters: () => [{ type: i1$1.NzDestroyService }], propDecorators: { template: [{
  491. type: ViewChild,
  492. args: [TemplateRef, { static: true }]
  493. }], nzTitle: [{
  494. type: Input
  495. }], nzLabel: [{
  496. type: Input
  497. }], nzValue: [{
  498. type: Input
  499. }], nzKey: [{
  500. type: Input
  501. }], nzDisabled: [{
  502. type: Input,
  503. args: [{ transform: booleanAttribute }]
  504. }], nzHide: [{
  505. type: Input,
  506. args: [{ transform: booleanAttribute }]
  507. }], nzCustomContent: [{
  508. type: Input,
  509. args: [{ transform: booleanAttribute }]
  510. }] } });
  511. /**
  512. * Use of this source code is governed by an MIT-style license that can be
  513. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  514. */
  515. class NzSelectArrowComponent {
  516. listOfValue = [];
  517. loading = false;
  518. search = false;
  519. showArrow = false;
  520. isMaxMultipleCountSet = false;
  521. suffixIcon = null;
  522. feedbackIcon = null;
  523. nzMaxMultipleCount = Infinity;
  524. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectArrowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  525. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSelectArrowComponent, isStandalone: true, selector: "nz-select-arrow", inputs: { listOfValue: "listOfValue", loading: "loading", search: "search", showArrow: "showArrow", isMaxMultipleCountSet: "isMaxMultipleCountSet", suffixIcon: "suffixIcon", feedbackIcon: "feedbackIcon", nzMaxMultipleCount: ["nzMaxMultipleCount", "nzMaxMultipleCount", numberAttributeWithInfinityFallback] }, host: { properties: { "class.ant-select-arrow-loading": "loading" }, classAttribute: "ant-select-arrow" }, ngImport: i0, template: `
  526. @if (isMaxMultipleCountSet) {
  527. <span>{{ listOfValue.length }} / {{ nzMaxMultipleCount }}</span>
  528. }
  529. @if (loading) {
  530. <nz-icon nzType="loading" />
  531. } @else {
  532. @if (showArrow && !suffixIcon) {
  533. @if (search) {
  534. <nz-icon nzType="search" />
  535. } @else {
  536. <nz-icon nzType="down" />
  537. }
  538. } @else {
  539. <ng-container *nzStringTemplateOutlet="suffixIcon; let suffixIcon">
  540. @if (suffixIcon) {
  541. <nz-icon [nzType]="suffixIcon" />
  542. }
  543. </ng-container>
  544. }
  545. }
  546. <ng-container *nzStringTemplateOutlet="feedbackIcon">{{ feedbackIcon }}</ng-container>
  547. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  548. }
  549. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectArrowComponent, decorators: [{
  550. type: Component,
  551. args: [{
  552. selector: 'nz-select-arrow',
  553. encapsulation: ViewEncapsulation.None,
  554. changeDetection: ChangeDetectionStrategy.OnPush,
  555. template: `
  556. @if (isMaxMultipleCountSet) {
  557. <span>{{ listOfValue.length }} / {{ nzMaxMultipleCount }}</span>
  558. }
  559. @if (loading) {
  560. <nz-icon nzType="loading" />
  561. } @else {
  562. @if (showArrow && !suffixIcon) {
  563. @if (search) {
  564. <nz-icon nzType="search" />
  565. } @else {
  566. <nz-icon nzType="down" />
  567. }
  568. } @else {
  569. <ng-container *nzStringTemplateOutlet="suffixIcon; let suffixIcon">
  570. @if (suffixIcon) {
  571. <nz-icon [nzType]="suffixIcon" />
  572. }
  573. </ng-container>
  574. }
  575. }
  576. <ng-container *nzStringTemplateOutlet="feedbackIcon">{{ feedbackIcon }}</ng-container>
  577. `,
  578. host: {
  579. class: 'ant-select-arrow',
  580. '[class.ant-select-arrow-loading]': 'loading'
  581. },
  582. imports: [NzIconModule, NzOutletModule]
  583. }]
  584. }], propDecorators: { listOfValue: [{
  585. type: Input
  586. }], loading: [{
  587. type: Input
  588. }], search: [{
  589. type: Input
  590. }], showArrow: [{
  591. type: Input
  592. }], isMaxMultipleCountSet: [{
  593. type: Input
  594. }], suffixIcon: [{
  595. type: Input
  596. }], feedbackIcon: [{
  597. type: Input
  598. }], nzMaxMultipleCount: [{
  599. type: Input,
  600. args: [{ transform: numberAttributeWithInfinityFallback }]
  601. }] } });
  602. /**
  603. * Use of this source code is governed by an MIT-style license that can be
  604. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  605. */
  606. class NzSelectClearComponent {
  607. clearIcon = null;
  608. clear = new EventEmitter();
  609. onClick(e) {
  610. e.preventDefault();
  611. e.stopPropagation();
  612. this.clear.emit(e);
  613. }
  614. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectClearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  615. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSelectClearComponent, isStandalone: true, selector: "nz-select-clear", inputs: { clearIcon: "clearIcon" }, outputs: { clear: "clear" }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "ant-select-clear" }, ngImport: i0, template: `
  616. @if (clearIcon) {
  617. <ng-template [ngTemplateOutlet]="clearIcon"></ng-template>
  618. } @else {
  619. <nz-icon nzType="close-circle" nzTheme="fill" class="ant-select-close-icon" />
  620. }
  621. `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  622. }
  623. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectClearComponent, decorators: [{
  624. type: Component,
  625. args: [{
  626. selector: 'nz-select-clear',
  627. encapsulation: ViewEncapsulation.None,
  628. changeDetection: ChangeDetectionStrategy.OnPush,
  629. template: `
  630. @if (clearIcon) {
  631. <ng-template [ngTemplateOutlet]="clearIcon"></ng-template>
  632. } @else {
  633. <nz-icon nzType="close-circle" nzTheme="fill" class="ant-select-close-icon" />
  634. }
  635. `,
  636. host: {
  637. class: 'ant-select-clear',
  638. '(click)': 'onClick($event)'
  639. },
  640. imports: [NgTemplateOutlet, NzIconModule]
  641. }]
  642. }], propDecorators: { clearIcon: [{
  643. type: Input
  644. }], clear: [{
  645. type: Output
  646. }] } });
  647. /**
  648. * Use of this source code is governed by an MIT-style license that can be
  649. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  650. */
  651. class NzSelectItemComponent {
  652. disabled = false;
  653. label = null;
  654. deletable = false;
  655. removeIcon = null;
  656. contentTemplateOutletContext = null;
  657. contentTemplateOutlet = null;
  658. delete = new EventEmitter();
  659. get templateOutletContext() {
  660. return {
  661. $implicit: this.contentTemplateOutletContext,
  662. ...this.contentTemplateOutletContext
  663. };
  664. }
  665. onDelete(e) {
  666. e.preventDefault();
  667. e.stopPropagation();
  668. if (!this.disabled) {
  669. this.delete.next(e);
  670. }
  671. }
  672. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  673. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSelectItemComponent, isStandalone: true, selector: "nz-select-item", inputs: { disabled: "disabled", label: "label", deletable: "deletable", removeIcon: "removeIcon", contentTemplateOutletContext: "contentTemplateOutletContext", contentTemplateOutlet: "contentTemplateOutlet" }, outputs: { delete: "delete" }, host: { properties: { "attr.title": "label", "class.ant-select-selection-item-disabled": "disabled" }, classAttribute: "ant-select-selection-item" }, ngImport: i0, template: `
  674. <ng-container *nzStringTemplateOutlet="contentTemplateOutlet; context: templateOutletContext">
  675. @if (deletable) {
  676. <div class="ant-select-selection-item-content">{{ label }}</div>
  677. } @else {
  678. {{ label }}
  679. }
  680. </ng-container>
  681. @if (deletable && !disabled) {
  682. <span class="ant-select-selection-item-remove" (click)="onDelete($event)">
  683. @if (!removeIcon) {
  684. <nz-icon nzType="close" />
  685. } @else {
  686. <ng-template [ngTemplateOutlet]="removeIcon"></ng-template>
  687. }
  688. </span>
  689. }
  690. `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  691. }
  692. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectItemComponent, decorators: [{
  693. type: Component,
  694. args: [{
  695. selector: 'nz-select-item',
  696. encapsulation: ViewEncapsulation.None,
  697. changeDetection: ChangeDetectionStrategy.OnPush,
  698. template: `
  699. <ng-container *nzStringTemplateOutlet="contentTemplateOutlet; context: templateOutletContext">
  700. @if (deletable) {
  701. <div class="ant-select-selection-item-content">{{ label }}</div>
  702. } @else {
  703. {{ label }}
  704. }
  705. </ng-container>
  706. @if (deletable && !disabled) {
  707. <span class="ant-select-selection-item-remove" (click)="onDelete($event)">
  708. @if (!removeIcon) {
  709. <nz-icon nzType="close" />
  710. } @else {
  711. <ng-template [ngTemplateOutlet]="removeIcon"></ng-template>
  712. }
  713. </span>
  714. }
  715. `,
  716. host: {
  717. class: 'ant-select-selection-item',
  718. '[attr.title]': 'label',
  719. '[class.ant-select-selection-item-disabled]': 'disabled'
  720. },
  721. imports: [NgTemplateOutlet, NzOutletModule, NzIconModule]
  722. }]
  723. }], propDecorators: { disabled: [{
  724. type: Input
  725. }], label: [{
  726. type: Input
  727. }], deletable: [{
  728. type: Input
  729. }], removeIcon: [{
  730. type: Input
  731. }], contentTemplateOutletContext: [{
  732. type: Input
  733. }], contentTemplateOutlet: [{
  734. type: Input
  735. }], delete: [{
  736. type: Output
  737. }] } });
  738. /**
  739. * Use of this source code is governed by an MIT-style license that can be
  740. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  741. */
  742. class NzSelectPlaceholderComponent {
  743. placeholder = null;
  744. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  745. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzSelectPlaceholderComponent, isStandalone: true, selector: "nz-select-placeholder", inputs: { placeholder: "placeholder" }, host: { classAttribute: "ant-select-selection-placeholder" }, ngImport: i0, template: `
  746. <ng-container *nzStringTemplateOutlet="placeholder">
  747. {{ placeholder }}
  748. </ng-container>
  749. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  750. }
  751. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectPlaceholderComponent, decorators: [{
  752. type: Component,
  753. args: [{
  754. selector: 'nz-select-placeholder',
  755. encapsulation: ViewEncapsulation.None,
  756. changeDetection: ChangeDetectionStrategy.OnPush,
  757. template: `
  758. <ng-container *nzStringTemplateOutlet="placeholder">
  759. {{ placeholder }}
  760. </ng-container>
  761. `,
  762. host: { class: 'ant-select-selection-placeholder' },
  763. imports: [NzOutletModule]
  764. }]
  765. }], propDecorators: { placeholder: [{
  766. type: Input
  767. }] } });
  768. class NzSelectSearchComponent {
  769. elementRef;
  770. renderer;
  771. focusMonitor;
  772. nzId = null;
  773. disabled = false;
  774. mirrorSync = false;
  775. showInput = true;
  776. focusTrigger = false;
  777. value = '';
  778. autofocus = false;
  779. valueChange = new EventEmitter();
  780. isComposingChange = new EventEmitter();
  781. inputElement;
  782. mirrorElement;
  783. setCompositionState(isComposing) {
  784. this.isComposingChange.next(isComposing);
  785. }
  786. onValueChange(value) {
  787. this.value = value;
  788. this.valueChange.next(value);
  789. if (this.mirrorSync) {
  790. this.syncMirrorWidth();
  791. }
  792. }
  793. clearInputValue() {
  794. const inputDOM = this.inputElement.nativeElement;
  795. inputDOM.value = '';
  796. this.onValueChange('');
  797. }
  798. syncMirrorWidth() {
  799. reqAnimFrame(() => {
  800. const mirrorDOM = this.mirrorElement.nativeElement;
  801. const hostDOM = this.elementRef.nativeElement;
  802. const inputDOM = this.inputElement.nativeElement;
  803. this.renderer.removeStyle(hostDOM, 'width');
  804. this.renderer.setProperty(mirrorDOM, 'textContent', `${inputDOM.value}\u00a0`);
  805. this.renderer.setStyle(hostDOM, 'width', `${mirrorDOM.scrollWidth}px`);
  806. });
  807. }
  808. focus() {
  809. this.focusMonitor.focusVia(this.inputElement, 'keyboard');
  810. }
  811. blur() {
  812. this.inputElement.nativeElement.blur();
  813. }
  814. constructor(elementRef, renderer, focusMonitor) {
  815. this.elementRef = elementRef;
  816. this.renderer = renderer;
  817. this.focusMonitor = focusMonitor;
  818. }
  819. ngOnChanges(changes) {
  820. const inputDOM = this.inputElement.nativeElement;
  821. const { focusTrigger, showInput } = changes;
  822. if (showInput) {
  823. if (this.showInput) {
  824. this.renderer.removeAttribute(inputDOM, 'readonly');
  825. }
  826. else {
  827. this.renderer.setAttribute(inputDOM, 'readonly', 'readonly');
  828. }
  829. }
  830. // IE11 cannot input value if focused before removing readonly
  831. if (focusTrigger && focusTrigger.currentValue === true && focusTrigger.previousValue === false) {
  832. inputDOM.focus();
  833. }
  834. }
  835. ngAfterViewInit() {
  836. if (this.mirrorSync) {
  837. this.syncMirrorWidth();
  838. }
  839. if (this.autofocus) {
  840. this.focus();
  841. }
  842. }
  843. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectSearchComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$4.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
  844. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSelectSearchComponent, isStandalone: true, selector: "nz-select-search", inputs: { nzId: "nzId", disabled: "disabled", mirrorSync: "mirrorSync", showInput: "showInput", focusTrigger: "focusTrigger", value: "value", autofocus: "autofocus" }, outputs: { valueChange: "valueChange", isComposingChange: "isComposingChange" }, host: { classAttribute: "ant-select-selection-search" }, providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }, { propertyName: "mirrorElement", first: true, predicate: ["mirrorElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
  845. <input
  846. #inputElement
  847. [attr.id]="nzId"
  848. autocomplete="off"
  849. class="ant-select-selection-search-input"
  850. [ngModel]="value"
  851. [attr.autofocus]="autofocus ? 'autofocus' : null"
  852. [disabled]="disabled"
  853. [style.opacity]="showInput ? null : 0"
  854. (ngModelChange)="onValueChange($event)"
  855. (compositionstart)="setCompositionState(true)"
  856. (compositionend)="setCompositionState(false)"
  857. />
  858. @if (mirrorSync) {
  859. <span #mirrorElement class="ant-select-selection-search-mirror"></span>
  860. }
  861. `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  862. }
  863. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectSearchComponent, decorators: [{
  864. type: Component,
  865. args: [{
  866. selector: 'nz-select-search',
  867. encapsulation: ViewEncapsulation.None,
  868. changeDetection: ChangeDetectionStrategy.OnPush,
  869. template: `
  870. <input
  871. #inputElement
  872. [attr.id]="nzId"
  873. autocomplete="off"
  874. class="ant-select-selection-search-input"
  875. [ngModel]="value"
  876. [attr.autofocus]="autofocus ? 'autofocus' : null"
  877. [disabled]="disabled"
  878. [style.opacity]="showInput ? null : 0"
  879. (ngModelChange)="onValueChange($event)"
  880. (compositionstart)="setCompositionState(true)"
  881. (compositionend)="setCompositionState(false)"
  882. />
  883. @if (mirrorSync) {
  884. <span #mirrorElement class="ant-select-selection-search-mirror"></span>
  885. }
  886. `,
  887. host: { class: 'ant-select-selection-search' },
  888. providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }],
  889. imports: [FormsModule]
  890. }]
  891. }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$4.FocusMonitor }], propDecorators: { nzId: [{
  892. type: Input
  893. }], disabled: [{
  894. type: Input
  895. }], mirrorSync: [{
  896. type: Input
  897. }], showInput: [{
  898. type: Input
  899. }], focusTrigger: [{
  900. type: Input
  901. }], value: [{
  902. type: Input
  903. }], autofocus: [{
  904. type: Input
  905. }], valueChange: [{
  906. type: Output
  907. }], isComposingChange: [{
  908. type: Output
  909. }], inputElement: [{
  910. type: ViewChild,
  911. args: ['inputElement', { static: true }]
  912. }], mirrorElement: [{
  913. type: ViewChild,
  914. args: ['mirrorElement', { static: false }]
  915. }] } });
  916. /**
  917. * Use of this source code is governed by an MIT-style license that can be
  918. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  919. */
  920. class NzSelectTopControlComponent {
  921. nzId = null;
  922. showSearch = false;
  923. placeHolder = null;
  924. open = false;
  925. maxTagCount = Infinity;
  926. autofocus = false;
  927. disabled = false;
  928. mode = 'default';
  929. customTemplate = null;
  930. maxTagPlaceholder = null;
  931. removeIcon = null;
  932. listOfTopItem = [];
  933. tokenSeparators = [];
  934. tokenize = new EventEmitter();
  935. inputValueChange = new EventEmitter();
  936. deleteItem = new EventEmitter();
  937. nzSelectSearchComponent;
  938. listOfSlicedItem = [];
  939. isShowPlaceholder = true;
  940. isShowSingleLabel = false;
  941. isComposing = false;
  942. inputValue = null;
  943. updateTemplateVariable() {
  944. const isSelectedValueEmpty = this.listOfTopItem.length === 0;
  945. this.isShowPlaceholder = isSelectedValueEmpty && !this.isComposing && !this.inputValue;
  946. this.isShowSingleLabel = !isSelectedValueEmpty && !this.isComposing && !this.inputValue;
  947. }
  948. isComposingChange(isComposing) {
  949. this.isComposing = isComposing;
  950. this.updateTemplateVariable();
  951. }
  952. onInputValueChange(value) {
  953. if (value !== this.inputValue) {
  954. this.inputValue = value;
  955. this.updateTemplateVariable();
  956. this.inputValueChange.emit(value);
  957. this.tokenSeparate(value, this.tokenSeparators);
  958. }
  959. }
  960. tokenSeparate(inputValue, tokenSeparators) {
  961. const includesSeparators = (str, separators) => {
  962. // eslint-disable-next-line @typescript-eslint/prefer-for-of
  963. for (let i = 0; i < separators.length; ++i) {
  964. if (str.lastIndexOf(separators[i]) > 0) {
  965. return true;
  966. }
  967. }
  968. return false;
  969. };
  970. const splitBySeparators = (str, separators) => {
  971. const reg = new RegExp(`[${separators.join()}]`);
  972. const array = str.split(reg).filter(token => token);
  973. return [...new Set(array)];
  974. };
  975. if (inputValue &&
  976. inputValue.length &&
  977. tokenSeparators.length &&
  978. this.mode !== 'default' &&
  979. includesSeparators(inputValue, tokenSeparators)) {
  980. const listOfLabel = splitBySeparators(inputValue, tokenSeparators);
  981. this.tokenize.next(listOfLabel);
  982. }
  983. }
  984. clearInputValue() {
  985. if (this.nzSelectSearchComponent) {
  986. this.nzSelectSearchComponent.clearInputValue();
  987. }
  988. }
  989. focus() {
  990. if (this.nzSelectSearchComponent) {
  991. this.nzSelectSearchComponent.focus();
  992. }
  993. }
  994. blur() {
  995. if (this.nzSelectSearchComponent) {
  996. this.nzSelectSearchComponent.blur();
  997. }
  998. }
  999. onDeleteItem(item) {
  1000. if (!this.disabled && !item.nzDisabled) {
  1001. this.deleteItem.next(item);
  1002. }
  1003. }
  1004. destroyRef = inject(DestroyRef);
  1005. elementRef = inject((ElementRef));
  1006. ngZone = inject(NgZone);
  1007. noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true });
  1008. ngOnChanges(changes) {
  1009. const { listOfTopItem, maxTagCount, customTemplate, maxTagPlaceholder } = changes;
  1010. if (listOfTopItem) {
  1011. this.updateTemplateVariable();
  1012. }
  1013. if (listOfTopItem || maxTagCount || customTemplate || maxTagPlaceholder) {
  1014. const listOfSlicedItem = this.listOfTopItem.slice(0, this.maxTagCount).map(o => ({
  1015. nzLabel: o.nzLabel,
  1016. nzValue: o.nzValue,
  1017. nzDisabled: o.nzDisabled,
  1018. contentTemplateOutlet: this.customTemplate,
  1019. contentTemplateOutletContext: o
  1020. }));
  1021. if (this.listOfTopItem.length > this.maxTagCount) {
  1022. const exceededLabel = `+ ${this.listOfTopItem.length - this.maxTagCount} ...`;
  1023. const listOfSelectedValue = this.listOfTopItem.map(item => item.nzValue);
  1024. const exceededItem = {
  1025. nzLabel: exceededLabel,
  1026. nzValue: '$$__nz_exceeded_item',
  1027. nzDisabled: true,
  1028. contentTemplateOutlet: this.maxTagPlaceholder,
  1029. contentTemplateOutletContext: listOfSelectedValue.slice(this.maxTagCount)
  1030. };
  1031. listOfSlicedItem.push(exceededItem);
  1032. }
  1033. this.listOfSlicedItem = listOfSlicedItem;
  1034. }
  1035. }
  1036. ngOnInit() {
  1037. fromEventOutsideAngular(this.elementRef.nativeElement, 'click')
  1038. .pipe(takeUntilDestroyed(this.destroyRef))
  1039. .subscribe(event => {
  1040. // `HTMLElement.focus()` is a native DOM API which doesn't require Angular to run change detection.
  1041. if (event.target !== this.nzSelectSearchComponent.inputElement.nativeElement) {
  1042. this.nzSelectSearchComponent.focus();
  1043. }
  1044. });
  1045. fromEventOutsideAngular(this.elementRef.nativeElement, 'keydown')
  1046. .pipe(takeUntilDestroyed(this.destroyRef))
  1047. .subscribe(event => {
  1048. if (event.target instanceof HTMLInputElement) {
  1049. const inputValue = event.target.value;
  1050. if (event.keyCode === BACKSPACE && this.mode !== 'default' && !inputValue && this.listOfTopItem.length > 0) {
  1051. event.preventDefault();
  1052. // Run change detection only if the user has pressed the `Backspace` key and the following condition is met.
  1053. this.ngZone.run(() => this.onDeleteItem(this.listOfTopItem[this.listOfTopItem.length - 1]));
  1054. }
  1055. }
  1056. });
  1057. }
  1058. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectTopControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  1059. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSelectTopControlComponent, isStandalone: true, selector: "nz-select-top-control", inputs: { nzId: "nzId", showSearch: "showSearch", placeHolder: "placeHolder", open: "open", maxTagCount: ["maxTagCount", "maxTagCount", numberAttribute], autofocus: "autofocus", disabled: "disabled", mode: "mode", customTemplate: "customTemplate", maxTagPlaceholder: "maxTagPlaceholder", removeIcon: "removeIcon", listOfTopItem: "listOfTopItem", tokenSeparators: "tokenSeparators" }, outputs: { tokenize: "tokenize", inputValueChange: "inputValueChange", deleteItem: "deleteItem" }, host: { classAttribute: "ant-select-selector" }, viewQueries: [{ propertyName: "nzSelectSearchComponent", first: true, predicate: NzSelectSearchComponent, descendants: true }], exportAs: ["nzSelectTopControl"], usesOnChanges: true, ngImport: i0, template: `
  1060. <!--single mode-->
  1061. @switch (mode) {
  1062. @case ('default') {
  1063. <nz-select-search
  1064. [nzId]="nzId"
  1065. [disabled]="disabled"
  1066. [value]="inputValue!"
  1067. [showInput]="showSearch"
  1068. [mirrorSync]="false"
  1069. [autofocus]="autofocus"
  1070. [focusTrigger]="open"
  1071. (isComposingChange)="isComposingChange($event)"
  1072. (valueChange)="onInputValueChange($event)"
  1073. ></nz-select-search>
  1074. @if (isShowSingleLabel) {
  1075. <nz-select-item
  1076. [deletable]="false"
  1077. [disabled]="false"
  1078. [removeIcon]="removeIcon"
  1079. [label]="listOfTopItem[0].nzLabel"
  1080. [contentTemplateOutlet]="customTemplate"
  1081. [contentTemplateOutletContext]="listOfTopItem[0]"
  1082. ></nz-select-item>
  1083. }
  1084. }
  1085. @default {
  1086. <!--multiple or tags mode-->
  1087. @for (item of listOfSlicedItem; track item.nzValue) {
  1088. <nz-select-item
  1089. [removeIcon]="removeIcon"
  1090. [label]="item.nzLabel"
  1091. [disabled]="item.nzDisabled || disabled"
  1092. [contentTemplateOutlet]="item.contentTemplateOutlet"
  1093. [deletable]="true"
  1094. [contentTemplateOutletContext]="item.contentTemplateOutletContext"
  1095. (delete)="onDeleteItem(item.contentTemplateOutletContext)"
  1096. ></nz-select-item>
  1097. }
  1098. <nz-select-search
  1099. [nzId]="nzId"
  1100. [disabled]="disabled"
  1101. [value]="inputValue!"
  1102. [autofocus]="autofocus"
  1103. [showInput]="true"
  1104. [mirrorSync]="true"
  1105. [focusTrigger]="open"
  1106. (isComposingChange)="isComposingChange($event)"
  1107. (valueChange)="onInputValueChange($event)"
  1108. ></nz-select-search>
  1109. }
  1110. }
  1111. @if (isShowPlaceholder) {
  1112. <nz-select-placeholder [placeholder]="placeHolder"></nz-select-placeholder>
  1113. }
  1114. `, isInline: true, dependencies: [{ kind: "component", type: NzSelectSearchComponent, selector: "nz-select-search", inputs: ["nzId", "disabled", "mirrorSync", "showInput", "focusTrigger", "value", "autofocus"], outputs: ["valueChange", "isComposingChange"] }, { kind: "component", type: NzSelectItemComponent, selector: "nz-select-item", inputs: ["disabled", "label", "deletable", "removeIcon", "contentTemplateOutletContext", "contentTemplateOutlet"], outputs: ["delete"] }, { kind: "component", type: NzSelectPlaceholderComponent, selector: "nz-select-placeholder", inputs: ["placeholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  1115. }
  1116. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectTopControlComponent, decorators: [{
  1117. type: Component,
  1118. args: [{
  1119. selector: 'nz-select-top-control',
  1120. exportAs: 'nzSelectTopControl',
  1121. preserveWhitespaces: false,
  1122. changeDetection: ChangeDetectionStrategy.OnPush,
  1123. encapsulation: ViewEncapsulation.None,
  1124. template: `
  1125. <!--single mode-->
  1126. @switch (mode) {
  1127. @case ('default') {
  1128. <nz-select-search
  1129. [nzId]="nzId"
  1130. [disabled]="disabled"
  1131. [value]="inputValue!"
  1132. [showInput]="showSearch"
  1133. [mirrorSync]="false"
  1134. [autofocus]="autofocus"
  1135. [focusTrigger]="open"
  1136. (isComposingChange)="isComposingChange($event)"
  1137. (valueChange)="onInputValueChange($event)"
  1138. ></nz-select-search>
  1139. @if (isShowSingleLabel) {
  1140. <nz-select-item
  1141. [deletable]="false"
  1142. [disabled]="false"
  1143. [removeIcon]="removeIcon"
  1144. [label]="listOfTopItem[0].nzLabel"
  1145. [contentTemplateOutlet]="customTemplate"
  1146. [contentTemplateOutletContext]="listOfTopItem[0]"
  1147. ></nz-select-item>
  1148. }
  1149. }
  1150. @default {
  1151. <!--multiple or tags mode-->
  1152. @for (item of listOfSlicedItem; track item.nzValue) {
  1153. <nz-select-item
  1154. [removeIcon]="removeIcon"
  1155. [label]="item.nzLabel"
  1156. [disabled]="item.nzDisabled || disabled"
  1157. [contentTemplateOutlet]="item.contentTemplateOutlet"
  1158. [deletable]="true"
  1159. [contentTemplateOutletContext]="item.contentTemplateOutletContext"
  1160. (delete)="onDeleteItem(item.contentTemplateOutletContext)"
  1161. ></nz-select-item>
  1162. }
  1163. <nz-select-search
  1164. [nzId]="nzId"
  1165. [disabled]="disabled"
  1166. [value]="inputValue!"
  1167. [autofocus]="autofocus"
  1168. [showInput]="true"
  1169. [mirrorSync]="true"
  1170. [focusTrigger]="open"
  1171. (isComposingChange)="isComposingChange($event)"
  1172. (valueChange)="onInputValueChange($event)"
  1173. ></nz-select-search>
  1174. }
  1175. }
  1176. @if (isShowPlaceholder) {
  1177. <nz-select-placeholder [placeholder]="placeHolder"></nz-select-placeholder>
  1178. }
  1179. `,
  1180. host: { class: 'ant-select-selector' },
  1181. imports: [NzSelectSearchComponent, NzSelectItemComponent, NzSelectPlaceholderComponent]
  1182. }]
  1183. }], propDecorators: { nzId: [{
  1184. type: Input
  1185. }], showSearch: [{
  1186. type: Input
  1187. }], placeHolder: [{
  1188. type: Input
  1189. }], open: [{
  1190. type: Input
  1191. }], maxTagCount: [{
  1192. type: Input,
  1193. args: [{ transform: numberAttribute }]
  1194. }], autofocus: [{
  1195. type: Input
  1196. }], disabled: [{
  1197. type: Input
  1198. }], mode: [{
  1199. type: Input
  1200. }], customTemplate: [{
  1201. type: Input
  1202. }], maxTagPlaceholder: [{
  1203. type: Input
  1204. }], removeIcon: [{
  1205. type: Input
  1206. }], listOfTopItem: [{
  1207. type: Input
  1208. }], tokenSeparators: [{
  1209. type: Input
  1210. }], tokenize: [{
  1211. type: Output
  1212. }], inputValueChange: [{
  1213. type: Output
  1214. }], deleteItem: [{
  1215. type: Output
  1216. }], nzSelectSearchComponent: [{
  1217. type: ViewChild,
  1218. args: [NzSelectSearchComponent]
  1219. }] } });
  1220. const defaultFilterOption = (searchValue, item) => {
  1221. if (item && item.nzLabel) {
  1222. return item.nzLabel.toString().toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
  1223. }
  1224. else {
  1225. return false;
  1226. }
  1227. };
  1228. const NZ_CONFIG_MODULE_NAME = 'select';
  1229. let NzSelectComponent = (() => {
  1230. let _nzOptionHeightPx_decorators;
  1231. let _nzOptionHeightPx_initializers = [];
  1232. let _nzOptionHeightPx_extraInitializers = [];
  1233. let _nzSuffixIcon_decorators;
  1234. let _nzSuffixIcon_initializers = [];
  1235. let _nzSuffixIcon_extraInitializers = [];
  1236. let _nzBorderless_decorators;
  1237. let _nzBorderless_initializers = [];
  1238. let _nzBorderless_extraInitializers = [];
  1239. let _nzBackdrop_decorators;
  1240. let _nzBackdrop_initializers = [];
  1241. let _nzBackdrop_extraInitializers = [];
  1242. return class NzSelectComponent {
  1243. static {
  1244. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  1245. _nzOptionHeightPx_decorators = [WithConfig()];
  1246. _nzSuffixIcon_decorators = [WithConfig()];
  1247. _nzBorderless_decorators = [WithConfig()];
  1248. _nzBackdrop_decorators = [WithConfig()];
  1249. __esDecorate(null, null, _nzOptionHeightPx_decorators, { kind: "field", name: "nzOptionHeightPx", static: false, private: false, access: { has: obj => "nzOptionHeightPx" in obj, get: obj => obj.nzOptionHeightPx, set: (obj, value) => { obj.nzOptionHeightPx = value; } }, metadata: _metadata }, _nzOptionHeightPx_initializers, _nzOptionHeightPx_extraInitializers);
  1250. __esDecorate(null, null, _nzSuffixIcon_decorators, { kind: "field", name: "nzSuffixIcon", static: false, private: false, access: { has: obj => "nzSuffixIcon" in obj, get: obj => obj.nzSuffixIcon, set: (obj, value) => { obj.nzSuffixIcon = value; } }, metadata: _metadata }, _nzSuffixIcon_initializers, _nzSuffixIcon_extraInitializers);
  1251. __esDecorate(null, null, _nzBorderless_decorators, { kind: "field", name: "nzBorderless", static: false, private: false, access: { has: obj => "nzBorderless" in obj, get: obj => obj.nzBorderless, set: (obj, value) => { obj.nzBorderless = value; } }, metadata: _metadata }, _nzBorderless_initializers, _nzBorderless_extraInitializers);
  1252. __esDecorate(null, null, _nzBackdrop_decorators, { kind: "field", name: "nzBackdrop", static: false, private: false, access: { has: obj => "nzBackdrop" in obj, get: obj => obj.nzBackdrop, set: (obj, value) => { obj.nzBackdrop = value; } }, metadata: _metadata }, _nzBackdrop_initializers, _nzBackdrop_extraInitializers);
  1253. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  1254. }
  1255. ngZone;
  1256. destroy$;
  1257. nzConfigService;
  1258. cdr;
  1259. host;
  1260. renderer;
  1261. platform;
  1262. focusMonitor;
  1263. directionality;
  1264. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  1265. nzId = null;
  1266. nzSize = 'default';
  1267. nzStatus = '';
  1268. nzOptionHeightPx = __runInitializers(this, _nzOptionHeightPx_initializers, 32);
  1269. nzOptionOverflowSize = (__runInitializers(this, _nzOptionHeightPx_extraInitializers), 8);
  1270. nzDropdownClassName = null;
  1271. nzDropdownMatchSelectWidth = true;
  1272. nzDropdownStyle = null;
  1273. nzNotFoundContent = undefined;
  1274. nzPlaceHolder = null;
  1275. nzPlacement = null;
  1276. nzMaxTagCount = Infinity;
  1277. nzDropdownRender = null;
  1278. nzCustomTemplate = null;
  1279. nzSuffixIcon = __runInitializers(this, _nzSuffixIcon_initializers, null);
  1280. nzClearIcon = (__runInitializers(this, _nzSuffixIcon_extraInitializers), null);
  1281. nzRemoveIcon = null;
  1282. nzMenuItemSelectedIcon = null;
  1283. nzTokenSeparators = [];
  1284. nzMaxTagPlaceholder = null;
  1285. nzMaxMultipleCount = Infinity;
  1286. nzMode = 'default';
  1287. nzFilterOption = defaultFilterOption;
  1288. compareWith = (o1, o2) => o1 === o2;
  1289. nzAllowClear = false;
  1290. nzBorderless = __runInitializers(this, _nzBorderless_initializers, false);
  1291. nzShowSearch = (__runInitializers(this, _nzBorderless_extraInitializers), false);
  1292. nzLoading = false;
  1293. nzAutoFocus = false;
  1294. nzAutoClearSearchValue = true;
  1295. nzServerSearch = false;
  1296. nzDisabled = false;
  1297. nzOpen = false;
  1298. nzSelectOnTab = false;
  1299. nzBackdrop = __runInitializers(this, _nzBackdrop_initializers, false);
  1300. nzOptions = (__runInitializers(this, _nzBackdrop_extraInitializers), []);
  1301. set nzShowArrow(value) {
  1302. this._nzShowArrow = value;
  1303. }
  1304. get nzShowArrow() {
  1305. return this._nzShowArrow === undefined ? this.nzMode === 'default' : this._nzShowArrow;
  1306. }
  1307. get isMultiple() {
  1308. return this.nzMode === 'multiple' || this.nzMode === 'tags';
  1309. }
  1310. get isMaxMultipleCountSet() {
  1311. return this.isMultiple && this.nzMaxMultipleCount !== Infinity;
  1312. }
  1313. get isMaxMultipleCountReached() {
  1314. return this.nzMaxMultipleCount !== Infinity && this.listOfValue.length === this.nzMaxMultipleCount;
  1315. }
  1316. nzOnSearch = new EventEmitter();
  1317. nzScrollToBottom = new EventEmitter();
  1318. nzOpenChange = new EventEmitter();
  1319. nzBlur = new EventEmitter();
  1320. nzFocus = new EventEmitter();
  1321. originElement;
  1322. cdkConnectedOverlay;
  1323. nzSelectTopControlComponent;
  1324. listOfNzOptionComponent;
  1325. listOfNzOptionGroupComponent;
  1326. nzOptionGroupComponentElement;
  1327. nzSelectTopControlComponentElement;
  1328. finalSize = computed(() => {
  1329. if (this.compactSize) {
  1330. return this.compactSize();
  1331. }
  1332. return this.size();
  1333. });
  1334. size = signal(this.nzSize);
  1335. compactSize = inject(NZ_SPACE_COMPACT_SIZE, { optional: true });
  1336. listOfValue$ = new BehaviorSubject([]);
  1337. listOfTemplateItem$ = new BehaviorSubject([]);
  1338. listOfTagAndTemplateItem = [];
  1339. searchValue = '';
  1340. isReactiveDriven = false;
  1341. value;
  1342. _nzShowArrow;
  1343. requestId = -1;
  1344. isNzDisableFirstChange = true;
  1345. onChange = () => { };
  1346. onTouched = () => { };
  1347. dropdownPosition = 'bottomLeft';
  1348. triggerWidth = null;
  1349. listOfContainerItem = [];
  1350. listOfTopItem = [];
  1351. activatedValue = null;
  1352. listOfValue = [];
  1353. focused = false;
  1354. dir = 'ltr';
  1355. positions = [];
  1356. // status
  1357. prefixCls = 'ant-select';
  1358. statusCls = {};
  1359. status = '';
  1360. hasFeedback = false;
  1361. generateTagItem(value) {
  1362. return {
  1363. nzValue: value,
  1364. nzLabel: value,
  1365. type: 'item'
  1366. };
  1367. }
  1368. onItemClick(value) {
  1369. this.activatedValue = value;
  1370. if (this.nzMode === 'default') {
  1371. if (this.listOfValue.length === 0 || !this.compareWith(this.listOfValue[0], value)) {
  1372. this.updateListOfValue([value]);
  1373. }
  1374. this.setOpenState(false);
  1375. }
  1376. else {
  1377. const targetIndex = this.listOfValue.findIndex(o => this.compareWith(o, value));
  1378. if (targetIndex !== -1) {
  1379. const listOfValueAfterRemoved = this.listOfValue.filter((_, i) => i !== targetIndex);
  1380. this.updateListOfValue(listOfValueAfterRemoved);
  1381. }
  1382. else if (this.listOfValue.length < this.nzMaxMultipleCount) {
  1383. const listOfValueAfterAdded = [...this.listOfValue, value];
  1384. this.updateListOfValue(listOfValueAfterAdded);
  1385. }
  1386. this.focus();
  1387. if (this.nzAutoClearSearchValue) {
  1388. this.clearInput();
  1389. }
  1390. }
  1391. }
  1392. onItemDelete(item) {
  1393. const listOfSelectedValue = this.listOfValue.filter(v => !this.compareWith(v, item.nzValue));
  1394. this.updateListOfValue(listOfSelectedValue);
  1395. this.clearInput();
  1396. }
  1397. updateListOfContainerItem() {
  1398. let listOfContainerItem = this.listOfTagAndTemplateItem
  1399. .filter(item => !item.nzHide)
  1400. .filter(item => {
  1401. if (!this.nzServerSearch && this.searchValue) {
  1402. return this.nzFilterOption(this.searchValue, item);
  1403. }
  1404. else {
  1405. return true;
  1406. }
  1407. });
  1408. if (this.nzMode === 'tags' && this.searchValue) {
  1409. const matchedItem = this.listOfTagAndTemplateItem.find(item => item.nzLabel === this.searchValue);
  1410. if (!matchedItem) {
  1411. const tagItem = this.generateTagItem(this.searchValue);
  1412. listOfContainerItem = [tagItem, ...listOfContainerItem];
  1413. this.activatedValue = tagItem.nzValue;
  1414. }
  1415. else {
  1416. this.activatedValue = matchedItem.nzValue;
  1417. }
  1418. }
  1419. const activatedItem = listOfContainerItem.find(item => item.nzLabel === this.searchValue) ||
  1420. listOfContainerItem.find(item => this.compareWith(item.nzValue, this.activatedValue)) ||
  1421. listOfContainerItem.find(item => this.compareWith(item.nzValue, this.listOfValue[0])) ||
  1422. listOfContainerItem[0];
  1423. this.activatedValue = (activatedItem && activatedItem.nzValue) || null;
  1424. let listOfGroupLabel = [];
  1425. if (this.isReactiveDriven) {
  1426. listOfGroupLabel = [...new Set(this.nzOptions.filter(o => o.groupLabel).map(o => o.groupLabel))];
  1427. }
  1428. else {
  1429. if (this.listOfNzOptionGroupComponent) {
  1430. listOfGroupLabel = this.listOfNzOptionGroupComponent.map(o => o.nzLabel);
  1431. }
  1432. }
  1433. /** insert group item **/
  1434. listOfGroupLabel.forEach(label => {
  1435. const index = listOfContainerItem.findIndex(item => label === item.groupLabel);
  1436. if (index > -1) {
  1437. const groupItem = { groupLabel: label, type: 'group', key: label };
  1438. listOfContainerItem.splice(index, 0, groupItem);
  1439. }
  1440. });
  1441. this.listOfContainerItem = [...listOfContainerItem];
  1442. this.updateCdkConnectedOverlayPositions();
  1443. }
  1444. clearInput() {
  1445. this.nzSelectTopControlComponent.clearInputValue();
  1446. }
  1447. updateListOfValue(listOfValue) {
  1448. const covertListToModel = (list, mode) => {
  1449. if (mode === 'default') {
  1450. if (list.length > 0) {
  1451. return list[0];
  1452. }
  1453. else {
  1454. return null;
  1455. }
  1456. }
  1457. else {
  1458. return list;
  1459. }
  1460. };
  1461. const model = covertListToModel(listOfValue, this.nzMode);
  1462. if (this.value !== model) {
  1463. this.listOfValue = listOfValue;
  1464. this.listOfValue$.next(listOfValue);
  1465. this.value = model;
  1466. this.onChange(this.value);
  1467. }
  1468. }
  1469. onTokenSeparate(listOfLabel) {
  1470. const listOfMatchedValue = this.listOfTagAndTemplateItem
  1471. .filter(item => listOfLabel.findIndex(label => label === item.nzLabel) !== -1)
  1472. .map(item => item.nzValue)
  1473. .filter(item => this.listOfValue.findIndex(v => this.compareWith(v, item)) === -1);
  1474. /**
  1475. * Limit the number of selected item to nzMaxMultipleCount
  1476. */
  1477. const limitWithinMaxCount = (value) => this.isMaxMultipleCountSet ? value.slice(0, this.nzMaxMultipleCount) : value;
  1478. if (this.nzMode === 'multiple') {
  1479. const updateValue = limitWithinMaxCount([...this.listOfValue, ...listOfMatchedValue]);
  1480. this.updateListOfValue(updateValue);
  1481. }
  1482. else if (this.nzMode === 'tags') {
  1483. const listOfUnMatchedLabel = listOfLabel.filter(label => this.listOfTagAndTemplateItem.findIndex(item => item.nzLabel === label) === -1);
  1484. const updateValue = limitWithinMaxCount([...this.listOfValue, ...listOfMatchedValue, ...listOfUnMatchedLabel]);
  1485. this.updateListOfValue(updateValue);
  1486. }
  1487. this.clearInput();
  1488. }
  1489. onKeyDown(e) {
  1490. if (this.nzDisabled) {
  1491. return;
  1492. }
  1493. const listOfFilteredOptionNotDisabled = this.listOfContainerItem
  1494. .filter(item => item.type === 'item')
  1495. .filter(item => !item.nzDisabled);
  1496. const activatedIndex = listOfFilteredOptionNotDisabled.findIndex(item => this.compareWith(item.nzValue, this.activatedValue));
  1497. switch (e.keyCode) {
  1498. case UP_ARROW:
  1499. e.preventDefault();
  1500. if (this.nzOpen && listOfFilteredOptionNotDisabled.length > 0) {
  1501. const preIndex = activatedIndex > 0 ? activatedIndex - 1 : listOfFilteredOptionNotDisabled.length - 1;
  1502. this.activatedValue = listOfFilteredOptionNotDisabled[preIndex].nzValue;
  1503. }
  1504. break;
  1505. case DOWN_ARROW:
  1506. e.preventDefault();
  1507. if (this.nzOpen && listOfFilteredOptionNotDisabled.length > 0) {
  1508. const nextIndex = activatedIndex < listOfFilteredOptionNotDisabled.length - 1 ? activatedIndex + 1 : 0;
  1509. this.activatedValue = listOfFilteredOptionNotDisabled[nextIndex].nzValue;
  1510. }
  1511. else {
  1512. this.setOpenState(true);
  1513. }
  1514. break;
  1515. case ENTER:
  1516. e.preventDefault();
  1517. if (this.nzOpen) {
  1518. if (isNotNil(this.activatedValue) && activatedIndex !== -1) {
  1519. this.onItemClick(this.activatedValue);
  1520. }
  1521. }
  1522. else {
  1523. this.setOpenState(true);
  1524. }
  1525. break;
  1526. case SPACE:
  1527. if (!this.nzOpen) {
  1528. this.setOpenState(true);
  1529. e.preventDefault();
  1530. }
  1531. break;
  1532. case TAB:
  1533. if (this.nzSelectOnTab) {
  1534. if (this.nzOpen) {
  1535. e.preventDefault();
  1536. if (isNotNil(this.activatedValue)) {
  1537. this.onItemClick(this.activatedValue);
  1538. }
  1539. }
  1540. }
  1541. else {
  1542. this.setOpenState(false);
  1543. }
  1544. break;
  1545. case ESCAPE:
  1546. /**
  1547. * Skip the ESCAPE processing, it will be handled in {@link onOverlayKeyDown}.
  1548. */
  1549. break;
  1550. default:
  1551. if (!this.nzOpen) {
  1552. this.setOpenState(true);
  1553. }
  1554. }
  1555. }
  1556. setOpenState(value) {
  1557. if (this.nzOpen !== value) {
  1558. this.nzOpen = value;
  1559. this.nzOpenChange.emit(value);
  1560. this.onOpenChange();
  1561. this.cdr.markForCheck();
  1562. }
  1563. }
  1564. onOpenChange() {
  1565. this.updateCdkConnectedOverlayStatus();
  1566. if (this.nzAutoClearSearchValue) {
  1567. this.clearInput();
  1568. }
  1569. }
  1570. onInputValueChange(value) {
  1571. this.searchValue = value;
  1572. this.updateListOfContainerItem();
  1573. this.nzOnSearch.emit(value);
  1574. this.updateCdkConnectedOverlayPositions();
  1575. }
  1576. onClearSelection() {
  1577. this.updateListOfValue([]);
  1578. }
  1579. onClickOutside(event) {
  1580. const target = _getEventTarget(event);
  1581. if (!this.host.nativeElement.contains(target)) {
  1582. this.setOpenState(false);
  1583. }
  1584. }
  1585. focus() {
  1586. this.nzSelectTopControlComponent.focus();
  1587. }
  1588. blur() {
  1589. this.nzSelectTopControlComponent.blur();
  1590. }
  1591. onPositionChange(position) {
  1592. const placement = getPlacementName(position);
  1593. this.dropdownPosition = placement;
  1594. }
  1595. updateCdkConnectedOverlayStatus() {
  1596. if (this.platform.isBrowser && this.originElement.nativeElement) {
  1597. const triggerWidth = this.triggerWidth;
  1598. cancelRequestAnimationFrame(this.requestId);
  1599. this.requestId = reqAnimFrame(() => {
  1600. // Blink triggers style and layout pipelines anytime the `getBoundingClientRect()` is called, which may cause a
  1601. // frame drop. That's why it's scheduled through the `requestAnimationFrame` to unload the composite thread.
  1602. this.triggerWidth = this.originElement.nativeElement.getBoundingClientRect().width;
  1603. if (triggerWidth !== this.triggerWidth) {
  1604. // The `requestAnimationFrame` will trigger change detection, but we're inside an `OnPush` component which won't have
  1605. // the `ChecksEnabled` state. Calling `markForCheck()` will allow Angular to run the change detection from the root component
  1606. // down to the `nz-select`. But we'll trigger only local change detection if the `triggerWidth` has been changed.
  1607. this.cdr.detectChanges();
  1608. }
  1609. });
  1610. }
  1611. }
  1612. updateCdkConnectedOverlayPositions() {
  1613. reqAnimFrame(() => {
  1614. this.cdkConnectedOverlay?.overlayRef?.updatePosition();
  1615. });
  1616. }
  1617. noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true });
  1618. nzFormStatusService = inject(NzFormStatusService, { optional: true });
  1619. nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true });
  1620. constructor(ngZone, destroy$, nzConfigService, cdr, host, renderer, platform, focusMonitor, directionality) {
  1621. this.ngZone = ngZone;
  1622. this.destroy$ = destroy$;
  1623. this.nzConfigService = nzConfigService;
  1624. this.cdr = cdr;
  1625. this.host = host;
  1626. this.renderer = renderer;
  1627. this.platform = platform;
  1628. this.focusMonitor = focusMonitor;
  1629. this.directionality = directionality;
  1630. }
  1631. writeValue(modelValue) {
  1632. /** https://github.com/angular/angular/issues/14988 **/
  1633. if (this.value !== modelValue) {
  1634. this.value = modelValue;
  1635. const covertModelToList = (model, mode) => {
  1636. if (model === null || model === undefined) {
  1637. return [];
  1638. }
  1639. else if (mode === 'default') {
  1640. return [model];
  1641. }
  1642. else {
  1643. return model;
  1644. }
  1645. };
  1646. const listOfValue = covertModelToList(modelValue, this.nzMode);
  1647. this.listOfValue = listOfValue;
  1648. this.listOfValue$.next(listOfValue);
  1649. this.cdr.markForCheck();
  1650. }
  1651. }
  1652. registerOnChange(fn) {
  1653. this.onChange = fn;
  1654. }
  1655. registerOnTouched(fn) {
  1656. this.onTouched = fn;
  1657. }
  1658. setDisabledState(disabled) {
  1659. this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || disabled;
  1660. this.isNzDisableFirstChange = false;
  1661. if (this.nzDisabled) {
  1662. this.setOpenState(false);
  1663. }
  1664. this.cdr.markForCheck();
  1665. }
  1666. ngOnChanges({ nzOpen, nzDisabled, nzOptions, nzStatus, nzPlacement, nzSize }) {
  1667. if (nzOpen) {
  1668. this.onOpenChange();
  1669. }
  1670. if (nzDisabled && this.nzDisabled) {
  1671. this.setOpenState(false);
  1672. }
  1673. if (nzOptions) {
  1674. this.isReactiveDriven = true;
  1675. const listOfOptions = this.nzOptions || [];
  1676. const listOfTransformedItem = listOfOptions.map(item => {
  1677. return {
  1678. template: item.label instanceof TemplateRef ? item.label : null,
  1679. nzTitle: this.getTitle(item.title, item.label),
  1680. nzLabel: typeof item.label === 'string' || typeof item.label === 'number' ? item.label : null,
  1681. nzValue: item.value,
  1682. nzDisabled: item.disabled || false,
  1683. nzHide: item.hide || false,
  1684. nzCustomContent: item.label instanceof TemplateRef,
  1685. groupLabel: item.groupLabel || null,
  1686. type: 'item',
  1687. key: item.key === undefined ? item.value : item.key
  1688. };
  1689. });
  1690. this.listOfTemplateItem$.next(listOfTransformedItem);
  1691. }
  1692. if (nzStatus) {
  1693. this.setStatusStyles(this.nzStatus, this.hasFeedback);
  1694. }
  1695. if (nzPlacement) {
  1696. const { currentValue } = nzPlacement;
  1697. this.dropdownPosition = currentValue;
  1698. const listOfPlacement = ['bottomLeft', 'topLeft', 'bottomRight', 'topRight'];
  1699. if (currentValue && listOfPlacement.includes(currentValue)) {
  1700. this.positions = [POSITION_MAP[currentValue]];
  1701. }
  1702. else {
  1703. this.positions = listOfPlacement.map(e => POSITION_MAP[e]);
  1704. }
  1705. }
  1706. if (nzSize) {
  1707. this.size.set(nzSize.currentValue);
  1708. }
  1709. }
  1710. ngOnInit() {
  1711. this.nzFormStatusService?.formStatusChanges
  1712. .pipe(distinctUntilChanged((pre, cur) => {
  1713. return pre.status === cur.status && pre.hasFeedback === cur.hasFeedback;
  1714. }), withLatestFrom(this.nzFormNoStatusService ? this.nzFormNoStatusService.noFormStatus : of(false)), map(([{ status, hasFeedback }, noStatus]) => ({ status: noStatus ? '' : status, hasFeedback })), takeUntil(this.destroy$))
  1715. .subscribe(({ status, hasFeedback }) => {
  1716. this.setStatusStyles(status, hasFeedback);
  1717. });
  1718. this.focusMonitor
  1719. .monitor(this.host, true)
  1720. .pipe(takeUntil(this.destroy$))
  1721. .subscribe(focusOrigin => {
  1722. if (!focusOrigin) {
  1723. this.focused = false;
  1724. this.cdr.markForCheck();
  1725. this.nzBlur.emit();
  1726. Promise.resolve().then(() => {
  1727. this.onTouched();
  1728. });
  1729. }
  1730. else {
  1731. this.focused = true;
  1732. this.cdr.markForCheck();
  1733. this.nzFocus.emit();
  1734. }
  1735. });
  1736. combineLatest([this.listOfValue$, this.listOfTemplateItem$])
  1737. .pipe(takeUntil(this.destroy$))
  1738. .subscribe(([listOfSelectedValue, listOfTemplateItem]) => {
  1739. const listOfTagItem = listOfSelectedValue
  1740. .filter(() => this.nzMode === 'tags')
  1741. .filter(value => listOfTemplateItem.findIndex(o => this.compareWith(o.nzValue, value)) === -1)
  1742. .map(value => this.listOfTopItem.find(o => this.compareWith(o.nzValue, value)) || this.generateTagItem(value));
  1743. this.listOfTagAndTemplateItem = [...listOfTemplateItem, ...listOfTagItem];
  1744. this.listOfTopItem = this.listOfValue
  1745. .map(v => [...this.listOfTagAndTemplateItem, ...this.listOfTopItem].find(item => this.compareWith(v, item.nzValue)))
  1746. .filter(item => !!item);
  1747. this.updateListOfContainerItem();
  1748. });
  1749. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  1750. this.dir = direction;
  1751. this.cdr.detectChanges();
  1752. });
  1753. this.nzConfigService
  1754. .getConfigChangeEventForComponent('select')
  1755. .pipe(takeUntil(this.destroy$))
  1756. .subscribe(() => {
  1757. this.size.set(this.nzSize);
  1758. this.cdr.markForCheck();
  1759. });
  1760. this.dir = this.directionality.value;
  1761. fromEventOutsideAngular(this.host.nativeElement, 'click')
  1762. .pipe(takeUntil(this.destroy$))
  1763. .subscribe(() => {
  1764. if ((this.nzOpen && this.nzShowSearch) || this.nzDisabled) {
  1765. return;
  1766. }
  1767. this.ngZone.run(() => this.setOpenState(!this.nzOpen));
  1768. });
  1769. // Caretaker note: we could've added this listener within the template `(overlayKeydown)="..."`,
  1770. // but with this approach, it'll run change detection on each keyboard click, and also it'll run
  1771. // `markForCheck()` internally, which means the whole component tree (starting from the root and
  1772. // going down to the select component) will be re-checked and updated (if needed).
  1773. // This is safe to do that manually since `setOpenState()` calls `markForCheck()` if needed.
  1774. this.cdkConnectedOverlay.overlayKeydown.pipe(takeUntil(this.destroy$)).subscribe(event => {
  1775. if (event.keyCode === ESCAPE) {
  1776. this.setOpenState(false);
  1777. }
  1778. });
  1779. }
  1780. ngAfterContentInit() {
  1781. if (!this.isReactiveDriven) {
  1782. merge(this.listOfNzOptionGroupComponent.changes, this.listOfNzOptionComponent.changes)
  1783. .pipe(startWith(true), switchMap(() => merge(...[
  1784. this.listOfNzOptionComponent.changes,
  1785. this.listOfNzOptionGroupComponent.changes,
  1786. ...this.listOfNzOptionComponent.map(option => option.changes),
  1787. ...this.listOfNzOptionGroupComponent.map(option => option.changes)
  1788. ]).pipe(startWith(true))), takeUntil(this.destroy$))
  1789. .subscribe(() => {
  1790. const listOfOptionInterface = this.listOfNzOptionComponent.toArray().map(item => {
  1791. const { template, nzLabel, nzValue, nzKey, nzDisabled, nzHide, nzCustomContent, groupLabel } = item;
  1792. return {
  1793. template,
  1794. nzLabel,
  1795. nzValue,
  1796. nzDisabled,
  1797. nzHide,
  1798. nzCustomContent,
  1799. groupLabel,
  1800. nzTitle: this.getTitle(item.nzTitle, item.nzLabel),
  1801. type: 'item',
  1802. key: nzKey === undefined ? nzValue : nzKey
  1803. };
  1804. });
  1805. this.listOfTemplateItem$.next(listOfOptionInterface);
  1806. this.cdr.markForCheck();
  1807. });
  1808. }
  1809. }
  1810. ngOnDestroy() {
  1811. cancelRequestAnimationFrame(this.requestId);
  1812. this.focusMonitor.stopMonitoring(this.host);
  1813. }
  1814. setStatusStyles(status, hasFeedback) {
  1815. this.status = status;
  1816. this.hasFeedback = hasFeedback;
  1817. this.cdr.markForCheck();
  1818. // render status if nzStatus is set
  1819. this.statusCls = getStatusClassNames(this.prefixCls, status, hasFeedback);
  1820. Object.keys(this.statusCls).forEach(status => {
  1821. if (this.statusCls[status]) {
  1822. this.renderer.addClass(this.host.nativeElement, status);
  1823. }
  1824. else {
  1825. this.renderer.removeClass(this.host.nativeElement, status);
  1826. }
  1827. });
  1828. }
  1829. getTitle(title, label) {
  1830. let rawTitle = undefined;
  1831. if (title === undefined) {
  1832. if (typeof label === 'string' || typeof label === 'number') {
  1833. rawTitle = label.toString();
  1834. }
  1835. }
  1836. else if (typeof title === 'string' || typeof title === 'number') {
  1837. rawTitle = title.toString();
  1838. }
  1839. return rawTitle;
  1840. }
  1841. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectComponent, deps: [{ token: i0.NgZone }, { token: i1$1.NzDestroyService }, { token: i2$2.NzConfigService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i3.Platform }, { token: i1$4.FocusMonitor }, { token: i5.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  1842. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSelectComponent, isStandalone: true, selector: "nz-select", inputs: { nzId: "nzId", nzSize: "nzSize", nzStatus: "nzStatus", nzOptionHeightPx: "nzOptionHeightPx", nzOptionOverflowSize: "nzOptionOverflowSize", nzDropdownClassName: "nzDropdownClassName", nzDropdownMatchSelectWidth: "nzDropdownMatchSelectWidth", nzDropdownStyle: "nzDropdownStyle", nzNotFoundContent: "nzNotFoundContent", nzPlaceHolder: "nzPlaceHolder", nzPlacement: "nzPlacement", nzMaxTagCount: "nzMaxTagCount", nzDropdownRender: "nzDropdownRender", nzCustomTemplate: "nzCustomTemplate", nzSuffixIcon: "nzSuffixIcon", nzClearIcon: "nzClearIcon", nzRemoveIcon: "nzRemoveIcon", nzMenuItemSelectedIcon: "nzMenuItemSelectedIcon", nzTokenSeparators: "nzTokenSeparators", nzMaxTagPlaceholder: "nzMaxTagPlaceholder", nzMaxMultipleCount: ["nzMaxMultipleCount", "nzMaxMultipleCount", numberAttributeWithInfinityFallback], nzMode: "nzMode", nzFilterOption: "nzFilterOption", compareWith: "compareWith", nzAllowClear: ["nzAllowClear", "nzAllowClear", booleanAttribute], nzBorderless: ["nzBorderless", "nzBorderless", booleanAttribute], nzShowSearch: ["nzShowSearch", "nzShowSearch", booleanAttribute], nzLoading: ["nzLoading", "nzLoading", booleanAttribute], nzAutoFocus: ["nzAutoFocus", "nzAutoFocus", booleanAttribute], nzAutoClearSearchValue: ["nzAutoClearSearchValue", "nzAutoClearSearchValue", booleanAttribute], nzServerSearch: ["nzServerSearch", "nzServerSearch", booleanAttribute], nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzOpen: ["nzOpen", "nzOpen", booleanAttribute], nzSelectOnTab: ["nzSelectOnTab", "nzSelectOnTab", booleanAttribute], nzBackdrop: ["nzBackdrop", "nzBackdrop", booleanAttribute], nzOptions: "nzOptions", nzShowArrow: ["nzShowArrow", "nzShowArrow", booleanAttribute] }, outputs: { nzOnSearch: "nzOnSearch", nzScrollToBottom: "nzScrollToBottom", nzOpenChange: "nzOpenChange", nzBlur: "nzBlur", nzFocus: "nzFocus" }, host: { properties: { "class.ant-select-in-form-item": "!!nzFormStatusService", "class.ant-select-lg": "finalSize() === \"large\"", "class.ant-select-sm": "finalSize() === \"small\"", "class.ant-select-show-arrow": "nzShowArrow", "class.ant-select-disabled": "nzDisabled", "class.ant-select-show-search": "(nzShowSearch || nzMode !== 'default') && !nzDisabled", "class.ant-select-allow-clear": "nzAllowClear", "class.ant-select-borderless": "nzBorderless", "class.ant-select-open": "nzOpen", "class.ant-select-focused": "nzOpen || focused", "class.ant-select-single": "nzMode === 'default'", "class.ant-select-multiple": "nzMode !== 'default'", "class.ant-select-rtl": "dir === 'rtl'" }, classAttribute: "ant-select" }, providers: [
  1843. NzDestroyService,
  1844. {
  1845. provide: NG_VALUE_ACCESSOR,
  1846. useExisting: forwardRef(() => NzSelectComponent),
  1847. multi: true
  1848. },
  1849. { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'select' }
  1850. ], queries: [{ propertyName: "listOfNzOptionComponent", predicate: NzOptionComponent, descendants: true }, { propertyName: "listOfNzOptionGroupComponent", predicate: NzOptionGroupComponent, descendants: true }], viewQueries: [{ propertyName: "originElement", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, static: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "nzSelectTopControlComponent", first: true, predicate: NzSelectTopControlComponent, descendants: true, static: true }, { propertyName: "nzOptionGroupComponentElement", first: true, predicate: NzOptionGroupComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "nzSelectTopControlComponentElement", first: true, predicate: NzSelectTopControlComponent, descendants: true, read: ElementRef, static: true }], exportAs: ["nzSelect"], usesOnChanges: true, hostDirectives: [{ directive: i6.NzSpaceCompactItemDirective }], ngImport: i0, template: `
  1851. <nz-select-top-control
  1852. cdkOverlayOrigin
  1853. #origin="cdkOverlayOrigin"
  1854. [nzId]="nzId"
  1855. [open]="nzOpen"
  1856. [disabled]="nzDisabled"
  1857. [mode]="nzMode"
  1858. [@.disabled]="!!noAnimation?.nzNoAnimation"
  1859. [nzNoAnimation]="noAnimation?.nzNoAnimation"
  1860. [maxTagPlaceholder]="nzMaxTagPlaceholder"
  1861. [removeIcon]="nzRemoveIcon"
  1862. [placeHolder]="nzPlaceHolder"
  1863. [maxTagCount]="nzMaxTagCount"
  1864. [customTemplate]="nzCustomTemplate"
  1865. [tokenSeparators]="nzTokenSeparators"
  1866. [showSearch]="nzShowSearch"
  1867. [autofocus]="nzAutoFocus"
  1868. [listOfTopItem]="listOfTopItem"
  1869. (inputValueChange)="onInputValueChange($event)"
  1870. (tokenize)="onTokenSeparate($event)"
  1871. (deleteItem)="onItemDelete($event)"
  1872. (keydown)="onKeyDown($event)"
  1873. ></nz-select-top-control>
  1874. @if (nzShowArrow || (hasFeedback && !!status) || isMaxMultipleCountSet) {
  1875. <nz-select-arrow
  1876. [showArrow]="nzShowArrow"
  1877. [loading]="nzLoading"
  1878. [search]="nzOpen && nzShowSearch"
  1879. [suffixIcon]="nzSuffixIcon"
  1880. [feedbackIcon]="feedbackIconTpl"
  1881. [nzMaxMultipleCount]="nzMaxMultipleCount"
  1882. [listOfValue]="listOfValue"
  1883. [isMaxMultipleCountSet]="isMaxMultipleCountSet"
  1884. >
  1885. <ng-template #feedbackIconTpl>
  1886. @if (hasFeedback && !!status) {
  1887. <nz-form-item-feedback-icon [status]="status"></nz-form-item-feedback-icon>
  1888. }
  1889. </ng-template>
  1890. </nz-select-arrow>
  1891. }
  1892. @if (nzAllowClear && !nzDisabled && listOfValue.length) {
  1893. <nz-select-clear [clearIcon]="nzClearIcon" (clear)="onClearSelection()"></nz-select-clear>
  1894. }
  1895. <ng-template
  1896. cdkConnectedOverlay
  1897. nzConnectedOverlay
  1898. [cdkConnectedOverlayHasBackdrop]="nzBackdrop"
  1899. [cdkConnectedOverlayMinWidth]="$any(nzDropdownMatchSelectWidth ? null : triggerWidth)"
  1900. [cdkConnectedOverlayWidth]="$any(nzDropdownMatchSelectWidth ? triggerWidth : null)"
  1901. [cdkConnectedOverlayOrigin]="origin"
  1902. [cdkConnectedOverlayTransformOriginOn]="'.ant-select-dropdown'"
  1903. [cdkConnectedOverlayPanelClass]="nzDropdownClassName!"
  1904. [cdkConnectedOverlayOpen]="nzOpen"
  1905. [cdkConnectedOverlayPositions]="positions"
  1906. (overlayOutsideClick)="onClickOutside($event)"
  1907. (detach)="setOpenState(false)"
  1908. (positionChange)="onPositionChange($event)"
  1909. >
  1910. <nz-option-container
  1911. [style]="nzDropdownStyle"
  1912. [itemSize]="nzOptionHeightPx"
  1913. [maxItemLength]="nzOptionOverflowSize"
  1914. [matchWidth]="nzDropdownMatchSelectWidth"
  1915. [class.ant-select-dropdown-placement-bottomLeft]="dropdownPosition === 'bottomLeft'"
  1916. [class.ant-select-dropdown-placement-topLeft]="dropdownPosition === 'topLeft'"
  1917. [class.ant-select-dropdown-placement-bottomRight]="dropdownPosition === 'bottomRight'"
  1918. [class.ant-select-dropdown-placement-topRight]="dropdownPosition === 'topRight'"
  1919. [@slideMotion]="'enter'"
  1920. [@.disabled]="!!noAnimation?.nzNoAnimation"
  1921. [nzNoAnimation]="noAnimation?.nzNoAnimation"
  1922. [listOfContainerItem]="listOfContainerItem"
  1923. [menuItemSelectedIcon]="nzMenuItemSelectedIcon"
  1924. [notFoundContent]="nzNotFoundContent"
  1925. [activatedValue]="activatedValue"
  1926. [listOfSelectedValue]="listOfValue"
  1927. [dropdownRender]="nzDropdownRender"
  1928. [compareWith]="compareWith"
  1929. [mode]="nzMode"
  1930. [isMaxMultipleCountReached]="isMaxMultipleCountReached"
  1931. (keydown)="onKeyDown($event)"
  1932. (itemClick)="onItemClick($event)"
  1933. (scrollToBottom)="nzScrollToBottom.emit()"
  1934. ></nz-option-container>
  1935. </ng-template>
  1936. `, isInline: true, dependencies: [{ kind: "component", type: NzSelectTopControlComponent, selector: "nz-select-top-control", inputs: ["nzId", "showSearch", "placeHolder", "open", "maxTagCount", "autofocus", "disabled", "mode", "customTemplate", "maxTagPlaceholder", "removeIcon", "listOfTopItem", "tokenSeparators"], outputs: ["tokenize", "inputValueChange", "deleteItem"], exportAs: ["nzSelectTopControl"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NzNoAnimationDirective, selector: "[nzNoAnimation]", inputs: ["nzNoAnimation"], exportAs: ["nzNoAnimation"] }, { kind: "component", type: NzSelectArrowComponent, selector: "nz-select-arrow", inputs: ["listOfValue", "loading", "search", "showArrow", "isMaxMultipleCountSet", "suffixIcon", "feedbackIcon", "nzMaxMultipleCount"] }, { kind: "component", type: NzFormItemFeedbackIconComponent, selector: "nz-form-item-feedback-icon", inputs: ["status"], exportAs: ["nzFormFeedbackIcon"] }, { kind: "component", type: NzSelectClearComponent, selector: "nz-select-clear", inputs: ["clearIcon"], outputs: ["clear"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: NzOverlayModule }, { kind: "directive", type: i7.NzConnectedOverlayDirective, selector: "[cdkConnectedOverlay][nzConnectedOverlay]", inputs: ["nzArrowPointAtCenter"], exportAs: ["nzConnectedOverlay"] }, { kind: "component", type: NzOptionContainerComponent, selector: "nz-option-container", inputs: ["notFoundContent", "menuItemSelectedIcon", "dropdownRender", "activatedValue", "listOfSelectedValue", "compareWith", "mode", "matchWidth", "itemSize", "maxItemLength", "isMaxMultipleCountReached", "listOfContainerItem"], outputs: ["itemClick", "scrollToBottom"], exportAs: ["nzOptionContainer"] }], animations: [slideMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  1937. };
  1938. })();
  1939. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectComponent, decorators: [{
  1940. type: Component,
  1941. args: [{
  1942. selector: 'nz-select',
  1943. exportAs: 'nzSelect',
  1944. preserveWhitespaces: false,
  1945. providers: [
  1946. NzDestroyService,
  1947. {
  1948. provide: NG_VALUE_ACCESSOR,
  1949. useExisting: forwardRef(() => NzSelectComponent),
  1950. multi: true
  1951. },
  1952. { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'select' }
  1953. ],
  1954. changeDetection: ChangeDetectionStrategy.OnPush,
  1955. encapsulation: ViewEncapsulation.None,
  1956. animations: [slideMotion],
  1957. template: `
  1958. <nz-select-top-control
  1959. cdkOverlayOrigin
  1960. #origin="cdkOverlayOrigin"
  1961. [nzId]="nzId"
  1962. [open]="nzOpen"
  1963. [disabled]="nzDisabled"
  1964. [mode]="nzMode"
  1965. [@.disabled]="!!noAnimation?.nzNoAnimation"
  1966. [nzNoAnimation]="noAnimation?.nzNoAnimation"
  1967. [maxTagPlaceholder]="nzMaxTagPlaceholder"
  1968. [removeIcon]="nzRemoveIcon"
  1969. [placeHolder]="nzPlaceHolder"
  1970. [maxTagCount]="nzMaxTagCount"
  1971. [customTemplate]="nzCustomTemplate"
  1972. [tokenSeparators]="nzTokenSeparators"
  1973. [showSearch]="nzShowSearch"
  1974. [autofocus]="nzAutoFocus"
  1975. [listOfTopItem]="listOfTopItem"
  1976. (inputValueChange)="onInputValueChange($event)"
  1977. (tokenize)="onTokenSeparate($event)"
  1978. (deleteItem)="onItemDelete($event)"
  1979. (keydown)="onKeyDown($event)"
  1980. ></nz-select-top-control>
  1981. @if (nzShowArrow || (hasFeedback && !!status) || isMaxMultipleCountSet) {
  1982. <nz-select-arrow
  1983. [showArrow]="nzShowArrow"
  1984. [loading]="nzLoading"
  1985. [search]="nzOpen && nzShowSearch"
  1986. [suffixIcon]="nzSuffixIcon"
  1987. [feedbackIcon]="feedbackIconTpl"
  1988. [nzMaxMultipleCount]="nzMaxMultipleCount"
  1989. [listOfValue]="listOfValue"
  1990. [isMaxMultipleCountSet]="isMaxMultipleCountSet"
  1991. >
  1992. <ng-template #feedbackIconTpl>
  1993. @if (hasFeedback && !!status) {
  1994. <nz-form-item-feedback-icon [status]="status"></nz-form-item-feedback-icon>
  1995. }
  1996. </ng-template>
  1997. </nz-select-arrow>
  1998. }
  1999. @if (nzAllowClear && !nzDisabled && listOfValue.length) {
  2000. <nz-select-clear [clearIcon]="nzClearIcon" (clear)="onClearSelection()"></nz-select-clear>
  2001. }
  2002. <ng-template
  2003. cdkConnectedOverlay
  2004. nzConnectedOverlay
  2005. [cdkConnectedOverlayHasBackdrop]="nzBackdrop"
  2006. [cdkConnectedOverlayMinWidth]="$any(nzDropdownMatchSelectWidth ? null : triggerWidth)"
  2007. [cdkConnectedOverlayWidth]="$any(nzDropdownMatchSelectWidth ? triggerWidth : null)"
  2008. [cdkConnectedOverlayOrigin]="origin"
  2009. [cdkConnectedOverlayTransformOriginOn]="'.ant-select-dropdown'"
  2010. [cdkConnectedOverlayPanelClass]="nzDropdownClassName!"
  2011. [cdkConnectedOverlayOpen]="nzOpen"
  2012. [cdkConnectedOverlayPositions]="positions"
  2013. (overlayOutsideClick)="onClickOutside($event)"
  2014. (detach)="setOpenState(false)"
  2015. (positionChange)="onPositionChange($event)"
  2016. >
  2017. <nz-option-container
  2018. [style]="nzDropdownStyle"
  2019. [itemSize]="nzOptionHeightPx"
  2020. [maxItemLength]="nzOptionOverflowSize"
  2021. [matchWidth]="nzDropdownMatchSelectWidth"
  2022. [class.ant-select-dropdown-placement-bottomLeft]="dropdownPosition === 'bottomLeft'"
  2023. [class.ant-select-dropdown-placement-topLeft]="dropdownPosition === 'topLeft'"
  2024. [class.ant-select-dropdown-placement-bottomRight]="dropdownPosition === 'bottomRight'"
  2025. [class.ant-select-dropdown-placement-topRight]="dropdownPosition === 'topRight'"
  2026. [@slideMotion]="'enter'"
  2027. [@.disabled]="!!noAnimation?.nzNoAnimation"
  2028. [nzNoAnimation]="noAnimation?.nzNoAnimation"
  2029. [listOfContainerItem]="listOfContainerItem"
  2030. [menuItemSelectedIcon]="nzMenuItemSelectedIcon"
  2031. [notFoundContent]="nzNotFoundContent"
  2032. [activatedValue]="activatedValue"
  2033. [listOfSelectedValue]="listOfValue"
  2034. [dropdownRender]="nzDropdownRender"
  2035. [compareWith]="compareWith"
  2036. [mode]="nzMode"
  2037. [isMaxMultipleCountReached]="isMaxMultipleCountReached"
  2038. (keydown)="onKeyDown($event)"
  2039. (itemClick)="onItemClick($event)"
  2040. (scrollToBottom)="nzScrollToBottom.emit()"
  2041. ></nz-option-container>
  2042. </ng-template>
  2043. `,
  2044. host: {
  2045. class: 'ant-select',
  2046. '[class.ant-select-in-form-item]': '!!nzFormStatusService',
  2047. '[class.ant-select-lg]': 'finalSize() === "large"',
  2048. '[class.ant-select-sm]': 'finalSize() === "small"',
  2049. '[class.ant-select-show-arrow]': `nzShowArrow`,
  2050. '[class.ant-select-disabled]': 'nzDisabled',
  2051. '[class.ant-select-show-search]': `(nzShowSearch || nzMode !== 'default') && !nzDisabled`,
  2052. '[class.ant-select-allow-clear]': 'nzAllowClear',
  2053. '[class.ant-select-borderless]': 'nzBorderless',
  2054. '[class.ant-select-open]': 'nzOpen',
  2055. '[class.ant-select-focused]': 'nzOpen || focused',
  2056. '[class.ant-select-single]': `nzMode === 'default'`,
  2057. '[class.ant-select-multiple]': `nzMode !== 'default'`,
  2058. '[class.ant-select-rtl]': `dir === 'rtl'`
  2059. },
  2060. hostDirectives: [NzSpaceCompactItemDirective],
  2061. imports: [
  2062. NzSelectTopControlComponent,
  2063. CdkOverlayOrigin,
  2064. NzNoAnimationDirective,
  2065. NzSelectArrowComponent,
  2066. NzFormItemFeedbackIconComponent,
  2067. NzSelectClearComponent,
  2068. CdkConnectedOverlay,
  2069. NzOverlayModule,
  2070. NzOptionContainerComponent
  2071. ]
  2072. }]
  2073. }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.NzDestroyService }, { type: i2$2.NzConfigService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i3.Platform }, { type: i1$4.FocusMonitor }, { type: i5.Directionality }], propDecorators: { nzId: [{
  2074. type: Input
  2075. }], nzSize: [{
  2076. type: Input
  2077. }], nzStatus: [{
  2078. type: Input
  2079. }], nzOptionHeightPx: [{
  2080. type: Input
  2081. }], nzOptionOverflowSize: [{
  2082. type: Input
  2083. }], nzDropdownClassName: [{
  2084. type: Input
  2085. }], nzDropdownMatchSelectWidth: [{
  2086. type: Input
  2087. }], nzDropdownStyle: [{
  2088. type: Input
  2089. }], nzNotFoundContent: [{
  2090. type: Input
  2091. }], nzPlaceHolder: [{
  2092. type: Input
  2093. }], nzPlacement: [{
  2094. type: Input
  2095. }], nzMaxTagCount: [{
  2096. type: Input
  2097. }], nzDropdownRender: [{
  2098. type: Input
  2099. }], nzCustomTemplate: [{
  2100. type: Input
  2101. }], nzSuffixIcon: [{
  2102. type: Input
  2103. }], nzClearIcon: [{
  2104. type: Input
  2105. }], nzRemoveIcon: [{
  2106. type: Input
  2107. }], nzMenuItemSelectedIcon: [{
  2108. type: Input
  2109. }], nzTokenSeparators: [{
  2110. type: Input
  2111. }], nzMaxTagPlaceholder: [{
  2112. type: Input
  2113. }], nzMaxMultipleCount: [{
  2114. type: Input,
  2115. args: [{ transform: numberAttributeWithInfinityFallback }]
  2116. }], nzMode: [{
  2117. type: Input
  2118. }], nzFilterOption: [{
  2119. type: Input
  2120. }], compareWith: [{
  2121. type: Input
  2122. }], nzAllowClear: [{
  2123. type: Input,
  2124. args: [{ transform: booleanAttribute }]
  2125. }], nzBorderless: [{
  2126. type: Input,
  2127. args: [{ transform: booleanAttribute }]
  2128. }], nzShowSearch: [{
  2129. type: Input,
  2130. args: [{ transform: booleanAttribute }]
  2131. }], nzLoading: [{
  2132. type: Input,
  2133. args: [{ transform: booleanAttribute }]
  2134. }], nzAutoFocus: [{
  2135. type: Input,
  2136. args: [{ transform: booleanAttribute }]
  2137. }], nzAutoClearSearchValue: [{
  2138. type: Input,
  2139. args: [{ transform: booleanAttribute }]
  2140. }], nzServerSearch: [{
  2141. type: Input,
  2142. args: [{ transform: booleanAttribute }]
  2143. }], nzDisabled: [{
  2144. type: Input,
  2145. args: [{ transform: booleanAttribute }]
  2146. }], nzOpen: [{
  2147. type: Input,
  2148. args: [{ transform: booleanAttribute }]
  2149. }], nzSelectOnTab: [{
  2150. type: Input,
  2151. args: [{ transform: booleanAttribute }]
  2152. }], nzBackdrop: [{
  2153. type: Input,
  2154. args: [{ transform: booleanAttribute }]
  2155. }], nzOptions: [{
  2156. type: Input
  2157. }], nzShowArrow: [{
  2158. type: Input,
  2159. args: [{ transform: booleanAttribute }]
  2160. }], nzOnSearch: [{
  2161. type: Output
  2162. }], nzScrollToBottom: [{
  2163. type: Output
  2164. }], nzOpenChange: [{
  2165. type: Output
  2166. }], nzBlur: [{
  2167. type: Output
  2168. }], nzFocus: [{
  2169. type: Output
  2170. }], originElement: [{
  2171. type: ViewChild,
  2172. args: [CdkOverlayOrigin, { static: true, read: ElementRef }]
  2173. }], cdkConnectedOverlay: [{
  2174. type: ViewChild,
  2175. args: [CdkConnectedOverlay, { static: true }]
  2176. }], nzSelectTopControlComponent: [{
  2177. type: ViewChild,
  2178. args: [NzSelectTopControlComponent, { static: true }]
  2179. }], listOfNzOptionComponent: [{
  2180. type: ContentChildren,
  2181. args: [NzOptionComponent, { descendants: true }]
  2182. }], listOfNzOptionGroupComponent: [{
  2183. type: ContentChildren,
  2184. args: [NzOptionGroupComponent, { descendants: true }]
  2185. }], nzOptionGroupComponentElement: [{
  2186. type: ViewChild,
  2187. args: [NzOptionGroupComponent, { static: true, read: ElementRef }]
  2188. }], nzSelectTopControlComponentElement: [{
  2189. type: ViewChild,
  2190. args: [NzSelectTopControlComponent, { static: true, read: ElementRef }]
  2191. }] } });
  2192. /**
  2193. * Use of this source code is governed by an MIT-style license that can be
  2194. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  2195. */
  2196. class NzSelectModule {
  2197. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  2198. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzSelectModule, imports: [NzOptionComponent,
  2199. NzSelectComponent,
  2200. NzOptionContainerComponent,
  2201. NzOptionGroupComponent,
  2202. NzOptionItemComponent,
  2203. NzSelectTopControlComponent,
  2204. NzSelectSearchComponent,
  2205. NzSelectItemComponent,
  2206. NzSelectClearComponent,
  2207. NzSelectArrowComponent,
  2208. NzSelectPlaceholderComponent,
  2209. NzOptionItemGroupComponent], exports: [NzOptionComponent,
  2210. NzSelectComponent,
  2211. NzOptionGroupComponent,
  2212. NzSelectArrowComponent,
  2213. NzSelectClearComponent,
  2214. NzSelectItemComponent,
  2215. NzSelectPlaceholderComponent,
  2216. NzSelectSearchComponent] });
  2217. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectModule, imports: [NzSelectComponent,
  2218. NzOptionContainerComponent,
  2219. NzOptionItemComponent,
  2220. NzSelectTopControlComponent,
  2221. NzSelectSearchComponent,
  2222. NzSelectItemComponent,
  2223. NzSelectClearComponent,
  2224. NzSelectArrowComponent,
  2225. NzSelectPlaceholderComponent,
  2226. NzOptionItemGroupComponent] });
  2227. }
  2228. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSelectModule, decorators: [{
  2229. type: NgModule,
  2230. args: [{
  2231. imports: [
  2232. NzOptionComponent,
  2233. NzSelectComponent,
  2234. NzOptionContainerComponent,
  2235. NzOptionGroupComponent,
  2236. NzOptionItemComponent,
  2237. NzSelectTopControlComponent,
  2238. NzSelectSearchComponent,
  2239. NzSelectItemComponent,
  2240. NzSelectClearComponent,
  2241. NzSelectArrowComponent,
  2242. NzSelectPlaceholderComponent,
  2243. NzOptionItemGroupComponent
  2244. ],
  2245. exports: [
  2246. NzOptionComponent,
  2247. NzSelectComponent,
  2248. NzOptionGroupComponent,
  2249. NzSelectArrowComponent,
  2250. NzSelectClearComponent,
  2251. NzSelectItemComponent,
  2252. NzSelectPlaceholderComponent,
  2253. NzSelectSearchComponent
  2254. ]
  2255. }]
  2256. }] });
  2257. /**
  2258. * Use of this source code is governed by an MIT-style license that can be
  2259. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  2260. */
  2261. /**
  2262. * Use of this source code is governed by an MIT-style license that can be
  2263. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  2264. */
  2265. /**
  2266. * Generated bundle index. Do not edit.
  2267. */
  2268. export { NzOptionComponent, NzOptionContainerComponent, NzOptionGroupComponent, NzOptionItemComponent, NzOptionItemGroupComponent, NzSelectArrowComponent, NzSelectClearComponent, NzSelectComponent, NzSelectItemComponent, NzSelectModule, NzSelectPlaceholderComponent, NzSelectSearchComponent, NzSelectTopControlComponent };
  2269. //# sourceMappingURL=ng-zorro-antd-select.mjs.map