ng-zorro-antd-typography.mjs 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820
  1. import * as i0 from '@angular/core';
  2. import { inject, ElementRef, EventEmitter, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, afterNextRender, ViewChild, numberAttribute, booleanAttribute, NgModule } from '@angular/core';
  3. import { Subject, BehaviorSubject, Subscription } from 'rxjs';
  4. import { takeUntil, switchMap, first } from 'rxjs/operators';
  5. import * as i6 from 'ng-zorro-antd/core/outlet';
  6. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  7. import * as i4 from 'ng-zorro-antd/core/trans-button';
  8. import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button';
  9. import * as i5 from 'ng-zorro-antd/icon';
  10. import { NzIconModule } from 'ng-zorro-antd/icon';
  11. import * as i3 from 'ng-zorro-antd/tooltip';
  12. import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
  13. import * as i1 from '@angular/cdk/clipboard';
  14. import * as i2 from 'ng-zorro-antd/i18n';
  15. import { ESCAPE, ENTER } from '@angular/cdk/keycodes';
  16. import * as i2$1 from 'ng-zorro-antd/core/services';
  17. import { NzDestroyService } from 'ng-zorro-antd/core/services';
  18. import { fromEventOutsideAngular, isStyleSupport, measure } from 'ng-zorro-antd/core/util';
  19. import * as i3$1 from 'ng-zorro-antd/input';
  20. import { NzInputModule, NzAutosizeDirective } from 'ng-zorro-antd/input';
  21. import { __esDecorate, __runInitializers } from 'tslib';
  22. import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
  23. import * as i1$1 from 'ng-zorro-antd/core/config';
  24. import { WithConfig } from 'ng-zorro-antd/core/config';
  25. import { cancelRequestAnimationFrame, reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
  26. import * as i2$2 from '@angular/cdk/platform';
  27. import * as i5$1 from '@angular/cdk/bidi';
  28. class NzTextCopyComponent {
  29. cdr;
  30. clipboard;
  31. i18n;
  32. copied = false;
  33. copyId;
  34. locale;
  35. nativeElement = inject(ElementRef).nativeElement;
  36. copyTooltip = null;
  37. copedTooltip = null;
  38. copyIcon = 'copy';
  39. copedIcon = 'check';
  40. destroy$ = new Subject();
  41. text;
  42. tooltips;
  43. icons = ['copy', 'check'];
  44. textCopy = new EventEmitter();
  45. constructor(cdr, clipboard, i18n) {
  46. this.cdr = cdr;
  47. this.clipboard = clipboard;
  48. this.i18n = i18n;
  49. }
  50. ngOnInit() {
  51. this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
  52. this.locale = this.i18n.getLocaleData('Text');
  53. this.updateTooltips();
  54. this.cdr.markForCheck();
  55. });
  56. }
  57. ngOnChanges(changes) {
  58. const { tooltips, icons } = changes;
  59. if (tooltips) {
  60. this.updateTooltips();
  61. }
  62. if (icons) {
  63. this.updateIcons();
  64. }
  65. }
  66. ngOnDestroy() {
  67. clearTimeout(this.copyId);
  68. this.destroy$.next(true);
  69. this.destroy$.complete();
  70. }
  71. onClick() {
  72. if (this.copied) {
  73. return;
  74. }
  75. this.copied = true;
  76. this.cdr.detectChanges();
  77. const text = this.text;
  78. this.textCopy.emit(text);
  79. this.clipboard.copy(text);
  80. this.onCopied();
  81. }
  82. onCopied() {
  83. clearTimeout(this.copyId);
  84. this.copyId = setTimeout(() => {
  85. this.copied = false;
  86. this.cdr.detectChanges();
  87. }, 3000);
  88. }
  89. updateTooltips() {
  90. if (this.tooltips === null) {
  91. this.copedTooltip = null;
  92. this.copyTooltip = null;
  93. }
  94. else if (Array.isArray(this.tooltips)) {
  95. const [copyTooltip, copedTooltip] = this.tooltips;
  96. this.copyTooltip = copyTooltip || this.locale?.copy;
  97. this.copedTooltip = copedTooltip || this.locale?.copied;
  98. }
  99. else {
  100. this.copyTooltip = this.locale?.copy;
  101. this.copedTooltip = this.locale?.copied;
  102. }
  103. this.cdr.markForCheck();
  104. }
  105. updateIcons() {
  106. const [copyIcon, copedIcon] = this.icons;
  107. this.copyIcon = copyIcon;
  108. this.copedIcon = copedIcon;
  109. this.cdr.markForCheck();
  110. }
  111. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTextCopyComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Clipboard }, { token: i2.NzI18nService }], target: i0.ɵɵFactoryTarget.Component });
  112. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzTextCopyComponent, isStandalone: true, selector: "nz-text-copy", inputs: { text: "text", tooltips: "tooltips", icons: "icons" }, outputs: { textCopy: "textCopy" }, exportAs: ["nzTextCopy"], usesOnChanges: true, ngImport: i0, template: `
  113. <button
  114. type="button"
  115. nz-tooltip
  116. nz-trans-button
  117. [nzTooltipTitle]="copied ? copedTooltip : copyTooltip"
  118. class="ant-typography-copy"
  119. [class.ant-typography-copy-success]="copied"
  120. (click)="onClick()"
  121. >
  122. <ng-container *nzStringTemplateOutlet="copied ? copedIcon : copyIcon; let icon">
  123. <nz-icon [nzType]="icon" />
  124. </ng-container>
  125. </button>
  126. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i3.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzTransButtonModule }, { kind: "directive", type: i4.NzTransButtonDirective, selector: "button[nz-trans-button]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i5.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i6.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  127. }
  128. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTextCopyComponent, decorators: [{
  129. type: Component,
  130. args: [{
  131. selector: 'nz-text-copy',
  132. exportAs: 'nzTextCopy',
  133. template: `
  134. <button
  135. type="button"
  136. nz-tooltip
  137. nz-trans-button
  138. [nzTooltipTitle]="copied ? copedTooltip : copyTooltip"
  139. class="ant-typography-copy"
  140. [class.ant-typography-copy-success]="copied"
  141. (click)="onClick()"
  142. >
  143. <ng-container *nzStringTemplateOutlet="copied ? copedIcon : copyIcon; let icon">
  144. <nz-icon [nzType]="icon" />
  145. </ng-container>
  146. </button>
  147. `,
  148. changeDetection: ChangeDetectionStrategy.OnPush,
  149. encapsulation: ViewEncapsulation.None,
  150. preserveWhitespaces: false,
  151. imports: [NzToolTipModule, NzTransButtonModule, NzIconModule, NzOutletModule]
  152. }]
  153. }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.Clipboard }, { type: i2.NzI18nService }], propDecorators: { text: [{
  154. type: Input
  155. }], tooltips: [{
  156. type: Input
  157. }], icons: [{
  158. type: Input
  159. }], textCopy: [{
  160. type: Output
  161. }] } });
  162. /**
  163. * Use of this source code is governed by an MIT-style license that can be
  164. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  165. */
  166. class NzTextEditComponent {
  167. ngZone;
  168. cdr;
  169. i18n;
  170. destroy$;
  171. editing = false;
  172. locale;
  173. text;
  174. icon = 'edit';
  175. tooltip;
  176. startEditing = new EventEmitter();
  177. endEditing = new EventEmitter(true);
  178. set textarea(textarea) {
  179. this.textarea$.next(textarea);
  180. }
  181. autosizeDirective;
  182. beforeText;
  183. currentText;
  184. nativeElement = inject(ElementRef).nativeElement;
  185. // We could've saved the textarea within some private property (e.g. `_textarea`) and have a getter,
  186. // but having subject makes the code more reactive and cancellable (e.g. event listeners will be
  187. // automatically removed and re-added through the `switchMap` below).
  188. textarea$ = new BehaviorSubject(null);
  189. injector = inject(Injector);
  190. constructor(ngZone, cdr, i18n, destroy$) {
  191. this.ngZone = ngZone;
  192. this.cdr = cdr;
  193. this.i18n = i18n;
  194. this.destroy$ = destroy$;
  195. }
  196. ngOnInit() {
  197. this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
  198. this.locale = this.i18n.getLocaleData('Text');
  199. this.cdr.markForCheck();
  200. });
  201. this.textarea$
  202. .pipe(switchMap(textarea => fromEventOutsideAngular(textarea?.nativeElement, 'keydown')), takeUntil(this.destroy$))
  203. .subscribe(event => {
  204. // Caretaker note: adding modifier at the end (for instance `(keydown.esc)`) will tell Angular to add
  205. // an event listener through the `KeyEventsPlugin`, which always runs `ngZone.runGuarded()` internally.
  206. // We're interested only in escape and enter keyboard buttons, otherwise Angular will run change detection
  207. // on any `keydown` event.
  208. if (event.keyCode !== ESCAPE && event.keyCode !== ENTER) {
  209. return;
  210. }
  211. this.ngZone.run(() => {
  212. if (event.keyCode === ESCAPE) {
  213. this.onCancel();
  214. }
  215. else {
  216. this.onEnter(event);
  217. }
  218. this.cdr.markForCheck();
  219. });
  220. });
  221. this.textarea$
  222. .pipe(switchMap(textarea => fromEventOutsideAngular(textarea?.nativeElement, 'input')), takeUntil(this.destroy$))
  223. .subscribe(event => {
  224. this.currentText = event.target.value;
  225. });
  226. }
  227. onClick() {
  228. this.beforeText = this.text;
  229. this.currentText = this.beforeText;
  230. this.editing = true;
  231. this.startEditing.emit();
  232. this.focusAndSetValue();
  233. }
  234. confirm() {
  235. this.editing = false;
  236. this.endEditing.emit(this.currentText);
  237. }
  238. onEnter(event) {
  239. event.stopPropagation();
  240. event.preventDefault();
  241. this.confirm();
  242. }
  243. onCancel() {
  244. this.currentText = this.beforeText;
  245. this.confirm();
  246. }
  247. focusAndSetValue() {
  248. const { injector } = this;
  249. afterNextRender(() => {
  250. this.textarea$
  251. .pipe(
  252. // It may still not be available, so we need to wait until view queries
  253. // are executed during the change detection. It's safer to wait until
  254. // the query runs and the textarea is set on the behavior subject.
  255. first((textarea) => textarea != null), takeUntil(this.destroy$))
  256. .subscribe(textarea => {
  257. textarea.nativeElement.focus();
  258. textarea.nativeElement.value = this.currentText || '';
  259. this.autosizeDirective.resizeToFitContent();
  260. this.cdr.markForCheck();
  261. });
  262. }, { injector });
  263. }
  264. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTextEditComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i2.NzI18nService }, { token: i2$1.NzDestroyService }], target: i0.ɵɵFactoryTarget.Component });
  265. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzTextEditComponent, isStandalone: true, selector: "nz-text-edit", inputs: { text: "text", icon: "icon", tooltip: "tooltip" }, outputs: { startEditing: "startEditing", endEditing: "endEditing" }, providers: [NzDestroyService], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "autosizeDirective", first: true, predicate: NzAutosizeDirective, descendants: true }], exportAs: ["nzTextEdit"], ngImport: i0, template: `
  266. @if (editing) {
  267. <textarea #textarea nz-input nzAutosize (blur)="confirm()"></textarea>
  268. <button nz-trans-button class="ant-typography-edit-content-confirm" (click)="confirm()">
  269. <nz-icon nzType="enter" />
  270. </button>
  271. } @else {
  272. <button
  273. nz-tooltip
  274. nz-trans-button
  275. class="ant-typography-edit"
  276. [nzTooltipTitle]="tooltip === null ? null : tooltip || locale?.edit"
  277. (click)="onClick()"
  278. >
  279. <ng-container *nzStringTemplateOutlet="icon; let icon">
  280. <nz-icon [nzType]="icon" />
  281. </ng-container>
  282. </button>
  283. }
  284. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "directive", type: i3$1.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }, { kind: "ngmodule", type: NzTransButtonModule }, { kind: "directive", type: i4.NzTransButtonDirective, selector: "button[nz-trans-button]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i5.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i3.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i6.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  285. }
  286. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTextEditComponent, decorators: [{
  287. type: Component,
  288. args: [{
  289. selector: 'nz-text-edit',
  290. exportAs: 'nzTextEdit',
  291. template: `
  292. @if (editing) {
  293. <textarea #textarea nz-input nzAutosize (blur)="confirm()"></textarea>
  294. <button nz-trans-button class="ant-typography-edit-content-confirm" (click)="confirm()">
  295. <nz-icon nzType="enter" />
  296. </button>
  297. } @else {
  298. <button
  299. nz-tooltip
  300. nz-trans-button
  301. class="ant-typography-edit"
  302. [nzTooltipTitle]="tooltip === null ? null : tooltip || locale?.edit"
  303. (click)="onClick()"
  304. >
  305. <ng-container *nzStringTemplateOutlet="icon; let icon">
  306. <nz-icon [nzType]="icon" />
  307. </ng-container>
  308. </button>
  309. }
  310. `,
  311. changeDetection: ChangeDetectionStrategy.OnPush,
  312. encapsulation: ViewEncapsulation.None,
  313. preserveWhitespaces: false,
  314. providers: [NzDestroyService],
  315. imports: [NzInputModule, NzTransButtonModule, NzIconModule, NzToolTipModule, NzOutletModule]
  316. }]
  317. }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i2.NzI18nService }, { type: i2$1.NzDestroyService }], propDecorators: { text: [{
  318. type: Input
  319. }], icon: [{
  320. type: Input
  321. }], tooltip: [{
  322. type: Input
  323. }], startEditing: [{
  324. type: Output
  325. }], endEditing: [{
  326. type: Output
  327. }], textarea: [{
  328. type: ViewChild,
  329. args: ['textarea', { static: false }]
  330. }], autosizeDirective: [{
  331. type: ViewChild,
  332. args: [NzAutosizeDirective, { static: false }]
  333. }] } });
  334. const NZ_CONFIG_MODULE_NAME = 'typography';
  335. const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
  336. let NzTypographyComponent = (() => {
  337. let _nzCopyTooltips_decorators;
  338. let _nzCopyTooltips_initializers = [];
  339. let _nzCopyTooltips_extraInitializers = [];
  340. let _nzCopyIcons_decorators;
  341. let _nzCopyIcons_initializers = [];
  342. let _nzCopyIcons_extraInitializers = [];
  343. let _nzEditTooltip_decorators;
  344. let _nzEditTooltip_initializers = [];
  345. let _nzEditTooltip_extraInitializers = [];
  346. let _nzEditIcon_decorators;
  347. let _nzEditIcon_initializers = [];
  348. let _nzEditIcon_extraInitializers = [];
  349. let _nzEllipsisRows_decorators;
  350. let _nzEllipsisRows_initializers = [];
  351. let _nzEllipsisRows_extraInitializers = [];
  352. return class NzTypographyComponent {
  353. static {
  354. const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
  355. _nzCopyTooltips_decorators = [WithConfig()];
  356. _nzCopyIcons_decorators = [WithConfig()];
  357. _nzEditTooltip_decorators = [WithConfig()];
  358. _nzEditIcon_decorators = [WithConfig()];
  359. _nzEllipsisRows_decorators = [WithConfig()];
  360. __esDecorate(null, null, _nzCopyTooltips_decorators, { kind: "field", name: "nzCopyTooltips", static: false, private: false, access: { has: obj => "nzCopyTooltips" in obj, get: obj => obj.nzCopyTooltips, set: (obj, value) => { obj.nzCopyTooltips = value; } }, metadata: _metadata }, _nzCopyTooltips_initializers, _nzCopyTooltips_extraInitializers);
  361. __esDecorate(null, null, _nzCopyIcons_decorators, { kind: "field", name: "nzCopyIcons", static: false, private: false, access: { has: obj => "nzCopyIcons" in obj, get: obj => obj.nzCopyIcons, set: (obj, value) => { obj.nzCopyIcons = value; } }, metadata: _metadata }, _nzCopyIcons_initializers, _nzCopyIcons_extraInitializers);
  362. __esDecorate(null, null, _nzEditTooltip_decorators, { kind: "field", name: "nzEditTooltip", static: false, private: false, access: { has: obj => "nzEditTooltip" in obj, get: obj => obj.nzEditTooltip, set: (obj, value) => { obj.nzEditTooltip = value; } }, metadata: _metadata }, _nzEditTooltip_initializers, _nzEditTooltip_extraInitializers);
  363. __esDecorate(null, null, _nzEditIcon_decorators, { kind: "field", name: "nzEditIcon", static: false, private: false, access: { has: obj => "nzEditIcon" in obj, get: obj => obj.nzEditIcon, set: (obj, value) => { obj.nzEditIcon = value; } }, metadata: _metadata }, _nzEditIcon_initializers, _nzEditIcon_extraInitializers);
  364. __esDecorate(null, null, _nzEllipsisRows_decorators, { kind: "field", name: "nzEllipsisRows", static: false, private: false, access: { has: obj => "nzEllipsisRows" in obj, get: obj => obj.nzEllipsisRows, set: (obj, value) => { obj.nzEllipsisRows = value; } }, metadata: _metadata }, _nzEllipsisRows_initializers, _nzEllipsisRows_extraInitializers);
  365. if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
  366. }
  367. nzConfigService;
  368. host;
  369. cdr;
  370. viewContainerRef;
  371. renderer;
  372. platform;
  373. i18n;
  374. resizeService;
  375. directionality;
  376. _nzModuleName = NZ_CONFIG_MODULE_NAME;
  377. nzCopyable = false;
  378. nzEditable = false;
  379. nzDisabled = false;
  380. nzExpandable = false;
  381. nzEllipsis = false;
  382. nzCopyTooltips = __runInitializers(this, _nzCopyTooltips_initializers, undefined);
  383. nzCopyIcons = (__runInitializers(this, _nzCopyTooltips_extraInitializers), __runInitializers(this, _nzCopyIcons_initializers, ['copy', 'check']));
  384. nzEditTooltip = (__runInitializers(this, _nzCopyIcons_extraInitializers), __runInitializers(this, _nzEditTooltip_initializers, undefined));
  385. nzEditIcon = (__runInitializers(this, _nzEditTooltip_extraInitializers), __runInitializers(this, _nzEditIcon_initializers, 'edit'));
  386. nzContent = __runInitializers(this, _nzEditIcon_extraInitializers);
  387. nzEllipsisRows = __runInitializers(this, _nzEllipsisRows_initializers, 1);
  388. nzType = __runInitializers(this, _nzEllipsisRows_extraInitializers);
  389. nzCopyText;
  390. nzSuffix;
  391. nzContentChange = new EventEmitter();
  392. nzCopy = new EventEmitter();
  393. nzExpandChange = new EventEmitter();
  394. // This is not a two-way binding output with {@link nzEllipsis}
  395. nzOnEllipsis = new EventEmitter();
  396. textEditRef;
  397. textCopyRef;
  398. ellipsisContainer;
  399. expandableBtn;
  400. contentTemplate;
  401. locale;
  402. document = inject(DOCUMENT);
  403. expandableBtnElementCache = null;
  404. editing = false;
  405. ellipsisText;
  406. cssEllipsis = false;
  407. isEllipsis = true;
  408. expanded = false;
  409. ellipsisStr = '...';
  410. dir = 'ltr';
  411. get hasEllipsisObservers() {
  412. return this.nzOnEllipsis.observers.length > 0;
  413. }
  414. get canCssEllipsis() {
  415. return this.nzEllipsis && this.cssEllipsis && !this.expanded && !this.hasEllipsisObservers;
  416. }
  417. get hasOperationsWithEllipsis() {
  418. return (this.nzCopyable || this.nzEditable || this.nzExpandable) && this.nzEllipsis;
  419. }
  420. viewInit = false;
  421. rfaId = -1;
  422. destroy$ = new Subject();
  423. windowResizeSubscription = Subscription.EMPTY;
  424. get copyText() {
  425. return (typeof this.nzCopyText === 'string' ? this.nzCopyText : this.nzContent);
  426. }
  427. constructor(nzConfigService, host, cdr, viewContainerRef, renderer, platform, i18n, resizeService, directionality) {
  428. this.nzConfigService = nzConfigService;
  429. this.host = host;
  430. this.cdr = cdr;
  431. this.viewContainerRef = viewContainerRef;
  432. this.renderer = renderer;
  433. this.platform = platform;
  434. this.i18n = i18n;
  435. this.resizeService = resizeService;
  436. this.directionality = directionality;
  437. }
  438. onTextCopy(text) {
  439. this.nzCopy.emit(text);
  440. }
  441. onStartEditing() {
  442. this.editing = true;
  443. }
  444. onEndEditing(text) {
  445. this.editing = false;
  446. this.nzContentChange.emit(text);
  447. if (this.nzContent === text) {
  448. this.renderOnNextFrame();
  449. }
  450. this.cdr.markForCheck();
  451. }
  452. onExpand() {
  453. this.isEllipsis = false;
  454. this.expanded = true;
  455. this.nzExpandChange.emit();
  456. this.nzOnEllipsis.emit(false);
  457. }
  458. canUseCSSEllipsis() {
  459. if (this.nzEditable || this.nzCopyable || this.nzExpandable || this.nzSuffix) {
  460. return false;
  461. }
  462. // make sure {@link nzOnEllipsis} works, will force use JS to calculations
  463. if (this.hasEllipsisObservers) {
  464. return false;
  465. }
  466. if (this.nzEllipsisRows === 1) {
  467. return isStyleSupport('textOverflow');
  468. }
  469. else {
  470. return isStyleSupport('webkitLineClamp');
  471. }
  472. }
  473. renderOnNextFrame() {
  474. cancelRequestAnimationFrame(this.rfaId);
  475. if (!this.viewInit || !this.nzEllipsis || this.nzEllipsisRows < 0 || this.expanded || !this.platform.isBrowser) {
  476. return;
  477. }
  478. this.rfaId = reqAnimFrame(() => {
  479. this.syncEllipsis();
  480. });
  481. }
  482. getOriginContentViewRef() {
  483. const viewRef = this.viewContainerRef.createEmbeddedView(this.contentTemplate, {
  484. content: this.nzContent
  485. });
  486. viewRef.detectChanges();
  487. return {
  488. viewRef,
  489. removeView: () => {
  490. this.viewContainerRef.remove(this.viewContainerRef.indexOf(viewRef));
  491. }
  492. };
  493. }
  494. syncEllipsis() {
  495. if (this.cssEllipsis) {
  496. return;
  497. }
  498. const { viewRef, removeView } = this.getOriginContentViewRef();
  499. const fixedNodes = [this.textCopyRef, this.textEditRef]
  500. .filter(e => e && e.nativeElement)
  501. .map(e => e.nativeElement);
  502. const expandableBtnElement = this.getExpandableBtnElement();
  503. if (expandableBtnElement) {
  504. fixedNodes.push(expandableBtnElement);
  505. }
  506. const { contentNodes, text, ellipsis } = measure(this.host.nativeElement, this.nzEllipsisRows, viewRef.rootNodes, fixedNodes, this.ellipsisStr, this.nzSuffix);
  507. removeView();
  508. this.ellipsisText = text;
  509. if (ellipsis !== this.isEllipsis) {
  510. this.isEllipsis = ellipsis;
  511. this.nzOnEllipsis.emit(ellipsis);
  512. }
  513. const ellipsisContainerNativeElement = this.ellipsisContainer.nativeElement;
  514. while (ellipsisContainerNativeElement.firstChild) {
  515. this.renderer.removeChild(ellipsisContainerNativeElement, ellipsisContainerNativeElement.firstChild);
  516. }
  517. contentNodes.forEach(n => {
  518. this.renderer.appendChild(ellipsisContainerNativeElement, n.cloneNode(true));
  519. });
  520. this.cdr.markForCheck();
  521. }
  522. // Need to create the element for calculation size before view init
  523. getExpandableBtnElement() {
  524. if (this.nzExpandable) {
  525. const expandText = this.locale ? this.locale.expand : '';
  526. const cache = this.expandableBtnElementCache;
  527. if (!cache || cache.innerText === expandText) {
  528. const el = this.document.createElement('a');
  529. el.className = EXPAND_ELEMENT_CLASSNAME;
  530. el.innerText = expandText;
  531. this.expandableBtnElementCache = el;
  532. }
  533. return this.expandableBtnElementCache;
  534. }
  535. else {
  536. this.expandableBtnElementCache = null;
  537. return null;
  538. }
  539. }
  540. renderAndSubscribeWindowResize() {
  541. if (this.platform.isBrowser) {
  542. this.windowResizeSubscription.unsubscribe();
  543. this.cssEllipsis = this.canUseCSSEllipsis();
  544. this.renderOnNextFrame();
  545. this.windowResizeSubscription = this.resizeService
  546. .subscribe()
  547. .pipe(takeUntil(this.destroy$))
  548. .subscribe(() => this.renderOnNextFrame());
  549. }
  550. }
  551. ngOnInit() {
  552. this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
  553. this.locale = this.i18n.getLocaleData('Text');
  554. this.cdr.markForCheck();
  555. });
  556. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  557. this.dir = direction;
  558. this.cdr.detectChanges();
  559. });
  560. this.dir = this.directionality.value;
  561. }
  562. ngAfterViewInit() {
  563. this.viewInit = true;
  564. this.renderAndSubscribeWindowResize();
  565. }
  566. ngOnChanges(changes) {
  567. const { nzCopyable, nzEditable, nzExpandable, nzEllipsis, nzContent, nzEllipsisRows, nzSuffix } = changes;
  568. if (nzCopyable || nzEditable || nzExpandable || nzEllipsis || nzContent || nzEllipsisRows || nzSuffix) {
  569. if (this.nzEllipsis) {
  570. if (this.expanded) {
  571. this.windowResizeSubscription.unsubscribe();
  572. }
  573. else {
  574. this.renderAndSubscribeWindowResize();
  575. }
  576. }
  577. }
  578. }
  579. ngOnDestroy() {
  580. this.destroy$.next(true);
  581. this.destroy$.complete();
  582. this.expandableBtnElementCache = null;
  583. this.windowResizeSubscription.unsubscribe();
  584. }
  585. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTypographyComponent, deps: [{ token: i1$1.NzConfigService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i2$2.Platform }, { token: i2.NzI18nService }, { token: i2$1.NzResizeService }, { token: i5$1.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  586. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzTypographyComponent, isStandalone: true, selector: "\n nz-typography,\n [nz-typography],\n p[nz-paragraph],\n span[nz-text],\n h1[nz-title], h2[nz-title], h3[nz-title], h4[nz-title]\n ", inputs: { nzCopyable: ["nzCopyable", "nzCopyable", booleanAttribute], nzEditable: ["nzEditable", "nzEditable", booleanAttribute], nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzExpandable: ["nzExpandable", "nzExpandable", booleanAttribute], nzEllipsis: ["nzEllipsis", "nzEllipsis", booleanAttribute], nzCopyTooltips: "nzCopyTooltips", nzCopyIcons: "nzCopyIcons", nzEditTooltip: "nzEditTooltip", nzEditIcon: "nzEditIcon", nzContent: "nzContent", nzEllipsisRows: ["nzEllipsisRows", "nzEllipsisRows", numberAttribute], nzType: "nzType", nzCopyText: "nzCopyText", nzSuffix: "nzSuffix" }, outputs: { nzContentChange: "nzContentChange", nzCopy: "nzCopy", nzExpandChange: "nzExpandChange", nzOnEllipsis: "nzOnEllipsis" }, host: { properties: { "class.ant-typography": "!editing", "class.ant-typography-rtl": "dir === \"rtl\"", "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-success": "nzType === \"success\"", "class.ant-typography-disabled": "nzDisabled", "class.ant-typography-ellipsis": "nzEllipsis && !expanded", "class.ant-typography-single-line": "nzEllipsis && nzEllipsisRows === 1", "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" } }, viewQueries: [{ propertyName: "textEditRef", first: true, predicate: NzTextEditComponent, descendants: true }, { propertyName: "textCopyRef", first: true, predicate: NzTextCopyComponent, descendants: true }, { propertyName: "ellipsisContainer", first: true, predicate: ["ellipsisContainer"], descendants: true }, { propertyName: "expandableBtn", first: true, predicate: ["expandable"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }], exportAs: ["nzTypography"], usesOnChanges: true, ngImport: i0, template: `
  587. <ng-template #contentTemplate let-content="content">
  588. @if (!content) {
  589. <ng-content></ng-content>
  590. }
  591. {{ content }}
  592. </ng-template>
  593. @if (!editing) {
  594. @if (
  595. expanded ||
  596. (!hasOperationsWithEllipsis && nzEllipsisRows === 1 && !hasEllipsisObservers) ||
  597. canCssEllipsis ||
  598. (nzSuffix && expanded)
  599. ) {
  600. <ng-template
  601. [ngTemplateOutlet]="contentTemplate"
  602. [ngTemplateOutletContext]="{ content: nzContent }"
  603. ></ng-template>
  604. @if (nzSuffix) {
  605. {{ nzSuffix }}
  606. }
  607. } @else {
  608. <span #ellipsisContainer></span>
  609. @if (isEllipsis) {
  610. {{ ellipsisStr }}
  611. }
  612. @if (nzSuffix) {
  613. {{ nzSuffix }}
  614. }
  615. @if (nzExpandable && isEllipsis) {
  616. <a #expandable class="ant-typography-expand" (click)="onExpand()">
  617. {{ locale?.expand }}
  618. </a>
  619. }
  620. }
  621. }
  622. @if (nzEditable) {
  623. <nz-text-edit
  624. [text]="nzContent"
  625. [icon]="nzEditIcon"
  626. [tooltip]="nzEditTooltip"
  627. (endEditing)="onEndEditing($event)"
  628. (startEditing)="onStartEditing()"
  629. ></nz-text-edit>
  630. }
  631. @if (nzCopyable && !editing) {
  632. <nz-text-copy
  633. [text]="copyText"
  634. [tooltips]="nzCopyTooltips"
  635. [icons]="nzCopyIcons"
  636. (textCopy)="onTextCopy($event)"
  637. ></nz-text-copy>
  638. }
  639. `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NzTextEditComponent, selector: "nz-text-edit", inputs: ["text", "icon", "tooltip"], outputs: ["startEditing", "endEditing"], exportAs: ["nzTextEdit"] }, { kind: "component", type: NzTextCopyComponent, selector: "nz-text-copy", inputs: ["text", "tooltips", "icons"], outputs: ["textCopy"], exportAs: ["nzTextCopy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  640. };
  641. })();
  642. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTypographyComponent, decorators: [{
  643. type: Component,
  644. args: [{
  645. selector: `
  646. nz-typography,
  647. [nz-typography],
  648. p[nz-paragraph],
  649. span[nz-text],
  650. h1[nz-title], h2[nz-title], h3[nz-title], h4[nz-title]
  651. `,
  652. exportAs: 'nzTypography',
  653. template: `
  654. <ng-template #contentTemplate let-content="content">
  655. @if (!content) {
  656. <ng-content></ng-content>
  657. }
  658. {{ content }}
  659. </ng-template>
  660. @if (!editing) {
  661. @if (
  662. expanded ||
  663. (!hasOperationsWithEllipsis && nzEllipsisRows === 1 && !hasEllipsisObservers) ||
  664. canCssEllipsis ||
  665. (nzSuffix && expanded)
  666. ) {
  667. <ng-template
  668. [ngTemplateOutlet]="contentTemplate"
  669. [ngTemplateOutletContext]="{ content: nzContent }"
  670. ></ng-template>
  671. @if (nzSuffix) {
  672. {{ nzSuffix }}
  673. }
  674. } @else {
  675. <span #ellipsisContainer></span>
  676. @if (isEllipsis) {
  677. {{ ellipsisStr }}
  678. }
  679. @if (nzSuffix) {
  680. {{ nzSuffix }}
  681. }
  682. @if (nzExpandable && isEllipsis) {
  683. <a #expandable class="ant-typography-expand" (click)="onExpand()">
  684. {{ locale?.expand }}
  685. </a>
  686. }
  687. }
  688. }
  689. @if (nzEditable) {
  690. <nz-text-edit
  691. [text]="nzContent"
  692. [icon]="nzEditIcon"
  693. [tooltip]="nzEditTooltip"
  694. (endEditing)="onEndEditing($event)"
  695. (startEditing)="onStartEditing()"
  696. ></nz-text-edit>
  697. }
  698. @if (nzCopyable && !editing) {
  699. <nz-text-copy
  700. [text]="copyText"
  701. [tooltips]="nzCopyTooltips"
  702. [icons]="nzCopyIcons"
  703. (textCopy)="onTextCopy($event)"
  704. ></nz-text-copy>
  705. }
  706. `,
  707. changeDetection: ChangeDetectionStrategy.OnPush,
  708. encapsulation: ViewEncapsulation.None,
  709. preserveWhitespaces: false,
  710. host: {
  711. '[class.ant-typography]': '!editing',
  712. '[class.ant-typography-rtl]': 'dir === "rtl"',
  713. '[class.ant-typography-edit-content]': 'editing',
  714. '[class.ant-typography-secondary]': 'nzType === "secondary"',
  715. '[class.ant-typography-warning]': 'nzType === "warning"',
  716. '[class.ant-typography-danger]': 'nzType === "danger"',
  717. '[class.ant-typography-success]': 'nzType === "success"',
  718. '[class.ant-typography-disabled]': 'nzDisabled',
  719. '[class.ant-typography-ellipsis]': 'nzEllipsis && !expanded',
  720. '[class.ant-typography-single-line]': 'nzEllipsis && nzEllipsisRows === 1',
  721. '[class.ant-typography-ellipsis-single-line]': 'canCssEllipsis && nzEllipsisRows === 1',
  722. '[class.ant-typography-ellipsis-multiple-line]': 'canCssEllipsis && nzEllipsisRows > 1',
  723. '[style.-webkit-line-clamp]': '(canCssEllipsis && nzEllipsisRows > 1) ? nzEllipsisRows : null'
  724. },
  725. imports: [NgTemplateOutlet, NzTextEditComponent, NzTextCopyComponent]
  726. }]
  727. }], ctorParameters: () => [{ type: i1$1.NzConfigService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i2$2.Platform }, { type: i2.NzI18nService }, { type: i2$1.NzResizeService }, { type: i5$1.Directionality }], propDecorators: { nzCopyable: [{
  728. type: Input,
  729. args: [{ transform: booleanAttribute }]
  730. }], nzEditable: [{
  731. type: Input,
  732. args: [{ transform: booleanAttribute }]
  733. }], nzDisabled: [{
  734. type: Input,
  735. args: [{ transform: booleanAttribute }]
  736. }], nzExpandable: [{
  737. type: Input,
  738. args: [{ transform: booleanAttribute }]
  739. }], nzEllipsis: [{
  740. type: Input,
  741. args: [{ transform: booleanAttribute }]
  742. }], nzCopyTooltips: [{
  743. type: Input
  744. }], nzCopyIcons: [{
  745. type: Input
  746. }], nzEditTooltip: [{
  747. type: Input
  748. }], nzEditIcon: [{
  749. type: Input
  750. }], nzContent: [{
  751. type: Input
  752. }], nzEllipsisRows: [{
  753. type: Input,
  754. args: [{ transform: numberAttribute }]
  755. }], nzType: [{
  756. type: Input
  757. }], nzCopyText: [{
  758. type: Input
  759. }], nzSuffix: [{
  760. type: Input
  761. }], nzContentChange: [{
  762. type: Output
  763. }], nzCopy: [{
  764. type: Output
  765. }], nzExpandChange: [{
  766. type: Output
  767. }], nzOnEllipsis: [{
  768. type: Output
  769. }], textEditRef: [{
  770. type: ViewChild,
  771. args: [NzTextEditComponent, { static: false }]
  772. }], textCopyRef: [{
  773. type: ViewChild,
  774. args: [NzTextCopyComponent, { static: false }]
  775. }], ellipsisContainer: [{
  776. type: ViewChild,
  777. args: ['ellipsisContainer', { static: false }]
  778. }], expandableBtn: [{
  779. type: ViewChild,
  780. args: ['expandable', { static: false }]
  781. }], contentTemplate: [{
  782. type: ViewChild,
  783. args: ['contentTemplate', { static: false }]
  784. }] } });
  785. /**
  786. * Use of this source code is governed by an MIT-style license that can be
  787. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  788. */
  789. class NzTypographyModule {
  790. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  791. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzTypographyModule, imports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent], exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent] });
  792. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTypographyModule, imports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent] });
  793. }
  794. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzTypographyModule, decorators: [{
  795. type: NgModule,
  796. args: [{
  797. imports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent],
  798. exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent]
  799. }]
  800. }] });
  801. /**
  802. * Use of this source code is governed by an MIT-style license that can be
  803. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  804. */
  805. /**
  806. * Generated bundle index. Do not edit.
  807. */
  808. export { NzTextCopyComponent, NzTextEditComponent, NzTypographyComponent, NzTypographyModule };
  809. //# sourceMappingURL=ng-zorro-antd-typography.mjs.map