UNPKG

ng-zorro-antd

Version:

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

782 lines (774 loc) 25.2 kB
import { Platform, PlatformModule } from '@angular/cdk/platform'; import { CommonModule } from '@angular/common'; import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input, Output, ViewChild, ViewContainerRef, Renderer2, NgModule } from '@angular/core'; import { NzCopyToClipboardService, isStyleSupport, cancelRequestAnimationFrame, reqAnimFrame, measure, NzConfigService, NzDomEventService, InputBoolean, WithConfig, InputNumber, NzTransButtonModule, NzCopyToClipboardServiceModule } from 'ng-zorro-antd/core'; import { NzI18nService, NzI18nModule } from 'ng-zorro-antd/i18n'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzAutosizeDirective, NzInputModule } from 'ng-zorro-antd/input'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; import { Subject, Subscription } from 'rxjs'; import { takeUntil, finalize } from 'rxjs/operators'; import { __decorate, __metadata } from 'tslib'; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTextCopyComponent { /** * @param {?} host * @param {?} cdr * @param {?} copyToClipboard * @param {?} i18n */ constructor(host, cdr, copyToClipboard, i18n) { this.host = host; this.cdr = cdr; this.copyToClipboard = copyToClipboard; this.i18n = i18n; this.copied = false; // tslint:disable-next-line:no-any this.locale = {}; this.nativeElement = this.host.nativeElement; this.destroy$ = new Subject(); this.textCopy = new EventEmitter(); } /** * @return {?} */ ngOnInit() { this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe((/** * @return {?} */ () => { this.locale = this.i18n.getLocaleData('Text'); this.cdr.markForCheck(); })); } /** * @return {?} */ ngOnDestroy() { clearTimeout(this.copyId); this.destroy$.next(); this.destroy$.complete(); } /** * @return {?} */ onClick() { if (this.copied) { return; } this.copied = true; this.cdr.detectChanges(); /** @type {?} */ const text = this.text; this.textCopy.emit(text); this.copyToClipboard .copy(text) .then((/** * @return {?} */ () => this.onCopied())) .catch((/** * @return {?} */ () => this.onCopied())); } /** * @return {?} */ onCopied() { clearTimeout(this.copyId); this.copyId = setTimeout((/** * @return {?} */ () => { this.copied = false; this.cdr.detectChanges(); }), 3000); } } NzTextCopyComponent.decorators = [ { type: Component, args: [{ selector: 'nz-text-copy', exportAs: 'nzTextCopy', template: "<button\n nz-tooltip\n nz-trans-button\n [nzTitle]=\"copied ? locale?.copied : locale?.copy\"\n class=\"ant-typography-copy\"\n [class.ant-typography-copy-success]=\"copied\"\n (click)=\"onClick()\">\n <i nz-icon [nzType]=\"copied ? 'check' : 'copy'\"></i>\n</button>\n\n", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false }] } ]; /** @nocollapse */ NzTextCopyComponent.ctorParameters = () => [ { type: ElementRef }, { type: ChangeDetectorRef }, { type: NzCopyToClipboardService }, { type: NzI18nService } ]; NzTextCopyComponent.propDecorators = { text: [{ type: Input }], textCopy: [{ type: Output }] }; if (false) { /** @type {?} */ NzTextCopyComponent.prototype.copied; /** @type {?} */ NzTextCopyComponent.prototype.copyId; /** @type {?} */ NzTextCopyComponent.prototype.locale; /** @type {?} */ NzTextCopyComponent.prototype.nativeElement; /** * @type {?} * @private */ NzTextCopyComponent.prototype.destroy$; /** @type {?} */ NzTextCopyComponent.prototype.text; /** @type {?} */ NzTextCopyComponent.prototype.textCopy; /** * @type {?} * @private */ NzTextCopyComponent.prototype.host; /** * @type {?} * @private */ NzTextCopyComponent.prototype.cdr; /** * @type {?} * @private */ NzTextCopyComponent.prototype.copyToClipboard; /** * @type {?} * @private */ NzTextCopyComponent.prototype.i18n; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTextEditComponent { /** * @param {?} host * @param {?} cdr * @param {?} i18n */ constructor(host, cdr, i18n) { this.host = host; this.cdr = cdr; this.i18n = i18n; this.editing = false; // tslint:disable-next-line:no-any this.locale = {}; this.destroy$ = new Subject(); this.startEditing = new EventEmitter(); this.endEditing = new EventEmitter(); this.nativeElement = this.host.nativeElement; } /** * @return {?} */ ngOnInit() { this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe((/** * @return {?} */ () => { this.locale = this.i18n.getLocaleData('Text'); this.cdr.markForCheck(); })); } /** * @return {?} */ ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } /** * @return {?} */ onClick() { this.beforeText = this.text; this.currentText = this.beforeText; this.editing = true; this.startEditing.emit(); this.focusAndSetValue(); } /** * @return {?} */ confirm() { this.editing = false; this.endEditing.emit(this.currentText); } /** * @param {?} event * @return {?} */ onInput(event) { /** @type {?} */ const target = (/** @type {?} */ (event.target)); this.currentText = target.value; } /** * @param {?} event * @return {?} */ onEnter(event) { event.stopPropagation(); event.preventDefault(); this.confirm(); } /** * @return {?} */ onCancel() { this.currentText = this.beforeText; this.confirm(); } /** * @return {?} */ focusAndSetValue() { setTimeout((/** * @return {?} */ () => { if (this.textarea && this.textarea.nativeElement) { this.textarea.nativeElement.focus(); this.textarea.nativeElement.value = this.currentText; this.autosizeDirective.resizeToFitContent(); } })); } } NzTextEditComponent.decorators = [ { type: Component, args: [{ selector: 'nz-text-edit', exportAs: 'nzTextEdit', template: "<button\n *ngIf=\"!editing\"\n [nzTitle]=\"locale?.edit\"\n nz-tooltip\n nz-trans-button\n class=\"ant-typography-edit\"\n (click)=\"onClick()\">\n <i nz-icon nzType=\"edit\"></i>\n</button>\n<ng-container *ngIf=\"editing\">\n <textarea #textarea\n nz-input\n nzAutosize\n (input)=\"onInput($event)\"\n (blur)=\"confirm()\"\n (keydown.esc)=\"onCancel()\"\n (keydown.enter)=\"onEnter($event)\">\n </textarea>\n <button nz-trans-button class=\"ant-typography-edit-content-confirm\" (click)=\"confirm()\">\n <i nz-icon nzType=\"enter\"></i>\n </button>\n</ng-container>\n", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false }] } ]; /** @nocollapse */ NzTextEditComponent.ctorParameters = () => [ { type: ElementRef }, { type: ChangeDetectorRef }, { type: NzI18nService } ]; NzTextEditComponent.propDecorators = { text: [{ type: Input }], startEditing: [{ type: Output }], endEditing: [{ type: Output }], textarea: [{ type: ViewChild, args: ['textarea', { static: false },] }], autosizeDirective: [{ type: ViewChild, args: [NzAutosizeDirective, { static: false },] }] }; if (false) { /** @type {?} */ NzTextEditComponent.prototype.editing; /** @type {?} */ NzTextEditComponent.prototype.locale; /** * @type {?} * @private */ NzTextEditComponent.prototype.destroy$; /** @type {?} */ NzTextEditComponent.prototype.text; /** @type {?} */ NzTextEditComponent.prototype.startEditing; /** @type {?} */ NzTextEditComponent.prototype.endEditing; /** @type {?} */ NzTextEditComponent.prototype.textarea; /** @type {?} */ NzTextEditComponent.prototype.autosizeDirective; /** @type {?} */ NzTextEditComponent.prototype.beforeText; /** @type {?} */ NzTextEditComponent.prototype.currentText; /** @type {?} */ NzTextEditComponent.prototype.nativeElement; /** * @type {?} * @private */ NzTextEditComponent.prototype.host; /** * @type {?} * @private */ NzTextEditComponent.prototype.cdr; /** * @type {?} * @private */ NzTextEditComponent.prototype.i18n; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTypographyComponent { /** * @param {?} nzConfigService * @param {?} host * @param {?} cdr * @param {?} viewContainerRef * @param {?} renderer * @param {?} platform * @param {?} i18n * @param {?} nzDomEventService */ constructor(nzConfigService, host, cdr, viewContainerRef, renderer, platform, i18n, nzDomEventService) { this.nzConfigService = nzConfigService; this.host = host; this.cdr = cdr; this.viewContainerRef = viewContainerRef; this.renderer = renderer; this.platform = platform; this.i18n = i18n; this.nzDomEventService = nzDomEventService; this.nzCopyable = false; this.nzEditable = false; this.nzDisabled = false; this.nzExpandable = false; this.nzEllipsis = false; this.nzContentChange = new EventEmitter(); this.nzCopy = new EventEmitter(); this.nzExpandChange = new EventEmitter(); // tslint:disable-next-line:no-any this.locale = {}; this.editing = false; this.cssEllipsis = false; this.isEllipsis = false; this.expanded = false; this.ellipsisStr = '...'; this.viewInit = false; this.rfaId = -1; this.destroy$ = new Subject(); this.windowResizeSubscription = Subscription.EMPTY; } /** * @return {?} */ get canCssEllipsis() { return this.nzEllipsis && this.cssEllipsis && !this.expanded; } /** * @return {?} */ get copyText() { return typeof this.nzCopyText === 'string' ? this.nzCopyText : this.nzContent; } /** * @param {?} text * @return {?} */ onTextCopy(text) { this.nzCopy.emit(text); } /** * @return {?} */ onStartEditing() { this.editing = true; } /** * @param {?} text * @return {?} */ onEndEditing(text) { this.editing = false; this.nzContentChange.emit(text); if (this.nzContent === text) { this.renderOnNextFrame(); } } /** * @return {?} */ onExpand() { this.expanded = true; this.nzExpandChange.emit(); } /** * @return {?} */ canUseCSSEllipsis() { if (this.nzEditable || this.nzCopyable || this.nzExpandable) { return false; } if (this.nzEllipsisRows === 1) { return isStyleSupport('textOverflow'); } else { return isStyleSupport('webkitLineClamp'); } } /** * @return {?} */ renderOnNextFrame() { cancelRequestAnimationFrame(this.rfaId); if (!this.viewInit || !this.nzEllipsis || this.nzEllipsisRows < 0 || this.expanded || !this.platform.isBrowser) { return; } this.rfaId = reqAnimFrame((/** * @return {?} */ () => { this.syncEllipsis(); })); } /** * @return {?} */ getOriginContentViewRef() { /** @type {?} */ const viewRef = this.viewContainerRef.createEmbeddedView(this.contentTemplate, { content: this.nzContent }); viewRef.detectChanges(); return { viewRef, removeView: (/** * @return {?} */ () => { this.viewContainerRef.remove(this.viewContainerRef.indexOf(viewRef)); }) }; } /** * @return {?} */ syncEllipsis() { if (this.cssEllipsis) { return; } const { viewRef, removeView } = this.getOriginContentViewRef(); /** @type {?} */ const fixedNodes = [this.textCopyRef, this.textEditRef, this.expandableBtn] .filter((/** * @param {?} e * @return {?} */ e => e && e.nativeElement)) .map((/** * @param {?} e * @return {?} */ e => e.nativeElement)); const { contentNodes, text, ellipsis } = measure(this.host.nativeElement, this.nzEllipsisRows, viewRef.rootNodes, fixedNodes, this.ellipsisStr); removeView(); this.ellipsisText = text; this.isEllipsis = ellipsis; /** @type {?} */ const ellipsisContainerNativeElement = this.ellipsisContainer.nativeElement; while (ellipsisContainerNativeElement.firstChild) { this.renderer.removeChild(ellipsisContainerNativeElement, ellipsisContainerNativeElement.firstChild); } contentNodes.forEach((/** * @param {?} n * @return {?} */ n => { this.renderer.appendChild(ellipsisContainerNativeElement, n.cloneNode(true)); })); this.cdr.markForCheck(); } /** * @private * @return {?} */ renderAndSubscribeWindowResize() { if (this.platform.isBrowser) { this.windowResizeSubscription.unsubscribe(); this.cssEllipsis = this.canUseCSSEllipsis(); this.renderOnNextFrame(); this.windowResizeSubscription = this.nzDomEventService .registerResizeListener() .pipe(takeUntil(this.destroy$), finalize((/** * @return {?} */ () => this.nzDomEventService.unregisterResizeListener()))) .subscribe((/** * @return {?} */ () => this.renderOnNextFrame())); } } /** * @return {?} */ ngOnInit() { this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe((/** * @return {?} */ () => { this.locale = this.i18n.getLocaleData('Text'); this.cdr.markForCheck(); })); } /** * @return {?} */ ngAfterViewInit() { this.viewInit = true; this.renderAndSubscribeWindowResize(); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { const { nzCopyable, nzEditable, nzExpandable, nzEllipsis, nzContent, nzEllipsisRows } = changes; if (nzCopyable || nzEditable || nzExpandable || nzEllipsis || nzContent || nzEllipsisRows) { if (this.nzEllipsis) { if (this.expanded) { this.windowResizeSubscription.unsubscribe(); } else { this.renderAndSubscribeWindowResize(); } } } } /** * @return {?} */ ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); this.windowResizeSubscription.unsubscribe(); } } NzTypographyComponent.decorators = [ { type: Component, args: [{ selector: ` nz-typography, [nz-typography], p[nz-paragraph], span[nz-text], h1[nz-title], h2[nz-title], h3[nz-title], h4[nz-title] `, exportAs: 'nzTypography', template: "<ng-template #contentTemplate let-content=\"content\">\n <ng-content *ngIf=\"!content\"></ng-content>\n {{content}}\n</ng-template>\n\n<ng-container *ngIf=\"!editing\">\n <ng-container *ngIf=\"expanded || (!nzExpandable && nzEllipsisRows === 1) || canCssEllipsis\">\n <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ content: nzContent}\"></ng-template>\n </ng-container>\n <ng-container *ngIf=\"nzEllipsis && !expanded && (nzEllipsisRows > 1 || nzExpandable)\">\n <span #ellipsisContainer></span>\n <ng-container *ngIf=\"isEllipsis\">{{ellipsisStr}}</ng-container>\n <a #expandable *ngIf=\"nzExpandable && isEllipsis\" class=\"ant-typography-expand\" (click)=\"onExpand()\">{{locale?.expand}}</a>\n </ng-container>\n</ng-container>\n\n<nz-text-edit\n *ngIf=\"nzEditable\"\n [text]=\"nzContent\"\n (endEditing)=\"onEndEditing($event)\"\n (startEditing)=\"onStartEditing()\">\n</nz-text-edit>\n\n<nz-text-copy *ngIf=\"nzCopyable && !editing\" [text]=\"copyText\" (textCopy)=\"onTextCopy($event)\"></nz-text-copy>\n\n", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: { '[class.ant-typography]': '!editing', '[class.ant-typography-edit-content]': 'editing', '[class.ant-typography-secondary]': 'nzType === "secondary"', '[class.ant-typography-warning]': 'nzType === "warning"', '[class.ant-typography-danger]': 'nzType === "danger"', '[class.ant-typography-disabled]': 'nzDisabled', '[class.ant-typography-ellipsis]': 'nzEllipsis && !expanded', '[class.ant-typography-ellipsis-single-line]': 'canCssEllipsis && nzEllipsisRows === 1', '[class.ant-typography-ellipsis-multiple-line]': 'canCssEllipsis && nzEllipsisRows > 1', '[style.-webkit-line-clamp]': '(canCssEllipsis && nzEllipsisRows > 1) ? nzEllipsisRows : null' } }] } ]; /** @nocollapse */ NzTypographyComponent.ctorParameters = () => [ { type: NzConfigService }, { type: ElementRef }, { type: ChangeDetectorRef }, { type: ViewContainerRef }, { type: Renderer2 }, { type: Platform }, { type: NzI18nService }, { type: NzDomEventService } ]; NzTypographyComponent.propDecorators = { nzCopyable: [{ type: Input }], nzEditable: [{ type: Input }], nzDisabled: [{ type: Input }], nzExpandable: [{ type: Input }], nzEllipsis: [{ type: Input }], nzContent: [{ type: Input }], nzEllipsisRows: [{ type: Input }], nzType: [{ type: Input }], nzCopyText: [{ type: Input }], nzContentChange: [{ type: Output }], nzCopy: [{ type: Output }], nzExpandChange: [{ type: Output }], textEditRef: [{ type: ViewChild, args: [NzTextEditComponent, { static: false },] }], textCopyRef: [{ type: ViewChild, args: [NzTextCopyComponent, { static: false },] }], ellipsisContainer: [{ type: ViewChild, args: ['ellipsisContainer', { static: false },] }], expandableBtn: [{ type: ViewChild, args: ['expandable', { static: false },] }], contentTemplate: [{ type: ViewChild, args: ['contentTemplate', { static: false },] }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTypographyComponent.prototype, "nzCopyable", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTypographyComponent.prototype, "nzEditable", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTypographyComponent.prototype, "nzDisabled", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTypographyComponent.prototype, "nzExpandable", void 0); __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzTypographyComponent.prototype, "nzEllipsis", void 0); __decorate([ WithConfig(1), InputNumber(), __metadata("design:type", Number) ], NzTypographyComponent.prototype, "nzEllipsisRows", void 0); if (false) { /** @type {?} */ NzTypographyComponent.prototype.nzCopyable; /** @type {?} */ NzTypographyComponent.prototype.nzEditable; /** @type {?} */ NzTypographyComponent.prototype.nzDisabled; /** @type {?} */ NzTypographyComponent.prototype.nzExpandable; /** @type {?} */ NzTypographyComponent.prototype.nzEllipsis; /** @type {?} */ NzTypographyComponent.prototype.nzContent; /** @type {?} */ NzTypographyComponent.prototype.nzEllipsisRows; /** @type {?} */ NzTypographyComponent.prototype.nzType; /** @type {?} */ NzTypographyComponent.prototype.nzCopyText; /** @type {?} */ NzTypographyComponent.prototype.nzContentChange; /** @type {?} */ NzTypographyComponent.prototype.nzCopy; /** @type {?} */ NzTypographyComponent.prototype.nzExpandChange; /** @type {?} */ NzTypographyComponent.prototype.textEditRef; /** @type {?} */ NzTypographyComponent.prototype.textCopyRef; /** @type {?} */ NzTypographyComponent.prototype.ellipsisContainer; /** @type {?} */ NzTypographyComponent.prototype.expandableBtn; /** @type {?} */ NzTypographyComponent.prototype.contentTemplate; /** @type {?} */ NzTypographyComponent.prototype.locale; /** @type {?} */ NzTypographyComponent.prototype.editing; /** @type {?} */ NzTypographyComponent.prototype.ellipsisText; /** @type {?} */ NzTypographyComponent.prototype.cssEllipsis; /** @type {?} */ NzTypographyComponent.prototype.isEllipsis; /** @type {?} */ NzTypographyComponent.prototype.expanded; /** @type {?} */ NzTypographyComponent.prototype.ellipsisStr; /** * @type {?} * @private */ NzTypographyComponent.prototype.viewInit; /** * @type {?} * @private */ NzTypographyComponent.prototype.rfaId; /** * @type {?} * @private */ NzTypographyComponent.prototype.destroy$; /** * @type {?} * @private */ NzTypographyComponent.prototype.windowResizeSubscription; /** @type {?} */ NzTypographyComponent.prototype.nzConfigService; /** * @type {?} * @private */ NzTypographyComponent.prototype.host; /** * @type {?} * @private */ NzTypographyComponent.prototype.cdr; /** * @type {?} * @private */ NzTypographyComponent.prototype.viewContainerRef; /** * @type {?} * @private */ NzTypographyComponent.prototype.renderer; /** * @type {?} * @private */ NzTypographyComponent.prototype.platform; /** * @type {?} * @private */ NzTypographyComponent.prototype.i18n; /** * @type {?} * @private */ NzTypographyComponent.prototype.nzDomEventService; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzTypographyModule { } NzTypographyModule.decorators = [ { type: NgModule, args: [{ imports: [ CommonModule, NzIconModule, NzToolTipModule, NzInputModule, NzI18nModule, NzTransButtonModule, NzCopyToClipboardServiceModule ], exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, PlatformModule], declarations: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent] },] } ]; /** * @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 { NzTextCopyComponent, NzTextEditComponent, NzTypographyComponent, NzTypographyModule }; //# sourceMappingURL=ng-zorro-antd-typography.js.map