ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1,120 lines • 64.7 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, input, model, InjectionToken, inject, ElementRef, DestroyRef, ViewContainerRef, signal, computed, booleanAttribute, linkedSignal, effect, forwardRef, numberAttribute, Input, ViewChildren, ViewEncapsulation, Component, contentChild, output, TemplateRef, afterNextRender, Renderer2, Injector, isDevMode, ContentChild, NgModule } from '@angular/core';
import { BACKSPACE, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1$1 from '@angular/forms';
import { NgControl, FormBuilder, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { map, startWith, tap } from 'rxjs/operators';
import { FocusMonitor } from '@angular/cdk/a11y';
import { Directionality } from '@angular/cdk/bidi';
import { FORM_FIELD } from '@angular/forms/signals';
import { EMPTY, switchMap, startWith as startWith$1 } from 'rxjs';
import { NzFormStatusService, NZ_FORM_SIZE, NZ_FORM_VARIANT, NzFormItemFeedbackIconComponent } from 'ng-zorro-antd/core/form';
import { getStatusClassNames, triggerFocus, getVariantClassNames, isNotNil, isNumberFinite } from 'ng-zorro-antd/core/util';
import * as i1 from 'ng-zorro-antd/space';
import { NZ_SPACE_COMPACT_SIZE, NZ_SPACE_COMPACT_ITEM_TYPE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';
import { NgTemplateOutlet } from '@angular/common';
import * as i3 from 'ng-zorro-antd/button';
import { NzButtonModule } from 'ng-zorro-antd/button';
import * as i2 from 'ng-zorro-antd/icon';
import { NzIconModule } from 'ng-zorro-antd/icon';
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 NzInputAddonBeforeDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputAddonBeforeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NzInputAddonBeforeDirective, isStandalone: true, selector: "[nzInputAddonBefore]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputAddonBeforeDirective, decorators: [{
type: Directive,
args: [{
selector: '[nzInputAddonBefore]'
}]
}] });
class NzInputAddonAfterDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputAddonAfterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NzInputAddonAfterDirective, isStandalone: true, selector: "[nzInputAddonAfter]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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: "22.0.6", ngImport: i0, type: NzInputPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NzInputPrefixDirective, isStandalone: true, selector: "[nzInputPrefix]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputPrefixDirective, decorators: [{
type: Directive,
args: [{
selector: '[nzInputPrefix]'
}]
}] });
class NzInputSuffixDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NzInputSuffixDirective, isStandalone: true, selector: "[nzInputSuffix]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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
*/
class NzInputPasswordDirective {
nzVisibilityToggle = input(true, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "nzVisibilityToggle" }] : /* istanbul ignore next */ []));
nzVisible = model(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "nzVisible" }] : /* istanbul ignore next */ []));
toggleVisible() {
this.nzVisible.update(value => !value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputPasswordDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", 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: "22.0.6", ngImport: i0, type: NzInputPasswordDirective, decorators: [{
type: Directive,
args: [{
selector: 'nz-input-password',
exportAs: 'nzInputPassword',
host: {
class: 'ant-input-password'
}
}]
}], propDecorators: { nzVisibilityToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzVisibilityToggle", required: false }] }], nzVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzVisible", required: false }] }, { type: i0.Output, args: ["nzVisibleChange"] }] } });
class NzInputPasswordIconDirective {
/**
* @internal
*/
static ngTemplateContextGuard(_, context) {
return true;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputPasswordIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NzInputPasswordIconDirective, isStandalone: true, selector: "[nzInputPasswordIcon]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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
*/
const NZ_INPUT_WRAPPER = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'nz-input-wrapper' : '');
const NZ_INPUT_SEARCH = new InjectionToken(typeof ngDevMode !== 'undefined' && ngDevMode ? 'nz-input-search' : '');
/**
* 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 });
inputWrapper = inject(NZ_INPUT_WRAPPER, { host: true, optional: true });
focusMonitor = inject(FocusMonitor);
hostView = inject(ViewContainerRef);
inputPasswordDir = inject(NzInputPasswordDirective, { host: true, optional: true });
inputSearchDir = inject(NZ_INPUT_SEARCH, { host: true, optional: true });
formField = inject(FORM_FIELD, { self: true, optional: true });
ngControl = inject(NgControl, { self: true, optional: true });
nativeValue = signal(this.elementRef.nativeElement.value, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "nativeValue" }] : /* istanbul ignore next */ []));
value = computed(() => {
if (this.formField) {
return String(this.formField.state().value() ?? '');
}
return this.nativeValue();
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
nzVariant = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "nzVariant" }] : /* istanbul ignore next */ []));
nzSize = input('default', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "nzSize" }] : /* istanbul ignore next */ []));
nzStatus = input('', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "nzStatus" }] : /* istanbul ignore next */ []));
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
controlDisabled = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "controlDisabled" }] : /* istanbul ignore next */ []));
finalDisabled = computed(() => {
if (this.formField) {
return this.formField.state().disabled();
}
return this.ngControl ? this.controlDisabled() : this.disabled();
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "finalDisabled" }] : /* istanbul ignore next */ []));
dir = inject(Directionality).valueSignal;
// TODO: When the input group is removed, we can remove this.
size = linkedSignal(this.nzSize, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
formSize = inject(NZ_FORM_SIZE, { optional: true });
formVariant = inject(NZ_FORM_VARIANT, { optional: true });
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()), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
type = computed(() => {
if (this.inputPasswordDir) {
return this.inputPasswordDir.nzVisible() ? 'text' : 'password';
}
if (this.inputSearchDir) {
return 'search';
}
return this.elementRef.nativeElement.getAttribute('type') || 'text';
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
focused = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
finalSize = computed(() => {
if (this.formSize?.()) {
return this.formSize();
}
if (this.compactSize) {
return this.compactSize();
}
return this.size();
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "finalSize" }] : /* istanbul ignore next */ []));
finalVariant = computed(() => this.nzVariant() || this.formVariant?.() || 'outlined', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "finalVariant" }] : /* istanbul ignore next */ []));
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(startWith(this.ngControl?.control?.value), takeUntilDestroyed(this.destroyRef))
.subscribe(value => {
this.nativeValue.set(value ?? '');
});
}
onInput(event) {
this.nativeValue.set(event.target.value);
}
renderFeedbackIcon() {
if (!this.status() || !this.hasFeedback() || this.inputWrapper) {
// 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.setInput('status', this.status());
}
focus(options) {
triggerFocus(this.elementRef.nativeElement, options);
}
blur() {
this.elementRef.nativeElement.blur();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: NzInputDirective, isStandalone: true, selector: "input[nz-input],textarea[nz-input]", inputs: { nzVariant: { classPropertyName: "nzVariant", publicName: "nzVariant", isSignal: true, isRequired: false, transformFunction: null }, nzSize: { classPropertyName: "nzSize", publicName: "nzSize", 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: { listeners: { "input": "onInput($event)" }, properties: { "attr.type": "type()", "class": "classes()", "class.ant-input-disabled": "finalDisabled()", "class.ant-input-outlined": "finalVariant() === 'outlined'", "class.ant-input-borderless": "finalVariant() === 'borderless'", "class.ant-input-filled": "finalVariant() === 'filled'", "class.ant-input-underlined": "finalVariant() === '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-focused": "focused()" }, classAttribute: "ant-input" }, providers: [{ provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }], exportAs: ["nzInput"], hostDirectives: [{ directive: i1.NzSpaceCompactItemDirective }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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-outlined]': `finalVariant() === 'outlined'`,
'[class.ant-input-borderless]': `finalVariant() === 'borderless'`,
'[class.ant-input-filled]': `finalVariant() === 'filled'`,
'[class.ant-input-underlined]': `finalVariant() === 'underlined'`,
'[class.ant-input-lg]': `finalSize() === 'large'`,
'[class.ant-input-sm]': `finalSize() === 'small'`,
'[attr.disabled]': 'finalDisabled() || null',
'[attr.readonly]': 'readonly() || null',
'(input)': 'onInput($event)',
'[class.ant-input-rtl]': `dir() === 'rtl'`,
'[class.ant-input-focused]': 'focused()'
},
hostDirectives: [NzSpaceCompactItemDirective],
providers: [{ provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }]
}]
}], ctorParameters: () => [], propDecorators: { nzVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzVariant", required: false }] }], nzSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzSize", required: false }] }], nzStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzStatus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
/**
* 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: "22.0.6", ngImport: i0, type: NzInputOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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) {
<input
nz-input
class="ant-otp-input"
type="text"
maxlength="1"
size="1"
[nzSize]="nzSize"
[formControl]="item"
[nzStatus]="nzStatus"
(input)="onInput($index, $event)"
(focus)="onFocus($event)"
(keydown)="onKeyDown($index, $event)"
(paste)="onPaste($index, $event)"
#otpInput
/>
}
`, isInline: true, dependencies: [{ kind: "directive", type: NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzVariant", "nzSize", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputOtpComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-input-otp',
exportAs: 'nzInputOtp',
encapsulation: ViewEncapsulation.None,
template: `
@for (item of otpArray.controls; track $index) {
<input
nz-input
class="ant-otp-input"
type="text"
maxlength="1"
size="1"
[nzSize]="nzSize"
[formControl]="item"
[nzStatus]="nzStatus"
(input)="onInput($index, $event)"
(focus)="onFocus($event)"
(keydown)="onKeyDown($index, $event)"
(paste)="onPaste($index, $event)"
#otpInput
/>
}
`,
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 NzInputSearchDirective {
inputDir = contentChild.required(NzInputDirective, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "inputDir" }] : /* istanbul ignore next */ []));
inputRef = contentChild.required(NzInputDirective, { ...(ngDevMode ? { debugName: "inputRef" } : /* istanbul ignore next */ {}), read: ElementRef });
nzEnterButton = input(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "nzEnterButton" }] : /* istanbul ignore next */ []));
nzLoading = input(false, { ...(ngDevMode ? { debugName: "nzLoading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
nzSearch = output();
size = computed(() => this.inputDir().nzSize(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
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: "22.0.6", ngImport: i0, type: NzInputSearchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.6", 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" }, providers: [{ provide: NZ_INPUT_SEARCH, useExisting: forwardRef(() => NzInputSearchDirective) }], 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: "22.0.6", ngImport: i0, type: NzInputSearchDirective, decorators: [{
type: Directive,
args: [{
selector: 'nz-input-search',
exportAs: 'nzInputSearch',
providers: [{ provide: NZ_INPUT_SEARCH, useExisting: forwardRef(() => NzInputSearchDirective) }],
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))'
}
}]
}], propDecorators: { inputDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NzInputDirective), { isSignal: true }] }], inputRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NzInputDirective), { ...{ read: ElementRef }, isSignal: true }] }], nzEnterButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzEnterButton", required: false }] }], nzLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzLoading", required: false }] }], nzSearch: [{ type: i0.Output, args: ["nzSearch"] }] } });
class NzInputSearchEnterButtonDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputSearchEnterButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NzInputSearchEnterButtonDirective, isStandalone: true, selector: "[nzInputSearchEnterButton]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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
*/
class NzInputWrapperComponent {
focusMonitor = inject(FocusMonitor);
inputPasswordDir = inject(NzInputPasswordDirective, { self: true, optional: true });
inputSearchDir = inject(NzInputSearchDirective, { self: true, optional: true });
inputRef = contentChild.required(NzInputDirective, { ...(ngDevMode ? { debugName: "inputRef" } : /* istanbul ignore next */ {}), read: ElementRef });
inputDir = contentChild.required(NzInputDirective, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "inputDir" }] : /* istanbul ignore next */ []));
prefix = contentChild(NzInputPrefixDirective, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
suffix = contentChild(NzInputSuffixDirective, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
addonBefore = contentChild(NzInputAddonBeforeDirective, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "addonBefore" }] : /* istanbul ignore next */ []));
addonAfter = contentChild(NzInputAddonAfterDirective, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "addonAfter" }] : /* istanbul ignore next */ []));
inputPasswordIconTmpl = contentChild(NzInputPasswordIconDirective, { ...(ngDevMode ? { debugName: "inputPasswordIconTmpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
inputSearchEnterButton = contentChild(NzInputSearchEnterButtonDirective, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "inputSearchEnterButton" }] : /* istanbul ignore next */ []));
nzAllowClear = input(false, { ...(ngDevMode ? { debugName: "nzAllowClear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
nzPrefix = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "nzPrefix" }] : /* istanbul ignore next */ []));
nzSuffix = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "nzSuffix" }] : /* istanbul ignore next */ []));
nzAddonBefore = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "nzAddonBefore" }] : /* istanbul ignore next */ []));
nzAddonAfter = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "nzAddonAfter" }] : /* istanbul ignore next */ []));
nzShowCount = input(false, { ...(ngDevMode ? { debugName: "nzShowCount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
nzCount = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "nzCount" }] : /* istanbul ignore next */ []));
nzClear = output();
size = computed(() => this.inputDir().nzSize(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
variant = computed(() => this.inputDir().nzVariant(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
disabled = computed(() => this.inputDir().finalDisabled(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
readOnly = computed(() => this.inputDir().readonly(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
status = computed(() => this.inputDir().status(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
hasFeedback = computed(() => this.inputDir().hasFeedback(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "hasFeedback" }] : /* istanbul ignore next */ []));
hasPrefix = computed(() => !!this.nzPrefix() || !!this.prefix(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
hasSuffix = computed(() => !!this.nzSuffix() ||
!!this.suffix() ||
this.nzAllowClear() ||
this.hasFeedback() ||
this.nzShowCount() ||
this.inputPasswordDir, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
hasAffix = computed(() => this.hasPrefix() || this.hasSuffix(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "hasAffix" }] : /* istanbul ignore next */ []));
hasAddonBefore = computed(() => !!this.nzAddonBefore() || !!this.addonBefore(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "hasAddonBefore" }] : /* istanbul ignore next */ []));
hasAddonAfter = computed(() => !!this.nzAddonAfter() || !!this.addonAfter() || !!this.inputSearchDir, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "hasAddonAfter" }] : /* istanbul ignore next */ []));
hasAddon = computed(() => this.hasAddonBefore() || this.hasAddonAfter(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "hasAddon" }] : /* istanbul ignore next */ []));
compactSize = inject(NZ_SPACE_COMPACT_SIZE, { optional: true });
dir = inject(Directionality).valueSignal;
focused = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
isTextarea = computed(() => this.inputRef().nativeElement instanceof HTMLTextAreaElement, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isTextarea" }] : /* istanbul ignore next */ []));
finalSize = computed(() => {
if (this.compactSize) {
return this.compactSize();
}
return this.size();
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "finalSize" }] : /* istanbul ignore next */ []));
class = computed(() => {
if (this.hasAddon()) {
return this.groupWrapperClass();
}
if (this.hasAffix()) {
return this.affixWrapperClass();
}
return null;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
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())
};
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "affixWrapperClass" }] : /* istanbul ignore next */ []));
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())
};
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "groupWrapperClass" }] : /* istanbul ignore next */ []));
inputValue = toSignal(toObservable(this.inputDir).pipe(switchMap(inputDir => {
const ngControl = inputDir.ngControl;
if (!ngControl)
return EMPTY;
return (ngControl.valueChanges ?? EMPTY).pipe(startWith$1(ngControl.value));
})));
formattedValue = computed(() => {
const countConfig = this.nzCount();
const inputValue = this.inputValue();
const countMax = countConfig?.max ?? 0;
const value = isNotNil(inputValue) ? String(inputValue) : '';
let formattedValue = value;
if (countConfig?.exceedFormatter) {
formattedValue = countConfig.exceedFormatter(value, { max: countMax });
}
return formattedValue;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
computedCount = computed(() => {
const countConfig = this.nzCount();
const formattedValue = this.formattedValue();
let computedCount = formattedValue.length;
if (countConfig?.strategy) {
computedCount = countConfig.strategy(formattedValue);
}
return computedCount;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "computedCount" }] : /* istanbul ignore next */ []));
dataCount = computed(() => {
const countConfig = this.nzCount();
const computedCount = this.computedCount();
const countMax = countConfig?.max;
return `${computedCount}${countMax ? `/${countMax}` : ``}`;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dataCount" }] : /* istanbul ignore next */ []));
isOutOfRange = computed(() => {
const countConfig = this.nzCount();
const countMax = countConfig?.max;
if (isNumberFinite(countMax)) {
return this.computedCount() > countMax;
}
return false;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isOutOfRange" }] : /* istanbul ignore next */ []));
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);
});
});
effect(() => {
if (this.nzCount()) {
const inputValue = this.inputValue();
const formattedValue = this.formattedValue();
if (isNotNil(inputValue) && formattedValue !== inputValue) {
this.inputDir().ngControl?.control?.setValue(formattedValue);
}
}
});
}
clear() {
this.inputDir().ngControl?.control?.setValue('');
this.nzClear.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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 }, nzShowCount: { classPropertyName: "nzShowCount", publicName: "nzShowCount", isSignal: true, isRequired: false, transformFunction: null }, nzCount: { classPropertyName: "nzCount", publicName: "nzCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nzClear: "nzClear" }, host: { properties: { "class": "class()", "class.ant-input-disabled": "disabled()", "class.ant-input-out-of-range": "nzShowCount() && isOutOfRange()", "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.NzSpaceCompactItemDirective }], ngImport: i0, template: `
@if (hasAddon()) {
<ng-template [ngTemplateOutlet]="inputWithAddonInner" />
} @else if (hasAffix()) {
<ng-template [ngTemplateOutlet]="inputWithAffixInner" />
} @else {
<ng-template [ngTemplateOutlet]="input" />
}
<ng-template #inputWithAddonInner>
<span class="ant-input-wrapper ant-input-group">
@if (hasAddonBefore()) {
<span class="ant-input-group-addon">
<ng-content select="[nzInputAddonBefore]">{{ nzAddonBefore() }}</ng-content>
</span>
}
@if (hasAffix()) {
<ng-template [ngTemplateOutlet]="inputWithAffix" />
} @else {
<ng-template [ngTemplateOutlet]="input" />
}
@if (hasAddonAfter()) {
<span class="ant-input-group-addon">
@if (inputSearchDir) {
@let nzEnterButton = inputSearchDir.nzEnterButton();
@let hasEnterButton = inputSearchEnterButton() ?? nzEnterButton !== false;
<button
nz-button
[nzType]="hasEnterButton ? 'primary' : 'default'"
[nzSize]="size()"
[nzLoading]="inputSearchDir.nzLoading()"
type="button"
class="ant-input-search-button"
(click)="inputSearchDir.search($event)"
>
<ng-content select="[nzInputSearchEnterButton]">
@if (nzEnterButton && typeof nzEnterButton === 'string') {
{{ nzEnterButton }}
} @else {
<nz-icon nzType="search" nzTheme="outline" />
}
</ng-content>
</button>
}
<ng-content select="[nzInputAddonAfter]">{{ nzAddonAfter() }}</ng-content>
</span>
}
</span>
</ng-template>
<ng-template #inputWithAffix>
<span [class]="affixWrapperClass()">
<ng-template [ngTemplateOutlet]="inputWithAffixInner" />
</span>
</ng-template>
<ng-template #inputWithAffixInner>
@if (hasPrefix()) {
<span class="ant-input-prefix">
<ng-content select="[nzInputPrefix]">{{ nzPrefix() }}</ng-content>
</span>
}
<ng-template [ngTemplateOutlet]="input" />
@if (hasSuffix()) {
<span class="ant-input-suffix">
@if (nzAllowClear()) {
<span
class="ant-input-clear-icon"
[class.ant-input-clear-icon-has-suffix]="
nzSuffix() || suffix() || hasFeedback() || inputPasswordDir?.nzVisibilityToggle()
"
[class.ant-input-clear-icon-hidden]="!inputDir().value() || disabled() || readOnly()"
role="button"
tabindex="-1"
(click)="clear(); inputSearchDir?.search($event, 'clear')"
>
<ng-content select="[nzInputClearIcon]">
<nz-icon nzType="close-circle" nzTheme="fill" />
</ng-content>
</span>
}
@if (nzShowCount()) {
<span class="ant-input-show-count-suffix">{{ dataCount() }}</span>
}
@if (inputPasswordDir && inputPasswordDir.nzVisibilityToggle()) {
<span
class="ant-input-password-icon"
role="button"
tabindex="-1"
(click)="inputPasswordDir.toggleVisible()"
>
@if (inputPasswordIconTmpl(); as tmpl) {
<ng-template
[ngTemplateOutlet]="tmpl"
[ngTemplateOutletContext]="{ $implicit: inputPasswordDir.nzVisible() }"
/>
} @else {
<nz-icon [nzType]="inputPasswordDir.nzVisible() ? 'eye' : 'eye-invisible'" nzTheme="outline" />
}
</span>
}
<ng-content select="[nzInputSuffix]">{{ nzSuffix() }}</ng-content>
@if (hasFeedback() && status()) {
<nz-form-item-feedback-icon [status]="status()" />
}
</span>
}
</ng-template>
<ng-template #input>
<ng-content select="[nz-input]" />
</ng-template>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzType", "nzTheme", "nzTwotoneColor", "nzSpin", "nzRotate", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "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"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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()) {
<ng-template [ngTemplateOutlet]="inputWithAddonInner" />
} @else if (hasAffix()) {
<ng-template [ngTemplateOutlet]="inputWithAffixInner" />
} @else {
<ng-template [ngTemplateOutlet]="input" />
}
<ng-template #inputWithAddonInner>
<span class="ant-input-wrapper ant-input-group">
@if (hasAddonBefore()) {
<span class="ant-input-group-addon">
<ng-content select="[nzInputAddonBefore]">{{ nzAddonBefore() }}</ng-content>
</span>
}
@if (hasAffix()) {
<ng-template [ngTemplateOutlet]="inputWithAffix" />
} @else {
<ng-template [ngTemplateOutlet]="input" />
}
@if (hasAddonAfter()) {
<span class="ant-input-group-addon">
@if (inputSearchDir) {
@let nzEnterButton = inputSearchDir.nzEnterButton();
@let hasEnterButton = inputSearchEnterButton() ?? nzEnterButton !== false;
<button
nz-button
[nzType]="hasEnterButton ? 'primary' : 'default'"
[nzSize]="size()"
[nzLoading]="inputSearchDir.nzLoading()"
type="button"
class="ant-input-search-button"
(click)="inputSearchDir.search($event)"
>
<ng-content select="[nzInputSearchEnterButton]">
@if (nzEnterButton && typeof nzEnterButton === 'string') {
{{ nzEnterButton }}
} @else {
<nz-icon nzType="search" nzTheme="outline" />
}
</ng-content>
</button>
}
<ng-content select="[nzInputAddonAfter]">{{ nzAddonAfter() }}</ng-content>
</span>
}
</span>
</ng-template>
<ng-template #inputWithAffix>
<span [class]="affixWrapperClass()">
<ng-template [ngTemplateOutlet]="inputWithAffixInner" />
</span>
</ng-template>
<ng-template #inputWithAffixInner>
@if (hasPrefix()) {
<span class="ant-input-prefix">
<ng-content select="[nzInputPrefix]">{{ nzPrefix() }}</ng-content>
</span>
}
<ng-template [ngTemplateOutlet]="input" />
@if (hasSuffix()) {
<span class="ant-input-suffix">
@if (nzAllowClear()) {
<span
class="ant-input-clear-icon"
[class.ant-input-clear-icon-has-suffix]="
nzSuffix() || suffix() || hasFeedback() || inputPasswordDir?.nzVisibilityToggle()
"
[class.ant-input-clear-icon-hidden]="!inputDir().value() || disabled() || readOnly()"
role="button"
tabindex="-1"
(click)="clear(); inputSearchDir?.search($event, 'clear')"
>
<ng-content select="[nzInputClearIcon]">
<nz-icon nzType="close-circle" nzTheme="fill" />
</ng-content>
</span>
}
@if (nzShowCount()) {
<span class="ant-input-show-count-suffix">{{ dataCount() }}</span>
}
@if (inputPasswordDir && inputPasswordDir.nzVisibilityToggle()) {
<span
class="ant-input-password-icon"
role="button"
tabindex="-1"
(click)="inputPasswordDir.toggleVisible()"
>
@if (inputPasswordIconTmpl(); as tmpl) {
<ng-template
[ngTemplateOutlet]="tmpl"
[ngTemplateOutletContext]="{ $implicit: inputPasswordDir.nzVisible() }"
/>
} @else {
<nz-icon [nzType]="inputPasswordDir.nzVisible() ? 'eye' : 'eye-invisible'" nzTheme="outline" />
}
</span>
}
<ng-content select="[nzInputSuffix]">{{ nzSuffix() }}</ng-content>
@if (hasFeedback() && status()) {
<nz-form-item-feedback-icon [status]="status()" />
}
</span>
}
</ng-template>
<ng-template #input>
<ng-content select="[nz-input]" />
</ng-template>
`,
providers: [
{ provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' },
{ provide: NZ_INPUT_WRAPPER, useExisting: forwardRef(() => NzInputWrapperComponent) }
],
encapsulation: ViewEncapsulation.None,
hostDirectives: [NzSpaceCompactItemDirective],
host: {
'[class]': 'class()',
'[class.ant-input-disabled]': 'disabled()',
'[class.ant-input-out-of-range]': 'nzShowCount() && isOutOfRange()',
'[class.ant-input-affix-wrapper-textarea-with-clear-btn]': 'nzAllowClear() && isTextarea()'
}
}]
}], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NzInputDirective), { ...{ read: ElementRef }, isSignal: true }] }], inputDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NzInputDirective), { isSignal: true }] }], prefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NzInputPrefixDirective), { isSignal: true }] }], suffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NzInputSuffixDirective), { isSignal: true }] }], addonBefore: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NzInputAddonBeforeDirective), { isSignal: true }] }], addonAfter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NzInputAddonAfterDirective), { isSignal: true }] }], inputPasswordIconTmpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NzInputPasswordIconDirective), { ...{ read: TemplateRef }, isSignal: true }] }], inputSearchEnterButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NzInputSearchEnterButtonDirective), { isSignal: true }] }], nzAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzAllowClear", required: false }] }], nzPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzPrefix", required: false }] }], nzSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzSuffix", required: false }] }], nzAddonBefore: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzAddonBefore", required: false }] }], nzAddonAfter: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzAddonAfter", required: false }] }], nzShowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzShowCount", required: false }] }], nzCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "nzCount", required: false }] }], nzClear: [{ type: i0.Output, args: ["nzClear"] }] } });
/**
* 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);
injector = inject(Injector);
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.');
}
effect(() => this.setDataCount(this.nzInputDirective.value()), { injector: this.injector });
}
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: "22.0.6", ngImport: i0, type: NzTextareaCountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.6", 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]" />`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzTextareaCountComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-textarea-count',
template: `<ng-content select="textarea[nz-input]" />`,
host: {
class: 'ant-input-textarea-show-count'
}
}]
}], 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: "22.0.6", ngImport: i0, type: NzInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: NzInputModule, imports: [NzTextareaCountComponent,
NzInputDirective,
NzInputWrapperComponent,
NzInputPasswordDirective,
NzInputPasswordIconDirective,
NzInputSearchDirective,
NzInputSearchEnterButtonDirective,
NzInputAddonBeforeDirective,
NzInputAddonAfterDirective,
NzInputPrefixDirective,
NzInputSuffixDirective,
NzInputOtpComponent], exports: [NzTextareaCountComponent,
NzInputDirective,
NzInputWrapperComponent,
NzInputPasswordDirective,
NzInputPasswordIconDirective,
NzInputSearchDirective,
NzInputSearchEnterButtonDirective,
NzInputAddonBeforeDirective,
NzInputAddonAfterDirective,
NzInputPrefixDirective,
NzInputSuffixDirective,
NzInputOtpComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputModule, imports: [NzInputWrapperComponent,
NzInputOtpComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzInputModule, decorators: [{
type: NgModule,
args: [{
imports: [
NzTextareaCountComponent,
NzInputDirective,
NzInputWrapperComponent,
NzInputPasswordDirective,
NzInputPasswordIconDirective,
NzInputSearchDirective,
NzInputSearchEnterButtonDirective,
NzInputAddonBeforeDirective,
NzInputAddonAfterDirective,
NzInputPrefixDirective,
NzInputSuffixDirective,
NzInputOtpComponent
],
exports: [
NzTextareaCountComponent,
NzInputDirective,
NzInputWrapperComponent,
NzInputPasswordDirective,
NzInputPasswordIconDirective,
NzInputSearchDirective,
NzInputSearchEnterButtonDirective,
NzInputAddonBeforeDirective,
NzInputAddonAfterDirective,
NzInputPrefixDirective,
NzInputSuffixDirective,
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_SEARCH, NZ_INPUT_WRAPPER, NzInputAddonAfterDirective, NzInputAddonBeforeDirective, NzInputDirective, NzInputModule, NzInputOtpComponent, NzInputPasswordDirective, NzInputPasswordIconDirective, NzInputPrefixDirective, NzInputSearchDirective, NzInputSearchEnterButtonDirective, NzInputSuffixDirective, NzInputWrapperComponent, NzTextareaCountComponent };
//# sourceMappingURL=ng-zorro-antd-input.mjs.map