1546 lines
82 KiB
JavaScript
1546 lines
82 KiB
JavaScript
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) {
|
|
<nz-icon [nzType]="icon" />
|
|
}
|
|
<ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container>
|
|
<ng-content></ng-content>
|
|
`, 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) {
|
|
<nz-icon [nzType]="icon" />
|
|
}
|
|
<ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container>
|
|
<ng-content></ng-content>
|
|
`,
|
|
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 `<nz-input-wrapper>` 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) {
|
|
<span class="ant-input-wrapper ant-input-group">
|
|
@if (nzAddOnBefore || nzAddOnBeforeIcon) {
|
|
<span nz-input-group-slot type="addon" [icon]="nzAddOnBeforeIcon" [template]="nzAddOnBefore"></span>
|
|
}
|
|
|
|
@if (isAffix || hasFeedback) {
|
|
<span
|
|
class="ant-input-affix-wrapper"
|
|
[class.ant-input-affix-wrapper-disabled]="disabled"
|
|
[class.ant-input-affix-wrapper-sm]="isSmall"
|
|
[class.ant-input-affix-wrapper-lg]="isLarge"
|
|
[class.ant-input-affix-wrapper-focused]="focused"
|
|
[class]="affixInGroupStatusCls"
|
|
>
|
|
<ng-template [ngTemplateOutlet]="affixTemplate"></ng-template>
|
|
</span>
|
|
} @else {
|
|
<ng-template [ngTemplateOutlet]="contentTemplate" />
|
|
}
|
|
@if (nzAddOnAfter || nzAddOnAfterIcon) {
|
|
<span nz-input-group-slot type="addon" [icon]="nzAddOnAfterIcon" [template]="nzAddOnAfter"></span>
|
|
}
|
|
</span>
|
|
} @else {
|
|
@if (isAffix) {
|
|
<ng-template [ngTemplateOutlet]="affixTemplate" />
|
|
} @else {
|
|
<ng-template [ngTemplateOutlet]="contentTemplate" />
|
|
}
|
|
}
|
|
|
|
<!-- affix template -->
|
|
<ng-template #affixTemplate>
|
|
@if (nzPrefix || nzPrefixIcon) {
|
|
<span nz-input-group-slot type="prefix" [icon]="nzPrefixIcon" [template]="nzPrefix"></span>
|
|
}
|
|
<ng-template [ngTemplateOutlet]="contentTemplate" />
|
|
@if (nzSuffix || nzSuffixIcon || isFeedback) {
|
|
<span nz-input-group-slot type="suffix" [icon]="nzSuffixIcon" [template]="nzSuffix">
|
|
@if (isFeedback) {
|
|
<nz-form-item-feedback-icon [status]="status" />
|
|
}
|
|
</span>
|
|
}
|
|
</ng-template>
|
|
|
|
<!-- content template -->
|
|
<ng-template #contentTemplate>
|
|
<ng-content></ng-content>
|
|
@if (!isAddOn && !isAffix && isFeedback) {
|
|
<span nz-input-group-slot type="suffix">
|
|
<nz-form-item-feedback-icon [status]="status" />
|
|
</span>
|
|
}
|
|
</ng-template>
|
|
`, 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) {
|
|
<span class="ant-input-wrapper ant-input-group">
|
|
@if (nzAddOnBefore || nzAddOnBeforeIcon) {
|
|
<span nz-input-group-slot type="addon" [icon]="nzAddOnBeforeIcon" [template]="nzAddOnBefore"></span>
|
|
}
|
|
|
|
@if (isAffix || hasFeedback) {
|
|
<span
|
|
class="ant-input-affix-wrapper"
|
|
[class.ant-input-affix-wrapper-disabled]="disabled"
|
|
[class.ant-input-affix-wrapper-sm]="isSmall"
|
|
[class.ant-input-affix-wrapper-lg]="isLarge"
|
|
[class.ant-input-affix-wrapper-focused]="focused"
|
|
[class]="affixInGroupStatusCls"
|
|
>
|
|
<ng-template [ngTemplateOutlet]="affixTemplate"></ng-template>
|
|
</span>
|
|
} @else {
|
|
<ng-template [ngTemplateOutlet]="contentTemplate" />
|
|
}
|
|
@if (nzAddOnAfter || nzAddOnAfterIcon) {
|
|
<span nz-input-group-slot type="addon" [icon]="nzAddOnAfterIcon" [template]="nzAddOnAfter"></span>
|
|
}
|
|
</span>
|
|
} @else {
|
|
@if (isAffix) {
|
|
<ng-template [ngTemplateOutlet]="affixTemplate" />
|
|
} @else {
|
|
<ng-template [ngTemplateOutlet]="contentTemplate" />
|
|
}
|
|
}
|
|
|
|
<!-- affix template -->
|
|
<ng-template #affixTemplate>
|
|
@if (nzPrefix || nzPrefixIcon) {
|
|
<span nz-input-group-slot type="prefix" [icon]="nzPrefixIcon" [template]="nzPrefix"></span>
|
|
}
|
|
<ng-template [ngTemplateOutlet]="contentTemplate" />
|
|
@if (nzSuffix || nzSuffixIcon || isFeedback) {
|
|
<span nz-input-group-slot type="suffix" [icon]="nzSuffixIcon" [template]="nzSuffix">
|
|
@if (isFeedback) {
|
|
<nz-form-item-feedback-icon [status]="status" />
|
|
}
|
|
</span>
|
|
}
|
|
</ng-template>
|
|
|
|
<!-- content template -->
|
|
<ng-template #contentTemplate>
|
|
<ng-content></ng-content>
|
|
@if (!isAddOn && !isAffix && isFeedback) {
|
|
<span nz-input-group-slot type="suffix">
|
|
<nz-form-item-feedback-icon [status]="status" />
|
|
</span>
|
|
}
|
|
</ng-template>
|
|
`,
|
|
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) {
|
|
<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: ["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) {
|
|
<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 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()) {
|
|
<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 hasEnterButton = inputSearchEnterButton() ?? inputSearchDir.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 (typeof inputSearchDir.nzEnterButton() === 'string') {
|
|
{{ inputSearchDir.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 (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: 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()) {
|
|
<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 hasEnterButton = inputSearchEnterButton() ?? inputSearchDir.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 (typeof inputSearchDir.nzEnterButton() === 'string') {
|
|
{{ inputSearchDir.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 (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) }
|
|
],
|
|
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: `<ng-content select="textarea[nz-input]"></ng-content>`, 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: `<ng-content select="textarea[nz-input]"></ng-content>`,
|
|
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
|