ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
592 lines (584 loc) • 20.9 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Directive, Renderer2, ElementRef, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, NgZone, NgModule } from '@angular/core';
import { InputBoolean, NzDomEventService, NzAddOnModule } from 'ng-zorro-antd/core';
import { CommonModule } from '@angular/common';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { Subject } from 'rxjs';
import { takeUntil, finalize } from 'rxjs/operators';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzInputDirective {
/**
* @param {?} renderer
* @param {?} elementRef
*/
constructor(renderer, elementRef) {
this.nzSize = 'default';
this.disabled = false;
renderer.addClass(elementRef.nativeElement, 'ant-input');
}
}
NzInputDirective.decorators = [
{ type: Directive, args: [{
selector: '[nz-input]',
exportAs: 'nzInput',
host: {
'[class.ant-input-disabled]': 'disabled',
'[class.ant-input-lg]': `nzSize === 'large'`,
'[class.ant-input-sm]': `nzSize === 'small'`
}
},] }
];
/** @nocollapse */
NzInputDirective.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef }
];
NzInputDirective.propDecorators = {
nzSize: [{ type: Input }],
disabled: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzInputDirective.prototype, "disabled", void 0);
if (false) {
/** @type {?} */
NzInputDirective.prototype.nzSize;
/** @type {?} */
NzInputDirective.prototype.disabled;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzInputGroupComponent {
constructor() {
this._size = 'default';
this.nzSearch = false;
this.nzCompact = false;
}
/**
* @param {?} value
* @return {?}
*/
set nzSize(value) {
this._size = value;
this.updateChildrenInputSize();
}
/**
* @return {?}
*/
get nzSize() {
return this._size;
}
/**
* @return {?}
*/
get isLarge() {
return this.nzSize === 'large';
}
/**
* @return {?}
*/
get isSmall() {
return this.nzSize === 'small';
}
/**
* @return {?}
*/
get isAffix() {
return !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon);
}
/**
* @return {?}
*/
get isAddOn() {
return !!(this.nzAddOnAfter || this.nzAddOnBefore || this.nzAddOnAfterIcon || this.nzAddOnBeforeIcon);
}
/**
* @return {?}
*/
get isAffixWrapper() {
return this.isAffix && !this.isAddOn;
}
/**
* @return {?}
*/
get isGroup() {
return !this.isAffix && !this.isAddOn;
}
/**
* @return {?}
*/
get isLargeGroup() {
return this.isGroup && this.isLarge;
}
/**
* @return {?}
*/
get isLargeGroupWrapper() {
return this.isAddOn && this.isLarge;
}
/**
* @return {?}
*/
get isLargeAffix() {
return this.isAffixWrapper && this.isLarge;
}
/**
* @return {?}
*/
get isLargeSearch() {
return this.nzSearch && this.isLarge;
}
/**
* @return {?}
*/
get isSmallGroup() {
return this.isGroup && this.isSmall;
}
/**
* @return {?}
*/
get isSmallAffix() {
return this.isAffixWrapper && this.isSmall;
}
/**
* @return {?}
*/
get isSmallGroupWrapper() {
return this.isAddOn && this.isSmall;
}
/**
* @return {?}
*/
get isSmallSearch() {
return this.nzSearch && this.isSmall;
}
/**
* @return {?}
*/
updateChildrenInputSize() {
if (this.listOfNzInputDirective) {
this.listOfNzInputDirective.forEach((/**
* @param {?} item
* @return {?}
*/
item => (item.nzSize = this.nzSize)));
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.updateChildrenInputSize();
}
}
NzInputGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-input-group',
exportAs: 'nzInputGroup',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: "<span class=\"ant-input-wrapper ant-input-group\" *ngIf=\"isAddOn\">\n <span class=\"ant-input-group-addon\" *ngIf=\"nzAddOnBefore || nzAddOnBeforeIcon\">\n <i nz-icon [nzType]=\"nzAddOnBeforeIcon\" *ngIf=\"nzAddOnBeforeIcon\"></i>\n <ng-container *nzStringTemplateOutlet=\"nzAddOnBefore\">{{ nzAddOnBefore }}</ng-container>\n </span>\n <ng-container *ngIf=\"!isAffix\">\n <ng-template *ngTemplateOutlet=\"contentTemplate\"></ng-template>\n </ng-container>\n <span class=\"ant-input-affix-wrapper\" [class.ant-input-affix-wrapper-sm]=\"isSmall\" [class.ant-input-affix-wrapper-lg]=\"isLarge\" *ngIf=\"isAffix\">\n <ng-template *ngTemplateOutlet=\"affixTemplate\"></ng-template>\n </span>\n <span class=\"ant-input-group-addon\" *ngIf=\"nzAddOnAfter || nzAddOnAfterIcon\">\n <i nz-icon [nzType]=\"nzAddOnAfterIcon\" *ngIf=\"nzAddOnAfterIcon\"></i>\n <ng-container *nzStringTemplateOutlet=\"nzAddOnAfter\">{{ nzAddOnAfter }}</ng-container>\n </span>\n</span>\n<ng-container *ngIf=\"isAffix && !isAddOn\">\n <ng-template *ngTemplateOutlet=\"affixTemplate\"></ng-template>\n</ng-container>\n<ng-template #affixTemplate>\n <span class=\"ant-input-prefix\" *ngIf=\"nzPrefix || nzPrefixIcon\">\n <!-- TODO: should have a class to set its color, cc: antd-->\n <i nz-icon [nzType]=\"nzPrefixIcon\" *ngIf=\"nzPrefixIcon\" style=\"color: rgba(0, 0, 0, 0.25)\"></i>\n <ng-container *nzStringTemplateOutlet=\"nzPrefix\">{{ nzPrefix }}</ng-container>\n </span>\n <ng-template *ngTemplateOutlet=\"contentTemplate\"></ng-template>\n <span class=\"ant-input-suffix\" *ngIf=\"nzSuffix || nzSuffixIcon\">\n <i nz-icon [nzType]=\"nzSuffixIcon\" *ngIf=\"nzSuffixIcon\"></i>\n <ng-container *nzStringTemplateOutlet=\"nzSuffix\">{{ nzSuffix }}</ng-container>\n </span>\n</ng-template>\n<ng-container *ngIf=\"isGroup\">\n <ng-template *ngTemplateOutlet=\"contentTemplate\"></ng-template>\n</ng-container>\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n",
host: {
'[class.ant-input-group-compact]': 'nzCompact',
'[class.ant-input-search-enter-button]': 'nzSearch',
'[class.ant-input-search]': 'nzSearch',
'[class.ant-input-search-sm]': 'isSmallSearch',
'[class.ant-input-affix-wrapper]': 'isAffixWrapper',
'[class.ant-input-group-wrapper]': 'isAddOn',
'[class.ant-input-group]': 'isGroup',
'[class.ant-input-group-lg]': 'isLargeGroup',
'[class.ant-input-group-wrapper-lg]': 'isLargeGroupWrapper',
'[class.ant-input-affix-wrapper-lg]': 'isLargeAffix',
'[class.ant-input-search-lg]': 'isLargeSearch',
'[class.ant-input-group-sm]': 'isSmallGroup',
'[class.ant-input-affix-wrapper-sm]': 'isSmallAffix',
'[class.ant-input-group-wrapper-sm]': 'isSmallGroupWrapper'
}
}] }
];
NzInputGroupComponent.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 }],
nzSuffix: [{ type: Input }],
nzSearch: [{ type: Input }],
nzCompact: [{ type: Input }],
nzSize: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzInputGroupComponent.prototype, "nzSearch", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzInputGroupComponent.prototype, "nzCompact", void 0);
if (false) {
/** @type {?} */
NzInputGroupComponent.prototype.listOfNzInputDirective;
/**
* @type {?}
* @private
*/
NzInputGroupComponent.prototype._size;
/** @type {?} */
NzInputGroupComponent.prototype.nzAddOnBeforeIcon;
/** @type {?} */
NzInputGroupComponent.prototype.nzAddOnAfterIcon;
/** @type {?} */
NzInputGroupComponent.prototype.nzPrefixIcon;
/** @type {?} */
NzInputGroupComponent.prototype.nzSuffixIcon;
/** @type {?} */
NzInputGroupComponent.prototype.nzAddOnBefore;
/** @type {?} */
NzInputGroupComponent.prototype.nzAddOnAfter;
/** @type {?} */
NzInputGroupComponent.prototype.nzPrefix;
/** @type {?} */
NzInputGroupComponent.prototype.nzSuffix;
/** @type {?} */
NzInputGroupComponent.prototype.nzSearch;
/** @type {?} */
NzInputGroupComponent.prototype.nzCompact;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function AutoSizeType() { }
if (false) {
/** @type {?|undefined} */
AutoSizeType.prototype.minRows;
/** @type {?|undefined} */
AutoSizeType.prototype.maxRows;
}
/**
* @param {?} value
* @return {?}
*/
function isAutoSizeType(value) {
return typeof value !== 'string' && typeof value !== 'boolean' && (!!value.maxRows || !!value.minRows);
}
class NzAutosizeDirective {
/**
* @param {?} elementRef
* @param {?} ngZone
* @param {?} platform
* @param {?} nzDomEventService
*/
constructor(elementRef, ngZone, platform, nzDomEventService) {
this.elementRef = elementRef;
this.ngZone = ngZone;
this.platform = platform;
this.nzDomEventService = nzDomEventService;
this.autosize = false;
this.el = this.elementRef.nativeElement;
this.destroy$ = new Subject();
this.inputGap = 10;
}
/**
* @param {?} value
* @return {?}
*/
set nzAutosize(value) {
if (typeof value === 'string') {
this.autosize = true;
}
else if (isAutoSizeType(value)) {
this.autosize = value;
this.minRows = value.minRows;
this.maxRows = value.maxRows;
this.setMaxHeight();
this.setMinHeight();
}
}
/**
* @return {?}
*/
get nzAutosize() {
return this.autosize;
}
/**
* @param {?=} force
* @return {?}
*/
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;
}
/** @type {?} */
const textarea = (/** @type {?} */ (this.el));
/** @type {?} */
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;
}
/** @type {?} */
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('cdk-textarea-autosize-measuring');
textarea.placeholder = '';
/** @type {?} */
const height = Math.round((textarea.scrollHeight - this.inputGap) / this.cachedLineHeight) * this.cachedLineHeight +
this.inputGap;
// Use the scrollHeight to know how large the textarea *would* be if fit its entire value.
textarea.style.height = `${height}px`;
textarea.classList.remove('cdk-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((/**
* @return {?}
*/
() => requestAnimationFrame((/**
* @return {?}
*/
() => {
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.destroy$.isStopped && document.activeElement === textarea) {
textarea.setSelectionRange(selectionStart, selectionEnd);
}
}))));
}
this.previousValue = value;
this.previousMinRows = this.minRows;
}
/**
* @private
* @return {?}
*/
cacheTextareaLineHeight() {
if (this.cachedLineHeight >= 0 || !this.el.parentNode) {
return;
}
// Use a clone element because we have to override some styles.
/** @type {?} */
const textareaClone = (/** @type {?} */ (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';
(/** @type {?} */ (this.el.parentNode)).appendChild(textareaClone);
this.cachedLineHeight = textareaClone.clientHeight - this.inputGap - 1;
(/** @type {?} */ (this.el.parentNode)).removeChild(textareaClone);
// Min and max heights have to be re-calculated if the cached line height changes
this.setMinHeight();
this.setMaxHeight();
}
/**
* @return {?}
*/
setMinHeight() {
/** @type {?} */
const minHeight = this.minRows && this.cachedLineHeight ? `${this.minRows * this.cachedLineHeight + this.inputGap}px` : null;
if (minHeight) {
this.el.style.minHeight = minHeight;
}
}
/**
* @return {?}
*/
setMaxHeight() {
/** @type {?} */
const maxHeight = this.maxRows && this.cachedLineHeight ? `${this.maxRows * this.cachedLineHeight + this.inputGap}px` : null;
if (maxHeight) {
this.el.style.maxHeight = maxHeight;
}
}
/**
* @return {?}
*/
noopInputHandler() {
// no-op handler that ensures we're running change detection on input events.
}
/**
* @return {?}
*/
ngAfterViewInit() {
if (this.nzAutosize && this.platform.isBrowser) {
this.resizeToFitContent();
this.nzDomEventService
.registerResizeListener()
.pipe(takeUntil(this.destroy$), finalize((/**
* @return {?}
*/
() => this.nzDomEventService.unregisterResizeListener())))
.subscribe((/**
* @return {?}
*/
() => this.resizeToFitContent(true)));
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
/**
* @return {?}
*/
ngDoCheck() {
if (this.nzAutosize && this.platform.isBrowser) {
this.resizeToFitContent();
}
}
}
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()'
}
},] }
];
/** @nocollapse */
NzAutosizeDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone },
{ type: Platform },
{ type: NzDomEventService }
];
NzAutosizeDirective.propDecorators = {
nzAutosize: [{ type: Input }]
};
if (false) {
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.autosize;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.el;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.cachedLineHeight;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.previousValue;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.previousMinRows;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.minRows;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.maxRows;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.destroy$;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.inputGap;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.elementRef;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.ngZone;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.platform;
/**
* @type {?}
* @private
*/
NzAutosizeDirective.prototype.nzDomEventService;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzInputModule {
}
NzInputModule.decorators = [
{ type: NgModule, args: [{
declarations: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective],
exports: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective],
imports: [CommonModule, NzIconModule, PlatformModule, NzAddOnModule]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzAutosizeDirective, NzInputDirective, NzInputGroupComponent, NzInputModule, isAutoSizeType };
//# sourceMappingURL=ng-zorro-antd-input.js.map