@matechat/ng 0.0.1-alpha.0 → 17.1.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +282 -13
- package/fesm2022/matechat-ng.mjs +1558 -61
- package/fesm2022/matechat-ng.mjs.map +1 -1
- package/index.d.ts +612 -3
- package/package.json +24 -8
- package/Base/base.component.d.ts +0 -11
- package/Bubble/avatar/avatar.component.d.ts +0 -23
- package/Bubble/avatar-body-icon/avatar-body-icon.component.d.ts +0 -7
- package/Bubble/avatar-no-body-icon/avatar-no-body-icon.component.d.ts +0 -7
- package/Bubble/bubble-loading/bubble-loading.component.d.ts +0 -5
- package/Bubble/bubble.component.d.ts +0 -24
- package/Bubble/bubble.module.d.ts +0 -10
- package/Bubble/index.d.ts +0 -6
- package/Input/button/button.component.d.ts +0 -31
- package/Input/index.d.ts +0 -2
- package/Input/input.component.d.ts +0 -56
- package/Input/input.module.d.ts +0 -11
- package/Input/send-icon/send-icon.component.d.ts +0 -5
- package/Locale/index.d.ts +0 -5
- package/Locale/locale.module.d.ts +0 -17
- package/Locale/locale.service.d.ts +0 -50
- package/Locale/translate.pipe.d.ts +0 -23
- package/components-common/Base/foundation.d.ts +0 -43
- package/components-common/Bubble/common/bubble-constants.d.ts +0 -4
- package/components-common/Bubble/common/bubble-types.d.ts +0 -12
- package/components-common/Bubble/foundation.d.ts +0 -9
- package/components-common/Input/button-foundation.d.ts +0 -15
- package/components-common/Input/common/types.d.ts +0 -16
- package/components-common/Input/foundation.d.ts +0 -20
- package/components-common/Locale/lang/en-us.d.ts +0 -26
- package/components-common/Locale/lang/zh-cn.d.ts +0 -26
- package/esm2022/Base/base.component.mjs +0 -46
- package/esm2022/Bubble/avatar/avatar.component.mjs +0 -121
- package/esm2022/Bubble/avatar-body-icon/avatar-body-icon.component.mjs +0 -19
- package/esm2022/Bubble/avatar-no-body-icon/avatar-no-body-icon.component.mjs +0 -19
- package/esm2022/Bubble/bubble-loading/bubble-loading.component.mjs +0 -11
- package/esm2022/Bubble/bubble.component.mjs +0 -82
- package/esm2022/Bubble/bubble.module.mjs +0 -36
- package/esm2022/Bubble/index.mjs +0 -7
- package/esm2022/Input/button/button.component.mjs +0 -83
- package/esm2022/Input/index.mjs +0 -3
- package/esm2022/Input/input.component.mjs +0 -181
- package/esm2022/Input/input.module.mjs +0 -34
- package/esm2022/Input/send-icon/send-icon.component.mjs +0 -11
- package/esm2022/Locale/index.mjs +0 -6
- package/esm2022/Locale/locale.module.mjs +0 -39
- package/esm2022/Locale/locale.service.mjs +0 -140
- package/esm2022/Locale/translate.pipe.mjs +0 -38
- package/esm2022/components-common/Base/foundation.mjs +0 -63
- package/esm2022/components-common/Bubble/common/bubble-constants.mjs +0 -5
- package/esm2022/components-common/Bubble/common/bubble-types.mjs +0 -2
- package/esm2022/components-common/Bubble/foundation.mjs +0 -30
- package/esm2022/components-common/Input/button-foundation.mjs +0 -33
- package/esm2022/components-common/Input/common/types.mjs +0 -21
- package/esm2022/components-common/Input/foundation.mjs +0 -72
- package/esm2022/components-common/Locale/lang/en-us.mjs +0 -26
- package/esm2022/components-common/Locale/lang/zh-cn.mjs +0 -26
- package/esm2022/matechat-ng.mjs +0 -5
- package/esm2022/public-api.mjs +0 -7
- package/fesm2022/matechat-ng-en-us-DsYnUbZd.mjs +0 -28
- package/fesm2022/matechat-ng-en-us-DsYnUbZd.mjs.map +0 -1
- package/fesm2022/matechat-ng-zh-cn--_YVZHnW.mjs +0 -28
- package/fesm2022/matechat-ng-zh-cn--_YVZHnW.mjs.map +0 -1
- package/public-api.d.ts +0 -3
package/fesm2022/matechat-ng.mjs
CHANGED
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, Injectable, Pipe, ContentChild, NgModule, EventEmitter, HostListener, ViewChild, Output } from '@angular/core';
|
|
2
|
+
import { Component, Input, Injectable, Pipe, ContentChildren, ContentChild, NgModule, EventEmitter, HostListener, ViewChild, Output, ViewChildren, ViewContainerRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import { Subject } from 'rxjs';
|
|
5
|
+
import { Subject, debounceTime } from 'rxjs';
|
|
6
6
|
import * as i3 from '@angular/forms';
|
|
7
7
|
import { FormsModule } from '@angular/forms';
|
|
8
|
+
import { DiffDOM } from 'diff-dom';
|
|
9
|
+
import markdownit from 'markdown-it';
|
|
10
|
+
import { getDefaultWhiteList, getDefaultCSSWhiteList, filterXSS } from 'xss';
|
|
11
|
+
import hljs from 'highlight.js';
|
|
8
12
|
|
|
9
13
|
class BubbleLoadingComponent {
|
|
10
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
11
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
14
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BubbleLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: BubbleLoadingComponent, isStandalone: true, selector: "mc-bubble-loading", ngImport: i0, template: "<div class=\"mc-bubble-loading\">\n <div class=\"loading-dot dot-start\"></div>\n <div class=\"loading-dot dot-middle\"></div>\n <div class=\"loading-dot dot-end\"></div>\n</div>", styles: [".mc-bubble-loading{display:flex;align-items:center;gap:8px}.mc-bubble-loading .loading-dot{width:8px;height:8px;border-radius:5px;background-color:#9880ff}.mc-bubble-loading .loading-dot.dot-start{animation:dotFlashing 1s infinite linear alternate;animation-delay:0s}.mc-bubble-loading .loading-dot.dot-middle{animation:dotFlashing 1s infinite linear alternate;animation-delay:.5s}.mc-bubble-loading .loading-dot.dot-end{animation:dotFlashing 1s infinite linear alternate;animation-delay:1s}@keyframes dotFlashing{0%{background-color:#9880ff}to{background-color:#ebe6ff}}\n"] }); }
|
|
12
16
|
}
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BubbleLoadingComponent, decorators: [{
|
|
14
18
|
type: Component,
|
|
15
19
|
args: [{ selector: 'mc-bubble-loading', standalone: true, template: "<div class=\"mc-bubble-loading\">\n <div class=\"loading-dot dot-start\"></div>\n <div class=\"loading-dot dot-middle\"></div>\n <div class=\"loading-dot dot-end\"></div>\n</div>", styles: [".mc-bubble-loading{display:flex;align-items:center;gap:8px}.mc-bubble-loading .loading-dot{width:8px;height:8px;border-radius:5px;background-color:#9880ff}.mc-bubble-loading .loading-dot.dot-start{animation:dotFlashing 1s infinite linear alternate;animation-delay:0s}.mc-bubble-loading .loading-dot.dot-middle{animation:dotFlashing 1s infinite linear alternate;animation-delay:.5s}.mc-bubble-loading .loading-dot.dot-end{animation:dotFlashing 1s infinite linear alternate;animation-delay:1s}@keyframes dotFlashing{0%{background-color:#9880ff}to{background-color:#ebe6ff}}\n"] }]
|
|
16
20
|
}] });
|
|
@@ -20,10 +24,10 @@ class AvatarBodyIconComponent {
|
|
|
20
24
|
this.width = 16;
|
|
21
25
|
this.height = 16;
|
|
22
26
|
}
|
|
23
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
27
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarBodyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AvatarBodyIconComponent, isStandalone: true, selector: "mc-avatar-body-icon", inputs: { width: "width", height: "height" }, ngImport: i0, template: "<svg\n [style.width.px]=\"width\"\n [style.height.px]=\"height\"\n style=\"vertical-align: middle;\"\n viewBox=\"0 0 30 30\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle id=\"Oval\" fill=\"#CACFD8\" cx=\"15\" cy=\"15\" r=\"15\"></circle>\n <path\n d=\"M14.9997866,16 C12.5145053,16 10.4997866,13.9852814 10.4997866, 11.5 C10.4997866,9.01471863 12.5145053,7 14.9997866,7 C17.485068, 7 19.4997866,9.01471863 19.4997866,11.5 C19.4997866,13.9852814 17.485068, 16 14.9997866,16 Z M23,23 L7,22.998553 C7,19.0122153 10.8892296, 16.5 14.9997866,16.5 C19.1103437,16.5 23,20 23,23 Z\"\n fill=\"#FFFFFF\"\n ></path>\n </g>\n</svg>", styles: [""] }); }
|
|
25
29
|
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarBodyIconComponent, decorators: [{
|
|
27
31
|
type: Component,
|
|
28
32
|
args: [{ selector: 'mc-avatar-body-icon', standalone: true, template: "<svg\n [style.width.px]=\"width\"\n [style.height.px]=\"height\"\n style=\"vertical-align: middle;\"\n viewBox=\"0 0 30 30\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle id=\"Oval\" fill=\"#CACFD8\" cx=\"15\" cy=\"15\" r=\"15\"></circle>\n <path\n d=\"M14.9997866,16 C12.5145053,16 10.4997866,13.9852814 10.4997866, 11.5 C10.4997866,9.01471863 12.5145053,7 14.9997866,7 C17.485068, 7 19.4997866,9.01471863 19.4997866,11.5 C19.4997866,13.9852814 17.485068, 16 14.9997866,16 Z M23,23 L7,22.998553 C7,19.0122153 10.8892296, 16.5 14.9997866,16.5 C19.1103437,16.5 23,20 23,23 Z\"\n fill=\"#FFFFFF\"\n ></path>\n </g>\n</svg>" }]
|
|
29
33
|
}], propDecorators: { width: [{
|
|
@@ -37,10 +41,10 @@ class AvatarNoBodyIconComponent {
|
|
|
37
41
|
this.width = 16;
|
|
38
42
|
this.height = 16;
|
|
39
43
|
}
|
|
40
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
41
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
44
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarNoBodyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AvatarNoBodyIconComponent, isStandalone: true, selector: "mc-avatar-no-body-icon", inputs: { width: "width", height: "height" }, ngImport: i0, template: "<svg\n [style.width.px]=\"width\"\n [style.height.px]=\"height\"\n style=\"vertical-align: middle;\"\n viewBox=\"0 0 30 30\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M22.31,19.2474562 L22.31,21.9974562 L20.81,21.9974562 L20.81, 19.2474562 L18.06,19.2474562 L18.06,17.7474562 \n L20.81,17.7474562 L20.81, 14.9974562 L22.31,14.9974562 L22.31,17.7474562 L25.06,17.7474562 L25.06, 19.2474562 \n L22.31,19.2474562 Z M14.9297866,14.9974562 C12.4445053, 14.9974562 10.4297866,12.9827376 10.4297866,10.4974562 \n C10.4297866, 8.01217483 12.4445053,5.9974562 14.9297866,5.9974562 C17.415068, 5.9974562 19.4297866,8.01217483 \n 19.4297866,10.4974562 C19.4297866, 12.9827376 17.415068,14.9974562 14.9297866,14.9974562 Z M19.6797866, 20.2474562 \n L19.6797866,21.9971623 L6.93,21.9960092 C6.93,18.0096715 10.8192296, 15.4974562 14.9297866,15.4974562 C16.4608397,15.4974562 \n 17.9612467,15.983021 19.2414296, 16.7474562 L17.06,16.7474562 L17.06,20.2474562 L19.6797866,20.2474562 Z\"\n fill=\"#959EB2\"\n ></path>\n <path\n d=\"M0,15 L1,15 C1,15.6118966 1.03919561,16.2186526 1.11683409,\n 16.8178549 L0.125124012,16.9463505 C0.0425740367,16.309242 0,\n 15.6595925 0,15 Z M0.503241262,18.867175 L1.46961749,18.6100428 C1.62594651,\n 19.1975718 1.8203704,19.7729973 2.05141295,20.3332823 L1.12693074,\n 20.7145074 C0.880599065,20.1171459 0.67172715,19.500393 0.503241262,\n 18.867175 Z M1.99122134,22.4730778 L2.85786221,21.9741453 C3.16078316,\n 22.5003161 3.49772502,23.0063252 3.86631639,23.4889602 L3.0715754,\n 24.0959089 C2.6777461,23.5802273 2.31659753,23.0382531 1.99122134,\n 22.4730778 Z M4.38894559,25.6021078 L5.09634867,24.8952974 C5.52582519,\n 25.3251341 5.98272136,25.7268214 6.46397085,26.0975793 L5.85367498,\n 26.8897529 C5.33779918,26.4923186 4.84851395,26.0620615 4.38894559,\n 25.6021078 Z M7.4424647,27.9597887 L7.94703323,27.096417 C8.47111119,\n 27.4026968 9.0146817,27.6746032 9.57453904,27.9101878 L9.18668461,\n 28.8319084 C8.58423501,28.5784013 8.00181692,28.2866833 7.4424647,\n 27.9597887 Z M11.0671021,29.4791103 L11.3286494,28.5139196 C11.9126912,\n 28.6721832 12.5080563,28.7925378 13.1119738,28.8738935 L12.9784667,\n 29.8649413 C12.3271613,29.7772019 11.6891102,29.647662 11.0671021,\n 29.4791103 Z M15,30 C14.9951965,30 14.9903936,29.9999977 14.9855912,\n 30 L14.9865313,28.9999937 C14.9929361,28.9999987 14.9929361,\n 28.9999987 14.999296,29 C15.6071552,29 16.2093364,28.9614092 16.8041774,\n 28.8849313 L16.9316965,29.8767674 C16.2992813,29.9580762 15.6545362,\n 30 15,30 Z M18.8545762,29.5001051 L18.5982903,28.5335041 C19.1860387,\n 28.3776677 19.7617059,28.1837179 20.3222555,27.9531286 L20.7026875,\n 28.8779375 C20.1050484,29.123784 19.4880358,29.3321488 18.8545762,\n 29.5001051 Z M22.4608087,28.0158343 L21.9626951,27.1487226 C22.4893928,\n 26.8461604 22.9959399,26.5095265 23.479119,26.1411926 L24.0853678,\n 26.9364676 C23.5691101,27.3300178 23.0265585,27.6908386 22.4608087,\n 28.0158343 Z M25.5921583,25.6209863 L24.8860071,24.9129252 C25.3161421,\n 24.4839504 25.7181674,24.0275419 26.0893023,23.5467621 L26.8808873,\n 24.1578212 C26.4830546,24.6731862 26.0524368,25.1619493 25.5921583,\n 25.6209863 Z M27.9526445,22.5697466 L27.0897495,22.0643633 C27.3964738,\n 21.5406601 27.6688549,20.9974409 27.904942,20.4379104 L28.8262855,\n 20.8266601 C28.5722411,21.4287497 28.2800163,22.0107897 27.9526445,\n 22.5697466 Z M29.4756977,18.9454696 L28.5107363,18.6830777 C28.6695136,\n 18.099165 28.7903877,17.5039035 28.8722662,16.9000659 L29.8631978,\n 17.0344333 C29.7748946,17.6856516 29.6447979,18.3235936 29.4756977,\n 18.9454696 Z M30,15 C30,15.0093541 29.9999914,15.0187063 29.9999743,\n 15.0280564 L28.999976,15.0262257 C28.9999956,15.0134169 28.9999956,\n 15.0134169 29,15.0006466 C29,14.3970304 28.9619395,13.7989704 28.8865088,\n 13.208136 L29.8784576,13.0814959 C29.9586571,13.7096843 30,14.3500145 30,\n 15 Z M29.5038108,11.1594275 L28.5369608,11.4147728 C28.3816616,\n 10.8267413 28.1882232,10.2507676 27.9581175,9.68988857 L28.8832852,\n 9.31033004 C29.1286141,9.90831524 29.3364318,10.5256569 29.5038108,\n 11.1594275 Z M28.0228788,7.55146763 L27.1552968,8.0487618 C26.853241,\n 7.52179373 26.5170958,7.0149453 26.1492295,6.53143425 L26.9450761,\n 5.92593594 C27.3381231,6.44254364 27.6984223,6.98541919 28.0228788,\n 7.55146763 Z M25.6309089,4.41780044 L24.9221905,5.12329189 C24.4935639,\n 4.69270467 24.0374698,4.2902078 23.5569705,3.9185855 L24.1687554,\n 3.12756133 C24.6838129,3.52591118 25.1722392,3.95703271 25.6309089,\n 4.41780044 Z M22.5819506,2.05451093 L22.0757531,2.91692851 C21.5523008,\n 2.60968727 21.0092999,2.33677531 20.4499564,2.10014728 L20.8395722,\n 1.17916981 C21.4414531,1.43379309 22.0232574,1.72658499 22.5819506,\n 2.05451093 Z M18.9594329,0.528106464 L18.696103,1.4928123 C18.1122842,\n 1.33345081 17.517086,1.21199245 16.9132846,1.12953261 L17.0485964,\n 0.138729543 C17.6997753,0.227659622 18.3376514,0.358382523 18.9594329,\n 0.528106464 Z M15,-1.11022302e-16 C15.0139048,-1.11022302e-16 15.0278052,\n 1.892004e-05 15.0417011,5.673578e-05 L15.0389797,1.00005303 C15.0197685,\n 1.00000934 15.0197685,1.00000934 15.0005868,1.00000001 C14.4012162,\n 1 13.8072783,1.03753392 13.2204527,1.11192427 L13.0946918,0.119863691 C13.7186509,\n 0.0407660189 14.3545651,-1.11022302e-16 15,-1.11022302e-16 Z M11.1720354,\n 0.492865376 L11.4265338,1.45993857 C10.8386468,1.61464899 10.2627801,\n 1.80746996 9.70196444,2.03693489 L9.32327455,1.11141127 C9.92118954,\n 0.86676666 10.5384173,0.659610554 11.1720354,0.492865376 Z M7.56375123,\n 1.97008801 L8.06022548,2.83813946 C7.53298826,3.13968806 7.02583975,\n 3.47534367 6.54199783,3.84274131 L5.93725081,3.04632368 C6.4542073,\n 2.65378102 6.99740556,2.29400434 7.56375123,1.97008801 Z M4.42776842,\n 4.35917772 L5.13259949,5.06855291 C4.70156141,5.49682984 4.29859416,\n 5.95260763 3.92648544,6.43282469 L3.13602297,5.82031423 C3.53488885,\n 5.30556625 3.96651291,4.81747851 4.42776842,4.35917772 Z M2.0616775,\n 7.40585279 L2.92361696,7.91286401 C2.61586086,8.43606175 2.34241977,\n 8.97884042 2.10525197,9.53799293 L1.18464153,9.14751063 C1.43984243,\n 8.54584288 1.73319965,7.96427837 2.0616775,7.40585279 Z M0.531541456,\n 11.0280046 L1.49601653,11.2921785 C1.33614878,11.8758413 1.21417484,\n 12.4709081 1.13119244,13.074601 L0.140507978,12.9384235 C0.230001486,12.2873626 0.361276825,11.6496255 0.531541456,11.0280046 Z\"\n fill=\"#CACFD8\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n</svg>", styles: [""] }); }
|
|
42
46
|
}
|
|
43
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarNoBodyIconComponent, decorators: [{
|
|
44
48
|
type: Component,
|
|
45
49
|
args: [{ selector: 'mc-avatar-no-body-icon', standalone: true, template: "<svg\n [style.width.px]=\"width\"\n [style.height.px]=\"height\"\n style=\"vertical-align: middle;\"\n viewBox=\"0 0 30 30\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M22.31,19.2474562 L22.31,21.9974562 L20.81,21.9974562 L20.81, 19.2474562 L18.06,19.2474562 L18.06,17.7474562 \n L20.81,17.7474562 L20.81, 14.9974562 L22.31,14.9974562 L22.31,17.7474562 L25.06,17.7474562 L25.06, 19.2474562 \n L22.31,19.2474562 Z M14.9297866,14.9974562 C12.4445053, 14.9974562 10.4297866,12.9827376 10.4297866,10.4974562 \n C10.4297866, 8.01217483 12.4445053,5.9974562 14.9297866,5.9974562 C17.415068, 5.9974562 19.4297866,8.01217483 \n 19.4297866,10.4974562 C19.4297866, 12.9827376 17.415068,14.9974562 14.9297866,14.9974562 Z M19.6797866, 20.2474562 \n L19.6797866,21.9971623 L6.93,21.9960092 C6.93,18.0096715 10.8192296, 15.4974562 14.9297866,15.4974562 C16.4608397,15.4974562 \n 17.9612467,15.983021 19.2414296, 16.7474562 L17.06,16.7474562 L17.06,20.2474562 L19.6797866,20.2474562 Z\"\n fill=\"#959EB2\"\n ></path>\n <path\n d=\"M0,15 L1,15 C1,15.6118966 1.03919561,16.2186526 1.11683409,\n 16.8178549 L0.125124012,16.9463505 C0.0425740367,16.309242 0,\n 15.6595925 0,15 Z M0.503241262,18.867175 L1.46961749,18.6100428 C1.62594651,\n 19.1975718 1.8203704,19.7729973 2.05141295,20.3332823 L1.12693074,\n 20.7145074 C0.880599065,20.1171459 0.67172715,19.500393 0.503241262,\n 18.867175 Z M1.99122134,22.4730778 L2.85786221,21.9741453 C3.16078316,\n 22.5003161 3.49772502,23.0063252 3.86631639,23.4889602 L3.0715754,\n 24.0959089 C2.6777461,23.5802273 2.31659753,23.0382531 1.99122134,\n 22.4730778 Z M4.38894559,25.6021078 L5.09634867,24.8952974 C5.52582519,\n 25.3251341 5.98272136,25.7268214 6.46397085,26.0975793 L5.85367498,\n 26.8897529 C5.33779918,26.4923186 4.84851395,26.0620615 4.38894559,\n 25.6021078 Z M7.4424647,27.9597887 L7.94703323,27.096417 C8.47111119,\n 27.4026968 9.0146817,27.6746032 9.57453904,27.9101878 L9.18668461,\n 28.8319084 C8.58423501,28.5784013 8.00181692,28.2866833 7.4424647,\n 27.9597887 Z M11.0671021,29.4791103 L11.3286494,28.5139196 C11.9126912,\n 28.6721832 12.5080563,28.7925378 13.1119738,28.8738935 L12.9784667,\n 29.8649413 C12.3271613,29.7772019 11.6891102,29.647662 11.0671021,\n 29.4791103 Z M15,30 C14.9951965,30 14.9903936,29.9999977 14.9855912,\n 30 L14.9865313,28.9999937 C14.9929361,28.9999987 14.9929361,\n 28.9999987 14.999296,29 C15.6071552,29 16.2093364,28.9614092 16.8041774,\n 28.8849313 L16.9316965,29.8767674 C16.2992813,29.9580762 15.6545362,\n 30 15,30 Z M18.8545762,29.5001051 L18.5982903,28.5335041 C19.1860387,\n 28.3776677 19.7617059,28.1837179 20.3222555,27.9531286 L20.7026875,\n 28.8779375 C20.1050484,29.123784 19.4880358,29.3321488 18.8545762,\n 29.5001051 Z M22.4608087,28.0158343 L21.9626951,27.1487226 C22.4893928,\n 26.8461604 22.9959399,26.5095265 23.479119,26.1411926 L24.0853678,\n 26.9364676 C23.5691101,27.3300178 23.0265585,27.6908386 22.4608087,\n 28.0158343 Z M25.5921583,25.6209863 L24.8860071,24.9129252 C25.3161421,\n 24.4839504 25.7181674,24.0275419 26.0893023,23.5467621 L26.8808873,\n 24.1578212 C26.4830546,24.6731862 26.0524368,25.1619493 25.5921583,\n 25.6209863 Z M27.9526445,22.5697466 L27.0897495,22.0643633 C27.3964738,\n 21.5406601 27.6688549,20.9974409 27.904942,20.4379104 L28.8262855,\n 20.8266601 C28.5722411,21.4287497 28.2800163,22.0107897 27.9526445,\n 22.5697466 Z M29.4756977,18.9454696 L28.5107363,18.6830777 C28.6695136,\n 18.099165 28.7903877,17.5039035 28.8722662,16.9000659 L29.8631978,\n 17.0344333 C29.7748946,17.6856516 29.6447979,18.3235936 29.4756977,\n 18.9454696 Z M30,15 C30,15.0093541 29.9999914,15.0187063 29.9999743,\n 15.0280564 L28.999976,15.0262257 C28.9999956,15.0134169 28.9999956,\n 15.0134169 29,15.0006466 C29,14.3970304 28.9619395,13.7989704 28.8865088,\n 13.208136 L29.8784576,13.0814959 C29.9586571,13.7096843 30,14.3500145 30,\n 15 Z M29.5038108,11.1594275 L28.5369608,11.4147728 C28.3816616,\n 10.8267413 28.1882232,10.2507676 27.9581175,9.68988857 L28.8832852,\n 9.31033004 C29.1286141,9.90831524 29.3364318,10.5256569 29.5038108,\n 11.1594275 Z M28.0228788,7.55146763 L27.1552968,8.0487618 C26.853241,\n 7.52179373 26.5170958,7.0149453 26.1492295,6.53143425 L26.9450761,\n 5.92593594 C27.3381231,6.44254364 27.6984223,6.98541919 28.0228788,\n 7.55146763 Z M25.6309089,4.41780044 L24.9221905,5.12329189 C24.4935639,\n 4.69270467 24.0374698,4.2902078 23.5569705,3.9185855 L24.1687554,\n 3.12756133 C24.6838129,3.52591118 25.1722392,3.95703271 25.6309089,\n 4.41780044 Z M22.5819506,2.05451093 L22.0757531,2.91692851 C21.5523008,\n 2.60968727 21.0092999,2.33677531 20.4499564,2.10014728 L20.8395722,\n 1.17916981 C21.4414531,1.43379309 22.0232574,1.72658499 22.5819506,\n 2.05451093 Z M18.9594329,0.528106464 L18.696103,1.4928123 C18.1122842,\n 1.33345081 17.517086,1.21199245 16.9132846,1.12953261 L17.0485964,\n 0.138729543 C17.6997753,0.227659622 18.3376514,0.358382523 18.9594329,\n 0.528106464 Z M15,-1.11022302e-16 C15.0139048,-1.11022302e-16 15.0278052,\n 1.892004e-05 15.0417011,5.673578e-05 L15.0389797,1.00005303 C15.0197685,\n 1.00000934 15.0197685,1.00000934 15.0005868,1.00000001 C14.4012162,\n 1 13.8072783,1.03753392 13.2204527,1.11192427 L13.0946918,0.119863691 C13.7186509,\n 0.0407660189 14.3545651,-1.11022302e-16 15,-1.11022302e-16 Z M11.1720354,\n 0.492865376 L11.4265338,1.45993857 C10.8386468,1.61464899 10.2627801,\n 1.80746996 9.70196444,2.03693489 L9.32327455,1.11141127 C9.92118954,\n 0.86676666 10.5384173,0.659610554 11.1720354,0.492865376 Z M7.56375123,\n 1.97008801 L8.06022548,2.83813946 C7.53298826,3.13968806 7.02583975,\n 3.47534367 6.54199783,3.84274131 L5.93725081,3.04632368 C6.4542073,\n 2.65378102 6.99740556,2.29400434 7.56375123,1.97008801 Z M4.42776842,\n 4.35917772 L5.13259949,5.06855291 C4.70156141,5.49682984 4.29859416,\n 5.95260763 3.92648544,6.43282469 L3.13602297,5.82031423 C3.53488885,\n 5.30556625 3.96651291,4.81747851 4.42776842,4.35917772 Z M2.0616775,\n 7.40585279 L2.92361696,7.91286401 C2.61586086,8.43606175 2.34241977,\n 8.97884042 2.10525197,9.53799293 L1.18464153,9.14751063 C1.43984243,\n 8.54584288 1.73319965,7.96427837 2.0616775,7.40585279 Z M0.531541456,\n 11.0280046 L1.49601653,11.2921785 C1.33614878,11.8758413 1.21417484,\n 12.4709081 1.13119244,13.074601 L0.140507978,12.9384235 C0.230001486,12.2873626 0.361276825,11.6496255 0.531541456,11.0280046 Z\"\n fill=\"#CACFD8\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n</svg>" }]
|
|
46
50
|
}], propDecorators: { width: [{
|
|
@@ -49,6 +53,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
49
53
|
type: Input
|
|
50
54
|
}] } });
|
|
51
55
|
|
|
56
|
+
var zhCN = {
|
|
57
|
+
Input: {
|
|
58
|
+
send: "发送",
|
|
59
|
+
pauseAnswer: "停止回答",
|
|
60
|
+
pleaseEnter: "请输入您的问题...",
|
|
61
|
+
pleaseEnterPlaceholder: "请输入您的问题，并按{enterKey}发送，按{shiftEnterKey}换行",
|
|
62
|
+
ariaLabel: "输入框",
|
|
63
|
+
},
|
|
64
|
+
Md: {
|
|
65
|
+
toggle: "收起/展开",
|
|
66
|
+
copy: "复制",
|
|
67
|
+
diagram: '图形',
|
|
68
|
+
code: '代码',
|
|
69
|
+
zoomIn: '放大',
|
|
70
|
+
zoomOut: '缩小',
|
|
71
|
+
downLoad: '下载',
|
|
72
|
+
},
|
|
73
|
+
Bubble: {
|
|
74
|
+
ariaLabel: "聊天消息气泡",
|
|
75
|
+
emptyAvatar: "无头像占位",
|
|
76
|
+
userName: "用户名称: {name}",
|
|
77
|
+
content: "消息内容",
|
|
78
|
+
avatar: "用户头像: {name}"
|
|
79
|
+
},
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
var enUS = {
|
|
83
|
+
Input: {
|
|
84
|
+
send: "Send",
|
|
85
|
+
pauseAnswer: "Stop",
|
|
86
|
+
pleaseEnter: "Please enter your question...",
|
|
87
|
+
pleaseEnterPlaceholder: "Please enter your question and press {enterKey} to send, {shiftEnterKey} to wrap.",
|
|
88
|
+
ariaLabel: "Input box",
|
|
89
|
+
},
|
|
90
|
+
Md: {
|
|
91
|
+
toggle: "Collapse/Expand",
|
|
92
|
+
copy: "Copy",
|
|
93
|
+
diagram: 'Diagram',
|
|
94
|
+
code: 'Code',
|
|
95
|
+
zoomIn: 'Zoom In',
|
|
96
|
+
zoomOut: 'Zoom Out',
|
|
97
|
+
downLoad: 'Download',
|
|
98
|
+
},
|
|
99
|
+
Bubble: {
|
|
100
|
+
ariaLabel: "Chat message bubble",
|
|
101
|
+
emptyAvatar: "Empty avatar placeholder",
|
|
102
|
+
userName: "User name: {name}",
|
|
103
|
+
content: "Message content",
|
|
104
|
+
avatar: "User avatar: {name}"
|
|
105
|
+
},
|
|
106
|
+
};
|
|
107
|
+
|
|
52
108
|
class LocaleService {
|
|
53
109
|
constructor() {
|
|
54
110
|
// 当前语言
|
|
@@ -73,10 +129,8 @@ class LocaleService {
|
|
|
73
129
|
async loadDefaultLocales() {
|
|
74
130
|
try {
|
|
75
131
|
// 动态导入默认语言包
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
this._localeData.set('zh-cn', zhCN.default);
|
|
79
|
-
this._localeData.set('en-us', enUS.default);
|
|
132
|
+
this._localeData.set('zh-cn', zhCN);
|
|
133
|
+
this._localeData.set('en-us', enUS);
|
|
80
134
|
}
|
|
81
135
|
catch (error) {
|
|
82
136
|
console.error('Failed to load default locales:', error);
|
|
@@ -176,10 +230,10 @@ class LocaleService {
|
|
|
176
230
|
}
|
|
177
231
|
return result;
|
|
178
232
|
}
|
|
179
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
180
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
234
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LocaleService, providedIn: 'root' }); }
|
|
181
235
|
}
|
|
182
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LocaleService, decorators: [{
|
|
183
237
|
type: Injectable,
|
|
184
238
|
args: [{
|
|
185
239
|
providedIn: 'root'
|
|
@@ -206,11 +260,11 @@ class TranslatePipe {
|
|
|
206
260
|
// 调用LocaleService的翻译方法
|
|
207
261
|
return this.localeService.translate(key, params);
|
|
208
262
|
}
|
|
209
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
210
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
211
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
263
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TranslatePipe, deps: [{ token: LocaleService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
264
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate", pure: false }); }
|
|
265
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TranslatePipe }); }
|
|
212
266
|
}
|
|
213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TranslatePipe, decorators: [{
|
|
214
268
|
type: Pipe,
|
|
215
269
|
args: [{
|
|
216
270
|
name: 'translate',
|
|
@@ -315,10 +369,10 @@ class AvatarComponent {
|
|
|
315
369
|
}
|
|
316
370
|
this.fontSize = minNum / 4 + 3;
|
|
317
371
|
}
|
|
318
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
319
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
372
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AvatarComponent, isStandalone: true, selector: "mc-avatar", inputs: { imgSrc: "imgSrc", name: "name", width: "width", height: "height", isRound: "isRound", gender: "gender" }, usesOnChanges: true, ngImport: i0, template: "<span class=\"mc-bubble-avatar-wrapper\">\n <img\n *ngIf=\"imgSrc && !isErrorImg\"\n [src]=\"imgSrc\"\n [attr.alt]=\"'Bubble.avatar' | translate:{ name: name }\"\n (error)=\"onErrorImg()\"\n [ngStyle]=\"{\n height: height + 'px',\n width: width + 'px',\n borderRadius: isRound ? '100%' : '0'\n }\"\n />\n <span\n *ngIf=\"!imgSrc && !isNobody && nameDisplay?.length !== 0\"\n [ngClass]=\"['mc-bubble-avatar-style', 'mc-bubble-avatar-background-' + code]\"\n [ngStyle]=\"{\n height: height + 'px',\n width: width + 'px',\n lineHeight: height + 'px',\n fontSize: fontSize + 'px',\n borderRadius: isRound ? '100%' : '0'\n }\"\n >\n {{ nameDisplay }}\n </span>\n <span\n *ngIf=\"!imgSrc && !isNobody && nameDisplay?.length === 0\"\n class=\"mc-bubble-avatar-style\"\n [ngStyle]=\"{ borderRadius: isRound ? '100%' : '0' }\"\n >\n <mc-avatar-body-icon [width]=\"width\" [height]=\"height\" />\n </span>\n <span\n *ngIf=\"(!imgSrc && isNobody) || (imgSrc && isErrorImg)\"\n class=\"mc-bubble-avatar-style\"\n [ngStyle]=\"{ borderRadius: isRound ? '100%' : '0' }\"\n >\n <mc-avatar-no-body-icon [width]=\"width\" [height]=\"height\" />\n </span>\n</span>", styles: [".mc-bubble-avatar-wrapper{display:inline-block}.mc-bubble-avatar-wrapper .mc-bubble-avatar-style{display:inline-block;text-align:center;color:var(--devui-light-text, #ffffff)}.mc-bubble-avatar-wrapper .mc-bubble-avatar-background-0{background-color:#ff8b87}.mc-bubble-avatar-wrapper .mc-bubble-avatar-background-1{background-color:#7693f5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvatarBodyIconComponent, selector: "mc-avatar-body-icon", inputs: ["width", "height"] }, { kind: "component", type: AvatarNoBodyIconComponent, selector: "mc-avatar-no-body-icon", inputs: ["width", "height"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
320
374
|
}
|
|
321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
322
376
|
type: Component,
|
|
323
377
|
args: [{ selector: 'mc-avatar', standalone: true, imports: [CommonModule, AvatarBodyIconComponent, AvatarNoBodyIconComponent, TranslatePipe], template: "<span class=\"mc-bubble-avatar-wrapper\">\n <img\n *ngIf=\"imgSrc && !isErrorImg\"\n [src]=\"imgSrc\"\n [attr.alt]=\"'Bubble.avatar' | translate:{ name: name }\"\n (error)=\"onErrorImg()\"\n [ngStyle]=\"{\n height: height + 'px',\n width: width + 'px',\n borderRadius: isRound ? '100%' : '0'\n }\"\n />\n <span\n *ngIf=\"!imgSrc && !isNobody && nameDisplay?.length !== 0\"\n [ngClass]=\"['mc-bubble-avatar-style', 'mc-bubble-avatar-background-' + code]\"\n [ngStyle]=\"{\n height: height + 'px',\n width: width + 'px',\n lineHeight: height + 'px',\n fontSize: fontSize + 'px',\n borderRadius: isRound ? '100%' : '0'\n }\"\n >\n {{ nameDisplay }}\n </span>\n <span\n *ngIf=\"!imgSrc && !isNobody && nameDisplay?.length === 0\"\n class=\"mc-bubble-avatar-style\"\n [ngStyle]=\"{ borderRadius: isRound ? '100%' : '0' }\"\n >\n <mc-avatar-body-icon [width]=\"width\" [height]=\"height\" />\n </span>\n <span\n *ngIf=\"(!imgSrc && isNobody) || (imgSrc && isErrorImg)\"\n class=\"mc-bubble-avatar-style\"\n [ngStyle]=\"{ borderRadius: isRound ? '100%' : '0' }\"\n >\n <mc-avatar-no-body-icon [width]=\"width\" [height]=\"height\" />\n </span>\n</span>", styles: [".mc-bubble-avatar-wrapper{display:inline-block}.mc-bubble-avatar-wrapper .mc-bubble-avatar-style{display:inline-block;text-align:center;color:var(--devui-light-text, #ffffff)}.mc-bubble-avatar-wrapper .mc-bubble-avatar-background-0{background-color:#ff8b87}.mc-bubble-avatar-wrapper .mc-bubble-avatar-background-1{background-color:#7693f5}\n"] }]
|
|
324
378
|
}], propDecorators: { imgSrc: [{
|
|
@@ -394,6 +448,9 @@ class BaseFoundation {
|
|
|
394
448
|
setCache(key, value) {
|
|
395
449
|
return key && this._adapter.setCache(key, value);
|
|
396
450
|
}
|
|
451
|
+
nextTick(cb) {
|
|
452
|
+
return this._adapter.nextTick(cb);
|
|
453
|
+
}
|
|
397
454
|
_isInProps(key) {
|
|
398
455
|
const props = this.getProps();
|
|
399
456
|
return key in props;
|
|
@@ -432,7 +489,6 @@ class BubbleFoundation extends BaseFoundation {
|
|
|
432
489
|
|
|
433
490
|
class BaseComponent {
|
|
434
491
|
constructor() {
|
|
435
|
-
this.foundation = null;
|
|
436
492
|
}
|
|
437
493
|
ngOnDestroy() {
|
|
438
494
|
this.foundation &&
|
|
@@ -460,12 +516,13 @@ class BaseComponent {
|
|
|
460
516
|
getCache: (key) => key && this.cache[key],
|
|
461
517
|
getCaches: () => this.cache,
|
|
462
518
|
setCache: (key, value) => key && (this.cache[key] = value),
|
|
519
|
+
nextTick: (cb) => setTimeout(cb, 0),
|
|
463
520
|
};
|
|
464
521
|
}
|
|
465
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
466
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
522
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
523
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: BaseComponent, isStandalone: true, selector: "mate-base-component", ngImport: i0, template: '', isInline: true }); }
|
|
467
524
|
}
|
|
468
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
525
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseComponent, decorators: [{
|
|
469
526
|
type: Component,
|
|
470
527
|
args: [{
|
|
471
528
|
selector: 'mate-base-component',
|
|
@@ -475,6 +532,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
475
532
|
}], ctorParameters: () => [] });
|
|
476
533
|
|
|
477
534
|
class BubbleComponent extends BaseComponent {
|
|
535
|
+
// 计算是否有内容投影
|
|
536
|
+
get ngContentProjected() {
|
|
537
|
+
return this.contentChildren && this.contentChildren.length > 0;
|
|
538
|
+
}
|
|
478
539
|
constructor() {
|
|
479
540
|
super();
|
|
480
541
|
// 组件属性
|
|
@@ -484,9 +545,9 @@ class BubbleComponent extends BaseComponent {
|
|
|
484
545
|
this.avatarPosition = 'side';
|
|
485
546
|
this.variant = 'filled';
|
|
486
547
|
// 内容投影模板引用
|
|
548
|
+
this.avatarTemplate = null;
|
|
487
549
|
this.topTemplate = null;
|
|
488
550
|
this.loadingTplTemplate = null;
|
|
489
|
-
this.defaultTemplate = null;
|
|
490
551
|
this.bottomTemplate = null;
|
|
491
552
|
}
|
|
492
553
|
ngOnInit() {
|
|
@@ -515,12 +576,12 @@ class BubbleComponent extends BaseComponent {
|
|
|
515
576
|
return this.foundation.getIsEmptyAvatar(this.avatarConfig);
|
|
516
577
|
}
|
|
517
578
|
;
|
|
518
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
519
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
579
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BubbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
580
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: BubbleComponent, isStandalone: true, selector: "mc-bubble", inputs: { content: "content", loading: "loading", align: "align", avatarPosition: "avatarPosition", variant: "variant", avatarConfig: "avatarConfig" }, queries: [{ propertyName: "avatarTemplate", first: true, predicate: ["avatar"], descendants: true }, { propertyName: "topTemplate", first: true, predicate: ["top"], descendants: true }, { propertyName: "loadingTplTemplate", first: true, predicate: ["loadingTpl"], descendants: true }, { propertyName: "bottomTemplate", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "contentChildren", predicate: ["ng-content"] }], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-bubble\" [ngClass]=\"bubbleClasses\" role=\"group\" [attr.aria-label]=\"'Bubble.ariaLabel' | translate\">\n <!-- \u81EA\u5B9A\u4E49\u5934\u50CF\u533A\u57DF -->\n <div *ngIf=\"avatarTemplate\" class=\"mc-bubble-avatar\" role=\"img\">\n <ng-container *ngTemplateOutlet=\"avatarTemplate\"></ng-container>\n <ng-content select=\"[avatar]\"></ng-content>\n </div>\n \n <!-- \u9ED8\u8BA4\u5934\u50CF\u914D\u7F6E -->\n <div *ngIf=\"!avatarTemplate && avatarConfig\"\n class=\"mc-bubble-avatar\" role=\"img\"\n [ngClass]=\"{ 'empty-avatar': isEmptyAvatar }\"\n >\n <mc-avatar\n *ngIf=\"!isEmptyAvatar\"\n [imgSrc]=\"avatarConfig?.imgSrc || ''\"\n [name]=\"avatarConfig?.name || ''\"\n [width]=\"avatarConfig?.width || 36\"\n [height]=\"avatarConfig?.height || 36\"\n [gender]=\"avatarConfig?.gender || ''\"\n />\n <div *ngIf=\"isEmptyAvatar\" class=\"mc-bubble-avatar-wrapper\" [attr.aria-label]=\"'Bubble.emptyAvatar' | translate\"\n [style.width.px]=\"avatarConfig?.width || 36\"\n [style.height.px]=\"avatarConfig?.height || 36\"></div>\n <span *ngIf=\"avatarPosition === 'top'\" class=\"mc-bubble-avatar-name\" [attr.aria-label]=\"'Bubble.userName' | translate:{ name: avatarConfig?.displayName || '' } \">{{\n avatarConfig?.displayName\n }}</span>\n </div>\n <div\n class=\"mc-bubble-content-container\" aria-live=\"polite\"\n [ngClass]=\"{ 'with-avatar': avatarTemplate || avatarConfig }\"\n >\n <!-- \u9876\u90E8\u5185\u5BB9\u6295\u5F71 -->\n <ng-container *ngIf=\"!loading\">\n <ng-container *ngTemplateOutlet=\"topTemplate\"></ng-container>\n <ng-content select=\"[top]\"></ng-content>\n </ng-container>\n \n <!-- \u52A0\u8F7D\u72B6\u6001 -->\n <div *ngIf=\"loading\" class=\"loading-container\" role=\"status\" aria-busy=\"true\">\n <ng-container *ngIf=\"loadingTplTemplate; else defaultLoadingTemplate\">\n <ng-container *ngTemplateOutlet=\"loadingTplTemplate\"></ng-container>\n <ng-content select=\"[loadingTpl]\"></ng-content>\n </ng-container>\n <ng-template #defaultLoadingTemplate>\n <mc-bubble-loading></mc-bubble-loading>\n </ng-template>\n </div>\n \n <!-- \u4E3B\u8981\u5185\u5BB9 -->\n <div\n *ngIf=\"!loading\"\n class=\"mc-bubble-content\"\n [ngClass]=\"[variant]\"\n role=\"region\"\n >\n <ng-content></ng-content>\n <ng-container *ngIf=\"content && !ngContentProjected\">\n <span [attr.aria-label]=\"'Bubble.content' | translate\">{{ content }}</span>\n </ng-container>\n </div>\n \n <!-- \u5E95\u90E8\u5185\u5BB9\u6295\u5F71 -->\n <ng-container *ngIf=\"!loading\">\n <ng-container *ngTemplateOutlet=\"bottomTemplate\"></ng-container>\n <ng-content select=\"[bottom]\"></ng-content>\n </ng-container>\n </div>\n</div>\n", styles: [".mc-bubble{display:flex;gap:4px;font-size:var(--devui-font-size, 14px)}.mc-bubble .mc-bubble-content{word-wrap:break-word}.mc-bubble .mc-bubble-content.filled,.mc-bubble .mc-bubble-content.bordered{padding:12px 16px;border-radius:12px}.mc-bubble .mc-bubble-content.filled{background-color:var(--devui-global-bg, #f6f6f8)}.mc-bubble .mc-bubble-content.bordered{border:1px solid var(--devui-dividing-line, #f2f2f3)}.mc-bubble .mc-bubble-avatar{flex-shrink:0;display:flex;gap:4px}.mc-bubble .mc-bubble-avatar .mc-bubble-avatar-name{font-size:14px}.mc-bubble .mc-bubble-avatar.empty-avatar{visibility:hidden}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar{align-items:center}.mc-bubble .mc-bubble-content-container{max-width:100%}.mc-bubble.mc-bubble-avatar-top{flex-direction:column}.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{align-items:flex-start;flex-direction:column}.mc-bubble.mc-bubble-loading.mc-bubble-avatar-side{align-items:center}.mc-bubble.mc-bubble-avatar-side.mc-bubble-right{flex-direction:row-reverse;justify-content:end}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{display:flex}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-content-container{align-items:flex-end}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar{flex-direction:row-reverse}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BubbleLoadingComponent, selector: "mc-bubble-loading" }, { kind: "component", type: AvatarComponent, selector: "mc-avatar", inputs: ["imgSrc", "name", "width", "height", "isRound", "gender"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
520
581
|
}
|
|
521
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BubbleComponent, decorators: [{
|
|
522
583
|
type: Component,
|
|
523
|
-
args: [{ selector: 'mc-bubble', standalone: true, imports: [CommonModule, BubbleLoadingComponent, AvatarComponent, TranslatePipe], template: "<div class=\"mc-bubble\" [ngClass]=\"bubbleClasses\" role=\"group\" [attr.aria-label]=\"'Bubble.ariaLabel' | translate\">\n <div\n *ngIf=\"avatarConfig\"\n class=\"mc-bubble-avatar\" role=\"img\"\n [ngClass]=\"{ 'empty-avatar': isEmptyAvatar }\"\n >\n <mc-avatar\n *ngIf=\"!isEmptyAvatar\"\n [imgSrc]=\"avatarConfig?.imgSrc || ''\"\n [name]=\"avatarConfig?.name || ''\"\n [width]=\"avatarConfig?.width || 36\"\n [height]=\"avatarConfig?.height || 36\"\n [gender]=\"avatarConfig?.gender || ''\"\n />\n <div *ngIf=\"isEmptyAvatar\" class=\"mc-bubble-avatar-wrapper\" [attr.aria-label]=\"'Bubble.emptyAvatar' | translate\"\n [style.width.px]=\"avatarConfig?.width || 36\"\n [style.height.px]=\"avatarConfig?.height || 36\"></div>\n <span *ngIf=\"avatarPosition === 'top'\" class=\"mc-bubble-avatar-name\" [attr.aria-label]=\"'Bubble.userName' | translate:{ name: avatarConfig?.displayName || '' } \">{{\n avatarConfig?.displayName\n }}</span>\n </div>\n <div\n class=\"mc-bubble-content-container\" aria-live=\"polite\"\n [ngClass]=\"{ 'with-avatar': avatarConfig }\"\n >\n <!-- \u9876\u90E8\u5185\u5BB9\u6295\u5F71 -->\n <ng-container *ngIf=\"!loading\">\n <ng-container *ngTemplateOutlet=\"topTemplate\"></ng-container>\n <ng-content select=\"[top]\"></ng-content>\n </ng-container>\n \n <!-- \u52A0\u8F7D\u72B6\u6001 -->\n <div *ngIf=\"loading\" class=\"loading-container\" role=\"status\" aria-busy=\"true\">\n <ng-container *ngIf=\"loadingTplTemplate; else defaultLoadingTemplate\">\n <ng-container *ngTemplateOutlet=\"loadingTplTemplate\"></ng-container>\n <ng-content select=\"[loadingTpl]\"></ng-content>\n </ng-container>\n <ng-template #defaultLoadingTemplate>\n <mc-bubble-loading></mc-bubble-loading>\n </ng-template>\n </div>\n \n <!-- \u4E3B\u8981\u5185\u5BB9 -->\n <div\n *ngIf=\"
|
|
584
|
+
args: [{ selector: 'mc-bubble', standalone: true, imports: [CommonModule, BubbleLoadingComponent, AvatarComponent, TranslatePipe], template: "<div class=\"mc-bubble\" [ngClass]=\"bubbleClasses\" role=\"group\" [attr.aria-label]=\"'Bubble.ariaLabel' | translate\">\n <!-- \u81EA\u5B9A\u4E49\u5934\u50CF\u533A\u57DF -->\n <div *ngIf=\"avatarTemplate\" class=\"mc-bubble-avatar\" role=\"img\">\n <ng-container *ngTemplateOutlet=\"avatarTemplate\"></ng-container>\n <ng-content select=\"[avatar]\"></ng-content>\n </div>\n \n <!-- \u9ED8\u8BA4\u5934\u50CF\u914D\u7F6E -->\n <div *ngIf=\"!avatarTemplate && avatarConfig\"\n class=\"mc-bubble-avatar\" role=\"img\"\n [ngClass]=\"{ 'empty-avatar': isEmptyAvatar }\"\n >\n <mc-avatar\n *ngIf=\"!isEmptyAvatar\"\n [imgSrc]=\"avatarConfig?.imgSrc || ''\"\n [name]=\"avatarConfig?.name || ''\"\n [width]=\"avatarConfig?.width || 36\"\n [height]=\"avatarConfig?.height || 36\"\n [gender]=\"avatarConfig?.gender || ''\"\n />\n <div *ngIf=\"isEmptyAvatar\" class=\"mc-bubble-avatar-wrapper\" [attr.aria-label]=\"'Bubble.emptyAvatar' | translate\"\n [style.width.px]=\"avatarConfig?.width || 36\"\n [style.height.px]=\"avatarConfig?.height || 36\"></div>\n <span *ngIf=\"avatarPosition === 'top'\" class=\"mc-bubble-avatar-name\" [attr.aria-label]=\"'Bubble.userName' | translate:{ name: avatarConfig?.displayName || '' } \">{{\n avatarConfig?.displayName\n }}</span>\n </div>\n <div\n class=\"mc-bubble-content-container\" aria-live=\"polite\"\n [ngClass]=\"{ 'with-avatar': avatarTemplate || avatarConfig }\"\n >\n <!-- \u9876\u90E8\u5185\u5BB9\u6295\u5F71 -->\n <ng-container *ngIf=\"!loading\">\n <ng-container *ngTemplateOutlet=\"topTemplate\"></ng-container>\n <ng-content select=\"[top]\"></ng-content>\n </ng-container>\n \n <!-- \u52A0\u8F7D\u72B6\u6001 -->\n <div *ngIf=\"loading\" class=\"loading-container\" role=\"status\" aria-busy=\"true\">\n <ng-container *ngIf=\"loadingTplTemplate; else defaultLoadingTemplate\">\n <ng-container *ngTemplateOutlet=\"loadingTplTemplate\"></ng-container>\n <ng-content select=\"[loadingTpl]\"></ng-content>\n </ng-container>\n <ng-template #defaultLoadingTemplate>\n <mc-bubble-loading></mc-bubble-loading>\n </ng-template>\n </div>\n \n <!-- \u4E3B\u8981\u5185\u5BB9 -->\n <div\n *ngIf=\"!loading\"\n class=\"mc-bubble-content\"\n [ngClass]=\"[variant]\"\n role=\"region\"\n >\n <ng-content></ng-content>\n <ng-container *ngIf=\"content && !ngContentProjected\">\n <span [attr.aria-label]=\"'Bubble.content' | translate\">{{ content }}</span>\n </ng-container>\n </div>\n \n <!-- \u5E95\u90E8\u5185\u5BB9\u6295\u5F71 -->\n <ng-container *ngIf=\"!loading\">\n <ng-container *ngTemplateOutlet=\"bottomTemplate\"></ng-container>\n <ng-content select=\"[bottom]\"></ng-content>\n </ng-container>\n </div>\n</div>\n", styles: [".mc-bubble{display:flex;gap:4px;font-size:var(--devui-font-size, 14px)}.mc-bubble .mc-bubble-content{word-wrap:break-word}.mc-bubble .mc-bubble-content.filled,.mc-bubble .mc-bubble-content.bordered{padding:12px 16px;border-radius:12px}.mc-bubble .mc-bubble-content.filled{background-color:var(--devui-global-bg, #f6f6f8)}.mc-bubble .mc-bubble-content.bordered{border:1px solid var(--devui-dividing-line, #f2f2f3)}.mc-bubble .mc-bubble-avatar{flex-shrink:0;display:flex;gap:4px}.mc-bubble .mc-bubble-avatar .mc-bubble-avatar-name{font-size:14px}.mc-bubble .mc-bubble-avatar.empty-avatar{visibility:hidden}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar{align-items:center}.mc-bubble .mc-bubble-content-container{max-width:100%}.mc-bubble.mc-bubble-avatar-top{flex-direction:column}.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{align-items:flex-start;flex-direction:column}.mc-bubble.mc-bubble-loading.mc-bubble-avatar-side{align-items:center}.mc-bubble.mc-bubble-avatar-side.mc-bubble-right{flex-direction:row-reverse;justify-content:end}.mc-bubble.mc-bubble-avatar-top .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top .mc-bubble-content-container{display:flex}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar,.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-content-container{align-items:flex-end}.mc-bubble.mc-bubble-avatar-top.mc-bubble-right .mc-bubble-avatar{flex-direction:row-reverse}\n"] }]
|
|
524
585
|
}], ctorParameters: () => [], propDecorators: { content: [{
|
|
525
586
|
type: Input
|
|
526
587
|
}], loading: [{
|
|
@@ -533,33 +594,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
533
594
|
type: Input
|
|
534
595
|
}], avatarConfig: [{
|
|
535
596
|
type: Input
|
|
597
|
+
}], avatarTemplate: [{
|
|
598
|
+
type: ContentChild,
|
|
599
|
+
args: ['avatar']
|
|
536
600
|
}], topTemplate: [{
|
|
537
601
|
type: ContentChild,
|
|
538
602
|
args: ['top']
|
|
539
603
|
}], loadingTplTemplate: [{
|
|
540
604
|
type: ContentChild,
|
|
541
605
|
args: ['loadingTpl']
|
|
542
|
-
}], defaultTemplate: [{
|
|
543
|
-
type: ContentChild,
|
|
544
|
-
args: ['defaultTemplate']
|
|
545
606
|
}], bottomTemplate: [{
|
|
546
607
|
type: ContentChild,
|
|
547
608
|
args: ['bottom']
|
|
609
|
+
}], contentChildren: [{
|
|
610
|
+
type: ContentChildren,
|
|
611
|
+
args: ['ng-content']
|
|
548
612
|
}] } });
|
|
549
613
|
|
|
550
614
|
class BubbleModule {
|
|
551
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
552
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
615
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BubbleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
616
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: BubbleModule, imports: [CommonModule,
|
|
553
617
|
BubbleComponent,
|
|
554
618
|
BubbleLoadingComponent,
|
|
555
619
|
AvatarComponent], exports: [BubbleComponent,
|
|
556
620
|
BubbleLoadingComponent,
|
|
557
621
|
AvatarComponent] }); }
|
|
558
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
622
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BubbleModule, imports: [CommonModule,
|
|
559
623
|
BubbleComponent,
|
|
560
624
|
AvatarComponent] }); }
|
|
561
625
|
}
|
|
562
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BubbleModule, decorators: [{
|
|
563
627
|
type: NgModule,
|
|
564
628
|
args: [{
|
|
565
629
|
declarations: [],
|
|
@@ -578,10 +642,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
578
642
|
}] });
|
|
579
643
|
|
|
580
644
|
class SendIconComponent {
|
|
581
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
582
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
645
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SendIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
646
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: SendIconComponent, isStandalone: true, selector: "mc-send-icon", ngImport: i0, template: "<svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M13.5105149,2.56164948 C14.1211149,2.35546948 14.7829149,2.68328948 14.9892149,3.29376948 C15.0349149,3.42925948 15.0552149,3.57159948 15.0495149,3.71368948 L15.0495149,3.71368948 L15.0351149,3.85546948 L13.6575149,12.2717195 C13.5237149,13.0892195 12.7524149,13.6435195 11.9348149,13.5097195 C11.8542149,13.4965195 11.7751149,13.4768195 11.6980149,13.4508195 L11.6980149,13.4508195 L11.5840149,13.4071195 L9.3049349,12.4260195 L8.4482449,13.5422195 C8.1958049,13.8708195 7.8205549,14.0786195 7.4128449,14.1207195 L7.4128449,14.1207195 L7.2585449,14.1286195 C6.4787649,14.1286195 5.8381349,13.5337195 5.7653849,12.7731195 L5.7653849,12.7731195 L5.7585449,12.6286195 L5.7602549,10.5258195 L5.7756349,10.4384195 L5.7944349,10.3824195 L5.8266649,10.3168995 L5.8735349,10.2503695 L5.9177249,10.2039195 L12.6909149,3.89392948 L2.3403349,7.38903948 C2.2329149,7.42529948 2.1418449,7.49676948 2.0808149,7.59063948 L2.0808149,7.59063948 L2.0412649,7.66497948 C1.9440949,7.89044948 2.0258749,8.14788948 2.2236349,8.27917948 L2.2236349,8.27917948 L2.3029749,8.32214948 L4.4799849,9.26177948 C4.7333949,9.37121948 4.8503449,9.66546948 4.7409649,9.91894948 C4.6435549,10.1443495 4.4003949,10.2616595 4.1694349,10.2081295 L4.1694349,10.2081295 L4.0837449,10.1798795 L1.9072249,9.24047948 C1.1462449,8.91284948 0.795166898,8.03039948 1.1225549,7.26953948 C1.2700249,6.92755948 1.5380849,6.65435948 1.8730449,6.50018948 L1.8730449,6.50018948 L2.0205049,6.44158948 Z M6.7578149,11.3299195 L6.7585449,12.6286195 L6.7666013,12.7185103 C6.80894095,12.9517898 7.0131049,13.1286195 7.2585449,13.1286195 C7.3828149,13.1286195 7.5014649,13.0824195 7.5925349,13.0008195 L7.5925349,13.0008195 L7.6550349,12.9332195 L8.3569349,12.0179195 L6.7578149,11.3299195 Z M13.9888149,4.05090948 L7.1599149,10.4129195 L11.9795149,12.4886195 C11.9980149,12.4966195 12.0173149,12.5035195 12.0369149,12.5093195 L12.0369149,12.5093195 L12.0964149,12.5228195 C12.3386149,12.5624195 12.5686149,12.4209195 12.6482149,12.1975195 L12.6482149,12.1975195 L12.6706149,12.1101195 L13.9888149,4.05090948 Z\"\n ></path>\n </g>\n</svg>\n", styles: [":host{display:contents}:host svg{margin-right:4px}\n"] }); }
|
|
583
647
|
}
|
|
584
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: SendIconComponent, decorators: [{
|
|
585
649
|
type: Component,
|
|
586
650
|
args: [{ selector: 'mc-send-icon', standalone: true, template: "<svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M13.5105149,2.56164948 C14.1211149,2.35546948 14.7829149,2.68328948 14.9892149,3.29376948 C15.0349149,3.42925948 15.0552149,3.57159948 15.0495149,3.71368948 L15.0495149,3.71368948 L15.0351149,3.85546948 L13.6575149,12.2717195 C13.5237149,13.0892195 12.7524149,13.6435195 11.9348149,13.5097195 C11.8542149,13.4965195 11.7751149,13.4768195 11.6980149,13.4508195 L11.6980149,13.4508195 L11.5840149,13.4071195 L9.3049349,12.4260195 L8.4482449,13.5422195 C8.1958049,13.8708195 7.8205549,14.0786195 7.4128449,14.1207195 L7.4128449,14.1207195 L7.2585449,14.1286195 C6.4787649,14.1286195 5.8381349,13.5337195 5.7653849,12.7731195 L5.7653849,12.7731195 L5.7585449,12.6286195 L5.7602549,10.5258195 L5.7756349,10.4384195 L5.7944349,10.3824195 L5.8266649,10.3168995 L5.8735349,10.2503695 L5.9177249,10.2039195 L12.6909149,3.89392948 L2.3403349,7.38903948 C2.2329149,7.42529948 2.1418449,7.49676948 2.0808149,7.59063948 L2.0808149,7.59063948 L2.0412649,7.66497948 C1.9440949,7.89044948 2.0258749,8.14788948 2.2236349,8.27917948 L2.2236349,8.27917948 L2.3029749,8.32214948 L4.4799849,9.26177948 C4.7333949,9.37121948 4.8503449,9.66546948 4.7409649,9.91894948 C4.6435549,10.1443495 4.4003949,10.2616595 4.1694349,10.2081295 L4.1694349,10.2081295 L4.0837449,10.1798795 L1.9072249,9.24047948 C1.1462449,8.91284948 0.795166898,8.03039948 1.1225549,7.26953948 C1.2700249,6.92755948 1.5380849,6.65435948 1.8730449,6.50018948 L1.8730449,6.50018948 L2.0205049,6.44158948 Z M6.7578149,11.3299195 L6.7585449,12.6286195 L6.7666013,12.7185103 C6.80894095,12.9517898 7.0131049,13.1286195 7.2585449,13.1286195 C7.3828149,13.1286195 7.5014649,13.0824195 7.5925349,13.0008195 L7.5925349,13.0008195 L7.6550349,12.9332195 L8.3569349,12.0179195 L6.7578149,11.3299195 Z M13.9888149,4.05090948 L7.1599149,10.4129195 L11.9795149,12.4886195 C11.9980149,12.4966195 12.0173149,12.5035195 12.0369149,12.5093195 L12.0369149,12.5093195 L12.0964149,12.5228195 C12.3386149,12.5624195 12.5686149,12.4209195 12.6482149,12.1975195 L12.6482149,12.1975195 L12.6706149,12.1101195 L13.9888149,4.05090948 Z\"\n ></path>\n </g>\n</svg>\n", styles: [":host{display:contents}:host svg{margin-right:4px}\n"] }]
|
|
587
651
|
}] });
|
|
@@ -630,11 +694,11 @@ class LocaleModule {
|
|
|
630
694
|
providers: [] // 子模块不提供服务实例
|
|
631
695
|
};
|
|
632
696
|
}
|
|
633
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
634
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
635
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
697
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LocaleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
698
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: LocaleModule }); }
|
|
699
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LocaleModule }); }
|
|
636
700
|
}
|
|
637
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
701
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LocaleModule, decorators: [{
|
|
638
702
|
type: NgModule,
|
|
639
703
|
args: [{
|
|
640
704
|
declarations: [],
|
|
@@ -718,10 +782,10 @@ class ButtonComponent extends BaseComponent {
|
|
|
718
782
|
this.change.emit(this.inputValue);
|
|
719
783
|
}
|
|
720
784
|
}
|
|
721
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
722
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
785
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ButtonComponent, deps: [{ token: LocaleService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
786
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: ButtonComponent, isStandalone: true, selector: "mc-button", inputs: { disabled: "disabled", loading: "loading", inputValue: "inputValue", sendBtnVariant: "sendBtnVariant" }, outputs: { submit: "submit", cancel: "cancel", change: "change" }, host: { listeners: { "mousedown": "onMouseDown()", "mouseup": "onMouseUp()" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n #button\n [disabled]=\"disabled || (!loading && !inputValue)\"\n [ngClass]=\"buttonClasses\"\n (click)=\"onConfirm($event)\"\n [attr.aria-label]=\"loading ? ('Input.pauseAnswer' | translate) : ('Input.send' | translate)\"\n [attr.aria-disabled]=\"disabled || (!loading && !inputValue)\"\n [attr.aria-busy]=\"loading\"\n>\n <span class=\"mc-button-content\">\n <ng-container *ngIf=\"loading\">\n <ng-template [ngTemplateOutlet]=\"loadingIcon\"></ng-template>\n </ng-container>\n <mc-send-icon *ngIf=\"!loading\"></mc-send-icon>\n <span *ngIf=\"sendBtnVariant === 'full'\">\n {{\n loading ? (\"Input.pauseAnswer\" | translate) : (\"Input.send\" | translate)\n }}\n </span>\n </span>\n <div\n *ngIf=\"showWave\"\n class=\"mc-button-water-wave\"\n [style.top]=\"waveStyle.top\"\n [style.left]=\"waveStyle.left\"\n ></div>\n</button>\n\n<ng-template #loadingIcon>\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M8,12 C8.27614237,12 8.5,12.2238576 8.5,12.5 L8.5,14.5 C8.5,14.7761424 8.27614237,15 8,15 C7.72385763,15 7.5,14.7761424 7.5,14.5 L7.5,12.5 C7.5,12.2238576 7.72385763,12 8,12 Z M11.0495421,11.3466838 L12.2251126,12.9647178 C12.3874251,13.1881217 12.3379006,13.5008065 12.1144968,13.663119 C11.8910929,13.8254314 11.5784081,13.775907 11.4160956,13.5525031 L10.2405251,11.9344691 C10.0782127,11.7110652 10.1277371,11.3983804 10.351141,11.236068 C10.5745449,11.0737556 10.8872297,11.12328 11.0495421,11.3466838 Z M5.64885899,11.236068 C5.87226287,11.3983804 5.92178728,11.7110652 5.75947486,11.9344691 L4.58390436,13.5525031 C4.42159194,13.775907 4.10890711,13.8254314 3.88550323,13.663119 C3.66209936,13.5008065 3.61257495,13.1881217 3.77488736,12.9647178 L4.95045787,11.3466838 C5.11277028,11.12328 5.42545512,11.0737556 5.64885899,11.236068 Z M12.4342628,8.91504822 L14.3363759,9.53308221 C14.5990029,9.61841489 14.7427283,9.90049196 14.6573956,10.163119 C14.5720629,10.425746 14.2899859,10.5694714 14.0273589,10.4841387 L12.1252458,9.86610473 C11.8626188,9.78077205 11.7188934,9.49869498 11.8042261,9.23606798 C11.8895588,8.97344097 12.1716358,8.82971553 12.4342628,8.91504822 Z M4.19577393,9.23606798 C4.28110662,9.49869498 4.13738118,9.78077205 3.87475417,9.86610473 L1.97264114,10.4841387 C1.71001414,10.5694714 1.42793707,10.425746 1.34260439,10.163119 C1.2572717,9.90049196 1.40099714,9.61841489 1.66362415,9.53308221 L3.56573718,8.91504822 C3.82836418,8.82971553 4.11044125,8.97344097 4.19577393,9.23606798 Z M14.6573956,5.83688104 C14.7427283,6.09950804 14.5990029,6.38158511 14.3363759,6.46691779 L12.4342628,7.08495178 C12.1716358,7.17028447 11.8895588,7.02655903 11.8042261,6.76393202 C11.7188934,6.50130502 11.8626188,6.21922795 12.1252458,6.13389527 L14.0273589,5.51586128 C14.2899859,5.43052859 14.5720629,5.57425403 14.6573956,5.83688104 Z M1.97264114,5.51586128 L3.87475417,6.13389527 C4.13738118,6.21922795 4.28110662,6.50130502 4.19577393,6.76393202 C4.11044125,7.02655903 3.82836418,7.17028447 3.56573718,7.08495178 L1.66362415,6.46691779 C1.40099714,6.38158511 1.2572717,6.09950804 1.34260439,5.83688104 C1.42793707,5.57425403 1.71001414,5.43052859 1.97264114,5.51586128 Z M12.1144968,2.33688104 C12.3379006,2.49919345 12.3874251,2.81187829 12.2251126,3.03528216 L11.0495421,4.65331615 C10.8872297,4.87672003 10.5745449,4.92624444 10.351141,4.76393202 C10.1277371,4.60161961 10.0782127,4.28893477 10.2405251,4.0655309 L11.4160956,2.44749691 C11.5784081,2.22409304 11.8910929,2.17456862 12.1144968,2.33688104 Z M4.58390436,2.44749691 L5.75947486,4.0655309 C5.92178728,4.28893477 5.87226287,4.60161961 5.64885899,4.76393202 C5.42545512,4.92624444 5.11277028,4.87672003 4.95045787,4.65331615 L3.77488736,3.03528216 C3.61257495,2.81187829 3.66209936,2.49919345 3.88550323,2.33688104 C4.10890711,2.17456862 4.42159194,2.22409304 4.58390436,2.44749691 Z M8,1 C8.27614237,1 8.5,1.22385763 8.5,1.5 L8.5,3.5 C8.5,3.77614237 8.27614237,4 8,4 C7.72385763,4 7.5,3.77614237 7.5,3.5 L7.5,1.5 C7.5,1.22385763 7.72385763,1 8,1 Z\"\n ></path>\n </g>\n </svg>\n</ng-template>\n", styles: [".mc-button{position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:32px;line-height:1.5;color:var(--devui-light-text, #ffffff);font-size:var(--devui-font-size, 14px);padding:0 12px;border-radius:20px;background-color:var(--devui-primary, #5e7ce0);overflow:hidden;border:none;cursor:pointer;transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.mc-button.mc-button-loading svg{animation:rotating 1s linear infinite}.mc-button.mousedown:not(:disabled){transform:scale(.95)}.mc-button.mc-button-simple{width:32px;padding:6px;flex-shrink:0;border-radius:100%}.mc-button.mc-button-simple svg{margin-right:0}.mc-button:hover{background-color:var(--devui-primary-hover, #7693f5)}.mc-button:active{background-color:var(--devui-primary-active, #344899)}.mc-button:disabled{color:var(--devui-light-text, #ffffff);background-color:var(--devui-primary-disabled, #beccfa);cursor:not-allowed}.mc-button .mc-button-content{display:inline-flex;align-items:center;font-size:var(--devui-font-size, 14px)}.mc-button .mc-button-water-wave{position:absolute;background-color:var(--devui-base-bg, #ffffff);border-radius:50%;opacity:0;width:20px;height:20px;transform:translate(-50%,-50%);animation:waterWave var(--devui-animation-duration-slow, .3s) var(--devui-animation-linear, cubic-bezier(0, 0, 1, 1))}.mc-button ::ng-deep svg path{fill:var(--devui-light-text, #ffffff)}.mc-button ::ng-deep svg{margin-right:4px}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(180deg)}}@keyframes waterWave{0%{opacity:.2;width:30px;height:30px}to{opacity:0;width:200px;height:200px}}.mc-button-simple ::ng-deep svg{margin-right:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SendIconComponent, selector: "mc-send-icon" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
723
787
|
}
|
|
724
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
788
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
725
789
|
type: Component,
|
|
726
790
|
args: [{ selector: 'mc-button', standalone: true, imports: [CommonModule, SendIconComponent, TranslatePipe], template: "<button\n #button\n [disabled]=\"disabled || (!loading && !inputValue)\"\n [ngClass]=\"buttonClasses\"\n (click)=\"onConfirm($event)\"\n [attr.aria-label]=\"loading ? ('Input.pauseAnswer' | translate) : ('Input.send' | translate)\"\n [attr.aria-disabled]=\"disabled || (!loading && !inputValue)\"\n [attr.aria-busy]=\"loading\"\n>\n <span class=\"mc-button-content\">\n <ng-container *ngIf=\"loading\">\n <ng-template [ngTemplateOutlet]=\"loadingIcon\"></ng-template>\n </ng-container>\n <mc-send-icon *ngIf=\"!loading\"></mc-send-icon>\n <span *ngIf=\"sendBtnVariant === 'full'\">\n {{\n loading ? (\"Input.pauseAnswer\" | translate) : (\"Input.send\" | translate)\n }}\n </span>\n </span>\n <div\n *ngIf=\"showWave\"\n class=\"mc-button-water-wave\"\n [style.top]=\"waveStyle.top\"\n [style.left]=\"waveStyle.left\"\n ></div>\n</button>\n\n<ng-template #loadingIcon>\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M8,12 C8.27614237,12 8.5,12.2238576 8.5,12.5 L8.5,14.5 C8.5,14.7761424 8.27614237,15 8,15 C7.72385763,15 7.5,14.7761424 7.5,14.5 L7.5,12.5 C7.5,12.2238576 7.72385763,12 8,12 Z M11.0495421,11.3466838 L12.2251126,12.9647178 C12.3874251,13.1881217 12.3379006,13.5008065 12.1144968,13.663119 C11.8910929,13.8254314 11.5784081,13.775907 11.4160956,13.5525031 L10.2405251,11.9344691 C10.0782127,11.7110652 10.1277371,11.3983804 10.351141,11.236068 C10.5745449,11.0737556 10.8872297,11.12328 11.0495421,11.3466838 Z M5.64885899,11.236068 C5.87226287,11.3983804 5.92178728,11.7110652 5.75947486,11.9344691 L4.58390436,13.5525031 C4.42159194,13.775907 4.10890711,13.8254314 3.88550323,13.663119 C3.66209936,13.5008065 3.61257495,13.1881217 3.77488736,12.9647178 L4.95045787,11.3466838 C5.11277028,11.12328 5.42545512,11.0737556 5.64885899,11.236068 Z M12.4342628,8.91504822 L14.3363759,9.53308221 C14.5990029,9.61841489 14.7427283,9.90049196 14.6573956,10.163119 C14.5720629,10.425746 14.2899859,10.5694714 14.0273589,10.4841387 L12.1252458,9.86610473 C11.8626188,9.78077205 11.7188934,9.49869498 11.8042261,9.23606798 C11.8895588,8.97344097 12.1716358,8.82971553 12.4342628,8.91504822 Z M4.19577393,9.23606798 C4.28110662,9.49869498 4.13738118,9.78077205 3.87475417,9.86610473 L1.97264114,10.4841387 C1.71001414,10.5694714 1.42793707,10.425746 1.34260439,10.163119 C1.2572717,9.90049196 1.40099714,9.61841489 1.66362415,9.53308221 L3.56573718,8.91504822 C3.82836418,8.82971553 4.11044125,8.97344097 4.19577393,9.23606798 Z M14.6573956,5.83688104 C14.7427283,6.09950804 14.5990029,6.38158511 14.3363759,6.46691779 L12.4342628,7.08495178 C12.1716358,7.17028447 11.8895588,7.02655903 11.8042261,6.76393202 C11.7188934,6.50130502 11.8626188,6.21922795 12.1252458,6.13389527 L14.0273589,5.51586128 C14.2899859,5.43052859 14.5720629,5.57425403 14.6573956,5.83688104 Z M1.97264114,5.51586128 L3.87475417,6.13389527 C4.13738118,6.21922795 4.28110662,6.50130502 4.19577393,6.76393202 C4.11044125,7.02655903 3.82836418,7.17028447 3.56573718,7.08495178 L1.66362415,6.46691779 C1.40099714,6.38158511 1.2572717,6.09950804 1.34260439,5.83688104 C1.42793707,5.57425403 1.71001414,5.43052859 1.97264114,5.51586128 Z M12.1144968,2.33688104 C12.3379006,2.49919345 12.3874251,2.81187829 12.2251126,3.03528216 L11.0495421,4.65331615 C10.8872297,4.87672003 10.5745449,4.92624444 10.351141,4.76393202 C10.1277371,4.60161961 10.0782127,4.28893477 10.2405251,4.0655309 L11.4160956,2.44749691 C11.5784081,2.22409304 11.8910929,2.17456862 12.1144968,2.33688104 Z M4.58390436,2.44749691 L5.75947486,4.0655309 C5.92178728,4.28893477 5.87226287,4.60161961 5.64885899,4.76393202 C5.42545512,4.92624444 5.11277028,4.87672003 4.95045787,4.65331615 L3.77488736,3.03528216 C3.61257495,2.81187829 3.66209936,2.49919345 3.88550323,2.33688104 C4.10890711,2.17456862 4.42159194,2.22409304 4.58390436,2.44749691 Z M8,1 C8.27614237,1 8.5,1.22385763 8.5,1.5 L8.5,3.5 C8.5,3.77614237 8.27614237,4 8,4 C7.72385763,4 7.5,3.77614237 7.5,3.5 L7.5,1.5 C7.5,1.22385763 7.72385763,1 8,1 Z\"\n ></path>\n </g>\n </svg>\n</ng-template>\n", styles: [".mc-button{position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:32px;line-height:1.5;color:var(--devui-light-text, #ffffff);font-size:var(--devui-font-size, 14px);padding:0 12px;border-radius:20px;background-color:var(--devui-primary, #5e7ce0);overflow:hidden;border:none;cursor:pointer;transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.mc-button.mc-button-loading svg{animation:rotating 1s linear infinite}.mc-button.mousedown:not(:disabled){transform:scale(.95)}.mc-button.mc-button-simple{width:32px;padding:6px;flex-shrink:0;border-radius:100%}.mc-button.mc-button-simple svg{margin-right:0}.mc-button:hover{background-color:var(--devui-primary-hover, #7693f5)}.mc-button:active{background-color:var(--devui-primary-active, #344899)}.mc-button:disabled{color:var(--devui-light-text, #ffffff);background-color:var(--devui-primary-disabled, #beccfa);cursor:not-allowed}.mc-button .mc-button-content{display:inline-flex;align-items:center;font-size:var(--devui-font-size, 14px)}.mc-button .mc-button-water-wave{position:absolute;background-color:var(--devui-base-bg, #ffffff);border-radius:50%;opacity:0;width:20px;height:20px;transform:translate(-50%,-50%);animation:waterWave var(--devui-animation-duration-slow, .3s) var(--devui-animation-linear, cubic-bezier(0, 0, 1, 1))}.mc-button ::ng-deep svg path{fill:var(--devui-light-text, #ffffff)}.mc-button ::ng-deep svg{margin-right:4px}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(180deg)}}@keyframes waterWave{0%{opacity:.2;width:30px;height:30px}to{opacity:0;width:200px;height:200px}}.mc-button-simple ::ng-deep svg{margin-right:0!important}\n"] }]
|
|
727
791
|
}], ctorParameters: () => [{ type: LocaleService }], propDecorators: { disabled: [{
|
|
@@ -791,7 +855,6 @@ class InputFoundation extends BaseFoundation {
|
|
|
791
855
|
this._adapter.emitChange();
|
|
792
856
|
}
|
|
793
857
|
emitChange() {
|
|
794
|
-
console.log('emitChange---2');
|
|
795
858
|
this._adapter.emitChange();
|
|
796
859
|
}
|
|
797
860
|
submit(inputValue) {
|
|
@@ -819,6 +882,11 @@ class InputFoundation extends BaseFoundation {
|
|
|
819
882
|
}
|
|
820
883
|
}
|
|
821
884
|
|
|
885
|
+
// 默认的autosize配置
|
|
886
|
+
const DEFAULT_AUTOSIZE = {
|
|
887
|
+
minRows: 1,
|
|
888
|
+
maxRows: 5
|
|
889
|
+
};
|
|
822
890
|
// 创建一个token用于组件间通信
|
|
823
891
|
const inputContextToken = 'input-context';
|
|
824
892
|
class InputComponent extends BaseComponent {
|
|
@@ -836,6 +904,9 @@ class InputComponent extends BaseComponent {
|
|
|
836
904
|
this.maxLength = null;
|
|
837
905
|
this.submitShortKey = SubmitShortKey.Enter;
|
|
838
906
|
this.autofocus = false;
|
|
907
|
+
this.autosize = false;
|
|
908
|
+
// textarea样式
|
|
909
|
+
this.textareaStyle = {};
|
|
839
910
|
this.change = new EventEmitter();
|
|
840
911
|
this.submit = new EventEmitter();
|
|
841
912
|
this.cancel = new EventEmitter();
|
|
@@ -873,6 +944,12 @@ class InputComponent extends BaseComponent {
|
|
|
873
944
|
ngOnChanges(changes) {
|
|
874
945
|
if (changes['value']) {
|
|
875
946
|
this.inputValue = changes['value']?.currentValue || '';
|
|
947
|
+
// 值变化时更新textarea样式
|
|
948
|
+
this.updateTextareaStyle();
|
|
949
|
+
}
|
|
950
|
+
if (changes['autosize']) {
|
|
951
|
+
// autosize配置变化时更新textarea样式
|
|
952
|
+
this.updateTextareaStyle();
|
|
876
953
|
}
|
|
877
954
|
}
|
|
878
955
|
get inputClasses() {
|
|
@@ -884,6 +961,8 @@ class InputComponent extends BaseComponent {
|
|
|
884
961
|
onInput() {
|
|
885
962
|
if (!this.lock) {
|
|
886
963
|
this.foundation.emitChange();
|
|
964
|
+
// 输入时更新textarea样式
|
|
965
|
+
this.updateTextareaStyle();
|
|
887
966
|
}
|
|
888
967
|
}
|
|
889
968
|
onCompositionStart() {
|
|
@@ -920,6 +999,92 @@ class InputComponent extends BaseComponent {
|
|
|
920
999
|
this.textareaElement.nativeElement.focus();
|
|
921
1000
|
});
|
|
922
1001
|
}
|
|
1002
|
+
// 初始化时更新textarea样式
|
|
1003
|
+
this.updateTextareaStyle();
|
|
1004
|
+
}
|
|
1005
|
+
// 更新textarea样式
|
|
1006
|
+
updateTextareaStyle() {
|
|
1007
|
+
if (!this.textareaElement || this.autosize === false) {
|
|
1008
|
+
this.textareaStyle = {};
|
|
1009
|
+
return;
|
|
1010
|
+
}
|
|
1011
|
+
const config = this.getAutosizeConfig();
|
|
1012
|
+
const result = this.computeTextareaHeight(this.textareaElement.nativeElement, config.minRows, config.maxRows);
|
|
1013
|
+
this.textareaStyle = {
|
|
1014
|
+
...result,
|
|
1015
|
+
resize: 'none'
|
|
1016
|
+
};
|
|
1017
|
+
}
|
|
1018
|
+
// 获取autosize配置
|
|
1019
|
+
getAutosizeConfig() {
|
|
1020
|
+
return typeof this.autosize === 'boolean'
|
|
1021
|
+
? DEFAULT_AUTOSIZE
|
|
1022
|
+
: this.autosize;
|
|
1023
|
+
}
|
|
1024
|
+
// 计算textarea高度
|
|
1025
|
+
computeTextareaHeight(targetElement, minRows = 1, maxRows) {
|
|
1026
|
+
const style = window.getComputedStyle(targetElement);
|
|
1027
|
+
const boxSizing = style.getPropertyValue('box-sizing');
|
|
1028
|
+
const paddingSize = Number.parseFloat(style.getPropertyValue('padding-top')) +
|
|
1029
|
+
Number.parseFloat(style.getPropertyValue('padding-bottom'));
|
|
1030
|
+
const borderSize = Number.parseFloat(style.getPropertyValue('border-top-width')) +
|
|
1031
|
+
Number.parseFloat(style.getPropertyValue('border-bottom-width'));
|
|
1032
|
+
// 创建临时textarea元素
|
|
1033
|
+
const tempTextarea = document.createElement('textarea');
|
|
1034
|
+
const sizingStyle = [
|
|
1035
|
+
'letter-spacing', 'line-height', 'padding-top', 'padding-bottom',
|
|
1036
|
+
'font-family', 'font-weight', 'font-size', 'font-variant',
|
|
1037
|
+
'text-rendering', 'text-transform', 'width', 'text-indent',
|
|
1038
|
+
'padding-left', 'padding-right', 'border-width', 'box-sizing',
|
|
1039
|
+
'word-break', 'white-space'
|
|
1040
|
+
];
|
|
1041
|
+
const contextStyle = sizingStyle
|
|
1042
|
+
.map(name => `${name}:${style.getPropertyValue(name)}`)
|
|
1043
|
+
.join(';');
|
|
1044
|
+
const hiddenStyle = `
|
|
1045
|
+
min-height:0 !important;
|
|
1046
|
+
max-height:none !important;
|
|
1047
|
+
height:0 !important;
|
|
1048
|
+
visibility:hidden !important;
|
|
1049
|
+
overflow:hidden !important;
|
|
1050
|
+
position:absolute !important;
|
|
1051
|
+
z-index:-1000 !important;
|
|
1052
|
+
top:0 !important;
|
|
1053
|
+
right:0 !important;
|
|
1054
|
+
pointer-events:none !important;
|
|
1055
|
+
`;
|
|
1056
|
+
tempTextarea.setAttribute('style', `${contextStyle};${hiddenStyle}`);
|
|
1057
|
+
tempTextarea.value = targetElement.value || targetElement.placeholder || '';
|
|
1058
|
+
document.body.appendChild(tempTextarea);
|
|
1059
|
+
let height = tempTextarea.scrollHeight;
|
|
1060
|
+
const result = {
|
|
1061
|
+
height: `${height}px`
|
|
1062
|
+
};
|
|
1063
|
+
if (minRows !== undefined || maxRows !== undefined) {
|
|
1064
|
+
tempTextarea.value = ' ';
|
|
1065
|
+
const singleRowHeight = tempTextarea.scrollHeight - paddingSize;
|
|
1066
|
+
if (minRows !== undefined) {
|
|
1067
|
+
let minHeight = singleRowHeight * minRows;
|
|
1068
|
+
if (boxSizing === 'border-box') {
|
|
1069
|
+
minHeight = minHeight + paddingSize + borderSize;
|
|
1070
|
+
}
|
|
1071
|
+
height = Math.max(minHeight, height);
|
|
1072
|
+
result['minHeight'] = `${minHeight}px`;
|
|
1073
|
+
}
|
|
1074
|
+
if (maxRows !== undefined) {
|
|
1075
|
+
let maxHeight = singleRowHeight * maxRows;
|
|
1076
|
+
if (boxSizing === 'border-box') {
|
|
1077
|
+
maxHeight = maxHeight + paddingSize + borderSize;
|
|
1078
|
+
}
|
|
1079
|
+
if (height > maxHeight) {
|
|
1080
|
+
height = maxHeight;
|
|
1081
|
+
result['overflowY'] = 'auto';
|
|
1082
|
+
}
|
|
1083
|
+
}
|
|
1084
|
+
}
|
|
1085
|
+
document.body.removeChild(tempTextarea);
|
|
1086
|
+
result['height'] = `${height}px`;
|
|
1087
|
+
return result;
|
|
923
1088
|
}
|
|
924
1089
|
get placeholderText() {
|
|
925
1090
|
return this.foundation.getPlaceholderText();
|
|
@@ -930,12 +1095,12 @@ class InputComponent extends BaseComponent {
|
|
|
930
1095
|
onBlur(event) {
|
|
931
1096
|
this.blur.emit(event);
|
|
932
1097
|
}
|
|
933
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1098
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputComponent, deps: [{ token: LocaleService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1099
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: InputComponent, isStandalone: true, selector: "mc-input", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", displayType: "displayType", variant: "variant", sendBtnVariant: "sendBtnVariant", loading: "loading", showCount: "showCount", maxLength: "maxLength", submitShortKey: "submitShortKey", autofocus: "autofocus", autosize: "autosize" }, outputs: { change: "change", submit: "submit", cancel: "cancel", focus: "focus", blur: "blur" }, providers: [{ provide: inputContextToken, useExisting: InputComponent }], queries: [{ propertyName: "headTemplate", first: true, predicate: ["head"], descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: ["prefix"], descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: ["suffix"], descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ["button"], descendants: true }, { propertyName: "extraTemplate", first: true, predicate: ["extra"], descendants: true }], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"inputClasses\">\n <ng-container *ngIf=\"headTemplate; then headTemplate\"></ng-container>\n\n <div class=\"mc-input-content\">\n <ng-container *ngIf=\"prefixTemplate; then prefixTemplate\"></ng-container>\n\n <textarea\n #textarea\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"placeholderText\"\n [disabled]=\"disabled\"\n [maxlength]=\"maxLength\"\n class=\"mc-textarea\"\n [ngClass]=\"{\n 'mc-textarea-simple': displayType === 'simple',\n 'mc-textarea-disabled': disabled\n }\"\n [ngStyle]=\"textareaStyle\"\n [attr.aria-label]=\"'Input.ariaLabel' | translate\"\n [attr.aria-disabled]=\"disabled\"\n (input)=\"onInput()\"\n (change)=\"onChange($event)\"\n (compositionstart)=\"onCompositionStart()\"\n (compositionend)=\"onCompositionEnd()\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n <ng-container *ngIf=\"suffixTemplate; then suffixTemplate\"></ng-container>\n\n <ng-container *ngIf=\"displayType === 'simple'\">\n <ng-container *ngIf=\"buttonTemplate; else defaultButton\">\n <ng-container\n *ngIf=\"buttonTemplate; then buttonTemplate\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultButton>\n <mc-button\n [disabled]=\"disabled || (!loading && !inputValue)\"\n [loading]=\"loading\"\n [inputValue]=\"inputValue\"\n [sendBtnVariant]=\"sendBtnVariant\"\n (submit)=\"onButtonSubmit($event)\"\n (cancel)=\"onButtonCancel()\"\n (change)=\"onButtonChange($event)\"\n ></mc-button>\n </ng-template>\n </ng-container>\n </div>\n\n <div *ngIf=\"displayType === 'full'\" class=\"mc-input-foot\">\n <div class=\"mc-input-foot-left\">\n <ng-container *ngIf=\"extraTemplate; then extraTemplate\"></ng-container>\n <span *ngIf=\"showCount\" id=\"mc-input-count\" class=\"mc-input-foot-count\">\n {{ inputValue.length }}{{ !maxLength ? \"\" : \"/\" + maxLength }}\n </span>\n </div>\n\n <ng-container *ngIf=\"buttonTemplate; else defaultFooterButton\">\n <ng-container *ngIf=\"buttonTemplate; then buttonTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultFooterButton>\n <mc-button\n [disabled]=\"disabled || (!loading && !inputValue)\"\n [loading]=\"loading\"\n [inputValue]=\"inputValue\"\n [sendBtnVariant]=\"sendBtnVariant\"\n (submit)=\"onButtonSubmit($event)\"\n (cancel)=\"onButtonCancel()\"\n (change)=\"onButtonChange($event)\"\n ></mc-button>\n </ng-template>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";body[ui-theme=infinity-theme]{--mc-text: #aeaeae;--mc-box-shadow: rgba(25, 25, 25, .06)}body[ui-theme=galaxy-theme]{--mc-text: #4e5057;--mc-box-shadow: rgba(206, 209, 219, .06)}.mc-input{display:flex;flex-direction:column;width:100%;padding:12px 0;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:16px;box-sizing:border-box;background-color:var(--devui-base-bg, #ffffff)}.mc-input.mc-input-simple{border-radius:24px}.mc-input.mc-input-simple .mc-input-content{padding:0 20px}.mc-input.mc-input-borderless{border:none;box-shadow:0 1px 8px 0 var(--mc-box-shadow, rgba(25, 25, 25, .06))}.mc-input.mc-input-disabled{background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-input .mc-input-content{display:flex;align-items:flex-end;padding:0 16px}.mc-input .mc-input-foot{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 16px}.mc-input .mc-input-foot .mc-input-foot-left{flex:1;height:100%;display:flex;align-items:center}.mc-input .mc-input-foot .mc-input-foot-left .mc-input-foot-count{color:var(--mc-text, #aeaeae);font-size:var(--devui-font-size-sm, 12px)}.mc-textarea{width:100%;height:64px;padding:4px 0;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);background-color:var(--devui-form-control-bg, #ffffff);vertical-align:middle;outline:none;box-sizing:border-box;resize:none;border:none}.mc-textarea.mc-textarea-simple{height:32px}.mc-textarea.mc-textarea-disabled{color:var(--devui-disabled-text, #cfd0d3);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-textarea::placeholder{color:var(--devui-placeholder, #babbc0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "mc-button", inputs: ["disabled", "loading", "inputValue", "sendBtnVariant"], outputs: ["submit", "cancel", "change"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
935
1100
|
}
|
|
936
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputComponent, decorators: [{
|
|
937
1102
|
type: Component,
|
|
938
|
-
args: [{ selector: 'mc-input', standalone: true, imports: [CommonModule, FormsModule, ButtonComponent, TranslatePipe], providers: [{ provide: inputContextToken, useExisting: InputComponent }], template: "<div [ngClass]=\"inputClasses\">\n <ng-container *ngIf=\"headTemplate; then headTemplate\"></ng-container>\n\n <div class=\"mc-input-content\">\n <ng-container *ngIf=\"prefixTemplate; then prefixTemplate\"></ng-container>\n\n <textarea\n #textarea\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"placeholderText\"\n [disabled]=\"disabled\"\n [maxlength]=\"maxLength\"\n class=\"mc-textarea\"\n [ngClass]=\"{\n 'mc-textarea-simple': displayType === 'simple',\n 'mc-textarea-disabled': disabled\n }\"\n [attr.aria-label]=\"'Input.ariaLabel' | translate\"\n [attr.aria-disabled]=\"disabled\"\n (input)=\"onInput()\"\n (change)=\"onChange($event)\"\n (compositionstart)=\"onCompositionStart()\"\n (compositionend)=\"onCompositionEnd()\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n <ng-container *ngIf=\"suffixTemplate; then suffixTemplate\"></ng-container>\n\n <ng-container *ngIf=\"displayType === 'simple'\">\n <ng-container *ngIf=\"buttonTemplate; else defaultButton\">\n <ng-container\n *ngIf=\"buttonTemplate; then buttonTemplate\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultButton>\n <mc-button\n [disabled]=\"disabled || (!loading && !inputValue)\"\n [loading]=\"loading\"\n [inputValue]=\"inputValue\"\n [sendBtnVariant]=\"sendBtnVariant\"\n (submit)=\"onButtonSubmit($event)\"\n (cancel)=\"onButtonCancel()\"\n (change)=\"onButtonChange($event)\"\n ></mc-button>\n </ng-template>\n </ng-container>\n </div>\n\n <div *ngIf=\"displayType === 'full'\" class=\"mc-input-foot\">\n <div class=\"mc-input-foot-left\">\n <ng-container *ngIf=\"extraTemplate; then extraTemplate\"></ng-container>\n <span *ngIf=\"showCount\" id=\"mc-input-count\" class=\"mc-input-foot-count\">\n {{ inputValue.length }}{{ !maxLength ? \"\" : \"/\" + maxLength }}\n </span>\n </div>\n\n <ng-container *ngIf=\"buttonTemplate; else defaultFooterButton\">\n <ng-container *ngIf=\"buttonTemplate; then buttonTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultFooterButton>\n <mc-button\n [disabled]=\"disabled || (!loading && !inputValue)\"\n [loading]=\"loading\"\n [inputValue]=\"inputValue\"\n [sendBtnVariant]=\"sendBtnVariant\"\n (submit)=\"onButtonSubmit($event)\"\n (cancel)=\"onButtonCancel()\"\n (change)=\"onButtonChange($event)\"\n ></mc-button>\n </ng-template>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";body[ui-theme=infinity-theme]{--mc-text: #aeaeae;--mc-box-shadow: rgba(25, 25, 25, .06)}body[ui-theme=galaxy-theme]{--mc-text: #4e5057;--mc-box-shadow: rgba(206, 209, 219, .06)}.mc-input{display:flex;flex-direction:column;width:100%;padding:12px 0;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:16px;box-sizing:border-box;background-color:var(--devui-base-bg, #ffffff)}.mc-input.mc-input-simple{border-radius:24px}.mc-input.mc-input-simple .mc-input-content{padding:0 20px}.mc-input.mc-input-borderless{border:none;box-shadow:0 1px 8px 0 var(--mc-box-shadow, rgba(25, 25, 25, .06))}.mc-input.mc-input-disabled{background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-input .mc-input-content{display:flex;align-items:flex-end;padding:0 16px}.mc-input .mc-input-foot{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 16px}.mc-input .mc-input-foot .mc-input-foot-left{flex:1;height:100%;display:flex;align-items:center}.mc-input .mc-input-foot .mc-input-foot-left .mc-input-foot-count{color:var(--mc-text, #aeaeae);font-size:var(--devui-font-size-sm, 12px)}.mc-textarea{width:100%;height:64px;padding:4px 0;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);background-color:var(--devui-form-control-bg, #ffffff);vertical-align:middle;outline:none;box-sizing:border-box;resize:none;border:none}.mc-textarea.mc-textarea-simple{height:32px}.mc-textarea.mc-textarea-disabled{color:var(--devui-disabled-text, #cfd0d3);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-textarea::placeholder{color:var(--devui-placeholder, #babbc0)}\n"] }]
|
|
1103
|
+
args: [{ selector: 'mc-input', standalone: true, imports: [CommonModule, FormsModule, ButtonComponent, TranslatePipe], providers: [{ provide: inputContextToken, useExisting: InputComponent }], template: "<div [ngClass]=\"inputClasses\">\n <ng-container *ngIf=\"headTemplate; then headTemplate\"></ng-container>\n\n <div class=\"mc-input-content\">\n <ng-container *ngIf=\"prefixTemplate; then prefixTemplate\"></ng-container>\n\n <textarea\n #textarea\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"placeholderText\"\n [disabled]=\"disabled\"\n [maxlength]=\"maxLength\"\n class=\"mc-textarea\"\n [ngClass]=\"{\n 'mc-textarea-simple': displayType === 'simple',\n 'mc-textarea-disabled': disabled\n }\"\n [ngStyle]=\"textareaStyle\"\n [attr.aria-label]=\"'Input.ariaLabel' | translate\"\n [attr.aria-disabled]=\"disabled\"\n (input)=\"onInput()\"\n (change)=\"onChange($event)\"\n (compositionstart)=\"onCompositionStart()\"\n (compositionend)=\"onCompositionEnd()\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n <ng-container *ngIf=\"suffixTemplate; then suffixTemplate\"></ng-container>\n\n <ng-container *ngIf=\"displayType === 'simple'\">\n <ng-container *ngIf=\"buttonTemplate; else defaultButton\">\n <ng-container\n *ngIf=\"buttonTemplate; then buttonTemplate\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultButton>\n <mc-button\n [disabled]=\"disabled || (!loading && !inputValue)\"\n [loading]=\"loading\"\n [inputValue]=\"inputValue\"\n [sendBtnVariant]=\"sendBtnVariant\"\n (submit)=\"onButtonSubmit($event)\"\n (cancel)=\"onButtonCancel()\"\n (change)=\"onButtonChange($event)\"\n ></mc-button>\n </ng-template>\n </ng-container>\n </div>\n\n <div *ngIf=\"displayType === 'full'\" class=\"mc-input-foot\">\n <div class=\"mc-input-foot-left\">\n <ng-container *ngIf=\"extraTemplate; then extraTemplate\"></ng-container>\n <span *ngIf=\"showCount\" id=\"mc-input-count\" class=\"mc-input-foot-count\">\n {{ inputValue.length }}{{ !maxLength ? \"\" : \"/\" + maxLength }}\n </span>\n </div>\n\n <ng-container *ngIf=\"buttonTemplate; else defaultFooterButton\">\n <ng-container *ngIf=\"buttonTemplate; then buttonTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultFooterButton>\n <mc-button\n [disabled]=\"disabled || (!loading && !inputValue)\"\n [loading]=\"loading\"\n [inputValue]=\"inputValue\"\n [sendBtnVariant]=\"sendBtnVariant\"\n (submit)=\"onButtonSubmit($event)\"\n (cancel)=\"onButtonCancel()\"\n (change)=\"onButtonChange($event)\"\n ></mc-button>\n </ng-template>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";body[ui-theme=infinity-theme]{--mc-text: #aeaeae;--mc-box-shadow: rgba(25, 25, 25, .06)}body[ui-theme=galaxy-theme]{--mc-text: #4e5057;--mc-box-shadow: rgba(206, 209, 219, .06)}.mc-input{display:flex;flex-direction:column;width:100%;padding:12px 0;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:16px;box-sizing:border-box;background-color:var(--devui-base-bg, #ffffff)}.mc-input.mc-input-simple{border-radius:24px}.mc-input.mc-input-simple .mc-input-content{padding:0 20px}.mc-input.mc-input-borderless{border:none;box-shadow:0 1px 8px 0 var(--mc-box-shadow, rgba(25, 25, 25, .06))}.mc-input.mc-input-disabled{background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-input .mc-input-content{display:flex;align-items:flex-end;padding:0 16px}.mc-input .mc-input-foot{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 16px}.mc-input .mc-input-foot .mc-input-foot-left{flex:1;height:100%;display:flex;align-items:center}.mc-input .mc-input-foot .mc-input-foot-left .mc-input-foot-count{color:var(--mc-text, #aeaeae);font-size:var(--devui-font-size-sm, 12px)}.mc-textarea{width:100%;height:64px;padding:4px 0;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size, 14px);background-color:var(--devui-form-control-bg, #ffffff);vertical-align:middle;outline:none;box-sizing:border-box;resize:none;border:none}.mc-textarea.mc-textarea-simple{height:32px}.mc-textarea.mc-textarea-disabled{color:var(--devui-disabled-text, #cfd0d3);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.mc-textarea::placeholder{color:var(--devui-placeholder, #babbc0)}\n"] }]
|
|
939
1104
|
}], ctorParameters: () => [{ type: LocaleService }], propDecorators: { value: [{
|
|
940
1105
|
type: Input
|
|
941
1106
|
}], placeholder: [{
|
|
@@ -958,6 +1123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
958
1123
|
type: Input
|
|
959
1124
|
}], autofocus: [{
|
|
960
1125
|
type: Input
|
|
1126
|
+
}], autosize: [{
|
|
1127
|
+
type: Input
|
|
961
1128
|
}], change: [{
|
|
962
1129
|
type: Output
|
|
963
1130
|
}], submit: [{
|
|
@@ -989,18 +1156,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
989
1156
|
}] } });
|
|
990
1157
|
|
|
991
1158
|
class InputModule {
|
|
992
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
993
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1159
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1160
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: InputModule, imports: [CommonModule,
|
|
994
1161
|
FormsModule,
|
|
995
1162
|
ButtonComponent,
|
|
996
1163
|
SendIconComponent,
|
|
997
1164
|
InputComponent], exports: [InputComponent] }); }
|
|
998
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1165
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputModule, imports: [CommonModule,
|
|
999
1166
|
FormsModule,
|
|
1000
1167
|
ButtonComponent,
|
|
1001
1168
|
InputComponent] }); }
|
|
1002
1169
|
}
|
|
1003
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: InputModule, decorators: [{
|
|
1004
1171
|
type: NgModule,
|
|
1005
1172
|
args: [{
|
|
1006
1173
|
declarations: [],
|
|
@@ -1015,6 +1182,1336 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
1015
1182
|
}]
|
|
1016
1183
|
}] });
|
|
1017
1184
|
|
|
1185
|
+
class MDCardService {
|
|
1186
|
+
constructor() {
|
|
1187
|
+
this.xssWhiteList = getDefaultWhiteList();
|
|
1188
|
+
this.cssWhiteList = getDefaultCSSWhiteList();
|
|
1189
|
+
this.setDefaultXss();
|
|
1190
|
+
}
|
|
1191
|
+
setDefaultXss() {
|
|
1192
|
+
this.xssWhiteList['input'] = ['type', 'checked', 'disabled', 'class'];
|
|
1193
|
+
this.xssWhiteList['label'] = ['for'];
|
|
1194
|
+
this.xssWhiteList['ul'] = ['class'];
|
|
1195
|
+
this.xssWhiteList['div'] = ['class', 'key'];
|
|
1196
|
+
this.xssWhiteList['a'] = ['href', 'class', 'target', 'name'];
|
|
1197
|
+
this.xssWhiteList['ol'] = ['start'];
|
|
1198
|
+
this.xssWhiteList['p'] = ['class'];
|
|
1199
|
+
this.xssWhiteList['span'] = ['style', 'class', 'title', 'id'];
|
|
1200
|
+
this.xssWhiteList['svg'] = ['style', 'class', 'width', 'height', 'viewbox', 'preserveaspectratio', 'id', 'fill', 'stroke'];
|
|
1201
|
+
this.xssWhiteList['path'] = ['style', 'class', 'd', 'id', 'fill', 'stroke'];
|
|
1202
|
+
this.xssWhiteList['th'] = ['style'];
|
|
1203
|
+
this.xssWhiteList['td'] = ['style'];
|
|
1204
|
+
}
|
|
1205
|
+
onIgnoreTagAttr(tag, name, value, isWhiteAttr) {
|
|
1206
|
+
if (!isWhiteAttr && (name === 'id' || (tag === 'span' && name === 'style'))) {
|
|
1207
|
+
return name + '=' + value;
|
|
1208
|
+
}
|
|
1209
|
+
return undefined;
|
|
1210
|
+
}
|
|
1211
|
+
getXssWhiteList() {
|
|
1212
|
+
return this.xssWhiteList;
|
|
1213
|
+
}
|
|
1214
|
+
setXssWhiteList(list) {
|
|
1215
|
+
this.xssWhiteList = list;
|
|
1216
|
+
}
|
|
1217
|
+
setCustomXssRules(rules) {
|
|
1218
|
+
if (rules) {
|
|
1219
|
+
rules.forEach((rule) => {
|
|
1220
|
+
if (rule['value'] === null) {
|
|
1221
|
+
delete this.xssWhiteList[rule['key']];
|
|
1222
|
+
}
|
|
1223
|
+
else {
|
|
1224
|
+
this.xssWhiteList[rule['key']] = rule['value'];
|
|
1225
|
+
}
|
|
1226
|
+
});
|
|
1227
|
+
}
|
|
1228
|
+
}
|
|
1229
|
+
setMdPlugins(plugins, mdt) {
|
|
1230
|
+
if (plugins && plugins.length) {
|
|
1231
|
+
plugins.forEach(item => {
|
|
1232
|
+
const { plugin, opts } = item;
|
|
1233
|
+
mdt.use(plugin, opts);
|
|
1234
|
+
});
|
|
1235
|
+
}
|
|
1236
|
+
}
|
|
1237
|
+
filterHtml(html) {
|
|
1238
|
+
return filterXSS(html, {
|
|
1239
|
+
whiteList: this.xssWhiteList,
|
|
1240
|
+
onIgnoreTagAttr: this.onIgnoreTagAttr,
|
|
1241
|
+
css: {
|
|
1242
|
+
whiteList: Object.assign({}, this.cssWhiteList, {
|
|
1243
|
+
top: true,
|
|
1244
|
+
left: true,
|
|
1245
|
+
bottom: true,
|
|
1246
|
+
right: true,
|
|
1247
|
+
}),
|
|
1248
|
+
},
|
|
1249
|
+
});
|
|
1250
|
+
}
|
|
1251
|
+
}
|
|
1252
|
+
|
|
1253
|
+
class MermaidService {
|
|
1254
|
+
constructor(config = {}) {
|
|
1255
|
+
this.config = config;
|
|
1256
|
+
this.mermaidInstance = null;
|
|
1257
|
+
this.isLoading = false;
|
|
1258
|
+
this.lastValidResult = '';
|
|
1259
|
+
this.viewStateMap = new WeakMap();
|
|
1260
|
+
this.containerHeight = 400;
|
|
1261
|
+
}
|
|
1262
|
+
async loadMermaid() {
|
|
1263
|
+
if (this.mermaidInstance) {
|
|
1264
|
+
return this.mermaidInstance;
|
|
1265
|
+
}
|
|
1266
|
+
if (this.isLoading) {
|
|
1267
|
+
return new Promise((resolve) => {
|
|
1268
|
+
const checkInstance = () => {
|
|
1269
|
+
if (this.mermaidInstance) {
|
|
1270
|
+
resolve(this.mermaidInstance);
|
|
1271
|
+
}
|
|
1272
|
+
else {
|
|
1273
|
+
setTimeout(checkInstance, 50);
|
|
1274
|
+
}
|
|
1275
|
+
};
|
|
1276
|
+
checkInstance();
|
|
1277
|
+
});
|
|
1278
|
+
}
|
|
1279
|
+
this.isLoading = true;
|
|
1280
|
+
try {
|
|
1281
|
+
const { default: mermaid } = await import('mermaid');
|
|
1282
|
+
mermaid.initialize({
|
|
1283
|
+
theme: this.config.theme || 'default',
|
|
1284
|
+
startOnLoad: false,
|
|
1285
|
+
suppressErrorRendering: true,
|
|
1286
|
+
...this.config
|
|
1287
|
+
});
|
|
1288
|
+
this.mermaidInstance = mermaid;
|
|
1289
|
+
return mermaid;
|
|
1290
|
+
}
|
|
1291
|
+
catch (error) {
|
|
1292
|
+
console.error('Failed to load mermaid:', error);
|
|
1293
|
+
throw new Error('Failed to load mermaid library');
|
|
1294
|
+
}
|
|
1295
|
+
finally {
|
|
1296
|
+
this.isLoading = false;
|
|
1297
|
+
}
|
|
1298
|
+
}
|
|
1299
|
+
async renderToContainer(container, code, theme = 'light') {
|
|
1300
|
+
const svgStr = await this.renderMermaid(code, theme);
|
|
1301
|
+
container.innerHTML = svgStr;
|
|
1302
|
+
const svg = container.querySelector('svg');
|
|
1303
|
+
if (svg) {
|
|
1304
|
+
this.initViewState(container, svg);
|
|
1305
|
+
this.applyTransform(container, svg);
|
|
1306
|
+
svg.addEventListener('mousedown', (e) => this.onSvgMouseDown(e, container, svg));
|
|
1307
|
+
}
|
|
1308
|
+
}
|
|
1309
|
+
initViewState(container, svg) {
|
|
1310
|
+
// 获取svg的viewBox或宽高
|
|
1311
|
+
let vb = svg.getAttribute('viewBox');
|
|
1312
|
+
let svgW = 0, svgH = 0;
|
|
1313
|
+
if (vb) {
|
|
1314
|
+
const arr = vb.split(/\s+/);
|
|
1315
|
+
svgW = parseFloat(arr[2]);
|
|
1316
|
+
svgH = parseFloat(arr[3]);
|
|
1317
|
+
}
|
|
1318
|
+
else {
|
|
1319
|
+
svgW = svg.width.baseVal.value || svg.getBoundingClientRect().width;
|
|
1320
|
+
svgH = svg.height.baseVal.value || svg.getBoundingClientRect().height;
|
|
1321
|
+
}
|
|
1322
|
+
const contW = container.clientWidth || 0;
|
|
1323
|
+
const contH = this.containerHeight;
|
|
1324
|
+
let scale = 1;
|
|
1325
|
+
if (svgW && svgH && contW && contH) {
|
|
1326
|
+
scale = Math.min(contW / svgW, contH / svgH, 1);
|
|
1327
|
+
}
|
|
1328
|
+
this.viewStateMap.set(container, {
|
|
1329
|
+
scale,
|
|
1330
|
+
offsetX: 0,
|
|
1331
|
+
offsetY: 0,
|
|
1332
|
+
dragging: false,
|
|
1333
|
+
dragStart: { x: 0, y: 0 },
|
|
1334
|
+
lastOffset: { x: 0, y: 0 },
|
|
1335
|
+
});
|
|
1336
|
+
}
|
|
1337
|
+
applyTransform(container, svg) {
|
|
1338
|
+
const state = this.viewStateMap.get(container);
|
|
1339
|
+
if (!state)
|
|
1340
|
+
return;
|
|
1341
|
+
svg.style.position = 'absolute';
|
|
1342
|
+
svg.style.left = '50%';
|
|
1343
|
+
svg.style.top = '50%';
|
|
1344
|
+
svg.style.transform = `translate(-50%, -50%) translate(${state.offsetX}px, ${state.offsetY}px) scale(${state.scale})`;
|
|
1345
|
+
svg.style.transformOrigin = 'center center';
|
|
1346
|
+
svg.style.cursor = state.dragging ? 'grabbing' : 'grab';
|
|
1347
|
+
}
|
|
1348
|
+
zoomIn(container) {
|
|
1349
|
+
const svg = container.querySelector('svg');
|
|
1350
|
+
const state = this.viewStateMap.get(container);
|
|
1351
|
+
if (svg && state) {
|
|
1352
|
+
state.scale = Math.min(state.scale + 0.2, 3);
|
|
1353
|
+
this.applyTransform(container, svg);
|
|
1354
|
+
}
|
|
1355
|
+
}
|
|
1356
|
+
zoomOut(container) {
|
|
1357
|
+
const svg = container.querySelector('svg');
|
|
1358
|
+
const state = this.viewStateMap.get(container);
|
|
1359
|
+
if (svg && state) {
|
|
1360
|
+
state.scale = Math.max(state.scale - 0.2, 0.2);
|
|
1361
|
+
this.applyTransform(container, svg);
|
|
1362
|
+
}
|
|
1363
|
+
}
|
|
1364
|
+
reset(container) {
|
|
1365
|
+
const svg = container.querySelector('svg');
|
|
1366
|
+
if (svg) {
|
|
1367
|
+
this.initViewState(container, svg);
|
|
1368
|
+
this.applyTransform(container, svg);
|
|
1369
|
+
}
|
|
1370
|
+
}
|
|
1371
|
+
async download(container, filename = 'diagram.png') {
|
|
1372
|
+
const svg = container.querySelector('svg');
|
|
1373
|
+
if (!svg)
|
|
1374
|
+
return;
|
|
1375
|
+
try {
|
|
1376
|
+
const clonedSvg = svg.cloneNode(true);
|
|
1377
|
+
const svgData = new XMLSerializer().serializeToString(clonedSvg);
|
|
1378
|
+
const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgData)}`;
|
|
1379
|
+
const img = new Image();
|
|
1380
|
+
await new Promise((resolve, reject) => {
|
|
1381
|
+
img.onload = () => resolve();
|
|
1382
|
+
img.onerror = (e) => reject(new Error('Image loading failed'));
|
|
1383
|
+
img.src = svgUrl;
|
|
1384
|
+
});
|
|
1385
|
+
const canvas = document.createElement('canvas');
|
|
1386
|
+
const ctx = canvas.getContext('2d');
|
|
1387
|
+
if (!ctx)
|
|
1388
|
+
throw new Error('Canvas context not available');
|
|
1389
|
+
canvas.width = img.width * 2;
|
|
1390
|
+
canvas.height = img.height * 2;
|
|
1391
|
+
ctx.fillStyle = 'white';
|
|
1392
|
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
1393
|
+
ctx.drawImage(img, 0, 0);
|
|
1394
|
+
canvas.toBlob((blob) => {
|
|
1395
|
+
if (!blob) {
|
|
1396
|
+
console.error('Failed to create blob from canvas');
|
|
1397
|
+
return;
|
|
1398
|
+
}
|
|
1399
|
+
const url = URL.createObjectURL(blob);
|
|
1400
|
+
const a = document.createElement('a');
|
|
1401
|
+
a.href = url;
|
|
1402
|
+
a.download = filename;
|
|
1403
|
+
document.body.appendChild(a);
|
|
1404
|
+
a.click();
|
|
1405
|
+
setTimeout(() => {
|
|
1406
|
+
document.body.removeChild(a);
|
|
1407
|
+
URL.revokeObjectURL(url);
|
|
1408
|
+
}, 100);
|
|
1409
|
+
}, 'image/png');
|
|
1410
|
+
}
|
|
1411
|
+
catch (error) {
|
|
1412
|
+
console.error('Failed to download diagram:', error);
|
|
1413
|
+
}
|
|
1414
|
+
}
|
|
1415
|
+
onSvgMouseDown(e, container, svg) {
|
|
1416
|
+
const state = this.viewStateMap.get(container);
|
|
1417
|
+
if (!state)
|
|
1418
|
+
return;
|
|
1419
|
+
state.dragging = true;
|
|
1420
|
+
state.dragStart = { x: e.clientX, y: e.clientY };
|
|
1421
|
+
state.lastOffset = { x: state.offsetX, y: state.offsetY };
|
|
1422
|
+
const move = (ev) => this.onSvgMouseMove(ev, container, svg);
|
|
1423
|
+
const up = () => this.onSvgMouseUp(container, svg, move, up);
|
|
1424
|
+
document.addEventListener('mousemove', move);
|
|
1425
|
+
document.addEventListener('mouseup', up);
|
|
1426
|
+
this.applyTransform(container, svg);
|
|
1427
|
+
}
|
|
1428
|
+
onSvgMouseMove(e, container, svg) {
|
|
1429
|
+
const state = this.viewStateMap.get(container);
|
|
1430
|
+
if (!state || !state.dragging)
|
|
1431
|
+
return;
|
|
1432
|
+
state.offsetX = state.lastOffset.x + (e.clientX - state.dragStart.x);
|
|
1433
|
+
state.offsetY = state.lastOffset.y + (e.clientY - state.dragStart.y);
|
|
1434
|
+
this.applyTransform(container, svg);
|
|
1435
|
+
}
|
|
1436
|
+
onSvgMouseUp(container, svg, move, up) {
|
|
1437
|
+
const state = this.viewStateMap.get(container);
|
|
1438
|
+
if (!state)
|
|
1439
|
+
return;
|
|
1440
|
+
state.dragging = false;
|
|
1441
|
+
document.removeEventListener('mousemove', move);
|
|
1442
|
+
document.removeEventListener('mouseup', up);
|
|
1443
|
+
this.applyTransform(container, svg);
|
|
1444
|
+
}
|
|
1445
|
+
async renderMermaid(code, theme = 'light') {
|
|
1446
|
+
try {
|
|
1447
|
+
const mermaid = await this.loadMermaid();
|
|
1448
|
+
if (this.config.theme !== theme) {
|
|
1449
|
+
this.config.theme = theme;
|
|
1450
|
+
mermaid.initialize({
|
|
1451
|
+
startOnLoad: false,
|
|
1452
|
+
suppressErrorRendering: true,
|
|
1453
|
+
theme: theme === 'dark' ? 'dark' : 'default',
|
|
1454
|
+
...this.config
|
|
1455
|
+
});
|
|
1456
|
+
}
|
|
1457
|
+
const id = `mc_mermaid_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
|
1458
|
+
const { svg } = await mermaid.render(id, code);
|
|
1459
|
+
this.lastValidResult = svg;
|
|
1460
|
+
return svg;
|
|
1461
|
+
}
|
|
1462
|
+
catch (error) {
|
|
1463
|
+
return this.lastValidResult;
|
|
1464
|
+
}
|
|
1465
|
+
}
|
|
1466
|
+
// 设置配置
|
|
1467
|
+
setConfig(config = {}) {
|
|
1468
|
+
this.config = {
|
|
1469
|
+
theme: 'default',
|
|
1470
|
+
...config
|
|
1471
|
+
};
|
|
1472
|
+
}
|
|
1473
|
+
}
|
|
1474
|
+
|
|
1475
|
+
class CodeBlockFoundation extends BaseFoundation {
|
|
1476
|
+
constructor(adapter) {
|
|
1477
|
+
super({ ...adapter });
|
|
1478
|
+
this.toggleExpand = () => {
|
|
1479
|
+
this.setState({ expanded: !this.getStates().expanded });
|
|
1480
|
+
};
|
|
1481
|
+
this.zoomOut = () => {
|
|
1482
|
+
const container = this._adapter.getContainer();
|
|
1483
|
+
if (container && this.mermaidService) {
|
|
1484
|
+
this.mermaidService.zoomOut(container);
|
|
1485
|
+
}
|
|
1486
|
+
};
|
|
1487
|
+
this.zoomIn = () => {
|
|
1488
|
+
const container = this._adapter.getContainer();
|
|
1489
|
+
if (container && this.mermaidService) {
|
|
1490
|
+
this.mermaidService.zoomIn(container);
|
|
1491
|
+
}
|
|
1492
|
+
};
|
|
1493
|
+
this.checkIsMermaid = () => {
|
|
1494
|
+
const { enableMermaid, language } = this.getProps();
|
|
1495
|
+
return enableMermaid && language?.toLowerCase() === 'mermaid';
|
|
1496
|
+
};
|
|
1497
|
+
this.download = () => {
|
|
1498
|
+
const container = this._adapter.getContainer();
|
|
1499
|
+
if (container && this.mermaidService) {
|
|
1500
|
+
this.mermaidService.download(container);
|
|
1501
|
+
}
|
|
1502
|
+
};
|
|
1503
|
+
this.handleCopySuccess = () => {
|
|
1504
|
+
this.setState({ copied: true });
|
|
1505
|
+
setTimeout(() => {
|
|
1506
|
+
this.setState({ copied: false });
|
|
1507
|
+
}, 1500);
|
|
1508
|
+
};
|
|
1509
|
+
this.updateHighlightedCode = () => {
|
|
1510
|
+
const { code, language } = this.getProps();
|
|
1511
|
+
let highlightedCode = '';
|
|
1512
|
+
try {
|
|
1513
|
+
const typeIndex = code.indexOf(`<span class="mc-typewriter`);
|
|
1514
|
+
if (language && hljs.getLanguage(language)) {
|
|
1515
|
+
if (typeIndex !== -1) {
|
|
1516
|
+
highlightedCode =
|
|
1517
|
+
hljs.highlight(code.slice(0, typeIndex), {
|
|
1518
|
+
language,
|
|
1519
|
+
}).value + code.slice(typeIndex);
|
|
1520
|
+
}
|
|
1521
|
+
else {
|
|
1522
|
+
highlightedCode = hljs.highlight(code, {
|
|
1523
|
+
language,
|
|
1524
|
+
}).value;
|
|
1525
|
+
}
|
|
1526
|
+
}
|
|
1527
|
+
else {
|
|
1528
|
+
if (typeof hljs.highlightAuto !== 'undefined') {
|
|
1529
|
+
if (typeIndex !== -1) {
|
|
1530
|
+
highlightedCode =
|
|
1531
|
+
hljs.highlightAuto(code.slice(0, typeIndex)).value +
|
|
1532
|
+
code.slice(typeIndex);
|
|
1533
|
+
}
|
|
1534
|
+
else {
|
|
1535
|
+
highlightedCode = hljs.highlightAuto(code).value;
|
|
1536
|
+
}
|
|
1537
|
+
}
|
|
1538
|
+
else {
|
|
1539
|
+
highlightedCode = this.mdCardService.filterHtml(code);
|
|
1540
|
+
}
|
|
1541
|
+
}
|
|
1542
|
+
}
|
|
1543
|
+
catch (_) {
|
|
1544
|
+
highlightedCode = code;
|
|
1545
|
+
}
|
|
1546
|
+
this._adapter.highlightCodeChange(highlightedCode, language);
|
|
1547
|
+
};
|
|
1548
|
+
this.renderMermaid = async () => {
|
|
1549
|
+
const { code, theme, mermaidConfig, } = this.getProps();
|
|
1550
|
+
const { mermaidContentRef } = this.getStates();
|
|
1551
|
+
const isMermaid = this.checkIsMermaid();
|
|
1552
|
+
if (!isMermaid || !code || !mermaidContentRef) {
|
|
1553
|
+
return;
|
|
1554
|
+
}
|
|
1555
|
+
if (!this.mermaidService) {
|
|
1556
|
+
try {
|
|
1557
|
+
this.mermaidService = new MermaidService();
|
|
1558
|
+
const config = {
|
|
1559
|
+
theme: theme === 'dark' ? 'dark' : 'default',
|
|
1560
|
+
...mermaidConfig,
|
|
1561
|
+
};
|
|
1562
|
+
this.mermaidService.setConfig(config);
|
|
1563
|
+
}
|
|
1564
|
+
catch (error) {
|
|
1565
|
+
console.error('Failed to load MermaidService:', error);
|
|
1566
|
+
return;
|
|
1567
|
+
}
|
|
1568
|
+
}
|
|
1569
|
+
this.nextTick(async () => {
|
|
1570
|
+
const container = mermaidContentRef.nativeElement;
|
|
1571
|
+
if (container) {
|
|
1572
|
+
// 移除打字效果相关的span标签
|
|
1573
|
+
const cleanCode = code.replace(/<span[^>]*\bclass\s*=\s*['"]mc-typewriter[^>]*>([\s\S]*?)<\/span>/g, `$1`);
|
|
1574
|
+
await this.mermaidService?.renderToContainer(container, cleanCode, theme);
|
|
1575
|
+
}
|
|
1576
|
+
});
|
|
1577
|
+
};
|
|
1578
|
+
this.mdCardService = new MDCardService();
|
|
1579
|
+
}
|
|
1580
|
+
copyCodeInternal() {
|
|
1581
|
+
const { code } = this.getProps();
|
|
1582
|
+
if (navigator.clipboard) {
|
|
1583
|
+
navigator.clipboard.writeText(code).then(() => {
|
|
1584
|
+
this.handleCopySuccess();
|
|
1585
|
+
});
|
|
1586
|
+
}
|
|
1587
|
+
else {
|
|
1588
|
+
const textarea = document.createElement('textarea');
|
|
1589
|
+
textarea.style.position = 'fixed';
|
|
1590
|
+
textarea.style.top = '-9999px';
|
|
1591
|
+
textarea.style.left = '-9999px';
|
|
1592
|
+
textarea.style.zIndex = '-1';
|
|
1593
|
+
textarea.value = code;
|
|
1594
|
+
document.body.appendChild(textarea);
|
|
1595
|
+
textarea.select();
|
|
1596
|
+
document.execCommand('copy');
|
|
1597
|
+
document.body.removeChild(textarea);
|
|
1598
|
+
this.handleCopySuccess();
|
|
1599
|
+
}
|
|
1600
|
+
}
|
|
1601
|
+
}
|
|
1602
|
+
|
|
1603
|
+
class CodeBlockComponent extends BaseComponent {
|
|
1604
|
+
get showMermaidDiagram() {
|
|
1605
|
+
return this._showMermaidDiagram;
|
|
1606
|
+
}
|
|
1607
|
+
set showMermaidDiagram(value) {
|
|
1608
|
+
if (this._showMermaidDiagram !== value) {
|
|
1609
|
+
this._showMermaidDiagram = value;
|
|
1610
|
+
// 当切换为显示图表且当前是mermaid类型时，渲染图表
|
|
1611
|
+
if (value && this.isMermaid) {
|
|
1612
|
+
// 在视图更新后渲染mermaid
|
|
1613
|
+
setTimeout(() => {
|
|
1614
|
+
this.renderMermaid();
|
|
1615
|
+
});
|
|
1616
|
+
}
|
|
1617
|
+
}
|
|
1618
|
+
}
|
|
1619
|
+
constructor(cdr) {
|
|
1620
|
+
super();
|
|
1621
|
+
this.cdr = cdr;
|
|
1622
|
+
this.code = '';
|
|
1623
|
+
this.language = '';
|
|
1624
|
+
this.blockIndex = 0;
|
|
1625
|
+
this.theme = 'light';
|
|
1626
|
+
this.enableMermaid = false;
|
|
1627
|
+
this.mermaidConfig = {};
|
|
1628
|
+
this.contentTemplate = null;
|
|
1629
|
+
this.headerTemplate = null;
|
|
1630
|
+
this.actionsTemplate = null;
|
|
1631
|
+
this.expanded = true;
|
|
1632
|
+
this.copied = false;
|
|
1633
|
+
this.mermaidContent = '';
|
|
1634
|
+
this._showMermaidDiagram = true;
|
|
1635
|
+
this.highlightedCode = '';
|
|
1636
|
+
this.isMermaid = false;
|
|
1637
|
+
this.copySubject = new Subject();
|
|
1638
|
+
this.copySubject
|
|
1639
|
+
.pipe(debounceTime(300))
|
|
1640
|
+
.subscribe(() => this.copyCodeInternal());
|
|
1641
|
+
this.foundation = new CodeBlockFoundation(this.adapter);
|
|
1642
|
+
this.diffDom = new DiffDOM();
|
|
1643
|
+
}
|
|
1644
|
+
get adapter() {
|
|
1645
|
+
return {
|
|
1646
|
+
...super.adapter,
|
|
1647
|
+
getContainer: () => {
|
|
1648
|
+
return this.mermaidContentRef.nativeElement;
|
|
1649
|
+
},
|
|
1650
|
+
highlightCodeChange: (highlightedCode, language) => {
|
|
1651
|
+
this.highlightedCode = highlightedCode;
|
|
1652
|
+
if (this.codeElementRef?.nativeElement) {
|
|
1653
|
+
const newElement = document.createElement('code');
|
|
1654
|
+
newElement.className = `hljs language-${language}`;
|
|
1655
|
+
newElement.innerHTML = highlightedCode;
|
|
1656
|
+
const diff = this.diffDom.diff(this.codeElementRef.nativeElement, newElement);
|
|
1657
|
+
this.diffDom.apply(this.codeElementRef.nativeElement, diff);
|
|
1658
|
+
}
|
|
1659
|
+
},
|
|
1660
|
+
};
|
|
1661
|
+
}
|
|
1662
|
+
switchShowMermaid(show) {
|
|
1663
|
+
this.showMermaidDiagram = show;
|
|
1664
|
+
if (!this.showMermaidDiagram) {
|
|
1665
|
+
this.codeElementTemplates.changes.subscribe(() => {
|
|
1666
|
+
if (this.codeElementRef?.nativeElement && !this.showMermaidDiagram) {
|
|
1667
|
+
this.codeElementRef.nativeElement.innerHTML = this.highlightedCode;
|
|
1668
|
+
}
|
|
1669
|
+
});
|
|
1670
|
+
}
|
|
1671
|
+
this.cdr.detectChanges();
|
|
1672
|
+
}
|
|
1673
|
+
ngOnInit() {
|
|
1674
|
+
this.checkIsMermaid();
|
|
1675
|
+
this.updateHighlightedCode();
|
|
1676
|
+
if (this.isMermaid) {
|
|
1677
|
+
this.renderMermaid();
|
|
1678
|
+
}
|
|
1679
|
+
}
|
|
1680
|
+
ngAfterViewInit() {
|
|
1681
|
+
if (this.isMermaid) {
|
|
1682
|
+
this.renderMermaid();
|
|
1683
|
+
}
|
|
1684
|
+
}
|
|
1685
|
+
ngOnChanges(changes) {
|
|
1686
|
+
if (changes['code'] || changes['language']) {
|
|
1687
|
+
this.checkIsMermaid();
|
|
1688
|
+
this.updateHighlightedCode();
|
|
1689
|
+
}
|
|
1690
|
+
if (changes['enableMermaid'] || changes['theme'] || changes['code']) {
|
|
1691
|
+
this.checkIsMermaid();
|
|
1692
|
+
if (this.isMermaid) {
|
|
1693
|
+
this.renderMermaid();
|
|
1694
|
+
}
|
|
1695
|
+
}
|
|
1696
|
+
if (changes['showMermaidDiagram'] &&
|
|
1697
|
+
this.isMermaid &&
|
|
1698
|
+
this.showMermaidDiagram) {
|
|
1699
|
+
this.renderMermaid();
|
|
1700
|
+
}
|
|
1701
|
+
}
|
|
1702
|
+
checkIsMermaid() {
|
|
1703
|
+
this.isMermaid = this.foundation.checkIsMermaid();
|
|
1704
|
+
}
|
|
1705
|
+
updateHighlightedCode() {
|
|
1706
|
+
this.foundation.updateHighlightedCode();
|
|
1707
|
+
}
|
|
1708
|
+
zoomIn() {
|
|
1709
|
+
this.foundation.zoomIn();
|
|
1710
|
+
this.cdr.detectChanges();
|
|
1711
|
+
}
|
|
1712
|
+
zoomOut() {
|
|
1713
|
+
this.foundation.zoomOut();
|
|
1714
|
+
this.cdr.detectChanges();
|
|
1715
|
+
}
|
|
1716
|
+
download() {
|
|
1717
|
+
this.foundation.download();
|
|
1718
|
+
}
|
|
1719
|
+
async renderMermaid() {
|
|
1720
|
+
await this.foundation.renderMermaid();
|
|
1721
|
+
}
|
|
1722
|
+
toggleExpand() {
|
|
1723
|
+
this.foundation.toggleExpand();
|
|
1724
|
+
this.cdr.detectChanges();
|
|
1725
|
+
}
|
|
1726
|
+
copyCode() {
|
|
1727
|
+
this.copySubject.next();
|
|
1728
|
+
}
|
|
1729
|
+
copyCodeInternal() {
|
|
1730
|
+
this.foundation.copyCodeInternal();
|
|
1731
|
+
}
|
|
1732
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CodeBlockComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1733
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: CodeBlockComponent, isStandalone: false, selector: "mc-code-block", inputs: { code: "code", language: "language", blockIndex: "blockIndex", theme: "theme", enableMermaid: "enableMermaid", mermaidConfig: "mermaidConfig", contentTemplate: "contentTemplate", headerTemplate: "headerTemplate", actionsTemplate: "actionsTemplate" }, viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["rootRef"], descendants: true }, { propertyName: "mermaidContentRef", first: true, predicate: ["mermaidContent"], descendants: true }, { propertyName: "codeElementRef", first: true, predicate: ["codeElement"], descendants: true }, { propertyName: "codeElementTemplates", predicate: ["codeElementTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"mc-code-block\"\n [ngClass]=\"theme === 'dark' ? 'mc-code-block-dark' : 'mc-code-block-light'\"\n #rootRef\n>\n <div class=\"mc-code-block-header\" *ngIf=\"!headerTemplate\">\n <span class=\"mc-code-lang\">{{ language }}</span>\n <ng-container *ngIf=\"!actionsTemplate\">\n <div class=\"mc-code-block-actions\">\n <div *ngIf=\"isMermaid\" style=\"margin-right: 8px\">\n <ul\n class=\"mc-diagram-switch\"\n [ngClass]=\"{ 'mc-show-code': !showMermaidDiagram }\"\n >\n <li\n (click)=\"switchShowMermaid(true)\"\n [ngClass]=\"{ 'mc-diagram-switch-active': showMermaidDiagram }\"\n >\n \u56FE\u8868\n </li>\n <li\n (click)=\"switchShowMermaid(false)\"\n [ngClass]=\"{ 'mc-diagram-switch-active': !showMermaidDiagram }\"\n >\n \u4EE3\u7801\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"isMermaid && showMermaidDiagram\"\n class=\"mc-action-btn mc-toggle-btn\"\n [title]=\"'Md.zoomIn' | translate\"\n (click)=\"zoomIn()\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g\n id=\"enlarge\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <path\n d=\"M7.16666667,1 C10.572409,1 13.3333333,3.76092429 13.3333333,7.16666667 C13.3333333,8.68984984 12.781084,10.0840543 11.8658888,11.1599767 L14.4225201,13.7154466 C14.6177822,13.9107088 14.6177822,14.2272912 14.4225201,14.4225534 C14.2489537,14.5961197 13.9795293,14.6154049 13.7846612,14.4804088 L13.7154133,14.4225534 L11.158968,11.8667467 C10.083183,12.7814291 8.68937384,13.3333333 7.16666667,13.3333333 C3.76092429,13.3333333 1,10.572409 1,7.16666667 C1,3.76092429 3.76092429,1 7.16666667,1 Z M7.16666667,2 C4.31320904,2 2,4.31320904 2,7.16666667 C2,10.0201243 4.31320904,12.3333333 7.16666667,12.3333333 C10.0201243,12.3333333 12.3333333,10.0201243 12.3333333,7.16666667 C12.3333333,4.31320904 10.0201243,2 7.16666667,2 Z M7.16666667,4.66666667 C7.41212656,4.66666667 7.61627504,4.84354183 7.658611,5.07679103 L7.66666667,5.16666667 L7.666,6.668 L9.16601582,6.66666666 C9.44215796,6.66630764 9.66630679,6.88987368 9.66666668,7.16601582 C9.66698576,7.4114755 9.49037648,7.61585405 9.25718258,7.65849359 L9.16731751,7.66666666 L7.666,7.668 L7.66666667,9.16666667 C7.66666667,9.44280904 7.44280904,9.66666667 7.16666667,9.66666667 C6.92120678,9.66666667 6.7170583,9.48979151 6.67472234,9.2565423 L6.66666667,9.16666667 L6.666,7.669 L5.17251751,7.67186668 C4.89637537,7.6722257 4.67222654,7.44865965 4.67186666,7.17251751 C4.67154758,6.92705783 4.84815685,6.72267929 5.08135075,6.68003974 L5.17121582,6.67186709 L6.666,6.669 L6.66666667,5.16666667 C6.66666667,4.89052429 6.89052429,4.66666667 7.16666667,4.66666667 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#71757F\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </div>\n <div\n *ngIf=\"isMermaid && showMermaidDiagram\"\n class=\"mc-action-btn mc-toggle-btn\"\n title=\"\u7F29\u5C0F\"\n (click)=\"zoomOut()\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g\n id=\"zoom-out\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <path\n d=\"M7.16666667,1 C10.572409,1 13.3333333,3.76092429 13.3333333,7.16666667 C13.3333333,8.68984984 12.781084,10.0840543 11.8658888,11.1599767 L14.4225201,13.7154466 C14.6177822,13.9107088 14.6177822,14.2272912 14.4225201,14.4225534 C14.2489537,14.5961197 13.9795293,14.6154049 13.7846612,14.4804088 L13.7154133,14.4225534 L11.158968,11.8667467 C10.083183,12.7814291 8.68937384,13.3333333 7.16666667,13.3333333 C3.76092429,13.3333333 1,10.572409 1,7.16666667 C1,3.76092429 3.76092429,1 7.16666667,1 Z M7.16666667,2 C4.31320904,2 2,4.31320904 2,7.16666667 C2,10.0201243 4.31320904,12.3333333 7.16666667,12.3333333 C10.0201243,12.3333333 12.3333333,10.0201243 12.3333333,7.16666667 C12.3333333,4.31320904 10.0201243,2 7.16666667,2 Z M9.16601582,6.66666666 C9.44215796,6.66630764 9.66630679,6.88987368 9.66666668,7.16601582 C9.66698576,7.4114755 9.49037648,7.61585405 9.25718258,7.65849359 L9.16731751,7.66666666 L5.17251751,7.67186668 C4.89637537,7.6722257 4.67222654,7.44865965 4.67186666,7.17251751 C4.67154758,6.92705783 4.84815685,6.72267929 5.08135075,6.68003974 L5.17121582,6.67186709 L9.16601582,6.66666666 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#71757F\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </div>\n <div\n *ngIf=\"isMermaid && showMermaidDiagram\"\n class=\"mc-action-btn mc-toggle-btn\"\n title=\"\u4E0B\u8F7D\"\n (click)=\"download()\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g\n id=\"\u9875\u9762-1\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g id=\"i\u4E0B\u8F7D\">\n <path\n d=\"M14.5,14 C14.7761424,14 15,14.2238576 15,14.5 C15,14.7761424 14.7761424,15 14.5,15 L1.5,15 C1.22385763,15 1,14.7761424 1,14.5 C1,14.2238576 1.22385763,14 1.5,14 L14.5,14 Z M8,1 C8.24545989,1 8.44960837,1.17687516 8.49194433,1.41012437 L8.5,1.5 L8.5,10.793 L11.6464466,7.64644661 C11.820013,7.47288026 12.0894374,7.45359511 12.2843055,7.58859116 L12.3535534,7.64644661 C12.5271197,7.82001296 12.5464049,8.08943736 12.4114088,8.2843055 L12.3535534,8.35355339 L8.35355339,12.3535534 L8.34128643,12.3654113 C8.32881868,12.3770608 8.31575424,12.3880797 8.30214392,12.3984173 L8.35355339,12.3535534 C8.32671912,12.3803877 8.29759357,12.4035342 8.26680652,12.422993 C8.25568247,12.4299807 8.24404667,12.4367067 8.23212724,12.4429657 C8.21827569,12.4502504 8.20453886,12.4566485 8.1905951,12.4623894 C8.17802507,12.4675915 8.16473685,12.4724419 8.15119917,12.4767316 C8.13583471,12.481552 8.12047425,12.4856039 8.10498705,12.4889143 C8.09430622,12.4912471 8.08325248,12.4932298 8.07207924,12.494843 C8.05487076,12.4972949 8.03773477,12.498877 8.02056948,12.4995793 C8.01375728,12.4998604 8.00689494,12.5 8,12.5 L7.98043349,12.4996194 C7.96293275,12.4989382 7.94546098,12.4973429 7.92809589,12.4948333 L8,12.5 C7.96390296,12.5 7.92869933,12.4961748 7.89477235,12.4889078 C7.87952575,12.4856039 7.86416529,12.481552 7.84898836,12.4767587 C7.83526315,12.4724419 7.82197493,12.4675915 7.80896344,12.4622078 C7.79546114,12.4566485 7.78172431,12.4502504 7.76824181,12.443195 C7.75595333,12.4367067 7.74431753,12.4299807 7.73298968,12.422812 C7.72729809,12.4192668 7.72146362,12.4154054 7.7156945,12.4114088 L7.69785608,12.3984173 C7.68424576,12.3880797 7.67118132,12.3770608 7.65871357,12.3654113 L7.64644661,12.3535534 L3.64644661,8.35355339 C3.45118446,8.15829124 3.45118446,7.84170876 3.64644661,7.64644661 C3.82001296,7.47288026 4.08943736,7.45359511 4.2843055,7.58859116 L4.35355339,7.64644661 L7.5,10.793 L7.5,1.5 C7.5,1.22385763 7.72385763,1 8,1 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#71757F\"\n ></path>\n </g>\n </g>\n </svg>\n </div>\n <div\n class=\"mc-action-btn mc-toggle-btn\"\n title=\"\u5C55\u5F00/\u6298\u53E0\"\n (click)=\"toggleExpand()\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g\n id=\"\u5168\u90E8\u6536\u8D77\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <path\n d=\"M4.715694,14.4114091 C4.910563,14.5464051 5.179987,14.5271201 5.353553,14.3535531 L5.353553,14.3535531 L7.99999988,11.7070001 L10.646447,14.3535531 L10.715694,14.4114091 C10.910563,14.5464051 11.179987,14.5271201 11.353553,14.3535531 C11.548816,14.1582911 11.548816,13.8417091 11.353553,13.6464471 L11.353553,13.6464471 L8.353553,10.6464471 L8.284306,10.5885911 C8.089437,10.4535951 7.820013,10.4728801 7.646447,10.6464471 L7.646447,10.6464471 L4.646447,13.6464471 L4.588591,13.7156941 C4.453595,13.9105631 4.47288,14.1799871 4.646447,14.3535531 L4.646447,14.3535531 L4.715694,14.4114091 Z M14.5,7.50000012 C14.776142,7.50000012 15,7.72385812 15,8.00000012 C15,8.27614212 14.776142,8.50000012 14.5,8.50000012 L1.5,8.50000012 C1.223858,8.50000012 1,8.27614212 1,8.00000012 C1,7.72385812 1.223858,7.50000012 1.5,7.50000012 L14.5,7.50000012 Z M8.284306,5.41140912 L8.353553,5.35355312 L11.353553,2.35355312 C11.548816,2.15829112 11.548816,1.84170912 11.353553,1.64644712 C11.179987,1.47288012 10.910563,1.45359512 10.715694,1.58859112 L10.646447,1.64644712 L7.99999988,4.29300012 L5.353553,1.64644712 C5.179987,1.47288012 4.910563,1.45359512 4.715694,1.58859112 L4.646447,1.64644712 C4.47288,1.82001312 4.453595,2.08943712 4.588591,2.28430612 L4.646447,2.35355312 L7.646447,5.35355312 C7.820013,5.52712012 8.089437,5.54640512 8.284306,5.41140912 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#71757F\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </div>\n <div\n class=\"mc-action-btn mc-copy-btn\"\n title=\"\u590D\u5236\"\n (click)=\"copyCode()\"\n >\n @if(copied) {\n <span>\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <defs>\n <polygon\n id=\"path-1\"\n points=\"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459\"\n ></polygon>\n </defs>\n <g\n id=\"status/whiteBG/correct\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <mask id=\"mask-2\" fill=\"white\">\n <use xlink:href=\"#path-1\"></use>\n </mask>\n <use id=\"Mask\" fill=\"#3DCCA6\" xlink:href=\"#path-1\"></use>\n </g>\n </svg>\n </span>\n } @else {\n <span>\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g\n id=\"\u9875\u9762-1\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g\n id=\"API-starter-\u56FE\u6807\u5165\u5E93\"\n transform=\"translate(-592.000000, -204.000000)\"\n >\n <g\n id=\"\u65B9\u683C\u5907\u4EFD-16\"\n transform=\"translate(560.000000, 180.000000)\"\n >\n <text\n id=\"\u56FE\u6807\"\n font-family=\"PingFangSC-Regular, PingFang SC\"\n font-size=\"12\"\n font-weight=\"normal\"\n line-spacing=\"16\"\n fill=\"#71757F\"\n >\n <tspan x=\"27.136\" y=\"61\">\u590D\u5236</tspan>\n </text>\n </g>\n <path\n d=\"M604.5,206 C605.279696,206 605.920449,206.594888 605.993133,207.35554 L606,207.5 L606,214.5 C606,215.279696 605.405112,215.920449 604.64446,215.993133 L604.5,216 L604,216 L604,216.5 C604,217.279696 603.405112,217.920449 602.64446,217.993133 L602.5,218 L595.5,218 C594.671573,218 594,217.328427 594,216.5 L594,216.5 L594,209.5 C594,208.671573 594.671573,208 595.5,208 L595.5,208 L596,208 L596,207.5 C596,206.720304 596.594888,206.079551 597.35554,206.006867 L597.5,206 L604.5,206 Z M602.5,209 L595.5,209 C595.223858,209 595,209.223858 595,209.5 L595,209.5 L595,216.5 C595,216.776142 595.223858,217 595.5,217 L595.5,217 L602.5,217 C602.776142,217 603,216.776142 603,216.5 L603,216.5 L603,209.5 C603,209.223858 602.776142,209 602.5,209 L602.5,209 Z M604.5,207 L597.5,207 C597.25454,207 597.050392,207.176875 597.008056,207.410124 L597,207.5 L597,208 L602.5,208 C603.279696,208 603.920449,208.594888 603.993133,209.35554 L604,209.5 L604,215 L604.5,215 C604.74546,215 604.949608,214.823125 604.991944,214.589876 L605,214.5 L605,207.5 C605,207.25454 604.823125,207.050392 604.589876,207.008056 L604.5,207 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#71757F\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </g>\n </svg>\n </span>\n }\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"actionsTemplate\">\n <ng-template [ngTemplateOutlet]=\"actionsTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n </ng-container>\n </div>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-template [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n </ng-container>\n\n <div [ngClass]=\"{ 'mc-block-hidden': !expanded }\" >\n @if (showMermaidDiagram && isMermaid && !contentTemplate) {\n <div class=\"mc-mermaid-content\" #mermaidContent></div>\n } @else if(!contentTemplate) {\n <pre #codeElementTemplate><code #codeElement [ngClass]=\"'hljs language-' + language\" ></code></pre>\n } @else {\n <ng-container *ngIf=\"contentTemplate\">\n <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n </ng-container>\n }\n </div>\n</div>\n", styles: [".mc-markdown-render ::ng-deep .h1,.mc-markdown-render ::ng-deep .h2,.mc-markdown-render ::ng-deep .h3,.mc-markdown-render ::ng-deep .h4,.mc-markdown-render ::ng-deep .h5,.mc-markdown-render ::ng-deep .h6,.mc-markdown-render ::ng-deep h1,.mc-markdown-render ::ng-deep h2,.mc-markdown-render ::ng-deep h3,.mc-markdown-render ::ng-deep h4,.mc-markdown-render ::ng-deep h5,.mc-markdown-render ::ng-deep h6{line-height:1.1;margin:16px 0 12px}.mc-markdown-render ::ng-deep .h1:first-child,.mc-markdown-render ::ng-deep .h2:first-child,.mc-markdown-render ::ng-deep .h3:first-child,.mc-markdown-render ::ng-deep .h4:first-child,.mc-markdown-render ::ng-deep .h5:first-child,.mc-markdown-render ::ng-deep .h6:first-child,.mc-markdown-render ::ng-deep h1:first-child,.mc-markdown-render ::ng-deep h2:first-child,.mc-markdown-render ::ng-deep h3:first-child,.mc-markdown-render ::ng-deep h4:first-child,.mc-markdown-render ::ng-deep h5:first-child,.mc-markdown-render ::ng-deep h6:first-child{margin-top:0}.mc-markdown-render ::ng-deep h1{font-size:32px;line-height:40px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep h3{line-height:28px;font-size:20px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep caption{border:1px dashed var(--devui-line, #d7d8da);border-bottom:0;padding:3px;text-align:center}.mc-markdown-render ::ng-deep p{overflow-wrap:break-word;margin:0;padding:0;line-height:24px}.mc-markdown-render ::ng-deep p:last-child{margin:0}.mc-markdown-render ::ng-deep ul,.mc-markdown-render ::ng-deep ol{margin:0;padding:0;padding-inline-start:1.75em}.mc-markdown-render ::ng-deep ul>li,.mc-markdown-render ::ng-deep ol>li{line-height:21px}.mc-markdown-render ::ng-deep ul{list-style-type:disc}.mc-markdown-render ::ng-deep ul li::marker{font-size:20px}.mc-markdown-render ::ng-deep ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin-bottom:10px;border-collapse:collapse;display:table}.mc-markdown-render ::ng-deep td,.mc-markdown-render ::ng-deep th{padding:5px 10px;border:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-base-bg, #ffffff)}.mc-markdown-render ::ng-deep th{border-top:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-global-bg, #f6f6f8)}.mc-markdown-render ::ng-deep td p{margin:0;padding:0}.mc-markdown-render ::ng-deep blockquote{padding:0 8px;margin:0;color:var(--devui-text-weak, #575d6c);border-left:5px solid var(--devui-dividing-line, #f2f2f3)}.mc-markdown-render ::ng-deep a{color:var(--devui-link, #526ecc);text-decoration:none;cursor:pointer}.mc-markdown-render ::ng-deep a:hover{color:var(--devui-link-active, #526ecc)}.mc-markdown-render ::ng-deep img{max-width:100%}.mc-markdown-render{font-size:var(--devui-font-size, 14px);overflow-x:auto}.mc-markdown-render.mc-markdown-render-dark{color:#ced1db}.mc-markdown-render.mc-markdown-render-light{color:#252b3a}::ng-deep .mc-think-block{color:var(--devui-aide-text, #71757f);border-left:1px solid var(--devui-line, #d7d8da);padding-left:8px;margin-bottom:1rem}::ng-deep .mc-typewriter-color{background-image:-webkit-linear-gradient(left,#191919,#5588f0,#e171ee,#f2c55c);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-gradient{background:linear-gradient(to right,var(--devui-text, #252b3a),var(--devui-base-bg, #ffffff));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-cursor{font-weight:900;animation:typewriter .8s linear 0s infinite}@keyframes typewriter{0%{opacity:1}50%{opacity:0}to{opacity:1}}.mc-code-block-light ::ng-deep pre code.hljs{display:block;overflow-x:auto;padding:1em}.mc-code-block-light ::ng-deep code.hljs{padding:3px 5px}.mc-code-block-light ::ng-deep .hljs{background:#fefefe;color:#545454}.mc-code-block-light ::ng-deep .hljs-comment,.mc-code-block-light ::ng-deep .hljs-quote{color:#696969}.mc-code-block-light ::ng-deep .hljs-variable,.mc-code-block-light ::ng-deep .hljs-template-variable,.mc-code-block-light ::ng-deep .hljs-tag,.mc-code-block-light ::ng-deep .hljs-name,.mc-code-block-light ::ng-deep .hljs-selector-id,.mc-code-block-light ::ng-deep .hljs-selector-class,.mc-code-block-light ::ng-deep .hljs-regexp,.mc-code-block-light ::ng-deep .hljs-deletion{color:#d91e18}.mc-code-block-light ::ng-deep .hljs-number,.mc-code-block-light ::ng-deep .hljs-built_in,.mc-code-block-light ::ng-deep .hljs-literal,.mc-code-block-light ::ng-deep .hljs-type,.mc-code-block-light ::ng-deep .hljs-params,.mc-code-block-light ::ng-deep .hljs-meta,.mc-code-block-light ::ng-deep .hljs-link{color:#aa5d00}.mc-code-block-light ::ng-deep .hljs-attribute{color:#aa5d00}.mc-code-block-light ::ng-deep .hljs-string,.mc-code-block-light ::ng-deep .hljs-symbol,.mc-code-block-light ::ng-deep .hljs-bullet,.mc-code-block-light ::ng-deep .hljs-addition{color:green}.mc-code-block-light ::ng-deep .hljs-title,.mc-code-block-light ::ng-deep .hljs-section{color:#007faa}.mc-code-block-light ::ng-deep .hljs-keyword,.mc-code-block-light ::ng-deep .hljs-selector-tag{color:#7928a1}.mc-code-block-light ::ng-deep .hljs-emphasis{font-style:italic}.mc-code-block-light ::ng-deep .hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.mc-code-block-light ::ng-deep .hljs-addition,.mc-code-block-light ::ng-deep .hljs-attribute,.mc-code-block-light ::ng-deep .hljs-built_in,.mc-code-block-light ::ng-deep .hljs-bullet,.mc-code-block-light ::ng-deep .hljs-comment,.mc-code-block-light ::ng-deep .hljs-link,.mc-code-block-light ::ng-deep .hljs-literal,.mc-code-block-light ::ng-deep .hljs-meta,.mc-code-block-light ::ng-deep .hljs-number,.mc-code-block-light ::ng-deep .hljs-params,.mc-code-block-light ::ng-deep .hljs-string,.mc-code-block-light ::ng-deep .hljs-symbol,.mc-code-block-light ::ng-deep .hljs-type,.mc-code-block-light ::ng-deep .hljs-quote{color:highlight}.mc-code-block-light ::ng-deep .hljs-keyword,.mc-code-block-light ::ng-deep .hljs-selector-tag{font-weight:700}}.mc-code-block-light{border:1px solid #d7d8da}.mc-code-block-light code.hljs{padding:1em}.mc-code-block-light{background-color:#f5f5f5}.mc-code-block-light .mc-code-lang,.mc-code-block-light .mc-code-block-actions .mc-copy-btn,.mc-code-block-light .mc-code-block-actions .mc-toggle-btn{color:#252b3a}.mc-code-block-light .mc-code-block-actions .mc-copy-btn:hover,.mc-code-block-light .mc-code-block-actions .mc-toggle-btn:hover{background-color:#ebebeb}.mc-code-block-light .mc-mermaid-content{background:#fefefe}.mc-code-block-dark ::ng-deep pre code.hljs{display:block;overflow-x:auto;padding:1em}.mc-code-block-dark ::ng-deep code.hljs{padding:3px 5px}.mc-code-block-dark ::ng-deep .hljs{background:#2b2b2b;color:#f8f8f2}.mc-code-block-dark ::ng-deep .hljs-comment,.mc-code-block-dark ::ng-deep .hljs-quote{color:#d4d0ab}.mc-code-block-dark ::ng-deep .hljs-variable,.mc-code-block-dark ::ng-deep .hljs-template-variable,.mc-code-block-dark ::ng-deep .hljs-tag,.mc-code-block-dark ::ng-deep .hljs-name,.mc-code-block-dark ::ng-deep .hljs-selector-id,.mc-code-block-dark ::ng-deep .hljs-selector-class,.mc-code-block-dark ::ng-deep .hljs-regexp,.mc-code-block-dark ::ng-deep .hljs-deletion{color:#ffa07a}.mc-code-block-dark ::ng-deep .hljs-number,.mc-code-block-dark ::ng-deep .hljs-built_in,.mc-code-block-dark ::ng-deep .hljs-literal,.mc-code-block-dark ::ng-deep .hljs-type,.mc-code-block-dark ::ng-deep .hljs-params,.mc-code-block-dark ::ng-deep .hljs-meta,.mc-code-block-dark ::ng-deep .hljs-link{color:#f5ab35}.mc-code-block-dark ::ng-deep .hljs-attribute{color:gold}.mc-code-block-dark ::ng-deep .hljs-string,.mc-code-block-dark ::ng-deep .hljs-symbol,.mc-code-block-dark ::ng-deep .hljs-bullet,.mc-code-block-dark ::ng-deep .hljs-addition{color:#abe338}.mc-code-block-dark ::ng-deep .hljs-title,.mc-code-block-dark ::ng-deep .hljs-section{color:#00e0e0}.mc-code-block-dark ::ng-deep .hljs-keyword,.mc-code-block-dark ::ng-deep .hljs-selector-tag{color:#dcc6e0}.mc-code-block-dark ::ng-deep .hljs-emphasis{font-style:italic}.mc-code-block-dark ::ng-deep .hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.mc-code-block-dark ::ng-deep .hljs-addition,.mc-code-block-dark ::ng-deep .hljs-attribute,.mc-code-block-dark ::ng-deep .hljs-built_in,.mc-code-block-dark ::ng-deep .hljs-bullet,.mc-code-block-dark ::ng-deep .hljs-comment,.mc-code-block-dark ::ng-deep .hljs-link,.mc-code-block-dark ::ng-deep .hljs-literal,.mc-code-block-dark ::ng-deep .hljs-meta,.mc-code-block-dark ::ng-deep .hljs-number,.mc-code-block-dark ::ng-deep .hljs-params,.mc-code-block-dark ::ng-deep .hljs-string,.mc-code-block-dark ::ng-deep .hljs-symbol,.mc-code-block-dark ::ng-deep .hljs-type,.mc-code-block-dark ::ng-deep .hljs-quote{color:highlight}.mc-code-block-dark ::ng-deep .hljs-keyword,.mc-code-block-dark ::ng-deep .hljs-selector-tag{font-weight:700}}.mc-code-block-dark{border:1px solid #4e5057}.mc-code-block-dark code.hljs{padding:1em}.mc-code-block-dark{background-color:#34363a}.mc-code-block-dark .mc-code-lang,.mc-code-block-dark .mc-code-block-actions .mc-copy-btn,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn{color:#ced1db}.mc-code-block-dark .mc-code-block-actions .mc-copy-btn:hover,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn:hover{background-color:#393a3e}.mc-code-block-dark .mc-code-block-actions .mc-copy-btn img,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn img{filter:brightness(1.5)}.mc-code-block-dark .mc-mermaid-content{background:#2b2b2b!important}@keyframes collapse-expand{0%{opacity:0;max-height:0}to{opacity:1;max-height:1000px}}@keyframes collapse-collapse{0%{opacity:1;max-height:1000px}to{opacity:0;max-height:0}}.mc-block-hidden{display:none}.collapse-expanded{animation:collapse-expand .5s ease-out}.collapse-collapsed{animation:collapse-collapse .5s ease-in}.mc-code-block{margin:1rem 0;overflow:hidden;border-radius:14px}.mc-code-block pre{margin:0}.mc-code-block .mc-action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box}.mc-code-block .mc-code-block-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}.mc-code-block .mc-code-block-header .mc-code-lang{font-size:14px}.mc-code-block .mc-mermaid-content{position:relative;width:100%;height:400px;overflow:hidden;background:inherit}.mc-code-block .mc-code-block-actions{display:flex;align-items:center}.mc-code-block .mc-code-block-actions .mc-copy-btn,.mc-code-block .mc-code-block-actions .mc-toggle-btn{cursor:pointer;border-radius:4px;font-size:18px;padding:4px}.mc-code-block .mc-diagram-switch{display:flex;align-items:center;list-style:none;margin:0;padding:2px;border-radius:4px;background-color:var(--devui-icon-hover-bg);position:relative;transition:all .3s ease;overflow:hidden;height:24px}.mc-code-block .mc-diagram-switch:before{content:\"\";position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);background-color:var(--devui-base-bg);border-radius:4px;transition:transform .3s ease;box-shadow:0 1px 2px #0000001a;z-index:1}.mc-code-block .mc-diagram-switch.mc-show-code:before{transform:translate(100%)}.mc-code-block .mc-diagram-switch .mc-diagram-switch-active{text-shadow:0 0 .4px #252b3a}.mc-code-block .mc-diagram-switch li{position:relative;padding:0 8px;margin:0;font-size:12px;cursor:pointer;transition:color .3s ease;z-index:2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
1734
|
+
}
|
|
1735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: CodeBlockComponent, decorators: [{
|
|
1736
|
+
type: Component,
|
|
1737
|
+
args: [{ selector: 'mc-code-block', standalone: false, template: "<div\n class=\"mc-code-block\"\n [ngClass]=\"theme === 'dark' ? 'mc-code-block-dark' : 'mc-code-block-light'\"\n #rootRef\n>\n <div class=\"mc-code-block-header\" *ngIf=\"!headerTemplate\">\n <span class=\"mc-code-lang\">{{ language }}</span>\n <ng-container *ngIf=\"!actionsTemplate\">\n <div class=\"mc-code-block-actions\">\n <div *ngIf=\"isMermaid\" style=\"margin-right: 8px\">\n <ul\n class=\"mc-diagram-switch\"\n [ngClass]=\"{ 'mc-show-code': !showMermaidDiagram }\"\n >\n <li\n (click)=\"switchShowMermaid(true)\"\n [ngClass]=\"{ 'mc-diagram-switch-active': showMermaidDiagram }\"\n >\n \u56FE\u8868\n </li>\n <li\n (click)=\"switchShowMermaid(false)\"\n [ngClass]=\"{ 'mc-diagram-switch-active': !showMermaidDiagram }\"\n >\n \u4EE3\u7801\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"isMermaid && showMermaidDiagram\"\n class=\"mc-action-btn mc-toggle-btn\"\n [title]=\"'Md.zoomIn' | translate\"\n (click)=\"zoomIn()\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g\n id=\"enlarge\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <path\n d=\"M7.16666667,1 C10.572409,1 13.3333333,3.76092429 13.3333333,7.16666667 C13.3333333,8.68984984 12.781084,10.0840543 11.8658888,11.1599767 L14.4225201,13.7154466 C14.6177822,13.9107088 14.6177822,14.2272912 14.4225201,14.4225534 C14.2489537,14.5961197 13.9795293,14.6154049 13.7846612,14.4804088 L13.7154133,14.4225534 L11.158968,11.8667467 C10.083183,12.7814291 8.68937384,13.3333333 7.16666667,13.3333333 C3.76092429,13.3333333 1,10.572409 1,7.16666667 C1,3.76092429 3.76092429,1 7.16666667,1 Z M7.16666667,2 C4.31320904,2 2,4.31320904 2,7.16666667 C2,10.0201243 4.31320904,12.3333333 7.16666667,12.3333333 C10.0201243,12.3333333 12.3333333,10.0201243 12.3333333,7.16666667 C12.3333333,4.31320904 10.0201243,2 7.16666667,2 Z M7.16666667,4.66666667 C7.41212656,4.66666667 7.61627504,4.84354183 7.658611,5.07679103 L7.66666667,5.16666667 L7.666,6.668 L9.16601582,6.66666666 C9.44215796,6.66630764 9.66630679,6.88987368 9.66666668,7.16601582 C9.66698576,7.4114755 9.49037648,7.61585405 9.25718258,7.65849359 L9.16731751,7.66666666 L7.666,7.668 L7.66666667,9.16666667 C7.66666667,9.44280904 7.44280904,9.66666667 7.16666667,9.66666667 C6.92120678,9.66666667 6.7170583,9.48979151 6.67472234,9.2565423 L6.66666667,9.16666667 L6.666,7.669 L5.17251751,7.67186668 C4.89637537,7.6722257 4.67222654,7.44865965 4.67186666,7.17251751 C4.67154758,6.92705783 4.84815685,6.72267929 5.08135075,6.68003974 L5.17121582,6.67186709 L6.666,6.669 L6.66666667,5.16666667 C6.66666667,4.89052429 6.89052429,4.66666667 7.16666667,4.66666667 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#71757F\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </div>\n <div\n *ngIf=\"isMermaid && showMermaidDiagram\"\n class=\"mc-action-btn mc-toggle-btn\"\n title=\"\u7F29\u5C0F\"\n (click)=\"zoomOut()\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g\n id=\"zoom-out\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <path\n d=\"M7.16666667,1 C10.572409,1 13.3333333,3.76092429 13.3333333,7.16666667 C13.3333333,8.68984984 12.781084,10.0840543 11.8658888,11.1599767 L14.4225201,13.7154466 C14.6177822,13.9107088 14.6177822,14.2272912 14.4225201,14.4225534 C14.2489537,14.5961197 13.9795293,14.6154049 13.7846612,14.4804088 L13.7154133,14.4225534 L11.158968,11.8667467 C10.083183,12.7814291 8.68937384,13.3333333 7.16666667,13.3333333 C3.76092429,13.3333333 1,10.572409 1,7.16666667 C1,3.76092429 3.76092429,1 7.16666667,1 Z M7.16666667,2 C4.31320904,2 2,4.31320904 2,7.16666667 C2,10.0201243 4.31320904,12.3333333 7.16666667,12.3333333 C10.0201243,12.3333333 12.3333333,10.0201243 12.3333333,7.16666667 C12.3333333,4.31320904 10.0201243,2 7.16666667,2 Z M9.16601582,6.66666666 C9.44215796,6.66630764 9.66630679,6.88987368 9.66666668,7.16601582 C9.66698576,7.4114755 9.49037648,7.61585405 9.25718258,7.65849359 L9.16731751,7.66666666 L5.17251751,7.67186668 C4.89637537,7.6722257 4.67222654,7.44865965 4.67186666,7.17251751 C4.67154758,6.92705783 4.84815685,6.72267929 5.08135075,6.68003974 L5.17121582,6.67186709 L9.16601582,6.66666666 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#71757F\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </div>\n <div\n *ngIf=\"isMermaid && showMermaidDiagram\"\n class=\"mc-action-btn mc-toggle-btn\"\n title=\"\u4E0B\u8F7D\"\n (click)=\"download()\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g\n id=\"\u9875\u9762-1\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g id=\"i\u4E0B\u8F7D\">\n <path\n d=\"M14.5,14 C14.7761424,14 15,14.2238576 15,14.5 C15,14.7761424 14.7761424,15 14.5,15 L1.5,15 C1.22385763,15 1,14.7761424 1,14.5 C1,14.2238576 1.22385763,14 1.5,14 L14.5,14 Z M8,1 C8.24545989,1 8.44960837,1.17687516 8.49194433,1.41012437 L8.5,1.5 L8.5,10.793 L11.6464466,7.64644661 C11.820013,7.47288026 12.0894374,7.45359511 12.2843055,7.58859116 L12.3535534,7.64644661 C12.5271197,7.82001296 12.5464049,8.08943736 12.4114088,8.2843055 L12.3535534,8.35355339 L8.35355339,12.3535534 L8.34128643,12.3654113 C8.32881868,12.3770608 8.31575424,12.3880797 8.30214392,12.3984173 L8.35355339,12.3535534 C8.32671912,12.3803877 8.29759357,12.4035342 8.26680652,12.422993 C8.25568247,12.4299807 8.24404667,12.4367067 8.23212724,12.4429657 C8.21827569,12.4502504 8.20453886,12.4566485 8.1905951,12.4623894 C8.17802507,12.4675915 8.16473685,12.4724419 8.15119917,12.4767316 C8.13583471,12.481552 8.12047425,12.4856039 8.10498705,12.4889143 C8.09430622,12.4912471 8.08325248,12.4932298 8.07207924,12.494843 C8.05487076,12.4972949 8.03773477,12.498877 8.02056948,12.4995793 C8.01375728,12.4998604 8.00689494,12.5 8,12.5 L7.98043349,12.4996194 C7.96293275,12.4989382 7.94546098,12.4973429 7.92809589,12.4948333 L8,12.5 C7.96390296,12.5 7.92869933,12.4961748 7.89477235,12.4889078 C7.87952575,12.4856039 7.86416529,12.481552 7.84898836,12.4767587 C7.83526315,12.4724419 7.82197493,12.4675915 7.80896344,12.4622078 C7.79546114,12.4566485 7.78172431,12.4502504 7.76824181,12.443195 C7.75595333,12.4367067 7.74431753,12.4299807 7.73298968,12.422812 C7.72729809,12.4192668 7.72146362,12.4154054 7.7156945,12.4114088 L7.69785608,12.3984173 C7.68424576,12.3880797 7.67118132,12.3770608 7.65871357,12.3654113 L7.64644661,12.3535534 L3.64644661,8.35355339 C3.45118446,8.15829124 3.45118446,7.84170876 3.64644661,7.64644661 C3.82001296,7.47288026 4.08943736,7.45359511 4.2843055,7.58859116 L4.35355339,7.64644661 L7.5,10.793 L7.5,1.5 C7.5,1.22385763 7.72385763,1 8,1 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#71757F\"\n ></path>\n </g>\n </g>\n </svg>\n </div>\n <div\n class=\"mc-action-btn mc-toggle-btn\"\n title=\"\u5C55\u5F00/\u6298\u53E0\"\n (click)=\"toggleExpand()\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g\n id=\"\u5168\u90E8\u6536\u8D77\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <path\n d=\"M4.715694,14.4114091 C4.910563,14.5464051 5.179987,14.5271201 5.353553,14.3535531 L5.353553,14.3535531 L7.99999988,11.7070001 L10.646447,14.3535531 L10.715694,14.4114091 C10.910563,14.5464051 11.179987,14.5271201 11.353553,14.3535531 C11.548816,14.1582911 11.548816,13.8417091 11.353553,13.6464471 L11.353553,13.6464471 L8.353553,10.6464471 L8.284306,10.5885911 C8.089437,10.4535951 7.820013,10.4728801 7.646447,10.6464471 L7.646447,10.6464471 L4.646447,13.6464471 L4.588591,13.7156941 C4.453595,13.9105631 4.47288,14.1799871 4.646447,14.3535531 L4.646447,14.3535531 L4.715694,14.4114091 Z M14.5,7.50000012 C14.776142,7.50000012 15,7.72385812 15,8.00000012 C15,8.27614212 14.776142,8.50000012 14.5,8.50000012 L1.5,8.50000012 C1.223858,8.50000012 1,8.27614212 1,8.00000012 C1,7.72385812 1.223858,7.50000012 1.5,7.50000012 L14.5,7.50000012 Z M8.284306,5.41140912 L8.353553,5.35355312 L11.353553,2.35355312 C11.548816,2.15829112 11.548816,1.84170912 11.353553,1.64644712 C11.179987,1.47288012 10.910563,1.45359512 10.715694,1.58859112 L10.646447,1.64644712 L7.99999988,4.29300012 L5.353553,1.64644712 C5.179987,1.47288012 4.910563,1.45359512 4.715694,1.58859112 L4.646447,1.64644712 C4.47288,1.82001312 4.453595,2.08943712 4.588591,2.28430612 L4.646447,2.35355312 L7.646447,5.35355312 C7.820013,5.52712012 8.089437,5.54640512 8.284306,5.41140912 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#71757F\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </div>\n <div\n class=\"mc-action-btn mc-copy-btn\"\n title=\"\u590D\u5236\"\n (click)=\"copyCode()\"\n >\n @if(copied) {\n <span>\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <defs>\n <polygon\n id=\"path-1\"\n points=\"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459\"\n ></polygon>\n </defs>\n <g\n id=\"status/whiteBG/correct\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <mask id=\"mask-2\" fill=\"white\">\n <use xlink:href=\"#path-1\"></use>\n </mask>\n <use id=\"Mask\" fill=\"#3DCCA6\" xlink:href=\"#path-1\"></use>\n </g>\n </svg>\n </span>\n } @else {\n <span>\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g\n id=\"\u9875\u9762-1\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g\n id=\"API-starter-\u56FE\u6807\u5165\u5E93\"\n transform=\"translate(-592.000000, -204.000000)\"\n >\n <g\n id=\"\u65B9\u683C\u5907\u4EFD-16\"\n transform=\"translate(560.000000, 180.000000)\"\n >\n <text\n id=\"\u56FE\u6807\"\n font-family=\"PingFangSC-Regular, PingFang SC\"\n font-size=\"12\"\n font-weight=\"normal\"\n line-spacing=\"16\"\n fill=\"#71757F\"\n >\n <tspan x=\"27.136\" y=\"61\">\u590D\u5236</tspan>\n </text>\n </g>\n <path\n d=\"M604.5,206 C605.279696,206 605.920449,206.594888 605.993133,207.35554 L606,207.5 L606,214.5 C606,215.279696 605.405112,215.920449 604.64446,215.993133 L604.5,216 L604,216 L604,216.5 C604,217.279696 603.405112,217.920449 602.64446,217.993133 L602.5,218 L595.5,218 C594.671573,218 594,217.328427 594,216.5 L594,216.5 L594,209.5 C594,208.671573 594.671573,208 595.5,208 L595.5,208 L596,208 L596,207.5 C596,206.720304 596.594888,206.079551 597.35554,206.006867 L597.5,206 L604.5,206 Z M602.5,209 L595.5,209 C595.223858,209 595,209.223858 595,209.5 L595,209.5 L595,216.5 C595,216.776142 595.223858,217 595.5,217 L595.5,217 L602.5,217 C602.776142,217 603,216.776142 603,216.5 L603,216.5 L603,209.5 C603,209.223858 602.776142,209 602.5,209 L602.5,209 Z M604.5,207 L597.5,207 C597.25454,207 597.050392,207.176875 597.008056,207.410124 L597,207.5 L597,208 L602.5,208 C603.279696,208 603.920449,208.594888 603.993133,209.35554 L604,209.5 L604,215 L604.5,215 C604.74546,215 604.949608,214.823125 604.991944,214.589876 L605,214.5 L605,207.5 C605,207.25454 604.823125,207.050392 604.589876,207.008056 L604.5,207 Z\"\n id=\"\u5F62\u72B6\u7ED3\u5408\"\n fill=\"#71757F\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </g>\n </svg>\n </span>\n }\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"actionsTemplate\">\n <ng-template [ngTemplateOutlet]=\"actionsTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n </ng-container>\n </div>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-template [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n </ng-container>\n\n <div [ngClass]=\"{ 'mc-block-hidden': !expanded }\" >\n @if (showMermaidDiagram && isMermaid && !contentTemplate) {\n <div class=\"mc-mermaid-content\" #mermaidContent></div>\n } @else if(!contentTemplate) {\n <pre #codeElementTemplate><code #codeElement [ngClass]=\"'hljs language-' + language\" ></code></pre>\n } @else {\n <ng-container *ngIf=\"contentTemplate\">\n <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ $implicit: {code, language}, codeBlockData: {code, language} }\"></ng-template>\n </ng-container>\n }\n </div>\n</div>\n", styles: [".mc-markdown-render ::ng-deep .h1,.mc-markdown-render ::ng-deep .h2,.mc-markdown-render ::ng-deep .h3,.mc-markdown-render ::ng-deep .h4,.mc-markdown-render ::ng-deep .h5,.mc-markdown-render ::ng-deep .h6,.mc-markdown-render ::ng-deep h1,.mc-markdown-render ::ng-deep h2,.mc-markdown-render ::ng-deep h3,.mc-markdown-render ::ng-deep h4,.mc-markdown-render ::ng-deep h5,.mc-markdown-render ::ng-deep h6{line-height:1.1;margin:16px 0 12px}.mc-markdown-render ::ng-deep .h1:first-child,.mc-markdown-render ::ng-deep .h2:first-child,.mc-markdown-render ::ng-deep .h3:first-child,.mc-markdown-render ::ng-deep .h4:first-child,.mc-markdown-render ::ng-deep .h5:first-child,.mc-markdown-render ::ng-deep .h6:first-child,.mc-markdown-render ::ng-deep h1:first-child,.mc-markdown-render ::ng-deep h2:first-child,.mc-markdown-render ::ng-deep h3:first-child,.mc-markdown-render ::ng-deep h4:first-child,.mc-markdown-render ::ng-deep h5:first-child,.mc-markdown-render ::ng-deep h6:first-child{margin-top:0}.mc-markdown-render ::ng-deep h1{font-size:32px;line-height:40px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep h3{line-height:28px;font-size:20px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep caption{border:1px dashed var(--devui-line, #d7d8da);border-bottom:0;padding:3px;text-align:center}.mc-markdown-render ::ng-deep p{overflow-wrap:break-word;margin:0;padding:0;line-height:24px}.mc-markdown-render ::ng-deep p:last-child{margin:0}.mc-markdown-render ::ng-deep ul,.mc-markdown-render ::ng-deep ol{margin:0;padding:0;padding-inline-start:1.75em}.mc-markdown-render ::ng-deep ul>li,.mc-markdown-render ::ng-deep ol>li{line-height:21px}.mc-markdown-render ::ng-deep ul{list-style-type:disc}.mc-markdown-render ::ng-deep ul li::marker{font-size:20px}.mc-markdown-render ::ng-deep ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin-bottom:10px;border-collapse:collapse;display:table}.mc-markdown-render ::ng-deep td,.mc-markdown-render ::ng-deep th{padding:5px 10px;border:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-base-bg, #ffffff)}.mc-markdown-render ::ng-deep th{border-top:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-global-bg, #f6f6f8)}.mc-markdown-render ::ng-deep td p{margin:0;padding:0}.mc-markdown-render ::ng-deep blockquote{padding:0 8px;margin:0;color:var(--devui-text-weak, #575d6c);border-left:5px solid var(--devui-dividing-line, #f2f2f3)}.mc-markdown-render ::ng-deep a{color:var(--devui-link, #526ecc);text-decoration:none;cursor:pointer}.mc-markdown-render ::ng-deep a:hover{color:var(--devui-link-active, #526ecc)}.mc-markdown-render ::ng-deep img{max-width:100%}.mc-markdown-render{font-size:var(--devui-font-size, 14px);overflow-x:auto}.mc-markdown-render.mc-markdown-render-dark{color:#ced1db}.mc-markdown-render.mc-markdown-render-light{color:#252b3a}::ng-deep .mc-think-block{color:var(--devui-aide-text, #71757f);border-left:1px solid var(--devui-line, #d7d8da);padding-left:8px;margin-bottom:1rem}::ng-deep .mc-typewriter-color{background-image:-webkit-linear-gradient(left,#191919,#5588f0,#e171ee,#f2c55c);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-gradient{background:linear-gradient(to right,var(--devui-text, #252b3a),var(--devui-base-bg, #ffffff));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-cursor{font-weight:900;animation:typewriter .8s linear 0s infinite}@keyframes typewriter{0%{opacity:1}50%{opacity:0}to{opacity:1}}.mc-code-block-light ::ng-deep pre code.hljs{display:block;overflow-x:auto;padding:1em}.mc-code-block-light ::ng-deep code.hljs{padding:3px 5px}.mc-code-block-light ::ng-deep .hljs{background:#fefefe;color:#545454}.mc-code-block-light ::ng-deep .hljs-comment,.mc-code-block-light ::ng-deep .hljs-quote{color:#696969}.mc-code-block-light ::ng-deep .hljs-variable,.mc-code-block-light ::ng-deep .hljs-template-variable,.mc-code-block-light ::ng-deep .hljs-tag,.mc-code-block-light ::ng-deep .hljs-name,.mc-code-block-light ::ng-deep .hljs-selector-id,.mc-code-block-light ::ng-deep .hljs-selector-class,.mc-code-block-light ::ng-deep .hljs-regexp,.mc-code-block-light ::ng-deep .hljs-deletion{color:#d91e18}.mc-code-block-light ::ng-deep .hljs-number,.mc-code-block-light ::ng-deep .hljs-built_in,.mc-code-block-light ::ng-deep .hljs-literal,.mc-code-block-light ::ng-deep .hljs-type,.mc-code-block-light ::ng-deep .hljs-params,.mc-code-block-light ::ng-deep .hljs-meta,.mc-code-block-light ::ng-deep .hljs-link{color:#aa5d00}.mc-code-block-light ::ng-deep .hljs-attribute{color:#aa5d00}.mc-code-block-light ::ng-deep .hljs-string,.mc-code-block-light ::ng-deep .hljs-symbol,.mc-code-block-light ::ng-deep .hljs-bullet,.mc-code-block-light ::ng-deep .hljs-addition{color:green}.mc-code-block-light ::ng-deep .hljs-title,.mc-code-block-light ::ng-deep .hljs-section{color:#007faa}.mc-code-block-light ::ng-deep .hljs-keyword,.mc-code-block-light ::ng-deep .hljs-selector-tag{color:#7928a1}.mc-code-block-light ::ng-deep .hljs-emphasis{font-style:italic}.mc-code-block-light ::ng-deep .hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.mc-code-block-light ::ng-deep .hljs-addition,.mc-code-block-light ::ng-deep .hljs-attribute,.mc-code-block-light ::ng-deep .hljs-built_in,.mc-code-block-light ::ng-deep .hljs-bullet,.mc-code-block-light ::ng-deep .hljs-comment,.mc-code-block-light ::ng-deep .hljs-link,.mc-code-block-light ::ng-deep .hljs-literal,.mc-code-block-light ::ng-deep .hljs-meta,.mc-code-block-light ::ng-deep .hljs-number,.mc-code-block-light ::ng-deep .hljs-params,.mc-code-block-light ::ng-deep .hljs-string,.mc-code-block-light ::ng-deep .hljs-symbol,.mc-code-block-light ::ng-deep .hljs-type,.mc-code-block-light ::ng-deep .hljs-quote{color:highlight}.mc-code-block-light ::ng-deep .hljs-keyword,.mc-code-block-light ::ng-deep .hljs-selector-tag{font-weight:700}}.mc-code-block-light{border:1px solid #d7d8da}.mc-code-block-light code.hljs{padding:1em}.mc-code-block-light{background-color:#f5f5f5}.mc-code-block-light .mc-code-lang,.mc-code-block-light .mc-code-block-actions .mc-copy-btn,.mc-code-block-light .mc-code-block-actions .mc-toggle-btn{color:#252b3a}.mc-code-block-light .mc-code-block-actions .mc-copy-btn:hover,.mc-code-block-light .mc-code-block-actions .mc-toggle-btn:hover{background-color:#ebebeb}.mc-code-block-light .mc-mermaid-content{background:#fefefe}.mc-code-block-dark ::ng-deep pre code.hljs{display:block;overflow-x:auto;padding:1em}.mc-code-block-dark ::ng-deep code.hljs{padding:3px 5px}.mc-code-block-dark ::ng-deep .hljs{background:#2b2b2b;color:#f8f8f2}.mc-code-block-dark ::ng-deep .hljs-comment,.mc-code-block-dark ::ng-deep .hljs-quote{color:#d4d0ab}.mc-code-block-dark ::ng-deep .hljs-variable,.mc-code-block-dark ::ng-deep .hljs-template-variable,.mc-code-block-dark ::ng-deep .hljs-tag,.mc-code-block-dark ::ng-deep .hljs-name,.mc-code-block-dark ::ng-deep .hljs-selector-id,.mc-code-block-dark ::ng-deep .hljs-selector-class,.mc-code-block-dark ::ng-deep .hljs-regexp,.mc-code-block-dark ::ng-deep .hljs-deletion{color:#ffa07a}.mc-code-block-dark ::ng-deep .hljs-number,.mc-code-block-dark ::ng-deep .hljs-built_in,.mc-code-block-dark ::ng-deep .hljs-literal,.mc-code-block-dark ::ng-deep .hljs-type,.mc-code-block-dark ::ng-deep .hljs-params,.mc-code-block-dark ::ng-deep .hljs-meta,.mc-code-block-dark ::ng-deep .hljs-link{color:#f5ab35}.mc-code-block-dark ::ng-deep .hljs-attribute{color:gold}.mc-code-block-dark ::ng-deep .hljs-string,.mc-code-block-dark ::ng-deep .hljs-symbol,.mc-code-block-dark ::ng-deep .hljs-bullet,.mc-code-block-dark ::ng-deep .hljs-addition{color:#abe338}.mc-code-block-dark ::ng-deep .hljs-title,.mc-code-block-dark ::ng-deep .hljs-section{color:#00e0e0}.mc-code-block-dark ::ng-deep .hljs-keyword,.mc-code-block-dark ::ng-deep .hljs-selector-tag{color:#dcc6e0}.mc-code-block-dark ::ng-deep .hljs-emphasis{font-style:italic}.mc-code-block-dark ::ng-deep .hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.mc-code-block-dark ::ng-deep .hljs-addition,.mc-code-block-dark ::ng-deep .hljs-attribute,.mc-code-block-dark ::ng-deep .hljs-built_in,.mc-code-block-dark ::ng-deep .hljs-bullet,.mc-code-block-dark ::ng-deep .hljs-comment,.mc-code-block-dark ::ng-deep .hljs-link,.mc-code-block-dark ::ng-deep .hljs-literal,.mc-code-block-dark ::ng-deep .hljs-meta,.mc-code-block-dark ::ng-deep .hljs-number,.mc-code-block-dark ::ng-deep .hljs-params,.mc-code-block-dark ::ng-deep .hljs-string,.mc-code-block-dark ::ng-deep .hljs-symbol,.mc-code-block-dark ::ng-deep .hljs-type,.mc-code-block-dark ::ng-deep .hljs-quote{color:highlight}.mc-code-block-dark ::ng-deep .hljs-keyword,.mc-code-block-dark ::ng-deep .hljs-selector-tag{font-weight:700}}.mc-code-block-dark{border:1px solid #4e5057}.mc-code-block-dark code.hljs{padding:1em}.mc-code-block-dark{background-color:#34363a}.mc-code-block-dark .mc-code-lang,.mc-code-block-dark .mc-code-block-actions .mc-copy-btn,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn{color:#ced1db}.mc-code-block-dark .mc-code-block-actions .mc-copy-btn:hover,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn:hover{background-color:#393a3e}.mc-code-block-dark .mc-code-block-actions .mc-copy-btn img,.mc-code-block-dark .mc-code-block-actions .mc-toggle-btn img{filter:brightness(1.5)}.mc-code-block-dark .mc-mermaid-content{background:#2b2b2b!important}@keyframes collapse-expand{0%{opacity:0;max-height:0}to{opacity:1;max-height:1000px}}@keyframes collapse-collapse{0%{opacity:1;max-height:1000px}to{opacity:0;max-height:0}}.mc-block-hidden{display:none}.collapse-expanded{animation:collapse-expand .5s ease-out}.collapse-collapsed{animation:collapse-collapse .5s ease-in}.mc-code-block{margin:1rem 0;overflow:hidden;border-radius:14px}.mc-code-block pre{margin:0}.mc-code-block .mc-action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box}.mc-code-block .mc-code-block-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}.mc-code-block .mc-code-block-header .mc-code-lang{font-size:14px}.mc-code-block .mc-mermaid-content{position:relative;width:100%;height:400px;overflow:hidden;background:inherit}.mc-code-block .mc-code-block-actions{display:flex;align-items:center}.mc-code-block .mc-code-block-actions .mc-copy-btn,.mc-code-block .mc-code-block-actions .mc-toggle-btn{cursor:pointer;border-radius:4px;font-size:18px;padding:4px}.mc-code-block .mc-diagram-switch{display:flex;align-items:center;list-style:none;margin:0;padding:2px;border-radius:4px;background-color:var(--devui-icon-hover-bg);position:relative;transition:all .3s ease;overflow:hidden;height:24px}.mc-code-block .mc-diagram-switch:before{content:\"\";position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);background-color:var(--devui-base-bg);border-radius:4px;transition:transform .3s ease;box-shadow:0 1px 2px #0000001a;z-index:1}.mc-code-block .mc-diagram-switch.mc-show-code:before{transform:translate(100%)}.mc-code-block .mc-diagram-switch .mc-diagram-switch-active{text-shadow:0 0 .4px #252b3a}.mc-code-block .mc-diagram-switch li{position:relative;padding:0 8px;margin:0;font-size:12px;cursor:pointer;transition:color .3s ease;z-index:2}\n"] }]
|
|
1738
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { code: [{
|
|
1739
|
+
type: Input
|
|
1740
|
+
}], language: [{
|
|
1741
|
+
type: Input
|
|
1742
|
+
}], blockIndex: [{
|
|
1743
|
+
type: Input
|
|
1744
|
+
}], theme: [{
|
|
1745
|
+
type: Input
|
|
1746
|
+
}], enableMermaid: [{
|
|
1747
|
+
type: Input
|
|
1748
|
+
}], mermaidConfig: [{
|
|
1749
|
+
type: Input
|
|
1750
|
+
}], contentTemplate: [{
|
|
1751
|
+
type: Input
|
|
1752
|
+
}], headerTemplate: [{
|
|
1753
|
+
type: Input
|
|
1754
|
+
}], actionsTemplate: [{
|
|
1755
|
+
type: Input
|
|
1756
|
+
}], rootRef: [{
|
|
1757
|
+
type: ViewChild,
|
|
1758
|
+
args: ['rootRef']
|
|
1759
|
+
}], mermaidContentRef: [{
|
|
1760
|
+
type: ViewChild,
|
|
1761
|
+
args: ['mermaidContent']
|
|
1762
|
+
}], codeElementRef: [{
|
|
1763
|
+
type: ViewChild,
|
|
1764
|
+
args: ['codeElement', { static: false }]
|
|
1765
|
+
}], codeElementTemplates: [{
|
|
1766
|
+
type: ViewChildren,
|
|
1767
|
+
args: ['codeElementTemplate']
|
|
1768
|
+
}] } });
|
|
1769
|
+
|
|
1770
|
+
const defaultTypingConfig = {
|
|
1771
|
+
step: 2,
|
|
1772
|
+
interval: 50,
|
|
1773
|
+
style: 'normal',
|
|
1774
|
+
};
|
|
1775
|
+
|
|
1776
|
+
class MarkdownCardFoundation extends BaseFoundation {
|
|
1777
|
+
constructor(adapter) {
|
|
1778
|
+
super({ ...adapter });
|
|
1779
|
+
this.isToken = (node) => {
|
|
1780
|
+
return 'type' in node && 'content' in node;
|
|
1781
|
+
};
|
|
1782
|
+
this.typewriterEnd = () => {
|
|
1783
|
+
this.setState({ isTyping: false });
|
|
1784
|
+
this._adapter.typingEnd?.();
|
|
1785
|
+
};
|
|
1786
|
+
this.getThinkContent = (content, thinkOptions) => {
|
|
1787
|
+
const thinkClass = thinkOptions?.customClass || 'mc-think-block';
|
|
1788
|
+
return (content
|
|
1789
|
+
?.replace('<think>', `<div class="${thinkClass}">`)
|
|
1790
|
+
?.replace('</think>', '</div>') || '');
|
|
1791
|
+
};
|
|
1792
|
+
this.parseTypingContent = (content) => {
|
|
1793
|
+
const { typingOptions } = this.getProps();
|
|
1794
|
+
const { typingIndex } = this.getStates();
|
|
1795
|
+
content = content.slice(0, typingIndex) || '';
|
|
1796
|
+
const options = { ...defaultTypingConfig, ...typingOptions };
|
|
1797
|
+
if (options.style === 'cursor') {
|
|
1798
|
+
content += `<span class="mc-typewriter mc-typewriter-cursor">|</span>`;
|
|
1799
|
+
}
|
|
1800
|
+
else if (options.style === 'color' || options.style === 'gradient') {
|
|
1801
|
+
content =
|
|
1802
|
+
content.slice(0, -5) +
|
|
1803
|
+
`<span class="mc-typewriter mc-typewriter-${options.style}">${content.slice(-5)}</span>`;
|
|
1804
|
+
}
|
|
1805
|
+
return content || '';
|
|
1806
|
+
};
|
|
1807
|
+
this.parseContent = () => {
|
|
1808
|
+
const { content, thinkOptions, enableThink } = this.getProps();
|
|
1809
|
+
const { typing, isTyping } = this.getStates();
|
|
1810
|
+
let parseContent = content || '';
|
|
1811
|
+
if (typing && isTyping) {
|
|
1812
|
+
parseContent = this.parseTypingContent(content);
|
|
1813
|
+
}
|
|
1814
|
+
if (enableThink) {
|
|
1815
|
+
parseContent = this.getThinkContent(content, thinkOptions);
|
|
1816
|
+
}
|
|
1817
|
+
parseContent = this._adapter.parseContent(parseContent);
|
|
1818
|
+
};
|
|
1819
|
+
this.typewriterStart = () => {
|
|
1820
|
+
const { typingOptions } = this.getProps();
|
|
1821
|
+
const { timer } = this.getStates();
|
|
1822
|
+
if (timer) {
|
|
1823
|
+
clearTimeout(timer);
|
|
1824
|
+
}
|
|
1825
|
+
this.setState({ isTyping: true });
|
|
1826
|
+
this._adapter.typingStart?.();
|
|
1827
|
+
const options = { ...defaultTypingConfig, ...typingOptions };
|
|
1828
|
+
const typingStep = () => {
|
|
1829
|
+
const { typingIndex, content } = this.getStates();
|
|
1830
|
+
let step = options.step || 2;
|
|
1831
|
+
if (Array.isArray(options.step)) {
|
|
1832
|
+
step =
|
|
1833
|
+
options.step[0] +
|
|
1834
|
+
Math.floor(Math.random() * (options.step[1] - options.step[0]));
|
|
1835
|
+
}
|
|
1836
|
+
let index = typingIndex + step;
|
|
1837
|
+
this.setState({ typingIndex: index });
|
|
1838
|
+
this.parseContent();
|
|
1839
|
+
this._adapter.typingEvent();
|
|
1840
|
+
if (index >= content.length) {
|
|
1841
|
+
this.typewriterEnd();
|
|
1842
|
+
this.parseContent();
|
|
1843
|
+
return;
|
|
1844
|
+
}
|
|
1845
|
+
let typingTimeout = setTimeout(typingStep, typeof options.interval === 'number' ? options.interval : 50);
|
|
1846
|
+
this.setState({
|
|
1847
|
+
timer: typingTimeout,
|
|
1848
|
+
});
|
|
1849
|
+
};
|
|
1850
|
+
let typingStepTimeout = setTimeout(typingStep);
|
|
1851
|
+
this.setState({
|
|
1852
|
+
timer: typingStepTimeout,
|
|
1853
|
+
});
|
|
1854
|
+
};
|
|
1855
|
+
}
|
|
1856
|
+
}
|
|
1857
|
+
|
|
1858
|
+
// 判断是否自闭合标签
|
|
1859
|
+
const isSelfClosingTag = (token) => {
|
|
1860
|
+
// 判断token.content里面是否包含完整的HTML结构（所有开始标签都有对应的结束标签）
|
|
1861
|
+
const content = token.content || '';
|
|
1862
|
+
// 检查是否是自闭合标签（如 <img />, <br /> 等）
|
|
1863
|
+
if (content.match(/<(\w+)[^>]*\/>/)) {
|
|
1864
|
+
return true;
|
|
1865
|
+
}
|
|
1866
|
+
// 检查是否包含完整的HTML结构
|
|
1867
|
+
const tagStack = [];
|
|
1868
|
+
const openTagRegex = /<(\w+)[^>]*>/g;
|
|
1869
|
+
const closeTagRegex = /<\/(\w+)>/g;
|
|
1870
|
+
let openMatch;
|
|
1871
|
+
let closeMatch;
|
|
1872
|
+
// 重置正则表达式的lastIndex
|
|
1873
|
+
openTagRegex.lastIndex = 0;
|
|
1874
|
+
closeTagRegex.lastIndex = 0;
|
|
1875
|
+
// 按顺序处理所有标签
|
|
1876
|
+
const allMatches = [];
|
|
1877
|
+
// 收集所有开始标签
|
|
1878
|
+
while ((openMatch = openTagRegex.exec(content)) !== null) {
|
|
1879
|
+
allMatches.push({
|
|
1880
|
+
type: 'open',
|
|
1881
|
+
tagName: openMatch[1],
|
|
1882
|
+
index: openMatch.index
|
|
1883
|
+
});
|
|
1884
|
+
}
|
|
1885
|
+
// 收集所有结束标签
|
|
1886
|
+
while ((closeMatch = closeTagRegex.exec(content)) !== null) {
|
|
1887
|
+
allMatches.push({
|
|
1888
|
+
type: 'close',
|
|
1889
|
+
tagName: closeMatch[1],
|
|
1890
|
+
index: closeMatch.index
|
|
1891
|
+
});
|
|
1892
|
+
}
|
|
1893
|
+
// 按位置排序
|
|
1894
|
+
allMatches.sort((a, b) => a.index - b.index);
|
|
1895
|
+
// 检查标签是否完全匹配
|
|
1896
|
+
for (const match of allMatches) {
|
|
1897
|
+
if (match.type === 'open') {
|
|
1898
|
+
tagStack.push(match.tagName);
|
|
1899
|
+
}
|
|
1900
|
+
else {
|
|
1901
|
+
if (tagStack.length === 0) {
|
|
1902
|
+
return false; // 没有对应的开始标签
|
|
1903
|
+
}
|
|
1904
|
+
const lastOpenTag = tagStack[tagStack.length - 1];
|
|
1905
|
+
if (lastOpenTag !== match.tagName) {
|
|
1906
|
+
return false; // 标签不匹配
|
|
1907
|
+
}
|
|
1908
|
+
tagStack.pop();
|
|
1909
|
+
}
|
|
1910
|
+
}
|
|
1911
|
+
// 只有当所有标签都正确匹配时，才认为是自闭合的
|
|
1912
|
+
return tagStack.length === 0;
|
|
1913
|
+
};
|
|
1914
|
+
// 判断是否是结束标签
|
|
1915
|
+
const isClosingTag = (openToken, closeToken) => {
|
|
1916
|
+
const openContent = openToken?.content || '';
|
|
1917
|
+
const closeContent = closeToken?.content || '';
|
|
1918
|
+
const openTagMatch = openContent.match(/<(\w+)/);
|
|
1919
|
+
const closeTagMatch = closeContent.match(/<\/(\w+)/);
|
|
1920
|
+
if (openTagMatch && closeTagMatch) {
|
|
1921
|
+
return openTagMatch[1] === closeTagMatch[1];
|
|
1922
|
+
}
|
|
1923
|
+
return false;
|
|
1924
|
+
};
|
|
1925
|
+
// 创建ast树节点
|
|
1926
|
+
const genTreeNode = (node) => {
|
|
1927
|
+
return {
|
|
1928
|
+
nodeType: node ? node.type.replace('_open', '') : 'root',
|
|
1929
|
+
openNode: node,
|
|
1930
|
+
closeNode: null,
|
|
1931
|
+
children: [],
|
|
1932
|
+
vNodeKey: node?.vNodeKey || ''
|
|
1933
|
+
};
|
|
1934
|
+
};
|
|
1935
|
+
// 匹配成对html token
|
|
1936
|
+
const matchHtmlToken = (token, stack) => {
|
|
1937
|
+
// 简单排除单独的闭合标签
|
|
1938
|
+
const isCloseTag = token.content.startsWith('</');
|
|
1939
|
+
if (!stack.length) {
|
|
1940
|
+
token.nesting = isCloseTag ? 0 : 1;
|
|
1941
|
+
stack.push(token);
|
|
1942
|
+
return;
|
|
1943
|
+
}
|
|
1944
|
+
// 判断当前token是否是上一个html token的闭合标签
|
|
1945
|
+
const prevToken = stack[stack.length - 1];
|
|
1946
|
+
const closing = isClosingTag(prevToken, token);
|
|
1947
|
+
if (closing) {
|
|
1948
|
+
token.nesting = -1;
|
|
1949
|
+
stack.pop();
|
|
1950
|
+
}
|
|
1951
|
+
else {
|
|
1952
|
+
if (isCloseTag) {
|
|
1953
|
+
token.nesting = 0;
|
|
1954
|
+
}
|
|
1955
|
+
else {
|
|
1956
|
+
token.nesting = 1;
|
|
1957
|
+
stack.push(token);
|
|
1958
|
+
}
|
|
1959
|
+
}
|
|
1960
|
+
};
|
|
1961
|
+
const isValidTagName = (tagName) => {
|
|
1962
|
+
if (!tagName)
|
|
1963
|
+
return false;
|
|
1964
|
+
try {
|
|
1965
|
+
document.createElement(tagName);
|
|
1966
|
+
return true;
|
|
1967
|
+
}
|
|
1968
|
+
catch (error) {
|
|
1969
|
+
return false;
|
|
1970
|
+
}
|
|
1971
|
+
};
|
|
1972
|
+
const tokensToAst = (tokens) => {
|
|
1973
|
+
// 递归处理 inline 类型的 token
|
|
1974
|
+
const processInlineToken = (token) => {
|
|
1975
|
+
const node = genTreeNode(token);
|
|
1976
|
+
// 如果 token 有 children，递归处理它们
|
|
1977
|
+
if (token.children && token.children.length > 0) {
|
|
1978
|
+
node.children = tokensToAst(token.children);
|
|
1979
|
+
}
|
|
1980
|
+
return node;
|
|
1981
|
+
};
|
|
1982
|
+
// 创建根节点
|
|
1983
|
+
const rootNode = genTreeNode(null);
|
|
1984
|
+
let curr = rootNode;
|
|
1985
|
+
const stack = [];
|
|
1986
|
+
const htmlInlineTokenStack = [];
|
|
1987
|
+
const htmlBlockTokenStack = [];
|
|
1988
|
+
// 处理html token nesting值
|
|
1989
|
+
tokens.forEach((tok, idx) => {
|
|
1990
|
+
tok.vNodeKey = `mc-markdown-content-key-${idx}`;
|
|
1991
|
+
tok.tokenIndex = idx;
|
|
1992
|
+
if (tok.type.includes('html_')) {
|
|
1993
|
+
if (isSelfClosingTag(tok)) {
|
|
1994
|
+
tok.nesting = 0;
|
|
1995
|
+
return;
|
|
1996
|
+
}
|
|
1997
|
+
const stack = tok.type === 'html_block'
|
|
1998
|
+
? htmlBlockTokenStack
|
|
1999
|
+
: htmlInlineTokenStack;
|
|
2000
|
+
matchHtmlToken(tok, stack);
|
|
2001
|
+
}
|
|
2002
|
+
});
|
|
2003
|
+
tokens.forEach((tok, idx) => {
|
|
2004
|
+
let tmp;
|
|
2005
|
+
if (tok.nesting === 1) {
|
|
2006
|
+
// 开始标签
|
|
2007
|
+
tmp = genTreeNode(tok);
|
|
2008
|
+
curr.children.push(tmp);
|
|
2009
|
+
stack.push(curr);
|
|
2010
|
+
curr = tmp;
|
|
2011
|
+
}
|
|
2012
|
+
else if (tok.nesting === -1) {
|
|
2013
|
+
// 结束标签
|
|
2014
|
+
curr.closeNode = tok;
|
|
2015
|
+
if (!stack.length) {
|
|
2016
|
+
throw new Error('AST stack underflow.');
|
|
2017
|
+
}
|
|
2018
|
+
tmp = stack.pop();
|
|
2019
|
+
curr = tmp;
|
|
2020
|
+
}
|
|
2021
|
+
else if (tok.nesting === 0) {
|
|
2022
|
+
// 自闭合标签或 inline 内容
|
|
2023
|
+
if (tok.type === 'inline' && tok.children && tok.children.length > 0) {
|
|
2024
|
+
// 对于 inline 类型，递归处理其 children
|
|
2025
|
+
const inlineNode = processInlineToken(tok);
|
|
2026
|
+
curr.children.push(inlineNode);
|
|
2027
|
+
}
|
|
2028
|
+
else {
|
|
2029
|
+
// 普通 token，直接添加
|
|
2030
|
+
curr.children.push(tok);
|
|
2031
|
+
}
|
|
2032
|
+
}
|
|
2033
|
+
else {
|
|
2034
|
+
throw new Error(`Invalid nesting level found in token index ${idx}.`);
|
|
2035
|
+
}
|
|
2036
|
+
});
|
|
2037
|
+
if (stack.length !== 0) {
|
|
2038
|
+
// throw new Error('Unbalanced block open/close tokens.');
|
|
2039
|
+
}
|
|
2040
|
+
return rootNode.children;
|
|
2041
|
+
};
|
|
2042
|
+
// 声明一个utils静态默认导出
|
|
2043
|
+
var MdParserUtils = {
|
|
2044
|
+
isSelfClosingTag,
|
|
2045
|
+
isClosingTag,
|
|
2046
|
+
tokensToAst,
|
|
2047
|
+
genTreeNode,
|
|
2048
|
+
matchHtmlToken,
|
|
2049
|
+
isValidTagName
|
|
2050
|
+
};
|
|
2051
|
+
|
|
2052
|
+
class MarkdownCardComponent extends BaseComponent {
|
|
2053
|
+
constructor(renderer, cdr) {
|
|
2054
|
+
super();
|
|
2055
|
+
this.renderer = renderer;
|
|
2056
|
+
this.cdr = cdr;
|
|
2057
|
+
this.content = '';
|
|
2058
|
+
this.typing = false;
|
|
2059
|
+
this.enableThink = false;
|
|
2060
|
+
this.typingOptions = {};
|
|
2061
|
+
this.thinkOptions = {};
|
|
2062
|
+
this.mdOptions = {};
|
|
2063
|
+
this.mdPlugins = [];
|
|
2064
|
+
this.customXssRules = [];
|
|
2065
|
+
this.theme = 'light';
|
|
2066
|
+
this.enableMermaid = false;
|
|
2067
|
+
this.mermaidConfig = {};
|
|
2068
|
+
this.actionsTemplate = null;
|
|
2069
|
+
this.headerTemplate = null;
|
|
2070
|
+
this.contentTemplate = null;
|
|
2071
|
+
// 组件缓存映射表，用于存储已创建的CodeBlockComponent实例
|
|
2072
|
+
this.codeBlockComponentsCache = new Map();
|
|
2073
|
+
this.afterMdtInit = new EventEmitter();
|
|
2074
|
+
this.typingStart = new EventEmitter();
|
|
2075
|
+
this.typingEvent = new EventEmitter();
|
|
2076
|
+
this.typingEnd = new EventEmitter();
|
|
2077
|
+
this.typingIndex = 0;
|
|
2078
|
+
this.isTyping = false;
|
|
2079
|
+
this.timer = null;
|
|
2080
|
+
this.parser = MdParserUtils;
|
|
2081
|
+
this.noDiff = false;
|
|
2082
|
+
this.mdt = markdownit({
|
|
2083
|
+
breaks: true,
|
|
2084
|
+
linkify: true,
|
|
2085
|
+
html: true,
|
|
2086
|
+
highlight: (str, lang) => {
|
|
2087
|
+
// 与Vue组件保持一致的高亮处理
|
|
2088
|
+
return '';
|
|
2089
|
+
},
|
|
2090
|
+
...this.mdOptions,
|
|
2091
|
+
});
|
|
2092
|
+
this.mdCardService = new MDCardService();
|
|
2093
|
+
this.foundation = new MarkdownCardFoundation(this.adapter);
|
|
2094
|
+
// 初始化 diffDom 实例
|
|
2095
|
+
this.diffDom = new DiffDOM({
|
|
2096
|
+
// 配置filterOuterDiff钩子，识别code-block-wrapper元素并直接替换
|
|
2097
|
+
filterOuterDiff: (t1, t2, diffs) => {
|
|
2098
|
+
// 检查是否是class为code-block-wrapper的div元素
|
|
2099
|
+
const isTargetElement = t2.nodeName === 'DIV' &&
|
|
2100
|
+
t2.attributes &&
|
|
2101
|
+
t2.attributes.class &&
|
|
2102
|
+
t2.attributes.class.includes('code-block-wrapper');
|
|
2103
|
+
if (isTargetElement) {
|
|
2104
|
+
t1.innerDone = true;
|
|
2105
|
+
t2.innerDone = true;
|
|
2106
|
+
}
|
|
2107
|
+
},
|
|
2108
|
+
});
|
|
2109
|
+
}
|
|
2110
|
+
ngOnInit() {
|
|
2111
|
+
this.mdCardService.setMdPlugins(this.mdPlugins || [], this.mdt);
|
|
2112
|
+
this.parseContent();
|
|
2113
|
+
this.afterMdtInit.emit(this.mdt);
|
|
2114
|
+
}
|
|
2115
|
+
get adapter() {
|
|
2116
|
+
return {
|
|
2117
|
+
...super.adapter,
|
|
2118
|
+
locale: (key, params) => this.adapter.locale(key, params),
|
|
2119
|
+
typingStart: () => this.typingStart.emit(),
|
|
2120
|
+
typingEnd: () => this.typingEnd.emit(),
|
|
2121
|
+
typingEvent: () => this.typingEvent.emit(),
|
|
2122
|
+
parseContent: (content) => {
|
|
2123
|
+
// 解析 Markdown 内容
|
|
2124
|
+
const tokens = this.mdt.parse(content, {});
|
|
2125
|
+
const ast = this.parser.tokensToAst(tokens);
|
|
2126
|
+
const vnodes = this.astToVnodes(ast);
|
|
2127
|
+
this.renderContent(vnodes);
|
|
2128
|
+
},
|
|
2129
|
+
};
|
|
2130
|
+
}
|
|
2131
|
+
ngOnChanges(changes) {
|
|
2132
|
+
if (changes['content']) {
|
|
2133
|
+
if (!this.typing) {
|
|
2134
|
+
this.typingIndex = this.content?.length || 0;
|
|
2135
|
+
this.parseContent();
|
|
2136
|
+
return;
|
|
2137
|
+
}
|
|
2138
|
+
if (this.content.indexOf(changes['content']?.previousValue) === -1) {
|
|
2139
|
+
this.typingIndex = 0;
|
|
2140
|
+
}
|
|
2141
|
+
// 使用setTimeout模拟Vue的nextTick行为
|
|
2142
|
+
setTimeout(() => this.typewriterStart());
|
|
2143
|
+
}
|
|
2144
|
+
if (changes['enableThink'] || changes['thinkOptions'] || changes['theme']) {
|
|
2145
|
+
this.parseContent();
|
|
2146
|
+
}
|
|
2147
|
+
if (changes['customXssRules']) {
|
|
2148
|
+
this.mdCardService.setCustomXssRules(this.customXssRules || []);
|
|
2149
|
+
this.parseContent();
|
|
2150
|
+
}
|
|
2151
|
+
if (changes['mdPlugins']) {
|
|
2152
|
+
this.mdCardService.setMdPlugins(this.mdPlugins || [], this.mdt);
|
|
2153
|
+
this.parseContent();
|
|
2154
|
+
}
|
|
2155
|
+
}
|
|
2156
|
+
parseContent() {
|
|
2157
|
+
this.foundation.parseContent();
|
|
2158
|
+
}
|
|
2159
|
+
renderContent(vnodes) {
|
|
2160
|
+
if (!this.markdownContainer || !this.markdownContainer.element) {
|
|
2161
|
+
return;
|
|
2162
|
+
}
|
|
2163
|
+
if (this.noDiff) {
|
|
2164
|
+
this.renderContentNoDiff(vnodes);
|
|
2165
|
+
return;
|
|
2166
|
+
}
|
|
2167
|
+
const container = this.markdownContainer.element.nativeElement;
|
|
2168
|
+
const parser = new DOMParser();
|
|
2169
|
+
const newContainerDiv = parser.parseFromString(`<div></div>`, 'text/html');
|
|
2170
|
+
const codeBlockWrappers = vnodes.filter((node) => {
|
|
2171
|
+
return (node.nodeName === 'DIV' &&
|
|
2172
|
+
node.className?.includes('code-block-wrapper'));
|
|
2173
|
+
});
|
|
2174
|
+
vnodes.forEach((node) => {
|
|
2175
|
+
if (node &&
|
|
2176
|
+
(node.nodeType ||
|
|
2177
|
+
typeof node === 'string' ||
|
|
2178
|
+
node instanceof HTMLElement)) {
|
|
2179
|
+
if (codeBlockWrappers.includes(node)) {
|
|
2180
|
+
newContainerDiv.body.firstChild?.appendChild(this.getEmptyCodeBlock(node));
|
|
2181
|
+
}
|
|
2182
|
+
else {
|
|
2183
|
+
newContainerDiv.body.firstChild?.appendChild(node);
|
|
2184
|
+
}
|
|
2185
|
+
}
|
|
2186
|
+
});
|
|
2187
|
+
let newContainerDivHTML = newContainerDiv.body?.firstChild?.outerHTML || '';
|
|
2188
|
+
const patches = this.diffDom.diff(container, this.mdCardService.filterHtml(newContainerDivHTML));
|
|
2189
|
+
this.diffDom.apply(container, patches);
|
|
2190
|
+
// 将codeBlockWrappers中的每个div元素替换container中的对应key属性的元素
|
|
2191
|
+
codeBlockWrappers.forEach((newCodeBlock) => {
|
|
2192
|
+
if (newCodeBlock &&
|
|
2193
|
+
newCodeBlock.attributes &&
|
|
2194
|
+
newCodeBlock.attributes.key) {
|
|
2195
|
+
const key = newCodeBlock?.attributes?.key?.value;
|
|
2196
|
+
const existingElement = container.querySelector(`[key="${key}"]`);
|
|
2197
|
+
if (existingElement &&
|
|
2198
|
+
newCodeBlock instanceof HTMLElement &&
|
|
2199
|
+
existingElement !== newCodeBlock) {
|
|
2200
|
+
existingElement.replaceWith(newCodeBlock);
|
|
2201
|
+
}
|
|
2202
|
+
}
|
|
2203
|
+
});
|
|
2204
|
+
}
|
|
2205
|
+
getEmptyCodeBlock(node) {
|
|
2206
|
+
const codeNode = document.createElement('div');
|
|
2207
|
+
codeNode.className = 'code-block-wrapper';
|
|
2208
|
+
codeNode.setAttribute('key', node?.attributes?.key?.value);
|
|
2209
|
+
return codeNode;
|
|
2210
|
+
}
|
|
2211
|
+
astToVnodes(nodes) {
|
|
2212
|
+
return nodes.map((node) => this.processASTNode(node));
|
|
2213
|
+
}
|
|
2214
|
+
processASTNode(node) {
|
|
2215
|
+
if (node.nodeType === 'html_inline' || node.nodeType === 'html_block') {
|
|
2216
|
+
return this.processHTMLNode(node);
|
|
2217
|
+
}
|
|
2218
|
+
if (node.nodeType === 'inline') {
|
|
2219
|
+
return this.processInlineToken(node);
|
|
2220
|
+
}
|
|
2221
|
+
if (this.foundation.isToken(node)) {
|
|
2222
|
+
return this.processToken(node);
|
|
2223
|
+
}
|
|
2224
|
+
return this.processASTNodeInternal(node);
|
|
2225
|
+
}
|
|
2226
|
+
processHTMLNode(node) {
|
|
2227
|
+
if (!node.openNode?.content)
|
|
2228
|
+
return;
|
|
2229
|
+
const parser = new DOMParser();
|
|
2230
|
+
const tagName = node.nodeType === 'html_block' ? 'div' : 'span';
|
|
2231
|
+
const containerDocument = parser.parseFromString(`<${tagName}>${node.openNode.content}</${tagName}>`, 'text/html');
|
|
2232
|
+
const containerBody = containerDocument.body.firstChild;
|
|
2233
|
+
// 处理子节点
|
|
2234
|
+
if (node.children && node.children.length > 0) {
|
|
2235
|
+
node.children.forEach((child) => {
|
|
2236
|
+
const childVnode = this.processASTNode(child);
|
|
2237
|
+
if (childVnode && containerBody) {
|
|
2238
|
+
(containerBody?.firstChild || containerBody).appendChild(childVnode);
|
|
2239
|
+
}
|
|
2240
|
+
});
|
|
2241
|
+
}
|
|
2242
|
+
return containerBody;
|
|
2243
|
+
}
|
|
2244
|
+
renderContentNoDiff(vnodes) {
|
|
2245
|
+
const container = this.markdownContainer.element.nativeElement;
|
|
2246
|
+
const newContentFragement = this.renderer.createElement('div');
|
|
2247
|
+
vnodes.forEach((node) => {
|
|
2248
|
+
if (node &&
|
|
2249
|
+
(node.nodeType ||
|
|
2250
|
+
typeof node === 'string' ||
|
|
2251
|
+
node instanceof HTMLElement)) {
|
|
2252
|
+
newContentFragement.appendChild(node);
|
|
2253
|
+
}
|
|
2254
|
+
});
|
|
2255
|
+
while (container.firstChild) {
|
|
2256
|
+
container.removeChild(container.firstChild);
|
|
2257
|
+
}
|
|
2258
|
+
container.appendChild(newContentFragement);
|
|
2259
|
+
}
|
|
2260
|
+
processInlineToken(node) {
|
|
2261
|
+
let html = '';
|
|
2262
|
+
try {
|
|
2263
|
+
if (!node.openNode) {
|
|
2264
|
+
return null;
|
|
2265
|
+
}
|
|
2266
|
+
html = this.mdt.renderer.render([node.openNode], this.mdt.options, {});
|
|
2267
|
+
}
|
|
2268
|
+
catch (error) {
|
|
2269
|
+
console.error('Error rendering inline token:', node);
|
|
2270
|
+
return null;
|
|
2271
|
+
}
|
|
2272
|
+
// 将HTML字符串转换为DOM节点
|
|
2273
|
+
const parser = new DOMParser();
|
|
2274
|
+
const doc = parser.parseFromString(`<div>${html}</div>`, 'text/html');
|
|
2275
|
+
const token = doc.body.firstChild;
|
|
2276
|
+
// 如果只有一个子节点，直接返回子节点而不是包含div
|
|
2277
|
+
if (token && token.childNodes.length === 1) {
|
|
2278
|
+
return token.firstChild;
|
|
2279
|
+
}
|
|
2280
|
+
return token;
|
|
2281
|
+
}
|
|
2282
|
+
processFenceNode(token) {
|
|
2283
|
+
const language = token.info?.replace(/<span\b[^>]*>/i, '').replace('</span>', '') || '';
|
|
2284
|
+
const code = token.content || '';
|
|
2285
|
+
return this.createCodeBlock(language, code, token.tokenIndex || 0);
|
|
2286
|
+
}
|
|
2287
|
+
processASTNodeInternal(node) {
|
|
2288
|
+
let tagName = 'div';
|
|
2289
|
+
if (node.openNode?.tag && this.parser.isValidTagName(node.openNode?.tag)) {
|
|
2290
|
+
tagName = node.openNode?.tag;
|
|
2291
|
+
}
|
|
2292
|
+
const element = this.renderer.createElement(tagName);
|
|
2293
|
+
// 设置属性
|
|
2294
|
+
if (node.openNode.attrs) {
|
|
2295
|
+
node.openNode.attrs.forEach(([key, value]) => {
|
|
2296
|
+
this.renderer.setAttribute(element, key, value);
|
|
2297
|
+
});
|
|
2298
|
+
}
|
|
2299
|
+
// 特殊处理fence类型的token
|
|
2300
|
+
if (node.openNode.type === 'fence') {
|
|
2301
|
+
return this.processFenceNode(node.openNode);
|
|
2302
|
+
}
|
|
2303
|
+
// 处理所有带tag的AST节点
|
|
2304
|
+
if (node.openNode?.tag) {
|
|
2305
|
+
let tagName = this.parser.isValidTagName(node.openNode?.tag)
|
|
2306
|
+
? node.openNode?.tag
|
|
2307
|
+
: 'div';
|
|
2308
|
+
const element = this.renderer.createElement(tagName);
|
|
2309
|
+
// 递归处理所有子节点并添加到当前元素
|
|
2310
|
+
node.children.forEach((child) => {
|
|
2311
|
+
const childNode = this.processASTNode(child);
|
|
2312
|
+
if (childNode) {
|
|
2313
|
+
element.appendChild(childNode);
|
|
2314
|
+
}
|
|
2315
|
+
});
|
|
2316
|
+
return element;
|
|
2317
|
+
}
|
|
2318
|
+
node.children.forEach((child) => {
|
|
2319
|
+
const childNode = this.processASTNode(child);
|
|
2320
|
+
if (childNode) {
|
|
2321
|
+
element.appendChild(childNode);
|
|
2322
|
+
}
|
|
2323
|
+
});
|
|
2324
|
+
return element;
|
|
2325
|
+
}
|
|
2326
|
+
processToken(token) {
|
|
2327
|
+
if (token.type === 'text') {
|
|
2328
|
+
return this.renderer.createText(token.content || '');
|
|
2329
|
+
}
|
|
2330
|
+
if (token.type === 'inline') {
|
|
2331
|
+
return this.processInlineToken(token);
|
|
2332
|
+
}
|
|
2333
|
+
if (token.type === 'fence') {
|
|
2334
|
+
return this.processFenceNode(token);
|
|
2335
|
+
}
|
|
2336
|
+
if (token.type === 'softbreak') {
|
|
2337
|
+
if (this.mdt.options.breaks) {
|
|
2338
|
+
return this.renderer.createElement('br');
|
|
2339
|
+
}
|
|
2340
|
+
else {
|
|
2341
|
+
return this.renderer.createText('\n');
|
|
2342
|
+
}
|
|
2343
|
+
}
|
|
2344
|
+
if (token.type === 'html_block' || token.type === 'html_inline') {
|
|
2345
|
+
const parser = new DOMParser();
|
|
2346
|
+
const tagName = token.type === 'html_block' ? 'div' : 'span';
|
|
2347
|
+
const doc = parser.parseFromString(`<${tagName}>${token.content}</${tagName}>`, 'text/html');
|
|
2348
|
+
const tokenDom = doc.body;
|
|
2349
|
+
// 如果只有一个子节点，直接返回子节点而不是包含div
|
|
2350
|
+
if (tokenDom.firstChild && tokenDom.childNodes.length === 1) {
|
|
2351
|
+
return tokenDom.firstChild;
|
|
2352
|
+
}
|
|
2353
|
+
return tokenDom;
|
|
2354
|
+
}
|
|
2355
|
+
if (token.tag) {
|
|
2356
|
+
const tagName = this.parser.isValidTagName(token.tag) ? token.tag : 'div';
|
|
2357
|
+
const element = this.renderer.createElement(tagName);
|
|
2358
|
+
if (token.attrs) {
|
|
2359
|
+
token.attrs.forEach(([key, value]) => {
|
|
2360
|
+
this.renderer.setAttribute(element, key, value);
|
|
2361
|
+
});
|
|
2362
|
+
}
|
|
2363
|
+
// 设置内容
|
|
2364
|
+
if (token.content) {
|
|
2365
|
+
const textNode = this.renderer.createText(token.content);
|
|
2366
|
+
element.appendChild(textNode);
|
|
2367
|
+
}
|
|
2368
|
+
return element;
|
|
2369
|
+
}
|
|
2370
|
+
return this.renderer.createText(token.content || '');
|
|
2371
|
+
}
|
|
2372
|
+
createCodeBlock(language, code, blockIndex) {
|
|
2373
|
+
const key = `code-block-${blockIndex}`;
|
|
2374
|
+
// 检查缓存中是否已存在相同blockIndex的组件
|
|
2375
|
+
if (this.codeBlockComponentsCache.has(key)) {
|
|
2376
|
+
const cachedItem = this.codeBlockComponentsCache.get(key);
|
|
2377
|
+
if (cachedItem) {
|
|
2378
|
+
// 更新现有组件的属性
|
|
2379
|
+
const componentRef = cachedItem.componentRef;
|
|
2380
|
+
componentRef.setInput('language', language);
|
|
2381
|
+
componentRef.setInput('code', code);
|
|
2382
|
+
componentRef.setInput('theme', this.theme);
|
|
2383
|
+
// 触发变更检测
|
|
2384
|
+
componentRef.changeDetectorRef.detectChanges();
|
|
2385
|
+
// 返回缓存的容器，无需重新创建
|
|
2386
|
+
return cachedItem.container;
|
|
2387
|
+
}
|
|
2388
|
+
}
|
|
2389
|
+
// 缓存中不存在，创建新组件
|
|
2390
|
+
const codeBlockContainer = this.renderer.createElement('div');
|
|
2391
|
+
this.renderer.setAttribute(codeBlockContainer, 'key', key);
|
|
2392
|
+
const componentRef = this.markdownContainer.createComponent(CodeBlockComponent, {
|
|
2393
|
+
projectableNodes: [],
|
|
2394
|
+
injector: this.markdownContainer.injector,
|
|
2395
|
+
});
|
|
2396
|
+
// 设置组件属性
|
|
2397
|
+
componentRef.instance.language = language;
|
|
2398
|
+
componentRef.instance.code = code;
|
|
2399
|
+
componentRef.instance.blockIndex = blockIndex;
|
|
2400
|
+
componentRef.instance.theme = this.theme;
|
|
2401
|
+
componentRef.instance.enableMermaid = this.enableMermaid;
|
|
2402
|
+
componentRef.instance.mermaidConfig = this.mermaidConfig || {};
|
|
2403
|
+
componentRef.instance.actionsTemplate = this.actionsTemplate;
|
|
2404
|
+
componentRef.instance.headerTemplate = this.headerTemplate;
|
|
2405
|
+
componentRef.instance.contentTemplate = this.contentTemplate;
|
|
2406
|
+
// 触发变更检测
|
|
2407
|
+
componentRef.changeDetectorRef.detectChanges();
|
|
2408
|
+
// 将组件的DOM元素附加到容器中
|
|
2409
|
+
this.renderer.appendChild(codeBlockContainer, componentRef.location.nativeElement);
|
|
2410
|
+
// 添加样式类
|
|
2411
|
+
this.renderer.addClass(codeBlockContainer, 'code-block-wrapper');
|
|
2412
|
+
// 缓存组件实例和容器
|
|
2413
|
+
this.codeBlockComponentsCache.set(key, {
|
|
2414
|
+
componentRef: componentRef,
|
|
2415
|
+
container: codeBlockContainer,
|
|
2416
|
+
});
|
|
2417
|
+
// 返回创建的DOM容器
|
|
2418
|
+
return codeBlockContainer;
|
|
2419
|
+
}
|
|
2420
|
+
typewriterStart() {
|
|
2421
|
+
this.foundation.typewriterStart();
|
|
2422
|
+
}
|
|
2423
|
+
// 在组件销毁时清理缓存，避免内存泄漏
|
|
2424
|
+
ngOnDestroy() {
|
|
2425
|
+
// 销毁所有缓存的组件实例
|
|
2426
|
+
this.codeBlockComponentsCache.forEach((cachedItem) => {
|
|
2427
|
+
cachedItem.componentRef.destroy();
|
|
2428
|
+
});
|
|
2429
|
+
this.codeBlockComponentsCache.clear();
|
|
2430
|
+
}
|
|
2431
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MarkdownCardComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2432
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: MarkdownCardComponent, isStandalone: false, selector: "mc-markdown-card", inputs: { content: "content", typing: "typing", enableThink: "enableThink", typingOptions: "typingOptions", thinkOptions: "thinkOptions", mdOptions: "mdOptions", mdPlugins: "mdPlugins", customXssRules: "customXssRules", theme: "theme", enableMermaid: "enableMermaid", mermaidConfig: "mermaidConfig", actionsTemplate: "actionsTemplate", headerTemplate: "headerTemplate", contentTemplate: "contentTemplate" }, outputs: { afterMdtInit: "afterMdtInit", typingStart: "typingStart", typingEvent: "typingEvent", typingEnd: "typingEnd" }, viewQueries: [{ propertyName: "markdownContainer", first: true, predicate: ["markdownContainer"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"mc-markdown-render\" [ngClass]=\"theme === 'dark' ? 'mc-markdown-render-dark' : 'mc-markdown-render-light'\">\n <div #markdownContainer></div>\n</div>\n<ng-content></ng-content>", styles: [".mc-markdown-render ::ng-deep .h1,.mc-markdown-render ::ng-deep .h2,.mc-markdown-render ::ng-deep .h3,.mc-markdown-render ::ng-deep .h4,.mc-markdown-render ::ng-deep .h5,.mc-markdown-render ::ng-deep .h6,.mc-markdown-render ::ng-deep h1,.mc-markdown-render ::ng-deep h2,.mc-markdown-render ::ng-deep h3,.mc-markdown-render ::ng-deep h4,.mc-markdown-render ::ng-deep h5,.mc-markdown-render ::ng-deep h6{line-height:1.1;margin:16px 0 12px}.mc-markdown-render ::ng-deep .h1:first-child,.mc-markdown-render ::ng-deep .h2:first-child,.mc-markdown-render ::ng-deep .h3:first-child,.mc-markdown-render ::ng-deep .h4:first-child,.mc-markdown-render ::ng-deep .h5:first-child,.mc-markdown-render ::ng-deep .h6:first-child,.mc-markdown-render ::ng-deep h1:first-child,.mc-markdown-render ::ng-deep h2:first-child,.mc-markdown-render ::ng-deep h3:first-child,.mc-markdown-render ::ng-deep h4:first-child,.mc-markdown-render ::ng-deep h5:first-child,.mc-markdown-render ::ng-deep h6:first-child{margin-top:0}.mc-markdown-render ::ng-deep h1{font-size:32px;line-height:40px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep h3{line-height:28px;font-size:20px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep caption{border:1px dashed var(--devui-line, #d7d8da);border-bottom:0;padding:3px;text-align:center}.mc-markdown-render ::ng-deep p{overflow-wrap:break-word;margin:0;padding:0;line-height:24px}.mc-markdown-render ::ng-deep p:last-child{margin:0}.mc-markdown-render ::ng-deep ul,.mc-markdown-render ::ng-deep ol{margin:0;padding:0;padding-inline-start:1.75em}.mc-markdown-render ::ng-deep ul>li,.mc-markdown-render ::ng-deep ol>li{line-height:21px}.mc-markdown-render ::ng-deep ul{list-style-type:disc}.mc-markdown-render ::ng-deep ul li::marker{font-size:20px}.mc-markdown-render ::ng-deep ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin-bottom:10px;border-collapse:collapse;display:table}.mc-markdown-render ::ng-deep td,.mc-markdown-render ::ng-deep th{padding:5px 10px;border:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-base-bg, #ffffff)}.mc-markdown-render ::ng-deep th{border-top:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-global-bg, #f6f6f8)}.mc-markdown-render ::ng-deep td p{margin:0;padding:0}.mc-markdown-render ::ng-deep blockquote{padding:0 8px;margin:0;color:var(--devui-text-weak, #575d6c);border-left:5px solid var(--devui-dividing-line, #f2f2f3)}.mc-markdown-render ::ng-deep a{color:var(--devui-link, #526ecc);text-decoration:none;cursor:pointer}.mc-markdown-render ::ng-deep a:hover{color:var(--devui-link-active, #526ecc)}.mc-markdown-render ::ng-deep img{max-width:100%}.mc-markdown-render{font-size:var(--devui-font-size, 14px);overflow-x:auto}.mc-markdown-render.mc-markdown-render-dark{color:#ced1db}.mc-markdown-render.mc-markdown-render-light{color:#252b3a}::ng-deep .mc-think-block{color:var(--devui-aide-text, #71757f);border-left:1px solid var(--devui-line, #d7d8da);padding-left:8px;margin-bottom:1rem}::ng-deep .mc-typewriter-color{background-image:-webkit-linear-gradient(left,#191919,#5588f0,#e171ee,#f2c55c);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-gradient{background:linear-gradient(to right,var(--devui-text, #252b3a),var(--devui-base-bg, #ffffff));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-cursor{font-weight:900;animation:typewriter .8s linear 0s infinite}@keyframes typewriter{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2433
|
+
}
|
|
2434
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MarkdownCardComponent, decorators: [{
|
|
2435
|
+
type: Component,
|
|
2436
|
+
args: [{ selector: 'mc-markdown-card', standalone: false, template: "<div class=\"mc-markdown-render\" [ngClass]=\"theme === 'dark' ? 'mc-markdown-render-dark' : 'mc-markdown-render-light'\">\n <div #markdownContainer></div>\n</div>\n<ng-content></ng-content>", styles: [".mc-markdown-render ::ng-deep .h1,.mc-markdown-render ::ng-deep .h2,.mc-markdown-render ::ng-deep .h3,.mc-markdown-render ::ng-deep .h4,.mc-markdown-render ::ng-deep .h5,.mc-markdown-render ::ng-deep .h6,.mc-markdown-render ::ng-deep h1,.mc-markdown-render ::ng-deep h2,.mc-markdown-render ::ng-deep h3,.mc-markdown-render ::ng-deep h4,.mc-markdown-render ::ng-deep h5,.mc-markdown-render ::ng-deep h6{line-height:1.1;margin:16px 0 12px}.mc-markdown-render ::ng-deep .h1:first-child,.mc-markdown-render ::ng-deep .h2:first-child,.mc-markdown-render ::ng-deep .h3:first-child,.mc-markdown-render ::ng-deep .h4:first-child,.mc-markdown-render ::ng-deep .h5:first-child,.mc-markdown-render ::ng-deep .h6:first-child,.mc-markdown-render ::ng-deep h1:first-child,.mc-markdown-render ::ng-deep h2:first-child,.mc-markdown-render ::ng-deep h3:first-child,.mc-markdown-render ::ng-deep h4:first-child,.mc-markdown-render ::ng-deep h5:first-child,.mc-markdown-render ::ng-deep h6:first-child{margin-top:0}.mc-markdown-render ::ng-deep h1{font-size:32px;line-height:40px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep h3{line-height:28px;font-size:20px;overflow-wrap:break-word}.mc-markdown-render ::ng-deep caption{border:1px dashed var(--devui-line, #d7d8da);border-bottom:0;padding:3px;text-align:center}.mc-markdown-render ::ng-deep p{overflow-wrap:break-word;margin:0;padding:0;line-height:24px}.mc-markdown-render ::ng-deep p:last-child{margin:0}.mc-markdown-render ::ng-deep ul,.mc-markdown-render ::ng-deep ol{margin:0;padding:0;padding-inline-start:1.75em}.mc-markdown-render ::ng-deep ul>li,.mc-markdown-render ::ng-deep ol>li{line-height:21px}.mc-markdown-render ::ng-deep ul{list-style-type:disc}.mc-markdown-render ::ng-deep ul li::marker{font-size:20px}.mc-markdown-render ::ng-deep ol{list-style-type:decimal}.mc-markdown-render ::ng-deep table{margin-bottom:10px;border-collapse:collapse;display:table}.mc-markdown-render ::ng-deep td,.mc-markdown-render ::ng-deep th{padding:5px 10px;border:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-base-bg, #ffffff)}.mc-markdown-render ::ng-deep th{border-top:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-global-bg, #f6f6f8)}.mc-markdown-render ::ng-deep td p{margin:0;padding:0}.mc-markdown-render ::ng-deep blockquote{padding:0 8px;margin:0;color:var(--devui-text-weak, #575d6c);border-left:5px solid var(--devui-dividing-line, #f2f2f3)}.mc-markdown-render ::ng-deep a{color:var(--devui-link, #526ecc);text-decoration:none;cursor:pointer}.mc-markdown-render ::ng-deep a:hover{color:var(--devui-link-active, #526ecc)}.mc-markdown-render ::ng-deep img{max-width:100%}.mc-markdown-render{font-size:var(--devui-font-size, 14px);overflow-x:auto}.mc-markdown-render.mc-markdown-render-dark{color:#ced1db}.mc-markdown-render.mc-markdown-render-light{color:#252b3a}::ng-deep .mc-think-block{color:var(--devui-aide-text, #71757f);border-left:1px solid var(--devui-line, #d7d8da);padding-left:8px;margin-bottom:1rem}::ng-deep .mc-typewriter-color{background-image:-webkit-linear-gradient(left,#191919,#5588f0,#e171ee,#f2c55c);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-gradient{background:linear-gradient(to right,var(--devui-text, #252b3a),var(--devui-base-bg, #ffffff));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}::ng-deep .mc-typewriter-cursor{font-weight:900;animation:typewriter .8s linear 0s infinite}@keyframes typewriter{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"] }]
|
|
2437
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { content: [{
|
|
2438
|
+
type: Input
|
|
2439
|
+
}], typing: [{
|
|
2440
|
+
type: Input
|
|
2441
|
+
}], enableThink: [{
|
|
2442
|
+
type: Input
|
|
2443
|
+
}], typingOptions: [{
|
|
2444
|
+
type: Input
|
|
2445
|
+
}], thinkOptions: [{
|
|
2446
|
+
type: Input
|
|
2447
|
+
}], mdOptions: [{
|
|
2448
|
+
type: Input
|
|
2449
|
+
}], mdPlugins: [{
|
|
2450
|
+
type: Input
|
|
2451
|
+
}], customXssRules: [{
|
|
2452
|
+
type: Input
|
|
2453
|
+
}], theme: [{
|
|
2454
|
+
type: Input
|
|
2455
|
+
}], enableMermaid: [{
|
|
2456
|
+
type: Input
|
|
2457
|
+
}], mermaidConfig: [{
|
|
2458
|
+
type: Input
|
|
2459
|
+
}], actionsTemplate: [{
|
|
2460
|
+
type: Input
|
|
2461
|
+
}], headerTemplate: [{
|
|
2462
|
+
type: Input
|
|
2463
|
+
}], contentTemplate: [{
|
|
2464
|
+
type: Input
|
|
2465
|
+
}], afterMdtInit: [{
|
|
2466
|
+
type: Output
|
|
2467
|
+
}], typingStart: [{
|
|
2468
|
+
type: Output
|
|
2469
|
+
}], typingEvent: [{
|
|
2470
|
+
type: Output
|
|
2471
|
+
}], typingEnd: [{
|
|
2472
|
+
type: Output
|
|
2473
|
+
}], markdownContainer: [{
|
|
2474
|
+
type: ViewChild,
|
|
2475
|
+
args: ['markdownContainer', { read: ViewContainerRef, static: true }]
|
|
2476
|
+
}] } });
|
|
2477
|
+
|
|
2478
|
+
class MarkdownCardModule {
|
|
2479
|
+
static forRoot() {
|
|
2480
|
+
return {
|
|
2481
|
+
ngModule: MarkdownCardModule,
|
|
2482
|
+
providers: []
|
|
2483
|
+
};
|
|
2484
|
+
}
|
|
2485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MarkdownCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2486
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: MarkdownCardModule, declarations: [CodeBlockComponent,
|
|
2487
|
+
MarkdownCardComponent], imports: [CommonModule,
|
|
2488
|
+
TranslatePipe,
|
|
2489
|
+
LocaleModule], exports: [CodeBlockComponent,
|
|
2490
|
+
MarkdownCardComponent] }); }
|
|
2491
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MarkdownCardModule, imports: [CommonModule,
|
|
2492
|
+
LocaleModule] }); }
|
|
2493
|
+
}
|
|
2494
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MarkdownCardModule, decorators: [{
|
|
2495
|
+
type: NgModule,
|
|
2496
|
+
args: [{
|
|
2497
|
+
declarations: [
|
|
2498
|
+
CodeBlockComponent,
|
|
2499
|
+
MarkdownCardComponent,
|
|
2500
|
+
],
|
|
2501
|
+
imports: [
|
|
2502
|
+
CommonModule,
|
|
2503
|
+
TranslatePipe,
|
|
2504
|
+
LocaleModule,
|
|
2505
|
+
],
|
|
2506
|
+
exports: [
|
|
2507
|
+
CodeBlockComponent,
|
|
2508
|
+
MarkdownCardComponent
|
|
2509
|
+
],
|
|
2510
|
+
providers: [],
|
|
2511
|
+
bootstrap: []
|
|
2512
|
+
}]
|
|
2513
|
+
}] });
|
|
2514
|
+
|
|
1018
2515
|
/*
|
|
1019
2516
|
* Public API Surface of components-ng
|
|
1020
2517
|
*/
|
|
@@ -1023,5 +2520,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
1023
2520
|
* Generated bundle index. Do not edit.
|
|
1024
2521
|
*/
|
|
1025
2522
|
|
|
1026
|
-
export { AvatarBodyIconComponent, AvatarComponent, AvatarNoBodyIconComponent, BubbleComponent, BubbleLoadingComponent, BubbleModule, InputComponent, InputModule, LocaleModule, LocaleService, TranslatePipe, inputContextToken };
|
|
2523
|
+
export { AvatarBodyIconComponent, AvatarComponent, AvatarNoBodyIconComponent, BubbleComponent, BubbleLoadingComponent, BubbleModule, CodeBlockComponent, InputComponent, InputModule, LocaleModule, LocaleService, MarkdownCardComponent, MarkdownCardModule, TranslatePipe, inputContextToken };
|
|
1027
2524
|
//# sourceMappingURL=matechat-ng.mjs.map
|