UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

592 lines (584 loc) 20.9 kB
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