ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
782 lines (774 loc) • 25.2 kB
JavaScript
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