import { Platform } from '@angular/cdk/platform'; import * as i0 from '@angular/core'; import { inject, NgZone, DestroyRef, ElementRef, Input, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, input, model, contentChild, booleanAttribute, output, computed, InjectionToken, ViewContainerRef, signal, linkedSignal, effect, Renderer2, ChangeDetectorRef, ContentChildren, forwardRef, numberAttribute, ViewChildren, TemplateRef, afterNextRender, isDevMode, ContentChild, NgModule } from '@angular/core'; import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop'; import { NzResizeService } from 'ng-zorro-antd/core/services'; import * as i2 from 'ng-zorro-antd/core/outlet'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import * as i1 from 'ng-zorro-antd/icon'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { FocusMonitor } from '@angular/cdk/a11y'; import { Directionality } from '@angular/cdk/bidi'; import { NgTemplateOutlet } from '@angular/common'; import { EMPTY, merge } from 'rxjs'; import { map, startWith, distinctUntilChanged, switchMap, mergeMap, tap } from 'rxjs/operators'; import { NzFormStatusService, NzFormNoStatusService, NzFormItemFeedbackIconComponent } from 'ng-zorro-antd/core/form'; import { getStatusClassNames, getVariantClassNames, isNotNil } from 'ng-zorro-antd/core/util'; import * as i1$1 from 'ng-zorro-antd/space'; import { NZ_SPACE_COMPACT_SIZE, NZ_SPACE_COMPACT_ITEM_TYPE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space'; import * as i1$2 from '@angular/forms'; import { NgControl, FormBuilder, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; import { BACKSPACE, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes'; import * as i3 from 'ng-zorro-antd/button'; import { NzButtonModule } from 'ng-zorro-antd/button'; import * as i4 from 'ng-zorro-antd/core/transition-patch'; import * as i5 from 'ng-zorro-antd/core/wave'; /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzAutosizeDirective { ngZone = inject(NgZone); platform = inject(Platform); destroyRef = inject(DestroyRef); resizeService = inject(NzResizeService); el = inject(ElementRef).nativeElement; autosize = false; cachedLineHeight; previousValue; previousMinRows; minRows; maxRows; maxHeight = null; minHeight = null; inputGap = 10; destroyed = false; constructor() { this.destroyRef.onDestroy(() => { this.destroyed = true; }); } set nzAutosize(value) { const isAutoSizeType = (data) => typeof data !== 'string' && typeof data !== 'boolean' && (!!data.maxRows || !!data.minRows); if (typeof value === 'string' || value === true) { this.autosize = true; } else if (isAutoSizeType(value)) { this.autosize = true; this.minRows = value.minRows; this.maxRows = value.maxRows; this.maxHeight = this.setMaxHeight(); this.minHeight = this.setMinHeight(); } } resizeToFitContent(force = false) { this.cacheTextareaLineHeight(); // If we haven't determined the line-height yet, we know we're still hidden and there's no point // in checking the height of the textarea. if (!this.cachedLineHeight) { return; } const textarea = this.el; const value = textarea.value; // Only resize if the value or minRows have changed since these calculations can be expensive. if (!force && this.minRows === this.previousMinRows && value === this.previousValue) { return; } const placeholderText = textarea.placeholder; // Reset the textarea height to auto in order to shrink back to its default size. // Also temporarily force overflow:hidden, so scroll bars do not interfere with calculations. // Long placeholders that are wider than the textarea width may lead to a bigger scrollHeight // value. To ensure that the scrollHeight is not bigger than the content, the placeholders // need to be removed temporarily. textarea.classList.add('nz-textarea-autosize-measuring'); textarea.placeholder = ''; let height = Math.round((textarea.scrollHeight - this.inputGap) / this.cachedLineHeight) * this.cachedLineHeight + this.inputGap; if (this.maxHeight !== null && height > this.maxHeight) { height = this.maxHeight; } if (this.minHeight !== null && height < this.minHeight) { height = this.minHeight; } // Use the scrollHeight to know how large the textarea *would* be if fit its entire value. textarea.style.height = `${height}px`; textarea.classList.remove('nz-textarea-autosize-measuring'); textarea.placeholder = placeholderText; // On Firefox resizing the textarea will prevent it from scrolling to the caret position. // We need to re-set the selection in order for it to scroll to the proper position. if (typeof requestAnimationFrame !== 'undefined') { this.ngZone.runOutsideAngular(() => requestAnimationFrame(() => { const { selectionStart, selectionEnd } = textarea; // IE will throw an "Unspecified error" if we try to set the selection range after the // element has been removed from the DOM. Assert that the directive hasn't been destroyed // between the time we requested the animation frame and when it was executed. // Also note that we have to assert that the textarea is focused before we set the // selection range. Setting the selection range on a non-focused textarea will cause // it to receive focus on IE and Edge. if (!this.destroyed && document.activeElement === textarea) { textarea.setSelectionRange(selectionStart, selectionEnd); } })); } this.previousValue = value; this.previousMinRows = this.minRows; } cacheTextareaLineHeight() { if (this.cachedLineHeight >= 0 || !this.el.parentNode) { return; } // Use a clone element because we have to override some styles. const textareaClone = this.el.cloneNode(false); textareaClone.rows = 1; // Use `position: absolute` so that this doesn't cause a browser layout and use // `visibility: hidden` so that nothing is rendered. Clear any other styles that // would affect the height. textareaClone.style.position = 'absolute'; textareaClone.style.visibility = 'hidden'; textareaClone.style.border = 'none'; textareaClone.style.padding = '0'; textareaClone.style.height = ''; textareaClone.style.minHeight = ''; textareaClone.style.maxHeight = ''; // In Firefox it happens that textarea elements are always bigger than the specified amount // of rows. This is because Firefox tries to add extra space for the horizontal scrollbar. // As a workaround that removes the extra space for the scrollbar, we can just set overflow // to hidden. This ensures that there is no invalid calculation of the line height. // See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654 textareaClone.style.overflow = 'hidden'; this.el.parentNode.appendChild(textareaClone); this.cachedLineHeight = textareaClone.clientHeight - this.inputGap; this.el.parentNode.removeChild(textareaClone); // Min and max heights have to be re-calculated if the cached line height changes this.maxHeight = this.setMaxHeight(); this.minHeight = this.setMinHeight(); } setMinHeight() { const minHeight = this.minRows && this.cachedLineHeight ? this.minRows * this.cachedLineHeight + this.inputGap : null; if (minHeight !== null) { this.el.style.minHeight = `${minHeight}px`; } return minHeight; } setMaxHeight() { const maxHeight = this.maxRows && this.cachedLineHeight ? this.maxRows * this.cachedLineHeight + this.inputGap : null; if (maxHeight !== null) { this.el.style.maxHeight = `${maxHeight}px`; } return maxHeight; } noopInputHandler() { // no-op handler that ensures we're running change detection on input events. } ngAfterViewInit() { if (this.autosize && this.platform.isBrowser) { this.resizeToFitContent(); this.resizeService .connect() .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(() => this.resizeToFitContent(true)); } } ngDoCheck() { if (this.autosize && this.platform.isBrowser) { this.resizeToFitContent(); } } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzAutosizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NzAutosizeDirective, isStandalone: true, selector: "textarea[nzAutosize]", inputs: { nzAutosize: "nzAutosize" }, host: { attributes: { "rows": "1" }, listeners: { "input": "noopInputHandler()" } }, exportAs: ["nzAutosize"], ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzAutosizeDirective, decorators: [{ type: Directive, args: [{ selector: 'textarea[nzAutosize]', exportAs: 'nzAutosize', host: { // Textarea elements that have the directive applied should have a single row by default. // Browsers normally show two rows by default and therefore this limits the minRows binding. rows: '1', '(input)': 'noopInputHandler()' } }] }], ctorParameters: () => [], propDecorators: { nzAutosize: [{ type: Input }] } }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzInputAddonBeforeDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputAddonBeforeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NzInputAddonBeforeDirective, isStandalone: true, selector: "[nzInputAddonBefore]", ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputAddonBeforeDirective, decorators: [{ type: Directive, args: [{ selector: '[nzInputAddonBefore]' }] }] }); class NzInputAddonAfterDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputAddonAfterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NzInputAddonAfterDirective, isStandalone: true, selector: "[nzInputAddonAfter]", ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputAddonAfterDirective, decorators: [{ type: Directive, args: [{ selector: '[nzInputAddonAfter]' }] }] }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzInputPrefixDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NzInputPrefixDirective, isStandalone: true, selector: "[nzInputPrefix]", ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputPrefixDirective, decorators: [{ type: Directive, args: [{ selector: '[nzInputPrefix]' }] }] }); class NzInputSuffixDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NzInputSuffixDirective, isStandalone: true, selector: "[nzInputSuffix]", ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputSuffixDirective, decorators: [{ type: Directive, args: [{ selector: '[nzInputSuffix]' }] }] }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ /** * @deprecated Will be removed in v22.0.0. This component will be removed along with input-group. */ class NzInputGroupSlotComponent { icon = null; type = null; template = null; static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputGroupSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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: ` @if (icon) { } {{ template }} `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i2.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputGroupSlotComponent, decorators: [{ type: Component, args: [{ selector: '[nz-input-group-slot]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: ` @if (icon) { } {{ template }} `, host: { '[class.ant-input-group-addon]': `type === 'addon'`, '[class.ant-input-prefix]': `type === 'prefix'`, '[class.ant-input-suffix]': `type === 'suffix'` }, imports: [NzIconModule, NzOutletModule] }] }], propDecorators: { icon: [{ type: Input }], type: [{ type: Input }], template: [{ type: Input }] } }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzInputPasswordDirective { nzVisibilityToggle = input(true, ...(ngDevMode ? [{ debugName: "nzVisibilityToggle" }] : [])); nzVisible = model(false, ...(ngDevMode ? [{ debugName: "nzVisible" }] : [])); toggleVisible() { this.nzVisible.update(value => !value); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputPasswordDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: NzInputPasswordDirective, isStandalone: true, selector: "nz-input-password", inputs: { nzVisibilityToggle: { classPropertyName: "nzVisibilityToggle", publicName: "nzVisibilityToggle", isSignal: true, isRequired: false, transformFunction: null }, nzVisible: { classPropertyName: "nzVisible", publicName: "nzVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nzVisible: "nzVisibleChange" }, host: { classAttribute: "ant-input-password" }, exportAs: ["nzInputPassword"], ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputPasswordDirective, decorators: [{ type: Directive, args: [{ selector: 'nz-input-password', exportAs: 'nzInputPassword', host: { class: 'ant-input-password' } }] }] }); class NzInputPasswordIconDirective { /** * @internal */ static ngTemplateContextGuard(_, context) { return true; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputPasswordIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NzInputPasswordIconDirective, isStandalone: true, selector: "[nzInputPasswordIcon]", ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputPasswordIconDirective, decorators: [{ type: Directive, args: [{ selector: '[nzInputPasswordIcon]' }] }] }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzInputSearchDirective { inputDir = contentChild.required(NzInputDirective); inputRef = contentChild.required(NzInputDirective, { read: ElementRef }); nzEnterButton = input(false, ...(ngDevMode ? [{ debugName: "nzEnterButton" }] : [])); nzLoading = input(false, ...(ngDevMode ? [{ debugName: "nzLoading", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); nzSearch = output(); size = computed(() => this.inputDir().nzSize(), ...(ngDevMode ? [{ debugName: "size" }] : [])); search(event, source = 'input') { if (!this.nzLoading()) { this.nzSearch.emit({ value: this.inputRef().nativeElement.value, event, source }); } } onEnter(event) { if (event.target === this.inputRef().nativeElement) { this.search(event); } } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputSearchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.0", type: NzInputSearchDirective, isStandalone: true, selector: "nz-input-search", inputs: { nzEnterButton: { classPropertyName: "nzEnterButton", publicName: "nzEnterButton", isSignal: true, isRequired: false, transformFunction: null }, nzLoading: { classPropertyName: "nzLoading", publicName: "nzLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nzSearch: "nzSearch" }, host: { listeners: { "keydown.enter": "onEnter($any($event))" }, properties: { "class.ant-input-search-large": "size() === 'large'", "class.ant-input-search-small": "size() === 'small'", "class.ant-input-search-with-button": "nzEnterButton() !== false" }, classAttribute: "ant-input-search" }, queries: [{ propertyName: "inputDir", first: true, predicate: NzInputDirective, descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: NzInputDirective, descendants: true, read: ElementRef, isSignal: true }], exportAs: ["nzInputSearch"], ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputSearchDirective, decorators: [{ type: Directive, args: [{ selector: 'nz-input-search', exportAs: 'nzInputSearch', host: { class: 'ant-input-search', '[class.ant-input-search-large]': `size() === 'large'`, '[class.ant-input-search-small]': `size() === 'small'`, '[class.ant-input-search-with-button]': 'nzEnterButton() !== false', '(keydown.enter)': 'onEnter($any($event))' } }] }] }); class NzInputSearchEnterButtonDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputSearchEnterButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NzInputSearchEnterButtonDirective, isStandalone: true, selector: "[nzInputSearchEnterButton]", ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputSearchEnterButtonDirective, decorators: [{ type: Directive, args: [{ selector: '[nzInputSearchEnterButton]' }] }] }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ const NZ_INPUT_WRAPPER = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'nz-input-wrapper' : ''); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ const PREFIX_CLS = 'ant-input'; class NzInputDirective { elementRef = inject(ElementRef); compactSize = inject(NZ_SPACE_COMPACT_SIZE, { optional: true }); destroyRef = inject(DestroyRef); nzFormStatusService = inject(NzFormStatusService, { optional: true }); nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); inputWrapper = inject(NZ_INPUT_WRAPPER, { host: true, optional: true }); focusMonitor = inject(FocusMonitor); hostView = inject(ViewContainerRef); inputPasswordDir = inject(NzInputPasswordDirective, { host: true, optional: true }); inputSearchDir = inject(NzInputSearchDirective, { host: true, optional: true }); ngControl = inject(NgControl, { self: true, optional: true }); value = signal(this.elementRef.nativeElement.value, ...(ngDevMode ? [{ debugName: "value" }] : [])); /** * @deprecated Will be removed in v21. It is recommended to use `nzVariant` instead. */ nzBorderless = input(false, ...(ngDevMode ? [{ debugName: "nzBorderless", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); nzVariant = input('outlined', ...(ngDevMode ? [{ debugName: "nzVariant" }] : [])); nzSize = input('default', ...(ngDevMode ? [{ debugName: "nzSize" }] : [])); /** * @deprecated Will be removed in v22. */ nzStepperless = input(true, ...(ngDevMode ? [{ debugName: "nzStepperless", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); nzStatus = input('', ...(ngDevMode ? [{ debugName: "nzStatus" }] : [])); disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); controlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "controlDisabled" }] : [])); finalDisabled = this.ngControl ? this.controlDisabled : this.disabled; dir = inject(Directionality).valueSignal; // TODO: When the input group is removed, we can remove this. size = linkedSignal(this.nzSize); status = this.nzFormStatusService ? toSignal(this.nzFormStatusService.formStatusChanges.pipe(map(value => value.status)), { initialValue: '' }) : this.nzStatus; hasFeedback = toSignal(this.nzFormStatusService?.formStatusChanges.pipe(map(value => value.hasFeedback)) ?? EMPTY, { initialValue: false }); classes = computed(() => getStatusClassNames(PREFIX_CLS, this.status(), this.hasFeedback()), ...(ngDevMode ? [{ debugName: "classes" }] : [])); type = computed(() => { if (this.inputPasswordDir) { return this.inputPasswordDir.nzVisible() ? 'text' : 'password'; } if (this.inputSearchDir) { return 'search'; } return this.elementRef.nativeElement.getAttribute('type') || 'text'; }, ...(ngDevMode ? [{ debugName: "type" }] : [])); focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : [])); finalSize = computed(() => { if (this.compactSize) { return this.compactSize(); } return this.size(); }, ...(ngDevMode ? [{ debugName: "finalSize" }] : [])); feedbackRef = null; // TODO: When the input group is removed, we can remove this. disabled$ = toObservable(this.finalDisabled); constructor() { this.destroyRef.onDestroy(() => { this.focusMonitor.stopMonitoring(this.elementRef); }); this.focusMonitor .monitor(this.elementRef, false) .pipe(takeUntilDestroyed()) .subscribe(origin => this.focused.set(!!origin)); effect(() => { this.renderFeedbackIcon(); }); } ngOnInit() { // statusChanges is only accessible in onInit this.ngControl?.statusChanges?.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => { this.controlDisabled.set(!!this.ngControl.disabled); }); this.ngControl?.valueChanges?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => { this.value.set(value); }); } renderFeedbackIcon() { if (!this.status() || !this.hasFeedback() || this.inputWrapper || !!this.nzFormNoStatusService) { // remove feedback this.hostView.clear(); this.feedbackRef = null; return; } this.feedbackRef = this.feedbackRef || this.hostView.createComponent(NzFormItemFeedbackIconComponent); this.feedbackRef.location.nativeElement.classList.add('ant-input-suffix'); this.feedbackRef.instance.status = this.status(); this.feedbackRef.instance.updateIcon(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: NzInputDirective, isStandalone: true, selector: "input[nz-input],textarea[nz-input]", inputs: { nzBorderless: { classPropertyName: "nzBorderless", publicName: "nzBorderless", isSignal: true, isRequired: false, transformFunction: null }, nzVariant: { classPropertyName: "nzVariant", publicName: "nzVariant", isSignal: true, isRequired: false, transformFunction: null }, nzSize: { classPropertyName: "nzSize", publicName: "nzSize", isSignal: true, isRequired: false, transformFunction: null }, nzStepperless: { classPropertyName: "nzStepperless", publicName: "nzStepperless", isSignal: true, isRequired: false, transformFunction: null }, nzStatus: { classPropertyName: "nzStatus", publicName: "nzStatus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type": "type()", "class": "classes()", "class.ant-input-disabled": "finalDisabled()", "class.ant-input-borderless": "nzVariant() === 'borderless' || (nzVariant() === 'outlined' && nzBorderless())", "class.ant-input-filled": "nzVariant() === 'filled'", "class.ant-input-underlined": "nzVariant() === 'underlined'", "class.ant-input-lg": "finalSize() === 'large'", "class.ant-input-sm": "finalSize() === 'small'", "attr.disabled": "finalDisabled() || null", "attr.readonly": "readonly() || null", "class.ant-input-rtl": "dir() === 'rtl'", "class.ant-input-stepperless": "nzStepperless()", "class.ant-input-focused": "focused()" }, classAttribute: "ant-input" }, providers: [{ provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }], exportAs: ["nzInput"], hostDirectives: [{ directive: i1$1.NzSpaceCompactItemDirective }], ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputDirective, decorators: [{ type: Directive, args: [{ selector: 'input[nz-input],textarea[nz-input]', exportAs: 'nzInput', host: { class: 'ant-input', '[attr.type]': 'type()', '[class]': 'classes()', '[class.ant-input-disabled]': 'finalDisabled()', '[class.ant-input-borderless]': `nzVariant() === 'borderless' || (nzVariant() === 'outlined' && nzBorderless())`, '[class.ant-input-filled]': `nzVariant() === 'filled'`, '[class.ant-input-underlined]': `nzVariant() === 'underlined'`, '[class.ant-input-lg]': `finalSize() === 'large'`, '[class.ant-input-sm]': `finalSize() === 'small'`, '[attr.disabled]': 'finalDisabled() || null', '[attr.readonly]': 'readonly() || null', '[class.ant-input-rtl]': `dir() === 'rtl'`, '[class.ant-input-stepperless]': `nzStepperless()`, '[class.ant-input-focused]': 'focused()' }, hostDirectives: [NzSpaceCompactItemDirective], providers: [{ provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }] }] }], ctorParameters: () => [] }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ /** * @deprecated Will be removed in v22.0.0. This component will be removed along with input-group. */ class NzInputGroupWhitSuffixOrPrefixDirective { elementRef = inject(ElementRef); static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputGroupWhitSuffixOrPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NzInputGroupWhitSuffixOrPrefixDirective, isStandalone: true, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]", ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputGroupWhitSuffixOrPrefixDirective, decorators: [{ type: Directive, args: [{ selector: `nz-input-group[nzSuffix], nz-input-group[nzPrefix]` }] }] }); /** * @deprecated Will be removed in v22. It is recommended to use `` instead. */ class NzInputGroupComponent { focusMonitor = inject(FocusMonitor); elementRef = inject(ElementRef); renderer = inject(Renderer2); cdr = inject(ChangeDetectorRef); directionality = inject(Directionality); destroyRef = inject(DestroyRef); nzFormStatusService = inject(NzFormStatusService, { optional: true }); nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); listOfNzInputDirective; nzAddOnBeforeIcon = null; nzAddOnAfterIcon = null; nzPrefixIcon = null; nzSuffixIcon = null; nzAddOnBefore; nzAddOnAfter; nzPrefix; nzStatus = ''; nzSuffix; nzSize = 'default'; nzSearch = false; isLarge = false; isSmall = false; isAffix = false; isAddOn = false; isFeedback = false; focused = false; disabled = false; dir = 'ltr'; // status prefixCls = 'ant-input'; affixStatusCls = {}; groupStatusCls = {}; affixInGroupStatusCls = {}; status = ''; hasFeedback = false; constructor() { this.destroyRef.onDestroy(() => this.focusMonitor.stopMonitoring(this.elementRef)); } updateChildrenInputSize() { if (this.listOfNzInputDirective) { this.listOfNzInputDirective.forEach(item => item['size'].set(this.nzSize)); } } ngOnInit() { this.nzFormStatusService?.formStatusChanges .pipe(distinctUntilChanged((pre, cur) => pre.status === cur.status && pre.hasFeedback === cur.hasFeedback), takeUntilDestroyed(this.destroyRef)) .subscribe(({ status, hasFeedback }) => { this.setStatusStyles(status, hasFeedback); }); this.focusMonitor .monitor(this.elementRef, true) .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(focusOrigin => { this.focused = !!focusOrigin; this.cdr.markForCheck(); }); this.dir = this.directionality.value; this.directionality.change?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(direction => { this.dir = direction; }); } ngAfterContentInit() { this.updateChildrenInputSize(); const listOfInputChange$ = this.listOfNzInputDirective.changes.pipe(startWith(this.listOfNzInputDirective)); listOfInputChange$ .pipe(switchMap(list => merge(...[listOfInputChange$, ...list.map((input) => input.disabled$)])), mergeMap(() => listOfInputChange$), map(list => list.some((input) => input.finalDisabled())), takeUntilDestroyed(this.destroyRef)) .subscribe(disabled => { this.disabled = disabled; this.cdr.markForCheck(); }); } ngOnChanges(changes) { const { nzSize, nzSuffix, nzPrefix, nzPrefixIcon, nzSuffixIcon, nzAddOnAfter, nzAddOnBefore, nzAddOnAfterIcon, nzAddOnBeforeIcon, nzStatus } = changes; if (nzSize) { this.updateChildrenInputSize(); this.isLarge = this.nzSize === 'large'; this.isSmall = this.nzSize === 'small'; } if (nzSuffix || nzPrefix || nzPrefixIcon || nzSuffixIcon) { this.isAffix = !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon); } if (nzAddOnAfter || nzAddOnBefore || nzAddOnAfterIcon || nzAddOnBeforeIcon) { this.isAddOn = !!(this.nzAddOnAfter || this.nzAddOnBefore || this.nzAddOnAfterIcon || this.nzAddOnBeforeIcon); this.nzFormNoStatusService?.noFormStatus?.next(this.isAddOn); } if (nzStatus) { this.setStatusStyles(this.nzStatus, this.hasFeedback); } } setStatusStyles(status, hasFeedback) { // set inner status this.status = status; this.hasFeedback = hasFeedback; this.isFeedback = !!status && hasFeedback; const baseAffix = !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon); this.isAffix = baseAffix || (!this.isAddOn && hasFeedback); this.affixInGroupStatusCls = this.isAffix || this.isFeedback ? (this.affixStatusCls = getStatusClassNames(`${this.prefixCls}-affix-wrapper`, status, hasFeedback)) : {}; this.cdr.markForCheck(); // render status if nzStatus is set this.affixStatusCls = getStatusClassNames(`${this.prefixCls}-affix-wrapper`, this.isAddOn ? '' : status, this.isAddOn ? false : hasFeedback); this.groupStatusCls = getStatusClassNames(`${this.prefixCls}-group-wrapper`, this.isAddOn ? status : '', this.isAddOn ? hasFeedback : false); const statusCls = { ...this.affixStatusCls, ...this.groupStatusCls }; Object.keys(statusCls).forEach(status => { if (statusCls[status]) { this.renderer.addClass(this.elementRef.nativeElement, status); } else { this.renderer.removeClass(this.elementRef.nativeElement, status); } }); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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] }, host: { properties: { "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: i1$1.NzSpaceCompactItemDirective }], ngImport: i0, template: ` @if (isAddOn) { @if (nzAddOnBefore || nzAddOnBeforeIcon) { } @if (isAffix || hasFeedback) { } @else { } @if (nzAddOnAfter || nzAddOnAfterIcon) { } } @else { @if (isAffix) { } @else { } } @if (nzPrefix || nzPrefixIcon) { } @if (nzSuffix || nzSuffixIcon || isFeedback) { @if (isFeedback) { } } @if (!isAddOn && !isAffix && isFeedback) { } `, 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 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputGroupComponent, decorators: [{ type: Component, args: [{ selector: 'nz-input-group', exportAs: 'nzInputGroup', imports: [NzInputGroupSlotComponent, NgTemplateOutlet, NzFormItemFeedbackIconComponent], encapsulation: ViewEncapsulation.None, providers: [NzFormNoStatusService, { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }], template: ` @if (isAddOn) { @if (nzAddOnBefore || nzAddOnBeforeIcon) { } @if (isAffix || hasFeedback) { } @else { } @if (nzAddOnAfter || nzAddOnAfterIcon) { } } @else { @if (isAffix) { } @else { } } @if (nzPrefix || nzPrefixIcon) { } @if (nzSuffix || nzSuffixIcon || isFeedback) { @if (isFeedback) { } } @if (!isAddOn && !isAffix && isFeedback) { } `, host: { '[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` }, hostDirectives: [NzSpaceCompactItemDirective], changeDetection: ChangeDetectionStrategy.OnPush }] }], ctorParameters: () => [], propDecorators: { listOfNzInputDirective: [{ type: ContentChildren, args: [NzInputDirective] }], nzAddOnBeforeIcon: [{ type: Input }], nzAddOnAfterIcon: [{ type: Input }], nzPrefixIcon: [{ type: Input }], nzSuffixIcon: [{ type: Input }], nzAddOnBefore: [{ type: Input }], nzAddOnAfter: [{ type: Input }], nzPrefix: [{ type: Input }], nzStatus: [{ type: Input }], nzSuffix: [{ type: Input }], nzSize: [{ type: Input }], nzSearch: [{ type: Input, args: [{ transform: booleanAttribute }] }] } }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzInputOtpComponent { formBuilder = inject(FormBuilder); destroyRef = inject(DestroyRef); otpInputs; nzLength = 6; nzSize = 'default'; disabled = false; nzStatus = ''; nzFormatter = value => value; nzMask = null; otpArray; internalValue = []; onChangeCallback; onTouched = () => { }; constructor() { this.createFormArray(); } ngOnChanges(changes) { if (changes['nzLength']?.currentValue) { this.createFormArray(); } if (changes['disabled']) { this.setDisabledState(this.disabled); } } onInput(index, event) { const inputElement = event.target; const nextInput = this.otpInputs.toArray()[index + 1]; if (inputElement.value && nextInput) { nextInput.nativeElement.focus(); } else if (!nextInput) { this.selectInputBox(index); } } onFocus(event) { const inputElement = event.target; inputElement.select(); } onKeyDown(index, event) { const previousInput = this.otpInputs.toArray()[index - 1]; if (event.keyCode === BACKSPACE) { event.preventDefault(); this.internalValue[index] = ''; this.otpArray.at(index).setValue('', { emitEvent: false }); if (previousInput) { this.selectInputBox(index - 1); } this.emitValue(); } else if (event.keyCode === LEFT_ARROW) { event.preventDefault(); this.selectInputBox(index - 1); } else if (event.keyCode === RIGHT_ARROW) { event.preventDefault(); this.selectInputBox(index + 1); } } writeValue(value) { if (!value) { this.otpArray.reset(); return; } const controlValues = value.split(''); this.internalValue = controlValues; controlValues.forEach((val, i) => { const formattedValue = this.nzFormatter(val); const value = this.nzMask ? this.nzMask : formattedValue; this.otpArray.at(i).setValue(value, { emitEvent: false }); }); } registerOnChange(fn) { this.onChangeCallback = fn; } registerOnTouched(fn) { this.onTouched = fn; } setDisabledState(isDisabled) { if (isDisabled) { this.otpArray.disable(); } else { this.otpArray.enable(); } } onPaste(index, event) { const pastedText = event.clipboardData?.getData('text') || ''; if (!pastedText) return; let currentIndex = index; for (const char of pastedText.split('')) { if (currentIndex < this.nzLength) { const formattedChar = this.nzFormatter(char); this.internalValue[currentIndex] = char; const maskedValue = this.nzMask ? this.nzMask : formattedChar; this.otpArray.at(currentIndex).setValue(maskedValue, { emitEvent: false }); currentIndex++; } else { break; } } event.preventDefault(); // this line is needed, otherwise the last index that is going to be selected will also be filled (in the next line). this.selectInputBox(currentIndex); this.emitValue(); } createFormArray() { this.otpArray = this.formBuilder.array([]); this.internalValue = new Array(this.nzLength).fill(''); for (let i = 0; i < this.nzLength; i++) { const control = this.formBuilder.nonNullable.control('', [Validators.required]); control.valueChanges .pipe(tap(value => { const unmaskedValue = this.nzFormatter(value); this.internalValue[i] = unmaskedValue; control.setValue(this.nzMask ?? unmaskedValue, { emitEvent: false }); this.emitValue(); }), takeUntilDestroyed(this.destroyRef)) .subscribe(); this.otpArray.push(control); } } emitValue() { const result = this.internalValue.join(''); if (this.onChangeCallback) { this.onChangeCallback(result); } } selectInputBox(index) { const otpInputArray = this.otpInputs.toArray(); if (index <= 0) index = 0; if (index >= otpInputArray.length) index = otpInputArray.length - 1; otpInputArray[index].nativeElement.select(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzInputOtpComponent), multi: true } ], viewQueries: [{ propertyName: "otpInputs", predicate: ["otpInput"], descendants: true }], exportAs: ["nzInputOtp"], usesOnChanges: true, ngImport: i0, template: ` @for (item of otpArray.controls; track $index) { } `, isInline: true, dependencies: [{ kind: "directive", type: NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzVariant", "nzSize", "nzStepperless", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputOtpComponent, decorators: [{ type: Component, args: [{ selector: 'nz-input-otp', exportAs: 'nzInputOtp', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: ` @for (item of otpArray.controls; track $index) { } `, host: { class: 'ant-otp' }, providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzInputOtpComponent), multi: true } ], imports: [NzInputDirective, ReactiveFormsModule] }] }], ctorParameters: () => [], propDecorators: { otpInputs: [{ type: ViewChildren, args: ['otpInput'] }], nzLength: [{ type: Input, args: [{ transform: numberAttribute }] }], nzSize: [{ type: Input }], disabled: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzStatus: [{ type: Input }], nzFormatter: [{ type: Input }], nzMask: [{ type: Input }] } }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzInputWrapperComponent { focusMonitor = inject(FocusMonitor); inputPasswordDir = inject(NzInputPasswordDirective, { self: true, optional: true }); inputSearchDir = inject(NzInputSearchDirective, { self: true, optional: true }); inputRef = contentChild.required(NzInputDirective, { read: ElementRef }); inputDir = contentChild.required(NzInputDirective); prefix = contentChild(NzInputPrefixDirective, ...(ngDevMode ? [{ debugName: "prefix" }] : [])); suffix = contentChild(NzInputSuffixDirective, ...(ngDevMode ? [{ debugName: "suffix" }] : [])); addonBefore = contentChild(NzInputAddonBeforeDirective, ...(ngDevMode ? [{ debugName: "addonBefore" }] : [])); addonAfter = contentChild(NzInputAddonAfterDirective, ...(ngDevMode ? [{ debugName: "addonAfter" }] : [])); inputPasswordIconTmpl = contentChild(NzInputPasswordIconDirective, ...(ngDevMode ? [{ debugName: "inputPasswordIconTmpl", read: TemplateRef }] : [{ read: TemplateRef }])); inputSearchEnterButton = contentChild(NzInputSearchEnterButtonDirective, ...(ngDevMode ? [{ debugName: "inputSearchEnterButton" }] : [])); nzAllowClear = input(false, ...(ngDevMode ? [{ debugName: "nzAllowClear", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); nzPrefix = input(...(ngDevMode ? [undefined, { debugName: "nzPrefix" }] : [])); nzSuffix = input(...(ngDevMode ? [undefined, { debugName: "nzSuffix" }] : [])); nzAddonBefore = input(...(ngDevMode ? [undefined, { debugName: "nzAddonBefore" }] : [])); nzAddonAfter = input(...(ngDevMode ? [undefined, { debugName: "nzAddonAfter" }] : [])); nzClear = output(); size = computed(() => this.inputDir().nzSize(), ...(ngDevMode ? [{ debugName: "size" }] : [])); variant = computed(() => this.inputDir().nzVariant(), ...(ngDevMode ? [{ debugName: "variant" }] : [])); disabled = computed(() => this.inputDir().finalDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : [])); readOnly = computed(() => this.inputDir().readonly(), ...(ngDevMode ? [{ debugName: "readOnly" }] : [])); status = computed(() => this.inputDir().status(), ...(ngDevMode ? [{ debugName: "status" }] : [])); hasFeedback = computed(() => this.inputDir().hasFeedback(), ...(ngDevMode ? [{ debugName: "hasFeedback" }] : [])); hasPrefix = computed(() => !!this.nzPrefix() || !!this.prefix(), ...(ngDevMode ? [{ debugName: "hasPrefix" }] : [])); hasSuffix = computed(() => !!this.nzSuffix() || !!this.suffix() || this.nzAllowClear() || this.hasFeedback() || this.inputPasswordDir, ...(ngDevMode ? [{ debugName: "hasSuffix" }] : [])); hasAffix = computed(() => this.hasPrefix() || this.hasSuffix(), ...(ngDevMode ? [{ debugName: "hasAffix" }] : [])); hasAddonBefore = computed(() => !!this.nzAddonBefore() || !!this.addonBefore(), ...(ngDevMode ? [{ debugName: "hasAddonBefore" }] : [])); hasAddonAfter = computed(() => !!this.nzAddonAfter() || !!this.addonAfter() || !!this.inputSearchDir, ...(ngDevMode ? [{ debugName: "hasAddonAfter" }] : [])); hasAddon = computed(() => this.hasAddonBefore() || this.hasAddonAfter(), ...(ngDevMode ? [{ debugName: "hasAddon" }] : [])); compactSize = inject(NZ_SPACE_COMPACT_SIZE, { optional: true }); dir = inject(Directionality).valueSignal; focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : [])); isTextarea = computed(() => this.inputRef().nativeElement instanceof HTMLTextAreaElement, ...(ngDevMode ? [{ debugName: "isTextarea" }] : [])); finalSize = computed(() => { if (this.compactSize) { return this.compactSize(); } return this.size(); }, ...(ngDevMode ? [{ debugName: "finalSize" }] : [])); class = computed(() => { if (this.hasAddon()) { return this.groupWrapperClass(); } if (this.hasAffix()) { return this.affixWrapperClass(); } return null; }, ...(ngDevMode ? [{ debugName: "class" }] : [])); affixWrapperClass = computed(() => { return { 'ant-input-affix-wrapper': true, 'ant-input-affix-wrapper-lg': this.finalSize() === 'large', 'ant-input-affix-wrapper-sm': this.finalSize() === 'small', 'ant-input-affix-wrapper-disabled': this.disabled(), 'ant-input-affix-wrapper-readonly': this.readOnly(), 'ant-input-affix-wrapper-focused': this.focused(), 'ant-input-affix-wrapper-rtl': this.dir() === 'rtl', ...getStatusClassNames('ant-input-affix-wrapper', this.status(), this.hasFeedback()), ...getVariantClassNames('ant-input-affix-wrapper', this.variant()) }; }, ...(ngDevMode ? [{ debugName: "affixWrapperClass" }] : [])); groupWrapperClass = computed(() => { return { 'ant-input-group-wrapper': true, 'ant-input-group-wrapper-sm': this.finalSize() === 'small', 'ant-input-group-wrapper-lg': this.finalSize() === 'large', 'ant-input-group-wrapper-rtl': this.dir() === 'rtl', ...getStatusClassNames('ant-input-group-wrapper', this.status(), this.hasFeedback()), ...getVariantClassNames('ant-input-group-wrapper', this.variant()) }; }, ...(ngDevMode ? [{ debugName: "groupWrapperClass" }] : [])); constructor() { const destroyRef = inject(DestroyRef); afterNextRender(() => { const element = this.inputRef(); this.focusMonitor .monitor(element) .pipe(takeUntilDestroyed(destroyRef)) .subscribe(origin => { this.focused.set(!!origin); }); destroyRef.onDestroy(() => { this.focusMonitor.stopMonitoring(element); }); }); } clear() { this.inputDir().ngControl?.control?.setValue(''); this.nzClear.emit(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NzInputWrapperComponent, isStandalone: true, selector: "nz-input-wrapper,nz-input-password,nz-input-search", inputs: { nzAllowClear: { classPropertyName: "nzAllowClear", publicName: "nzAllowClear", isSignal: true, isRequired: false, transformFunction: null }, nzPrefix: { classPropertyName: "nzPrefix", publicName: "nzPrefix", isSignal: true, isRequired: false, transformFunction: null }, nzSuffix: { classPropertyName: "nzSuffix", publicName: "nzSuffix", isSignal: true, isRequired: false, transformFunction: null }, nzAddonBefore: { classPropertyName: "nzAddonBefore", publicName: "nzAddonBefore", isSignal: true, isRequired: false, transformFunction: null }, nzAddonAfter: { classPropertyName: "nzAddonAfter", publicName: "nzAddonAfter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nzClear: "nzClear" }, host: { properties: { "class": "class()", "class.ant-input-disabled": "disabled()", "class.ant-input-affix-wrapper-textarea-with-clear-btn": "nzAllowClear() && isTextarea()" } }, providers: [ { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }, { provide: NZ_INPUT_WRAPPER, useExisting: forwardRef(() => NzInputWrapperComponent) } ], queries: [{ propertyName: "inputRef", first: true, predicate: NzInputDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputDir", first: true, predicate: NzInputDirective, descendants: true, isSignal: true }, { propertyName: "prefix", first: true, predicate: NzInputPrefixDirective, descendants: true, isSignal: true }, { propertyName: "suffix", first: true, predicate: NzInputSuffixDirective, descendants: true, isSignal: true }, { propertyName: "addonBefore", first: true, predicate: NzInputAddonBeforeDirective, descendants: true, isSignal: true }, { propertyName: "addonAfter", first: true, predicate: NzInputAddonAfterDirective, descendants: true, isSignal: true }, { propertyName: "inputPasswordIconTmpl", first: true, predicate: NzInputPasswordIconDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "inputSearchEnterButton", first: true, predicate: NzInputSearchEnterButtonDirective, descendants: true, isSignal: true }], exportAs: ["nzInputWrapper"], hostDirectives: [{ directive: i1$1.NzSpaceCompactItemDirective }], ngImport: i0, template: ` @if (hasAddon()) { } @else if (hasAffix()) { } @else { } @if (hasAddonBefore()) { {{ nzAddonBefore() }} } @if (hasAffix()) { } @else { } @if (hasAddonAfter()) { @if (inputSearchDir) { @let hasEnterButton = inputSearchEnterButton() ?? inputSearchDir.nzEnterButton() !== false; } {{ nzAddonAfter() }} } @if (hasPrefix()) { {{ nzPrefix() }} } @if (hasSuffix()) { @if (nzAllowClear()) { } @if (inputPasswordDir && inputPasswordDir.nzVisibilityToggle()) { @if (inputPasswordIconTmpl(); as tmpl) { } @else { } } {{ nzSuffix() }} @if (hasFeedback() && status()) { } } `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i4.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i5.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: NzFormItemFeedbackIconComponent, selector: "nz-form-item-feedback-icon", inputs: ["status"], exportAs: ["nzFormFeedbackIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputWrapperComponent, decorators: [{ type: Component, args: [{ selector: 'nz-input-wrapper,nz-input-password,nz-input-search', exportAs: 'nzInputWrapper', imports: [NzIconModule, NzButtonModule, NzFormItemFeedbackIconComponent, NgTemplateOutlet], template: ` @if (hasAddon()) { } @else if (hasAffix()) { } @else { } @if (hasAddonBefore()) { {{ nzAddonBefore() }} } @if (hasAffix()) { } @else { } @if (hasAddonAfter()) { @if (inputSearchDir) { @let hasEnterButton = inputSearchEnterButton() ?? inputSearchDir.nzEnterButton() !== false; } {{ nzAddonAfter() }} } @if (hasPrefix()) { {{ nzPrefix() }} } @if (hasSuffix()) { @if (nzAllowClear()) { } @if (inputPasswordDir && inputPasswordDir.nzVisibilityToggle()) { @if (inputPasswordIconTmpl(); as tmpl) { } @else { } } {{ nzSuffix() }} @if (hasFeedback() && status()) { } } `, providers: [ { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }, { provide: NZ_INPUT_WRAPPER, useExisting: forwardRef(() => NzInputWrapperComponent) } ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [NzSpaceCompactItemDirective], host: { '[class]': 'class()', '[class.ant-input-disabled]': 'disabled()', '[class.ant-input-affix-wrapper-textarea-with-clear-btn]': 'nzAllowClear() && isTextarea()' } }] }], ctorParameters: () => [] }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzTextareaCountComponent { renderer = inject(Renderer2); destroyRef = inject(DestroyRef); elementRef = inject(ElementRef); nzInputDirective; nzMaxCharacterCount = 0; nzComputeCharacterCount = v => v.length; nzFormatter = (c, m) => `${c}${m > 0 ? `/${m}` : ``}`; ngAfterContentInit() { if (!this.nzInputDirective && isDevMode()) { throw new Error('[nz-textarea-count]: Could not find matching textarea[nz-input] child.'); } if (this.nzInputDirective.ngControl) { const valueChanges = this.nzInputDirective.ngControl.valueChanges || EMPTY; valueChanges .pipe(takeUntilDestroyed(this.destroyRef), map(() => this.nzInputDirective.ngControl.value), startWith(this.nzInputDirective.ngControl.value)) .subscribe(value => { this.setDataCount(value); }); } } setDataCount(value) { const inputValue = isNotNil(value) ? String(value) : ''; const currentCount = this.nzComputeCharacterCount(inputValue); const dataCount = this.nzFormatter(currentCount, this.nzMaxCharacterCount); this.renderer.setAttribute(this.elementRef.nativeElement, 'data-count', dataCount); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzTextareaCountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", 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: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzTextareaCountComponent, decorators: [{ type: Component, args: [{ selector: 'nz-textarea-count', template: ``, host: { class: 'ant-input-textarea-show-count' }, changeDetection: ChangeDetectionStrategy.OnPush }] }], propDecorators: { nzInputDirective: [{ type: ContentChild, args: [NzInputDirective, { static: true }] }], nzMaxCharacterCount: [{ type: Input, args: [{ transform: numberAttribute }] }], nzComputeCharacterCount: [{ type: Input }], nzFormatter: [{ type: Input }] } }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ class NzInputModule { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: NzInputModule, imports: [NzTextareaCountComponent, NzInputDirective, NzInputWrapperComponent, NzInputPasswordDirective, NzInputPasswordIconDirective, NzInputSearchDirective, NzInputSearchEnterButtonDirective, NzInputAddonBeforeDirective, NzInputAddonAfterDirective, NzInputPrefixDirective, NzInputSuffixDirective, NzInputGroupComponent, NzAutosizeDirective, NzInputGroupSlotComponent, NzInputGroupWhitSuffixOrPrefixDirective, NzInputOtpComponent], exports: [NzTextareaCountComponent, NzInputDirective, NzInputWrapperComponent, NzInputPasswordDirective, NzInputPasswordIconDirective, NzInputSearchDirective, NzInputSearchEnterButtonDirective, NzInputAddonBeforeDirective, NzInputAddonAfterDirective, NzInputPrefixDirective, NzInputSuffixDirective, NzInputGroupComponent, NzAutosizeDirective, NzInputGroupWhitSuffixOrPrefixDirective, NzInputOtpComponent] }); static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputModule, imports: [NzInputWrapperComponent, NzInputGroupComponent, NzInputGroupSlotComponent, NzInputOtpComponent] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzInputModule, decorators: [{ type: NgModule, args: [{ imports: [ NzTextareaCountComponent, NzInputDirective, NzInputWrapperComponent, NzInputPasswordDirective, NzInputPasswordIconDirective, NzInputSearchDirective, NzInputSearchEnterButtonDirective, NzInputAddonBeforeDirective, NzInputAddonAfterDirective, NzInputPrefixDirective, NzInputSuffixDirective, NzInputGroupComponent, NzAutosizeDirective, NzInputGroupSlotComponent, NzInputGroupWhitSuffixOrPrefixDirective, NzInputOtpComponent ], exports: [ NzTextareaCountComponent, NzInputDirective, NzInputWrapperComponent, NzInputPasswordDirective, NzInputPasswordIconDirective, NzInputSearchDirective, NzInputSearchEnterButtonDirective, NzInputAddonBeforeDirective, NzInputAddonAfterDirective, NzInputPrefixDirective, NzInputSuffixDirective, NzInputGroupComponent, NzAutosizeDirective, NzInputGroupWhitSuffixOrPrefixDirective, NzInputOtpComponent ] }] }] }); /** * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ /** * Generated bundle index. Do not edit. */ export { NZ_INPUT_WRAPPER, NzAutosizeDirective, NzInputAddonAfterDirective, NzInputAddonBeforeDirective, NzInputDirective, NzInputGroupComponent, NzInputGroupSlotComponent, NzInputGroupWhitSuffixOrPrefixDirective, NzInputModule, NzInputOtpComponent, NzInputPasswordDirective, NzInputPasswordIconDirective, NzInputPrefixDirective, NzInputSearchDirective, NzInputSearchEnterButtonDirective, NzInputSuffixDirective, NzInputWrapperComponent, NzTextareaCountComponent }; //# sourceMappingURL=ng-zorro-antd-input.mjs.map