UNPKG

ng-zorro-antd

Version:

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

740 lines (731 loc) 25.3 kB
import { __decorate, __metadata } from 'tslib'; import { FocusMonitor } from '@angular/cdk/a11y'; import { Directive, Renderer2, ElementRef, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, ContentChildren, NgZone, NgModule } from '@angular/core'; import { InputBoolean } from 'ng-zorro-antd/core/util'; import { Subject, merge } from 'rxjs'; import { takeUntil, startWith, switchMap, flatMap, map } from 'rxjs/operators'; import { Platform, PlatformModule } from '@angular/cdk/platform'; import { CommonModule } from '@angular/common'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzResizeService } from 'ng-zorro-antd/core/services'; /** * @fileoverview added by tsickle * Generated from: input.directive.ts * @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; this.disabled$ = new Subject(); renderer.addClass(elementRef.nativeElement, 'ant-input'); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { const { disabled } = changes; if (disabled) { this.disabled$.next(this.disabled); } } } NzInputDirective.decorators = [ { type: Directive, args: [{ selector: 'input[nz-input],textarea[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.ngAcceptInputType_disabled; /** @type {?} */ NzInputDirective.prototype.nzSize; /** @type {?} */ NzInputDirective.prototype.disabled; /** @type {?} */ NzInputDirective.prototype.disabled$; } /** * @fileoverview added by tsickle * Generated from: input-group.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzInputGroupComponent { /** * @param {?} focusMonitor * @param {?} elementRef * @param {?} cdr */ constructor(focusMonitor, elementRef, cdr) { this.focusMonitor = focusMonitor; this.elementRef = elementRef; this.cdr = cdr; this.nzSearch = false; this.nzCompact = false; this.isLarge = false; this.isSmall = false; this.isAffix = false; this.isAddOn = false; this.focused = false; this.disabled = false; this.destroy$ = new Subject(); } /** * @return {?} */ updateChildrenInputSize() { if (this.listOfNzInputDirective) { this.listOfNzInputDirective.forEach((/** * @param {?} item * @return {?} */ item => (item.nzSize = this.nzSize))); } } /** * @return {?} */ ngOnInit() { this.focusMonitor .monitor(this.elementRef, true) .pipe(takeUntil(this.destroy$)) .subscribe((/** * @param {?} focusOrigin * @return {?} */ focusOrigin => { this.focused = !!focusOrigin; this.cdr.markForCheck(); })); } /** * @return {?} */ ngAfterContentInit() { this.updateChildrenInputSize(); /** @type {?} */ const listOfInputChange$ = this.listOfNzInputDirective.changes.pipe(startWith(this.listOfNzInputDirective)); listOfInputChange$ .pipe(switchMap((/** * @param {?} list * @return {?} */ list => { return merge(...[listOfInputChange$, ...list.map((/** * @param {?} input * @return {?} */ (input) => input.disabled$))]); })), flatMap((/** * @return {?} */ () => listOfInputChange$)), map((/** * @param {?} list * @return {?} */ list => list.some((/** * @param {?} input * @return {?} */ (input) => input.disabled)))), takeUntil(this.destroy$)) .subscribe((/** * @param {?} disabled * @return {?} */ disabled => { this.disabled = disabled; this.cdr.markForCheck(); })); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { const { nzSize, nzSuffix, nzPrefix, nzPrefixIcon, nzSuffixIcon, nzAddOnAfter, nzAddOnBefore, nzAddOnAfterIcon, nzAddOnBeforeIcon } = 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); } } /** * @return {?} */ ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } } 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; else noAddOnTemplate"> <span *ngIf="nzAddOnBefore || nzAddOnBeforeIcon" nz-input-group-slot type="addon" [icon]="nzAddOnBeforeIcon" [template]="nzAddOnBefore" > </span> <span *ngIf="isAffix; else contentTemplate" class="ant-input-affix-wrapper" [class.ant-input-affix-wrapper-sm]="isSmall" [class.ant-input-affix-wrapper-lg]="isLarge" > <ng-template [ngTemplateOutlet]="affixTemplate"></ng-template> </span> <span *ngIf="nzAddOnAfter || nzAddOnAfterIcon" nz-input-group-slot type="addon" [icon]="nzAddOnAfterIcon" [template]="nzAddOnAfter" ></span> </span> <ng-template #noAddOnTemplate> <ng-template [ngIf]="isAffix" [ngIfElse]="contentTemplate"> <ng-template [ngTemplateOutlet]="affixTemplate"></ng-template> </ng-template> </ng-template> <ng-template #affixTemplate> <span *ngIf="nzPrefix || nzPrefixIcon" nz-input-group-slot type="prefix" [icon]="nzPrefixIcon" [template]="nzPrefix"></span> <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template> <span *ngIf="nzSuffix || nzSuffixIcon" nz-input-group-slot type="suffix" [icon]="nzSuffixIcon" [template]="nzSuffix"></span> </ng-template> <ng-template #contentTemplate> <ng-content></ng-content> </ng-template> `, host: { '[class.ant-input-group-compact]': `nzCompact`, '[class.ant-input-search-enter-button]': `nzSearch`, '[class.ant-input-search]': `nzSearch`, '[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-lg]': `isAddOn && isLarge`, '[class.ant-input-group-wrapper-sm]': `isAddOn && isSmall`, '[class.ant-input-affix-wrapper]': `isAffix && !isAddOn`, '[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-lg]': `!isAffix && !isAddOn && isLarge`, '[class.ant-input-group-sm]': `!isAffix && !isAddOn && isSmall` } }] } ]; /** @nocollapse */ NzInputGroupComponent.ctorParameters = () => [ { type: FocusMonitor }, { type: ElementRef }, { type: ChangeDetectorRef } ]; 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 }], nzSize: [{ type: Input }], nzSearch: [{ type: Input }], nzCompact: [{ 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.ngAcceptInputType_nzSearch; /** @type {?} */ NzInputGroupComponent.ngAcceptInputType_nzCompact; /** @type {?} */ NzInputGroupComponent.prototype.listOfNzInputDirective; /** @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.nzSize; /** @type {?} */ NzInputGroupComponent.prototype.nzSearch; /** @type {?} */ NzInputGroupComponent.prototype.nzCompact; /** @type {?} */ NzInputGroupComponent.prototype.isLarge; /** @type {?} */ NzInputGroupComponent.prototype.isSmall; /** @type {?} */ NzInputGroupComponent.prototype.isAffix; /** @type {?} */ NzInputGroupComponent.prototype.isAddOn; /** @type {?} */ NzInputGroupComponent.prototype.focused; /** @type {?} */ NzInputGroupComponent.prototype.disabled; /** * @type {?} * @private */ NzInputGroupComponent.prototype.destroy$; /** * @type {?} * @private */ NzInputGroupComponent.prototype.focusMonitor; /** * @type {?} * @private */ NzInputGroupComponent.prototype.elementRef; /** * @type {?} * @private */ NzInputGroupComponent.prototype.cdr; } /** * @fileoverview added by tsickle * Generated from: autosize.directive.ts * @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; } class NzAutosizeDirective { /** * @param {?} elementRef * @param {?} ngZone * @param {?} platform * @param {?} resizeService */ constructor(elementRef, ngZone, platform, resizeService) { this.elementRef = elementRef; this.ngZone = ngZone; this.platform = platform; this.resizeService = resizeService; this.autosize = false; this.el = this.elementRef.nativeElement; this.maxHeight = null; this.minHeight = null; this.destroy$ = new Subject(); this.inputGap = 10; } /** * @param {?} value * @return {?} */ set nzAutosize(value) { /** @type {?} */ const isAutoSizeType = (/** * @param {?} data * @return {?} */ (data) => { return typeof data !== 'string' && typeof data !== 'boolean' && (!!data.maxRows || !!data.minRows); }); if (typeof value === 'string') { this.autosize = true; } else if (isAutoSizeType(value)) { this.autosize = value; this.minRows = value.minRows; this.maxRows = value.maxRows; this.maxHeight = this.setMaxHeight(); this.minHeight = this.setMinHeight(); } } /** * @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('nz-textarea-autosize-measuring'); textarea.placeholder = ''; /** @type {?} */ let height = Math.round((textarea.scrollHeight - this.inputGap) / this.cachedLineHeight) * this.cachedLineHeight + this.inputGap; if (this.maxHeight !== null && height > this.maxHeight) { height = (/** @type {?} */ (this.maxHeight)); } if (this.minHeight !== null && height < this.minHeight) { height = (/** @type {?} */ (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((/** * @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; (/** @type {?} */ (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(); } /** * @return {?} */ setMinHeight() { /** @type {?} */ const minHeight = this.minRows && this.cachedLineHeight ? this.minRows * this.cachedLineHeight + this.inputGap : null; if (minHeight !== null) { this.el.style.minHeight = `${minHeight}px`; } return minHeight; } /** * @return {?} */ setMaxHeight() { /** @type {?} */ const maxHeight = this.maxRows && this.cachedLineHeight ? this.maxRows * this.cachedLineHeight + this.inputGap : null; if (maxHeight !== null) { this.el.style.maxHeight = `${maxHeight}px`; } return maxHeight; } /** * @return {?} */ noopInputHandler() { // no-op handler that ensures we're running change detection on input events. } /** * @return {?} */ ngAfterViewInit() { if (this.autosize && this.platform.isBrowser) { this.resizeToFitContent(); this.resizeService .subscribe() .pipe(takeUntil(this.destroy$)) .subscribe((/** * @return {?} */ () => this.resizeToFitContent(true))); } } /** * @return {?} */ ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } /** * @return {?} */ ngDoCheck() { if (this.autosize && 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: NzResizeService } ]; 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.maxHeight; /** * @type {?} * @private */ NzAutosizeDirective.prototype.minHeight; /** * @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.resizeService; } /** * @fileoverview added by tsickle * Generated from: input-group-slot.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzInputGroupSlotComponent { constructor() { this.icon = null; this.type = null; this.template = null; } } NzInputGroupSlotComponent.decorators = [ { type: Component, args: [{ selector: '[nz-input-group-slot]', preserveWhitespaces: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: ` <i nz-icon [nzType]="icon" *ngIf="icon"></i> <ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container> `, host: { '[class.ant-input-group-addon]': `type === 'addon'`, '[class.ant-input-prefix]': `type === 'prefix'`, '[class.ant-input-suffix]': `type === 'suffix'` } }] } ]; NzInputGroupSlotComponent.propDecorators = { icon: [{ type: Input }], type: [{ type: Input }], template: [{ type: Input }] }; if (false) { /** @type {?} */ NzInputGroupSlotComponent.prototype.icon; /** @type {?} */ NzInputGroupSlotComponent.prototype.type; /** @type {?} */ NzInputGroupSlotComponent.prototype.template; } /** * @fileoverview added by tsickle * Generated from: input.module.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzInputModule { } NzInputModule.decorators = [ { type: NgModule, args: [{ declarations: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective, NzInputGroupSlotComponent], exports: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective], imports: [CommonModule, NzIconModule, PlatformModule, NzOutletModule] },] } ]; /** * @fileoverview added by tsickle * Generated from: public-api.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * Generated from: ng-zorro-antd-input.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { NzAutosizeDirective, NzInputDirective, NzInputGroupComponent, NzInputGroupSlotComponent, NzInputModule }; //# sourceMappingURL=ng-zorro-antd-input.js.map