ng-zorro-antd-input.mjs 54 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099
  1. import * as i0 from '@angular/core';
  2. import { inject, ElementRef, Input, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, computed, signal, booleanAttribute, ContentChildren, forwardRef, numberAttribute, ViewChildren, isDevMode, ContentChild, NgModule } from '@angular/core';
  3. import { Subject, merge, EMPTY } from 'rxjs';
  4. import { takeUntil, distinctUntilChanged, filter, startWith, switchMap, mergeMap, map, tap } from 'rxjs/operators';
  5. import * as i1 from '@angular/cdk/platform';
  6. import * as i2 from 'ng-zorro-antd/core/services';
  7. import { NzDestroyService } from 'ng-zorro-antd/core/services';
  8. import * as i2$1 from 'ng-zorro-antd/core/outlet';
  9. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  10. import * as i1$1 from 'ng-zorro-antd/icon';
  11. import { NzIconModule } from 'ng-zorro-antd/icon';
  12. import { NgTemplateOutlet } from '@angular/common';
  13. import { NzFormStatusService, NzFormNoStatusService, NzFormItemFeedbackIconComponent } from 'ng-zorro-antd/core/form';
  14. import { getStatusClassNames, isNotNil } from 'ng-zorro-antd/core/util';
  15. import * as i2$2 from 'ng-zorro-antd/space';
  16. import { NZ_SPACE_COMPACT_SIZE, NZ_SPACE_COMPACT_ITEM_TYPE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';
  17. import * as i1$4 from '@angular/forms';
  18. import { NgControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
  19. import * as i1$2 from '@angular/cdk/bidi';
  20. import * as i1$3 from '@angular/cdk/a11y';
  21. import { BACKSPACE } from '@angular/cdk/keycodes';
  22. class NzAutosizeDirective {
  23. ngZone;
  24. platform;
  25. resizeService;
  26. autosize = false;
  27. el = inject(ElementRef).nativeElement;
  28. cachedLineHeight;
  29. previousValue;
  30. previousMinRows;
  31. minRows;
  32. maxRows;
  33. maxHeight = null;
  34. minHeight = null;
  35. destroy$ = new Subject();
  36. inputGap = 10;
  37. set nzAutosize(value) {
  38. const isAutoSizeType = (data) => typeof data !== 'string' && typeof data !== 'boolean' && (!!data.maxRows || !!data.minRows);
  39. if (typeof value === 'string' || value === true) {
  40. this.autosize = true;
  41. }
  42. else if (isAutoSizeType(value)) {
  43. this.autosize = true;
  44. this.minRows = value.minRows;
  45. this.maxRows = value.maxRows;
  46. this.maxHeight = this.setMaxHeight();
  47. this.minHeight = this.setMinHeight();
  48. }
  49. }
  50. resizeToFitContent(force = false) {
  51. this.cacheTextareaLineHeight();
  52. // If we haven't determined the line-height yet, we know we're still hidden and there's no point
  53. // in checking the height of the textarea.
  54. if (!this.cachedLineHeight) {
  55. return;
  56. }
  57. const textarea = this.el;
  58. const value = textarea.value;
  59. // Only resize if the value or minRows have changed since these calculations can be expensive.
  60. if (!force && this.minRows === this.previousMinRows && value === this.previousValue) {
  61. return;
  62. }
  63. const placeholderText = textarea.placeholder;
  64. // Reset the textarea height to auto in order to shrink back to its default size.
  65. // Also temporarily force overflow:hidden, so scroll bars do not interfere with calculations.
  66. // Long placeholders that are wider than the textarea width may lead to a bigger scrollHeight
  67. // value. To ensure that the scrollHeight is not bigger than the content, the placeholders
  68. // need to be removed temporarily.
  69. textarea.classList.add('nz-textarea-autosize-measuring');
  70. textarea.placeholder = '';
  71. let height = Math.round((textarea.scrollHeight - this.inputGap) / this.cachedLineHeight) * this.cachedLineHeight +
  72. this.inputGap;
  73. if (this.maxHeight !== null && height > this.maxHeight) {
  74. height = this.maxHeight;
  75. }
  76. if (this.minHeight !== null && height < this.minHeight) {
  77. height = this.minHeight;
  78. }
  79. // Use the scrollHeight to know how large the textarea *would* be if fit its entire value.
  80. textarea.style.height = `${height}px`;
  81. textarea.classList.remove('nz-textarea-autosize-measuring');
  82. textarea.placeholder = placeholderText;
  83. // On Firefox resizing the textarea will prevent it from scrolling to the caret position.
  84. // We need to re-set the selection in order for it to scroll to the proper position.
  85. if (typeof requestAnimationFrame !== 'undefined') {
  86. this.ngZone.runOutsideAngular(() => requestAnimationFrame(() => {
  87. const { selectionStart, selectionEnd } = textarea;
  88. // IE will throw an "Unspecified error" if we try to set the selection range after the
  89. // element has been removed from the DOM. Assert that the directive hasn't been destroyed
  90. // between the time we requested the animation frame and when it was executed.
  91. // Also note that we have to assert that the textarea is focused before we set the
  92. // selection range. Setting the selection range on a non-focused textarea will cause
  93. // it to receive focus on IE and Edge.
  94. if (!this.destroy$.isStopped && document.activeElement === textarea) {
  95. textarea.setSelectionRange(selectionStart, selectionEnd);
  96. }
  97. }));
  98. }
  99. this.previousValue = value;
  100. this.previousMinRows = this.minRows;
  101. }
  102. cacheTextareaLineHeight() {
  103. if (this.cachedLineHeight >= 0 || !this.el.parentNode) {
  104. return;
  105. }
  106. // Use a clone element because we have to override some styles.
  107. const textareaClone = this.el.cloneNode(false);
  108. textareaClone.rows = 1;
  109. // Use `position: absolute` so that this doesn't cause a browser layout and use
  110. // `visibility: hidden` so that nothing is rendered. Clear any other styles that
  111. // would affect the height.
  112. textareaClone.style.position = 'absolute';
  113. textareaClone.style.visibility = 'hidden';
  114. textareaClone.style.border = 'none';
  115. textareaClone.style.padding = '0';
  116. textareaClone.style.height = '';
  117. textareaClone.style.minHeight = '';
  118. textareaClone.style.maxHeight = '';
  119. // In Firefox it happens that textarea elements are always bigger than the specified amount
  120. // of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.
  121. // As a workaround that removes the extra space for the scrollbar, we can just set overflow
  122. // to hidden. This ensures that there is no invalid calculation of the line height.
  123. // See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654
  124. textareaClone.style.overflow = 'hidden';
  125. this.el.parentNode.appendChild(textareaClone);
  126. this.cachedLineHeight = textareaClone.clientHeight - this.inputGap;
  127. this.el.parentNode.removeChild(textareaClone);
  128. // Min and max heights have to be re-calculated if the cached line height changes
  129. this.maxHeight = this.setMaxHeight();
  130. this.minHeight = this.setMinHeight();
  131. }
  132. setMinHeight() {
  133. const minHeight = this.minRows && this.cachedLineHeight ? this.minRows * this.cachedLineHeight + this.inputGap : null;
  134. if (minHeight !== null) {
  135. this.el.style.minHeight = `${minHeight}px`;
  136. }
  137. return minHeight;
  138. }
  139. setMaxHeight() {
  140. const maxHeight = this.maxRows && this.cachedLineHeight ? this.maxRows * this.cachedLineHeight + this.inputGap : null;
  141. if (maxHeight !== null) {
  142. this.el.style.maxHeight = `${maxHeight}px`;
  143. }
  144. return maxHeight;
  145. }
  146. noopInputHandler() {
  147. // no-op handler that ensures we're running change detection on input events.
  148. }
  149. constructor(ngZone, platform, resizeService) {
  150. this.ngZone = ngZone;
  151. this.platform = platform;
  152. this.resizeService = resizeService;
  153. }
  154. ngAfterViewInit() {
  155. if (this.autosize && this.platform.isBrowser) {
  156. this.resizeToFitContent();
  157. this.resizeService
  158. .subscribe()
  159. .pipe(takeUntil(this.destroy$))
  160. .subscribe(() => this.resizeToFitContent(true));
  161. }
  162. }
  163. ngOnDestroy() {
  164. this.destroy$.next(true);
  165. this.destroy$.complete();
  166. }
  167. ngDoCheck() {
  168. if (this.autosize && this.platform.isBrowser) {
  169. this.resizeToFitContent();
  170. }
  171. }
  172. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzAutosizeDirective, deps: [{ token: i0.NgZone }, { token: i1.Platform }, { token: i2.NzResizeService }], target: i0.ɵɵFactoryTarget.Directive });
  173. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzAutosizeDirective, isStandalone: true, selector: "textarea[nzAutosize]", inputs: { nzAutosize: "nzAutosize" }, host: { attributes: { "rows": "1" }, listeners: { "input": "noopInputHandler()" } }, exportAs: ["nzAutosize"], ngImport: i0 });
  174. }
  175. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzAutosizeDirective, decorators: [{
  176. type: Directive,
  177. args: [{
  178. selector: 'textarea[nzAutosize]',
  179. exportAs: 'nzAutosize',
  180. host: {
  181. // Textarea elements that have the directive applied should have a single row by default.
  182. // Browsers normally show two rows by default and therefore this limits the minRows binding.
  183. rows: '1',
  184. '(input)': 'noopInputHandler()'
  185. }
  186. }]
  187. }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.Platform }, { type: i2.NzResizeService }], propDecorators: { nzAutosize: [{
  188. type: Input
  189. }] } });
  190. /**
  191. * Use of this source code is governed by an MIT-style license that can be
  192. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  193. */
  194. class NzInputAddonBeforeDirective {
  195. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputAddonBeforeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  196. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzInputAddonBeforeDirective, isStandalone: true, selector: "[nzInputAddonBefore]", ngImport: i0 });
  197. }
  198. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputAddonBeforeDirective, decorators: [{
  199. type: Directive,
  200. args: [{
  201. selector: '[nzInputAddonBefore]'
  202. }]
  203. }] });
  204. class NzInputAddonAfterDirective {
  205. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputAddonAfterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  206. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzInputAddonAfterDirective, isStandalone: true, selector: "[nzInputAddonAfter]", ngImport: i0 });
  207. }
  208. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputAddonAfterDirective, decorators: [{
  209. type: Directive,
  210. args: [{
  211. selector: '[nzInputAddonAfter]'
  212. }]
  213. }] });
  214. /**
  215. * Use of this source code is governed by an MIT-style license that can be
  216. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  217. */
  218. class NzInputPrefixDirective {
  219. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  220. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzInputPrefixDirective, isStandalone: true, selector: "[nzInputPrefix]", ngImport: i0 });
  221. }
  222. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputPrefixDirective, decorators: [{
  223. type: Directive,
  224. args: [{
  225. selector: '[nzInputPrefix]'
  226. }]
  227. }] });
  228. class NzInputSuffixDirective {
  229. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  230. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzInputSuffixDirective, isStandalone: true, selector: "[nzInputSuffix]", ngImport: i0 });
  231. }
  232. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputSuffixDirective, decorators: [{
  233. type: Directive,
  234. args: [{
  235. selector: '[nzInputSuffix]'
  236. }]
  237. }] });
  238. /**
  239. * Use of this source code is governed by an MIT-style license that can be
  240. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  241. */
  242. class NzInputGroupSlotComponent {
  243. icon = null;
  244. type = null;
  245. template = null;
  246. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputGroupSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  247. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzInputGroupSlotComponent, isStandalone: true, selector: "[nz-input-group-slot]", inputs: { icon: "icon", type: "type", template: "template" }, host: { properties: { "class.ant-input-group-addon": "type === 'addon'", "class.ant-input-prefix": "type === 'prefix'", "class.ant-input-suffix": "type === 'suffix'" } }, ngImport: i0, template: `
  248. @if (icon) {
  249. <nz-icon [nzType]="icon" />
  250. }
  251. <ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container>
  252. <ng-content></ng-content>
  253. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1$1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i2$1.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  254. }
  255. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputGroupSlotComponent, decorators: [{
  256. type: Component,
  257. args: [{
  258. selector: '[nz-input-group-slot]',
  259. preserveWhitespaces: false,
  260. encapsulation: ViewEncapsulation.None,
  261. changeDetection: ChangeDetectionStrategy.OnPush,
  262. template: `
  263. @if (icon) {
  264. <nz-icon [nzType]="icon" />
  265. }
  266. <ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container>
  267. <ng-content></ng-content>
  268. `,
  269. host: {
  270. '[class.ant-input-group-addon]': `type === 'addon'`,
  271. '[class.ant-input-prefix]': `type === 'prefix'`,
  272. '[class.ant-input-suffix]': `type === 'suffix'`
  273. },
  274. imports: [NzIconModule, NzOutletModule]
  275. }]
  276. }], propDecorators: { icon: [{
  277. type: Input
  278. }], type: [{
  279. type: Input
  280. }], template: [{
  281. type: Input
  282. }] } });
  283. class NzInputDirective {
  284. renderer;
  285. elementRef;
  286. hostView;
  287. directionality;
  288. nzBorderless = false;
  289. nzSize = 'default';
  290. nzStepperless = true;
  291. nzStatus = '';
  292. get disabled() {
  293. if (this.ngControl && this.ngControl.disabled !== null) {
  294. return this.ngControl.disabled;
  295. }
  296. return this._disabled;
  297. }
  298. set disabled(value) {
  299. this._disabled = value;
  300. }
  301. _disabled = false;
  302. disabled$ = new Subject();
  303. dir = 'ltr';
  304. // status
  305. prefixCls = 'ant-input';
  306. status = '';
  307. statusCls = {};
  308. hasFeedback = false;
  309. feedbackRef = null;
  310. components = [];
  311. ngControl = inject(NgControl, { self: true, optional: true });
  312. finalSize = computed(() => {
  313. if (this.compactSize) {
  314. return this.compactSize();
  315. }
  316. return this.size();
  317. });
  318. size = signal(this.nzSize);
  319. compactSize = inject(NZ_SPACE_COMPACT_SIZE, { optional: true });
  320. destroy$ = inject(NzDestroyService);
  321. nzFormStatusService = inject(NzFormStatusService, { optional: true });
  322. nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true });
  323. constructor(renderer, elementRef, hostView, directionality) {
  324. this.renderer = renderer;
  325. this.elementRef = elementRef;
  326. this.hostView = hostView;
  327. this.directionality = directionality;
  328. }
  329. ngOnInit() {
  330. this.nzFormStatusService?.formStatusChanges
  331. .pipe(distinctUntilChanged((pre, cur) => {
  332. return pre.status === cur.status && pre.hasFeedback === cur.hasFeedback;
  333. }), takeUntil(this.destroy$))
  334. .subscribe(({ status, hasFeedback }) => {
  335. this.setStatusStyles(status, hasFeedback);
  336. });
  337. if (this.ngControl) {
  338. this.ngControl.statusChanges
  339. ?.pipe(filter(() => this.ngControl.disabled !== null), takeUntil(this.destroy$))
  340. .subscribe(() => {
  341. this.disabled$.next(this.ngControl.disabled);
  342. });
  343. }
  344. this.dir = this.directionality.value;
  345. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  346. this.dir = direction;
  347. });
  348. }
  349. ngOnChanges({ disabled, nzStatus, nzSize }) {
  350. if (disabled) {
  351. this.disabled$.next(this.disabled);
  352. }
  353. if (nzStatus) {
  354. this.setStatusStyles(this.nzStatus, this.hasFeedback);
  355. }
  356. if (nzSize) {
  357. this.size.set(nzSize.currentValue);
  358. }
  359. }
  360. setStatusStyles(status, hasFeedback) {
  361. // set inner status
  362. this.status = status;
  363. this.hasFeedback = hasFeedback;
  364. this.renderFeedbackIcon();
  365. // render status if nzStatus is set
  366. this.statusCls = getStatusClassNames(this.prefixCls, status, hasFeedback);
  367. Object.keys(this.statusCls).forEach(status => {
  368. if (this.statusCls[status]) {
  369. this.renderer.addClass(this.elementRef.nativeElement, status);
  370. }
  371. else {
  372. this.renderer.removeClass(this.elementRef.nativeElement, status);
  373. }
  374. });
  375. }
  376. renderFeedbackIcon() {
  377. if (!this.status || !this.hasFeedback || !!this.nzFormNoStatusService) {
  378. // remove feedback
  379. this.hostView.clear();
  380. this.feedbackRef = null;
  381. return;
  382. }
  383. this.feedbackRef = this.feedbackRef || this.hostView.createComponent(NzFormItemFeedbackIconComponent);
  384. this.feedbackRef.location.nativeElement.classList.add('ant-input-suffix');
  385. this.feedbackRef.instance.status = this.status;
  386. this.feedbackRef.instance.updateIcon();
  387. }
  388. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.Directionality }], target: i0.ɵɵFactoryTarget.Directive });
  389. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.2", type: NzInputDirective, isStandalone: true, selector: "input[nz-input],textarea[nz-input]", inputs: { nzBorderless: ["nzBorderless", "nzBorderless", booleanAttribute], nzSize: "nzSize", nzStepperless: ["nzStepperless", "nzStepperless", booleanAttribute], nzStatus: "nzStatus", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.ant-input-disabled": "disabled", "class.ant-input-borderless": "nzBorderless", "class.ant-input-lg": "finalSize() === 'large'", "class.ant-input-sm": "finalSize() === 'small'", "attr.disabled": "disabled || null", "class.ant-input-rtl": "dir=== 'rtl'", "class.ant-input-stepperless": "nzStepperless" }, classAttribute: "ant-input" }, providers: [NzDestroyService, { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }], exportAs: ["nzInput"], usesOnChanges: true, hostDirectives: [{ directive: i2$2.NzSpaceCompactItemDirective }], ngImport: i0 });
  390. }
  391. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputDirective, decorators: [{
  392. type: Directive,
  393. args: [{
  394. selector: 'input[nz-input],textarea[nz-input]',
  395. exportAs: 'nzInput',
  396. host: {
  397. class: 'ant-input',
  398. '[class.ant-input-disabled]': 'disabled',
  399. '[class.ant-input-borderless]': 'nzBorderless',
  400. '[class.ant-input-lg]': `finalSize() === 'large'`,
  401. '[class.ant-input-sm]': `finalSize() === 'small'`,
  402. '[attr.disabled]': 'disabled || null',
  403. '[class.ant-input-rtl]': `dir=== 'rtl'`,
  404. '[class.ant-input-stepperless]': `nzStepperless`
  405. },
  406. hostDirectives: [NzSpaceCompactItemDirective],
  407. providers: [NzDestroyService, { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }]
  408. }]
  409. }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$2.Directionality }], propDecorators: { nzBorderless: [{
  410. type: Input,
  411. args: [{ transform: booleanAttribute }]
  412. }], nzSize: [{
  413. type: Input
  414. }], nzStepperless: [{
  415. type: Input,
  416. args: [{ transform: booleanAttribute }]
  417. }], nzStatus: [{
  418. type: Input
  419. }], disabled: [{
  420. type: Input,
  421. args: [{ transform: booleanAttribute }]
  422. }] } });
  423. class NzInputGroupWhitSuffixOrPrefixDirective {
  424. elementRef;
  425. constructor(elementRef) {
  426. this.elementRef = elementRef;
  427. }
  428. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputGroupWhitSuffixOrPrefixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
  429. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: NzInputGroupWhitSuffixOrPrefixDirective, isStandalone: true, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]", ngImport: i0 });
  430. }
  431. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputGroupWhitSuffixOrPrefixDirective, decorators: [{
  432. type: Directive,
  433. args: [{
  434. selector: `nz-input-group[nzSuffix], nz-input-group[nzPrefix]`
  435. }]
  436. }], ctorParameters: () => [{ type: i0.ElementRef }] });
  437. class NzInputGroupComponent {
  438. focusMonitor;
  439. elementRef;
  440. renderer;
  441. cdr;
  442. directionality;
  443. listOfNzInputDirective;
  444. nzAddOnBeforeIcon = null;
  445. nzAddOnAfterIcon = null;
  446. nzPrefixIcon = null;
  447. nzSuffixIcon = null;
  448. nzAddOnBefore;
  449. nzAddOnAfter;
  450. nzPrefix;
  451. nzStatus = '';
  452. nzSuffix;
  453. nzSize = 'default';
  454. nzSearch = false;
  455. /**
  456. * @deprecated Will be removed in v20. Use `NzSpaceCompactComponent` instead.
  457. */
  458. nzCompact = false;
  459. isLarge = false;
  460. isSmall = false;
  461. isAffix = false;
  462. isAddOn = false;
  463. isFeedback = false;
  464. focused = false;
  465. disabled = false;
  466. dir = 'ltr';
  467. // status
  468. prefixCls = 'ant-input';
  469. affixStatusCls = {};
  470. groupStatusCls = {};
  471. affixInGroupStatusCls = {};
  472. status = '';
  473. hasFeedback = false;
  474. destroy$ = new Subject();
  475. nzFormStatusService = inject(NzFormStatusService, { optional: true });
  476. nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true });
  477. constructor(focusMonitor, elementRef, renderer, cdr, directionality) {
  478. this.focusMonitor = focusMonitor;
  479. this.elementRef = elementRef;
  480. this.renderer = renderer;
  481. this.cdr = cdr;
  482. this.directionality = directionality;
  483. }
  484. updateChildrenInputSize() {
  485. if (this.listOfNzInputDirective) {
  486. this.listOfNzInputDirective.forEach(item => item['size'].set(this.nzSize));
  487. }
  488. }
  489. ngOnInit() {
  490. this.nzFormStatusService?.formStatusChanges
  491. .pipe(distinctUntilChanged((pre, cur) => {
  492. return pre.status === cur.status && pre.hasFeedback === cur.hasFeedback;
  493. }), takeUntil(this.destroy$))
  494. .subscribe(({ status, hasFeedback }) => {
  495. this.setStatusStyles(status, hasFeedback);
  496. });
  497. this.focusMonitor
  498. .monitor(this.elementRef, true)
  499. .pipe(takeUntil(this.destroy$))
  500. .subscribe(focusOrigin => {
  501. this.focused = !!focusOrigin;
  502. this.cdr.markForCheck();
  503. });
  504. this.dir = this.directionality.value;
  505. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  506. this.dir = direction;
  507. });
  508. }
  509. ngAfterContentInit() {
  510. this.updateChildrenInputSize();
  511. const listOfInputChange$ = this.listOfNzInputDirective.changes.pipe(startWith(this.listOfNzInputDirective));
  512. listOfInputChange$
  513. .pipe(switchMap(list => merge(...[listOfInputChange$, ...list.map((input) => input.disabled$)])), mergeMap(() => listOfInputChange$), map(list => list.some((input) => input.disabled)), takeUntil(this.destroy$))
  514. .subscribe(disabled => {
  515. this.disabled = disabled;
  516. this.cdr.markForCheck();
  517. });
  518. }
  519. ngOnChanges(changes) {
  520. const { nzSize, nzSuffix, nzPrefix, nzPrefixIcon, nzSuffixIcon, nzAddOnAfter, nzAddOnBefore, nzAddOnAfterIcon, nzAddOnBeforeIcon, nzStatus } = changes;
  521. if (nzSize) {
  522. this.updateChildrenInputSize();
  523. this.isLarge = this.nzSize === 'large';
  524. this.isSmall = this.nzSize === 'small';
  525. }
  526. if (nzSuffix || nzPrefix || nzPrefixIcon || nzSuffixIcon) {
  527. this.isAffix = !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon);
  528. }
  529. if (nzAddOnAfter || nzAddOnBefore || nzAddOnAfterIcon || nzAddOnBeforeIcon) {
  530. this.isAddOn = !!(this.nzAddOnAfter || this.nzAddOnBefore || this.nzAddOnAfterIcon || this.nzAddOnBeforeIcon);
  531. this.nzFormNoStatusService?.noFormStatus?.next(this.isAddOn);
  532. }
  533. if (nzStatus) {
  534. this.setStatusStyles(this.nzStatus, this.hasFeedback);
  535. }
  536. }
  537. ngOnDestroy() {
  538. this.focusMonitor.stopMonitoring(this.elementRef);
  539. this.destroy$.next();
  540. this.destroy$.complete();
  541. }
  542. setStatusStyles(status, hasFeedback) {
  543. // set inner status
  544. this.status = status;
  545. this.hasFeedback = hasFeedback;
  546. this.isFeedback = !!status && hasFeedback;
  547. const baseAffix = !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon);
  548. this.isAffix = baseAffix || (!this.isAddOn && hasFeedback);
  549. this.affixInGroupStatusCls =
  550. this.isAffix || this.isFeedback
  551. ? (this.affixStatusCls = getStatusClassNames(`${this.prefixCls}-affix-wrapper`, status, hasFeedback))
  552. : {};
  553. this.cdr.markForCheck();
  554. // render status if nzStatus is set
  555. this.affixStatusCls = getStatusClassNames(`${this.prefixCls}-affix-wrapper`, this.isAddOn ? '' : status, this.isAddOn ? false : hasFeedback);
  556. this.groupStatusCls = getStatusClassNames(`${this.prefixCls}-group-wrapper`, this.isAddOn ? status : '', this.isAddOn ? hasFeedback : false);
  557. const statusCls = {
  558. ...this.affixStatusCls,
  559. ...this.groupStatusCls
  560. };
  561. Object.keys(statusCls).forEach(status => {
  562. if (statusCls[status]) {
  563. this.renderer.addClass(this.elementRef.nativeElement, status);
  564. }
  565. else {
  566. this.renderer.removeClass(this.elementRef.nativeElement, status);
  567. }
  568. });
  569. }
  570. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputGroupComponent, deps: [{ token: i1$3.FocusMonitor }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$2.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  571. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzInputGroupComponent, isStandalone: true, selector: "nz-input-group", inputs: { nzAddOnBeforeIcon: "nzAddOnBeforeIcon", nzAddOnAfterIcon: "nzAddOnAfterIcon", nzPrefixIcon: "nzPrefixIcon", nzSuffixIcon: "nzSuffixIcon", nzAddOnBefore: "nzAddOnBefore", nzAddOnAfter: "nzAddOnAfter", nzPrefix: "nzPrefix", nzStatus: "nzStatus", nzSuffix: "nzSuffix", nzSize: "nzSize", nzSearch: ["nzSearch", "nzSearch", booleanAttribute], nzCompact: ["nzCompact", "nzCompact", booleanAttribute] }, host: { properties: { "class.ant-input-group-compact": "nzCompact", "class.ant-input-search-enter-button": "nzSearch", "class.ant-input-search": "nzSearch", "class.ant-input-search-rtl": "dir === 'rtl'", "class.ant-input-search-sm": "nzSearch && isSmall", "class.ant-input-search-large": "nzSearch && isLarge", "class.ant-input-group-wrapper": "isAddOn", "class.ant-input-group-wrapper-rtl": "dir === 'rtl'", "class.ant-input-group-wrapper-lg": "isAddOn && isLarge", "class.ant-input-group-wrapper-sm": "isAddOn && isSmall", "class.ant-input-affix-wrapper": "isAffix && !isAddOn", "class.ant-input-affix-wrapper-rtl": "dir === 'rtl'", "class.ant-input-affix-wrapper-focused": "isAffix && focused", "class.ant-input-affix-wrapper-disabled": "isAffix && disabled", "class.ant-input-affix-wrapper-lg": "isAffix && !isAddOn && isLarge", "class.ant-input-affix-wrapper-sm": "isAffix && !isAddOn && isSmall", "class.ant-input-group": "!isAffix && !isAddOn", "class.ant-input-group-rtl": "dir === 'rtl'", "class.ant-input-group-lg": "!isAffix && !isAddOn && isLarge", "class.ant-input-group-sm": "!isAffix && !isAddOn && isSmall" } }, providers: [NzFormNoStatusService, { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }], queries: [{ propertyName: "listOfNzInputDirective", predicate: NzInputDirective }], exportAs: ["nzInputGroup"], usesOnChanges: true, hostDirectives: [{ directive: i2$2.NzSpaceCompactItemDirective }], ngImport: i0, template: `
  572. @if (isAddOn) {
  573. <span class="ant-input-wrapper ant-input-group">
  574. @if (nzAddOnBefore || nzAddOnBeforeIcon) {
  575. <span nz-input-group-slot type="addon" [icon]="nzAddOnBeforeIcon" [template]="nzAddOnBefore"></span>
  576. }
  577. @if (isAffix || hasFeedback) {
  578. <span
  579. class="ant-input-affix-wrapper"
  580. [class.ant-input-affix-wrapper-disabled]="disabled"
  581. [class.ant-input-affix-wrapper-sm]="isSmall"
  582. [class.ant-input-affix-wrapper-lg]="isLarge"
  583. [class.ant-input-affix-wrapper-focused]="focused"
  584. [class]="affixInGroupStatusCls"
  585. >
  586. <ng-template [ngTemplateOutlet]="affixTemplate"></ng-template>
  587. </span>
  588. } @else {
  589. <ng-template [ngTemplateOutlet]="contentTemplate" />
  590. }
  591. @if (nzAddOnAfter || nzAddOnAfterIcon) {
  592. <span nz-input-group-slot type="addon" [icon]="nzAddOnAfterIcon" [template]="nzAddOnAfter"></span>
  593. }
  594. </span>
  595. } @else {
  596. @if (isAffix) {
  597. <ng-template [ngTemplateOutlet]="affixTemplate" />
  598. } @else {
  599. <ng-template [ngTemplateOutlet]="contentTemplate" />
  600. }
  601. }
  602. <!-- affix template -->
  603. <ng-template #affixTemplate>
  604. @if (nzPrefix || nzPrefixIcon) {
  605. <span nz-input-group-slot type="prefix" [icon]="nzPrefixIcon" [template]="nzPrefix"></span>
  606. }
  607. <ng-template [ngTemplateOutlet]="contentTemplate" />
  608. @if (nzSuffix || nzSuffixIcon || isFeedback) {
  609. <span nz-input-group-slot type="suffix" [icon]="nzSuffixIcon" [template]="nzSuffix">
  610. @if (isFeedback) {
  611. <nz-form-item-feedback-icon [status]="status" />
  612. }
  613. </span>
  614. }
  615. </ng-template>
  616. <!-- content template -->
  617. <ng-template #contentTemplate>
  618. <ng-content></ng-content>
  619. @if (!isAddOn && !isAffix && isFeedback) {
  620. <span nz-input-group-slot type="suffix">
  621. <nz-form-item-feedback-icon [status]="status" />
  622. </span>
  623. }
  624. </ng-template>
  625. `, isInline: true, dependencies: [{ kind: "component", type: NzInputGroupSlotComponent, selector: "[nz-input-group-slot]", inputs: ["icon", "type", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NzFormItemFeedbackIconComponent, selector: "nz-form-item-feedback-icon", inputs: ["status"], exportAs: ["nzFormFeedbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  626. }
  627. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputGroupComponent, decorators: [{
  628. type: Component,
  629. args: [{
  630. selector: 'nz-input-group',
  631. exportAs: 'nzInputGroup',
  632. imports: [NzInputGroupSlotComponent, NgTemplateOutlet, NzFormItemFeedbackIconComponent],
  633. encapsulation: ViewEncapsulation.None,
  634. providers: [NzFormNoStatusService, { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }],
  635. template: `
  636. @if (isAddOn) {
  637. <span class="ant-input-wrapper ant-input-group">
  638. @if (nzAddOnBefore || nzAddOnBeforeIcon) {
  639. <span nz-input-group-slot type="addon" [icon]="nzAddOnBeforeIcon" [template]="nzAddOnBefore"></span>
  640. }
  641. @if (isAffix || hasFeedback) {
  642. <span
  643. class="ant-input-affix-wrapper"
  644. [class.ant-input-affix-wrapper-disabled]="disabled"
  645. [class.ant-input-affix-wrapper-sm]="isSmall"
  646. [class.ant-input-affix-wrapper-lg]="isLarge"
  647. [class.ant-input-affix-wrapper-focused]="focused"
  648. [class]="affixInGroupStatusCls"
  649. >
  650. <ng-template [ngTemplateOutlet]="affixTemplate"></ng-template>
  651. </span>
  652. } @else {
  653. <ng-template [ngTemplateOutlet]="contentTemplate" />
  654. }
  655. @if (nzAddOnAfter || nzAddOnAfterIcon) {
  656. <span nz-input-group-slot type="addon" [icon]="nzAddOnAfterIcon" [template]="nzAddOnAfter"></span>
  657. }
  658. </span>
  659. } @else {
  660. @if (isAffix) {
  661. <ng-template [ngTemplateOutlet]="affixTemplate" />
  662. } @else {
  663. <ng-template [ngTemplateOutlet]="contentTemplate" />
  664. }
  665. }
  666. <!-- affix template -->
  667. <ng-template #affixTemplate>
  668. @if (nzPrefix || nzPrefixIcon) {
  669. <span nz-input-group-slot type="prefix" [icon]="nzPrefixIcon" [template]="nzPrefix"></span>
  670. }
  671. <ng-template [ngTemplateOutlet]="contentTemplate" />
  672. @if (nzSuffix || nzSuffixIcon || isFeedback) {
  673. <span nz-input-group-slot type="suffix" [icon]="nzSuffixIcon" [template]="nzSuffix">
  674. @if (isFeedback) {
  675. <nz-form-item-feedback-icon [status]="status" />
  676. }
  677. </span>
  678. }
  679. </ng-template>
  680. <!-- content template -->
  681. <ng-template #contentTemplate>
  682. <ng-content></ng-content>
  683. @if (!isAddOn && !isAffix && isFeedback) {
  684. <span nz-input-group-slot type="suffix">
  685. <nz-form-item-feedback-icon [status]="status" />
  686. </span>
  687. }
  688. </ng-template>
  689. `,
  690. host: {
  691. '[class.ant-input-group-compact]': `nzCompact`,
  692. '[class.ant-input-search-enter-button]': `nzSearch`,
  693. '[class.ant-input-search]': `nzSearch`,
  694. '[class.ant-input-search-rtl]': `dir === 'rtl'`,
  695. '[class.ant-input-search-sm]': `nzSearch && isSmall`,
  696. '[class.ant-input-search-large]': `nzSearch && isLarge`,
  697. '[class.ant-input-group-wrapper]': `isAddOn`,
  698. '[class.ant-input-group-wrapper-rtl]': `dir === 'rtl'`,
  699. '[class.ant-input-group-wrapper-lg]': `isAddOn && isLarge`,
  700. '[class.ant-input-group-wrapper-sm]': `isAddOn && isSmall`,
  701. '[class.ant-input-affix-wrapper]': `isAffix && !isAddOn`,
  702. '[class.ant-input-affix-wrapper-rtl]': `dir === 'rtl'`,
  703. '[class.ant-input-affix-wrapper-focused]': `isAffix && focused`,
  704. '[class.ant-input-affix-wrapper-disabled]': `isAffix && disabled`,
  705. '[class.ant-input-affix-wrapper-lg]': `isAffix && !isAddOn && isLarge`,
  706. '[class.ant-input-affix-wrapper-sm]': `isAffix && !isAddOn && isSmall`,
  707. '[class.ant-input-group]': `!isAffix && !isAddOn`,
  708. '[class.ant-input-group-rtl]': `dir === 'rtl'`,
  709. '[class.ant-input-group-lg]': `!isAffix && !isAddOn && isLarge`,
  710. '[class.ant-input-group-sm]': `!isAffix && !isAddOn && isSmall`
  711. },
  712. hostDirectives: [NzSpaceCompactItemDirective],
  713. changeDetection: ChangeDetectionStrategy.OnPush
  714. }]
  715. }], ctorParameters: () => [{ type: i1$3.FocusMonitor }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1$2.Directionality }], propDecorators: { listOfNzInputDirective: [{
  716. type: ContentChildren,
  717. args: [NzInputDirective]
  718. }], nzAddOnBeforeIcon: [{
  719. type: Input
  720. }], nzAddOnAfterIcon: [{
  721. type: Input
  722. }], nzPrefixIcon: [{
  723. type: Input
  724. }], nzSuffixIcon: [{
  725. type: Input
  726. }], nzAddOnBefore: [{
  727. type: Input
  728. }], nzAddOnAfter: [{
  729. type: Input
  730. }], nzPrefix: [{
  731. type: Input
  732. }], nzStatus: [{
  733. type: Input
  734. }], nzSuffix: [{
  735. type: Input
  736. }], nzSize: [{
  737. type: Input
  738. }], nzSearch: [{
  739. type: Input,
  740. args: [{ transform: booleanAttribute }]
  741. }], nzCompact: [{
  742. type: Input,
  743. args: [{ transform: booleanAttribute }]
  744. }] } });
  745. /**
  746. * Use of this source code is governed by an MIT-style license that can be
  747. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  748. */
  749. class NzInputOtpComponent {
  750. formBuilder;
  751. nzDestroyService;
  752. otpInputs;
  753. nzLength = 6;
  754. nzSize = 'default';
  755. disabled = false;
  756. nzStatus = '';
  757. nzFormatter = value => value;
  758. nzMask = null;
  759. otpArray;
  760. internalValue = [];
  761. onChangeCallback;
  762. onTouched = () => { };
  763. constructor(formBuilder, nzDestroyService) {
  764. this.formBuilder = formBuilder;
  765. this.nzDestroyService = nzDestroyService;
  766. this.createFormArray();
  767. }
  768. ngOnChanges(changes) {
  769. if (changes['nzLength']?.currentValue) {
  770. this.createFormArray();
  771. }
  772. if (changes['disabled']) {
  773. this.setDisabledState(this.disabled);
  774. }
  775. }
  776. onInput(index, event) {
  777. const inputElement = event.target;
  778. const nextInput = this.otpInputs.toArray()[index + 1];
  779. if (inputElement.value && nextInput) {
  780. nextInput.nativeElement.focus();
  781. }
  782. else if (!nextInput) {
  783. this.selectInputBox(index);
  784. }
  785. }
  786. onFocus(event) {
  787. const inputElement = event.target;
  788. inputElement.select();
  789. }
  790. onKeyDown(index, event) {
  791. const previousInput = this.otpInputs.toArray()[index - 1];
  792. if (event.keyCode === BACKSPACE) {
  793. event.preventDefault();
  794. this.internalValue[index] = '';
  795. this.otpArray.at(index).setValue('', { emitEvent: false });
  796. if (previousInput) {
  797. this.selectInputBox(index - 1);
  798. }
  799. this.emitValue();
  800. }
  801. }
  802. writeValue(value) {
  803. if (!value) {
  804. this.otpArray.reset();
  805. return;
  806. }
  807. const controlValues = value.split('');
  808. this.internalValue = controlValues;
  809. controlValues.forEach((val, i) => {
  810. const formattedValue = this.nzFormatter(val);
  811. const value = this.nzMask ? this.nzMask : formattedValue;
  812. this.otpArray.at(i).setValue(value, { emitEvent: false });
  813. });
  814. }
  815. registerOnChange(fn) {
  816. this.onChangeCallback = fn;
  817. }
  818. registerOnTouched(fn) {
  819. this.onTouched = fn;
  820. }
  821. setDisabledState(isDisabled) {
  822. if (isDisabled) {
  823. this.otpArray.disable();
  824. }
  825. else {
  826. this.otpArray.enable();
  827. }
  828. }
  829. onPaste(index, event) {
  830. const pastedText = event.clipboardData?.getData('text') || '';
  831. if (!pastedText)
  832. return;
  833. let currentIndex = index;
  834. for (const char of pastedText.split('')) {
  835. if (currentIndex < this.nzLength) {
  836. const formattedChar = this.nzFormatter(char);
  837. this.internalValue[currentIndex] = char;
  838. const maskedValue = this.nzMask ? this.nzMask : formattedChar;
  839. this.otpArray.at(currentIndex).setValue(maskedValue, { emitEvent: false });
  840. currentIndex++;
  841. }
  842. else {
  843. break;
  844. }
  845. }
  846. event.preventDefault(); // this line is needed, otherwise the last index that is going to be selected will also be filled (in the next line).
  847. this.selectInputBox(currentIndex);
  848. this.emitValue();
  849. }
  850. createFormArray() {
  851. this.otpArray = this.formBuilder.array([]);
  852. this.internalValue = new Array(this.nzLength).fill('');
  853. for (let i = 0; i < this.nzLength; i++) {
  854. const control = this.formBuilder.nonNullable.control('', [Validators.required]);
  855. control.valueChanges
  856. .pipe(tap(value => {
  857. const unmaskedValue = this.nzFormatter(value);
  858. this.internalValue[i] = unmaskedValue;
  859. control.setValue(this.nzMask ?? unmaskedValue, { emitEvent: false });
  860. this.emitValue();
  861. }), takeUntil(this.nzDestroyService))
  862. .subscribe();
  863. this.otpArray.push(control);
  864. }
  865. }
  866. emitValue() {
  867. const result = this.internalValue.join('');
  868. if (this.onChangeCallback) {
  869. this.onChangeCallback(result);
  870. }
  871. }
  872. selectInputBox(index) {
  873. const otpInputArray = this.otpInputs.toArray();
  874. if (index >= otpInputArray.length)
  875. index = otpInputArray.length - 1;
  876. otpInputArray[index].nativeElement.select();
  877. }
  878. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputOtpComponent, deps: [{ token: i1$4.FormBuilder }, { token: i2.NzDestroyService }], target: i0.ɵɵFactoryTarget.Component });
  879. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzInputOtpComponent, isStandalone: true, selector: "nz-input-otp", inputs: { nzLength: ["nzLength", "nzLength", numberAttribute], nzSize: "nzSize", disabled: ["disabled", "disabled", booleanAttribute], nzStatus: "nzStatus", nzFormatter: "nzFormatter", nzMask: "nzMask" }, host: { classAttribute: "ant-otp" }, providers: [
  880. {
  881. provide: NG_VALUE_ACCESSOR,
  882. useExisting: forwardRef(() => NzInputOtpComponent),
  883. multi: true
  884. },
  885. NzDestroyService
  886. ], viewQueries: [{ propertyName: "otpInputs", predicate: ["otpInput"], descendants: true }], exportAs: ["nzInputOtp"], usesOnChanges: true, ngImport: i0, template: `
  887. @for (item of otpArray.controls; track $index) {
  888. <input
  889. nz-input
  890. class="ant-otp-input"
  891. type="text"
  892. maxlength="1"
  893. size="1"
  894. [nzSize]="nzSize"
  895. [formControl]="item"
  896. [nzStatus]="nzStatus"
  897. (input)="onInput($index, $event)"
  898. (focus)="onFocus($event)"
  899. (keydown)="onKeyDown($index, $event)"
  900. (paste)="onPaste($index, $event)"
  901. #otpInput
  902. />
  903. }
  904. `, isInline: true, dependencies: [{ kind: "directive", type: NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  905. }
  906. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputOtpComponent, decorators: [{
  907. type: Component,
  908. args: [{
  909. selector: 'nz-input-otp',
  910. exportAs: 'nzInputOtp',
  911. preserveWhitespaces: false,
  912. encapsulation: ViewEncapsulation.None,
  913. changeDetection: ChangeDetectionStrategy.OnPush,
  914. template: `
  915. @for (item of otpArray.controls; track $index) {
  916. <input
  917. nz-input
  918. class="ant-otp-input"
  919. type="text"
  920. maxlength="1"
  921. size="1"
  922. [nzSize]="nzSize"
  923. [formControl]="item"
  924. [nzStatus]="nzStatus"
  925. (input)="onInput($index, $event)"
  926. (focus)="onFocus($event)"
  927. (keydown)="onKeyDown($index, $event)"
  928. (paste)="onPaste($index, $event)"
  929. #otpInput
  930. />
  931. }
  932. `,
  933. host: {
  934. class: 'ant-otp'
  935. },
  936. providers: [
  937. {
  938. provide: NG_VALUE_ACCESSOR,
  939. useExisting: forwardRef(() => NzInputOtpComponent),
  940. multi: true
  941. },
  942. NzDestroyService
  943. ],
  944. imports: [NzInputDirective, ReactiveFormsModule]
  945. }]
  946. }], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: i2.NzDestroyService }], propDecorators: { otpInputs: [{
  947. type: ViewChildren,
  948. args: ['otpInput']
  949. }], nzLength: [{
  950. type: Input,
  951. args: [{ transform: numberAttribute }]
  952. }], nzSize: [{
  953. type: Input
  954. }], disabled: [{
  955. type: Input,
  956. args: [{ transform: booleanAttribute }]
  957. }], nzStatus: [{
  958. type: Input
  959. }], nzFormatter: [{
  960. type: Input
  961. }], nzMask: [{
  962. type: Input
  963. }] } });
  964. /**
  965. * Use of this source code is governed by an MIT-style license that can be
  966. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  967. */
  968. class NzTextareaCountComponent {
  969. renderer;
  970. elementRef;
  971. nzInputDirective;
  972. nzMaxCharacterCount = 0;
  973. nzComputeCharacterCount = v => v.length;
  974. nzFormatter = (c, m) => `${c}${m > 0 ? `/${m}` : ``}`;
  975. configChange$ = new Subject();
  976. destroy$ = new Subject();
  977. constructor(renderer, elementRef) {
  978. this.renderer = renderer;
  979. this.elementRef = elementRef;
  980. }
  981. ngAfterContentInit() {
  982. if (!this.nzInputDirective && isDevMode()) {
  983. throw new Error('[nz-textarea-count]: Could not find matching textarea[nz-input] child.');
  984. }
  985. if (this.nzInputDirective.ngControl) {
  986. const valueChanges = this.nzInputDirective.ngControl.valueChanges || EMPTY;
  987. merge(valueChanges, this.configChange$)
  988. .pipe(takeUntil(this.destroy$), map(() => this.nzInputDirective.ngControl.value), startWith(this.nzInputDirective.ngControl.value))
  989. .subscribe(value => {
  990. this.setDataCount(value);
  991. });
  992. }
  993. }
  994. setDataCount(value) {
  995. const inputValue = isNotNil(value) ? String(value) : '';
  996. const currentCount = this.nzComputeCharacterCount(inputValue);
  997. const dataCount = this.nzFormatter(currentCount, this.nzMaxCharacterCount);
  998. this.renderer.setAttribute(this.elementRef.nativeElement, 'data-count', dataCount);
  999. }
  1000. ngOnDestroy() {
  1001. this.configChange$.complete();
  1002. this.destroy$.next(true);
  1003. this.destroy$.complete();
  1004. }
  1005. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTextareaCountComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
  1006. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: NzTextareaCountComponent, isStandalone: true, selector: "nz-textarea-count", inputs: { nzMaxCharacterCount: ["nzMaxCharacterCount", "nzMaxCharacterCount", numberAttribute], nzComputeCharacterCount: "nzComputeCharacterCount", nzFormatter: "nzFormatter" }, host: { classAttribute: "ant-input-textarea-show-count" }, queries: [{ propertyName: "nzInputDirective", first: true, predicate: NzInputDirective, descendants: true, static: true }], ngImport: i0, template: ` <ng-content select="textarea[nz-input]"></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
  1007. }
  1008. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTextareaCountComponent, decorators: [{
  1009. type: Component,
  1010. args: [{
  1011. selector: 'nz-textarea-count',
  1012. template: ` <ng-content select="textarea[nz-input]"></ng-content> `,
  1013. host: {
  1014. class: 'ant-input-textarea-show-count'
  1015. },
  1016. changeDetection: ChangeDetectionStrategy.OnPush
  1017. }]
  1018. }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { nzInputDirective: [{
  1019. type: ContentChild,
  1020. args: [NzInputDirective, { static: true }]
  1021. }], nzMaxCharacterCount: [{
  1022. type: Input,
  1023. args: [{ transform: numberAttribute }]
  1024. }], nzComputeCharacterCount: [{
  1025. type: Input
  1026. }], nzFormatter: [{
  1027. type: Input
  1028. }] } });
  1029. /**
  1030. * Use of this source code is governed by an MIT-style license that can be
  1031. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  1032. */
  1033. class NzInputModule {
  1034. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  1035. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzInputModule, imports: [NzTextareaCountComponent,
  1036. NzInputDirective,
  1037. NzInputGroupComponent,
  1038. NzAutosizeDirective,
  1039. NzInputGroupSlotComponent,
  1040. NzInputGroupWhitSuffixOrPrefixDirective,
  1041. NzInputOtpComponent], exports: [NzTextareaCountComponent,
  1042. NzInputDirective,
  1043. NzInputGroupComponent,
  1044. NzAutosizeDirective,
  1045. NzInputGroupWhitSuffixOrPrefixDirective,
  1046. NzInputOtpComponent] });
  1047. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputModule, imports: [NzInputGroupComponent,
  1048. NzInputGroupSlotComponent,
  1049. NzInputOtpComponent] });
  1050. }
  1051. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzInputModule, decorators: [{
  1052. type: NgModule,
  1053. args: [{
  1054. imports: [
  1055. NzTextareaCountComponent,
  1056. NzInputDirective,
  1057. NzInputGroupComponent,
  1058. NzAutosizeDirective,
  1059. NzInputGroupSlotComponent,
  1060. NzInputGroupWhitSuffixOrPrefixDirective,
  1061. NzInputOtpComponent
  1062. ],
  1063. exports: [
  1064. NzTextareaCountComponent,
  1065. NzInputDirective,
  1066. NzInputGroupComponent,
  1067. NzAutosizeDirective,
  1068. NzInputGroupWhitSuffixOrPrefixDirective,
  1069. NzInputOtpComponent
  1070. ]
  1071. }]
  1072. }] });
  1073. /**
  1074. * Use of this source code is governed by an MIT-style license that can be
  1075. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  1076. */
  1077. /**
  1078. * Generated bundle index. Do not edit.
  1079. */
  1080. export { NzAutosizeDirective, NzInputAddonAfterDirective, NzInputAddonBeforeDirective, NzInputDirective, NzInputGroupComponent, NzInputGroupSlotComponent, NzInputGroupWhitSuffixOrPrefixDirective, NzInputModule, NzInputOtpComponent, NzInputPrefixDirective, NzInputSuffixDirective, NzTextareaCountComponent };
  1081. //# sourceMappingURL=ng-zorro-antd-input.mjs.map